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/App.tsx

@@ -32,17 +32,17 @@ export function App() {
   const settings = SettingsContext.useValue();
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <ErrorBoundary
-      <Toaster position="top-right" />
+      onReset={reset}
-      <ErrorBoundary
+      fallbackRender={ErrorPage}
-        onReset={reset}
+    >
-        fallbackRender={ErrorPage}
+      <QueryClientProvider client={queryClient}>
-      >
+        <Toaster position="top-right" />
         <LocalRouter isLoggedIn={authContext.isLoggedIn} />
         {settings.debug ? (
           <ReactQueryDevtools initialIsOpen={false} />
         ) : null}
-      </ErrorBoundary>
+      </QueryClientProvider>
-    </QueryClientProvider>
+    </ErrorBoundary>
   );
 }

web/src/components/alerts/ErrorPage.tsx

@@ -13,7 +13,7 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
   });
 
   return (
-    <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex flex-col justify-center py-12 px-2 sm:px-6 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-screen-md md:max-w-screen-lg lg:max-w-screen-xl">
         <h1 className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4 mb-3">
           We caught an unrecoverable error!

web/src/forms/settings/IndexerForms.tsx

@@ -173,7 +173,9 @@ interface AddProps {
 export function IndexerAddForm({ isOpen, toggle }: AddProps) {
   const [indexer, setIndexer] = useState<IndexerDefinition>({} as IndexerDefinition);
 
-  const { data } = useQuery("indexerDefinition", APIClient.indexers.getSchema,
+  const { data } = useQuery(
+    "indexerDefinition",
+    () => APIClient.indexers.getSchema(),
     {
       enabled: isOpen,
       refetchOnWindowFocus: false

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,
+  const { data } = useQuery(
-    {
+    "feeds",
-      refetchOnWindowFocus: false
+    () => 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,
+  const { data } = useQuery(
-    {
+    "notifications",
-      refetchOnWindowFocus: false
+    () => APIClient.notifications.getAll(),
-    }
+    { refetchOnWindowFocus: false }
   );
 
   return (