fix: handle logout

src/lib/backend/getUserLocals.ts

@@ -1,3 +1,4 @@
+import { useCookies } from 'react-cookie';
 import { get } from './api';
 import { get2ankiApi } from './get2ankiApi';
 import Users from '../../schemas/public/Users';
@@ -12,4 +13,14 @@ interface GetUserLocalsResponse {
   user?: Users;
 }
 
-export const getUserLocals = async (): Promise<GetUserLocalsResponse> => get(`${get2ankiApi().baseURL}users/debug/locals`);
+export const getUserLocals = async (): Promise<GetUserLocalsResponse> => {
+  const [, , removeCookie] = useCookies(['token']);
+
+  try {
+    return await get(`${get2ankiApi().baseURL}users/debug/locals`);
+  } catch (error) {
+    removeCookie('token');
+    window.location.href = '/login';
+    throw error;
+  }
+};

src/pages/DownloadsPage/DownloadsPage.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from 'react-query';
 import Index from './components/ListJobs';
 
 import useUploads from './hooks/useUploads';
@@ -10,6 +11,7 @@ import { redirectOnError } from '../../components/shared/redirectOnError';
 import { UnfinishedJobsInfo } from './components/UnfinishedJobsInfo';
 import { ErrorHandlerType } from '../../components/errors/helpers/getErrorMessage';
 import { get2ankiApi } from '../../lib/backend/get2ankiApi';
+import { getUserLocals } from '../../lib/backend/getUserLocals';
 
 interface DownloadsPageProps {
   setError: ErrorHandlerType;
@@ -18,20 +20,32 @@ interface DownloadsPageProps {
 export function DownloadsPage({ setError }: DownloadsPageProps) {
   const { deleteUpload, loading, uploads, error } = useUploads(get2ankiApi());
   const { jobs, deleteJob, restartJob } = useJobs(get2ankiApi(), setError);
+  const { isLoading, data } = useQuery('userlocals', getUserLocals, {
+    cacheTime: 0,
+  });
   const unfinishedJob = jobs.length > 0;
+  const isPremium = data?.locals?.patreon || data?.locals?.subscriber;
 
   if (error) {
     redirectOnError(error);
     return null;
   }
 
-  if (loading) {
+  if (loading || isLoading) {
     return <LoadingIndicator />;
   }
 
   return (
     <Container>
       <EmptyDownloadsSection hasActiveJobs={unfinishedJob} uploads={uploads} />
+      {isPremium && (
+        <div>
+          Free users can only download 100 cards at a time and only one
+          conversion at a time. If you trigger more than one conversion at a
+          time, the oldest one will be cancelled.
+        </div>
+      )}
+
       <UnfinishedJobsInfo visible={unfinishedJob} />
       <Index
         restartJob={restartJob}