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/dashboard/Stats.tsx

@@ -34,7 +34,7 @@ export const Stats = () => {
   return (
     <div>
       <h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
-              Stats
+        Stats
       </h3>
 
       <dl className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-3">

web/src/screens/filters/details.tsx

@@ -309,7 +309,7 @@ export default function FilterDetails() {
 export function General() {
   const { isLoading, data: indexers } = useQuery(
     ["filters", "indexer_list"],
-    APIClient.indexers.getOptions,
+    () => APIClient.indexers.getOptions(),
     { refetchOnWindowFocus: false }
   );
 
@@ -535,7 +535,7 @@ interface FilterActionsProps {
 export function FilterActions({ filter, values }: FilterActionsProps) {
   const { data } = useQuery(
     ["filters", "download_clients"],
-    APIClient.download_clients.getAll,
+    () => APIClient.download_clients.getAll(),
     { refetchOnWindowFocus: false }
   );
 

web/src/screens/filters/list.tsx

@@ -24,7 +24,7 @@ export default function Filters() {
 
   const { isLoading, error, data } = useQuery(
     ["filters"],
-    APIClient.filters.getAll,
+    () => APIClient.filters.getAll(),
     { refetchOnWindowFocus: false }
   );
 

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 (