fix(web): unauthorized errors (#320)

- fix(ErrorPage): add padding to the page for mobile devices

- chore(react-query): wrap APIClient calls in anonymous functions to avoid passing react-query context variables by accident

- fix incorrect ordering of ErrorBoundary and QueryClientProvider (ErrorBoundary is now the parent)

web/src/screens/settings/DownloadClient.tsx

@@ -78,7 +78,7 @@ function DownloadClientSettings() {
 
   const { error, data } = useQuery(
     "downloadClients",
-    APIClient.download_clients.getAll,
+    () => APIClient.download_clients.getAll(),
     { refetchOnWindowFocus: false }
   );
 

web/src/screens/settings/Feed.tsx

@@ -20,10 +20,10 @@ import { EmptySimple } from "../../components/emptystates";
 import { componentMapType } from "../../forms/settings/DownloadClientForms";
 
 function FeedSettings() {
-  const { data } = useQuery<Feed[], Error>("feeds", APIClient.feeds.find,
-    {
-      refetchOnWindowFocus: false
-    }
+  const { data } = useQuery(
+    "feeds",
+    () => APIClient.feeds.find(),
+    { refetchOnWindowFocus: false }
   );
 
   return (

web/src/screens/settings/Indexer.tsx

@@ -74,7 +74,7 @@ function IndexerSettings() {
 
   const { error, data } = useQuery(
     "indexer",
-    APIClient.indexers.getAll,
+    () => APIClient.indexers.getAll(),
     { refetchOnWindowFocus: false }
   );
 
@@ -137,7 +137,7 @@ function IndexerSettings() {
                       </tr>
                     </thead>
                     <tbody className="light:bg-white divide-y divide-gray-200 dark:divide-gray-700">
-                      {data && data.map((indexer: IndexerDefinition, idx: number) => (
+                      {data.map((indexer, idx) => (
                         <ListItem indexer={indexer} key={idx} />
                       ))}
                     </tbody>

web/src/screens/settings/Irc.tsx

@@ -17,7 +17,7 @@ export const IrcSettings = () => {
 
   const { data } = useQuery(
     "networks",
-    APIClient.irc.getNetworks,
+    () => APIClient.irc.getNetworks(),
     {
       refetchOnWindowFocus: false,
       // Refetch every 3 seconds

web/src/screens/settings/Notifications.tsx

@@ -10,10 +10,10 @@ import { componentMapType } from "../../forms/settings/DownloadClientForms";
 function NotificationSettings() {
   const [addNotificationsIsOpen, toggleAddNotifications] = useToggle(false);
 
-  const { data } = useQuery<Notification[], Error>("notifications", APIClient.notifications.getAll,
-    {
-      refetchOnWindowFocus: false
-    }
+  const { data } = useQuery(
+    "notifications",
+    () => APIClient.notifications.getAll(),
+    { refetchOnWindowFocus: false }
   );
 
   return (