show badge if there is an update available, which is cached

interface/src/contexts/authentication/Authentication.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { redirect } from 'react-router';
 import { toast } from 'react-toastify';
 
+import { callAction } from 'api/app';
 import { ACCESS_TOKEN } from 'api/endpoints';
 
 import * as AuthenticationApi from 'components/routing/authentication';
@@ -10,7 +11,7 @@ import { useRequest } from 'alova/client';
 import { LoadingSpinner } from 'components';
 import { verifyAuthorization } from 'components/routing/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
-import type { Me } from 'types';
+import type { Me, VersionsResponse } from 'types';
 import type { RequiredChildrenProps } from 'utils';
 
 import { AuthenticationContext } from './context';
@@ -20,17 +21,34 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
 
   const [initialized, setInitialized] = useState<boolean>(false);
   const [me, setMe] = useState<Me>();
+  const [versions, setVersions] = useState<VersionsResponse>();
 
   const { send: sendVerifyAuthorization } = useRequest(verifyAuthorization(), {
     immediate: false
   });
 
+  const { send: sendGetVersions } = useRequest(
+    () => callAction({ action: 'getVersions' }),
+    { immediate: false }
+  )
+    .onSuccess((event) => {
+      setVersions(event.data as VersionsResponse);
+    })
+    .onError(() => {
+      setVersions(undefined);
+    });
+
+  const refreshVersions = useCallback(async () => {
+    await sendGetVersions().catch(() => undefined);
+  }, []);
+
   const signIn = (accessToken: string) => {
     try {
       AuthenticationApi.getStorage().setItem(ACCESS_TOKEN, accessToken);
       const decodedMe = AuthenticationApi.decodeMeJWT(accessToken);
       setMe(decodedMe);
       toast.success(LL.LOGGED_IN({ name: decodedMe.username }));
+      void refreshVersions();
     } catch {
       setMe(undefined);
       throw new Error('Failed to parse JWT');
@@ -40,6 +58,7 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
   const signOut = (doRedirect: boolean) => {
     AuthenticationApi.clearAccessToken();
     setMe(undefined);
+    setVersions(undefined);
     if (doRedirect) {
       redirect('/');
     }
@@ -49,8 +68,9 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
     const accessToken = AuthenticationApi.getStorage().getItem(ACCESS_TOKEN);
     if (accessToken) {
       await sendVerifyAuthorization()
-        .then(() => {
+        .then(async () => {
           setMe(AuthenticationApi.decodeMeJWT(accessToken));
+          await refreshVersions();
           setInitialized(true);
         })
         .catch(() => {
@@ -61,6 +81,8 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
       setMe(undefined);
       setInitialized(true);
     }
+    // refreshVersions and sendVerifyAuthorization are stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -72,9 +94,11 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
       signIn,
       signOut,
       refresh,
-      ...(me && { me })
+      refreshVersions,
+      ...(me && { me }),
+      ...(versions && { versions })
     }),
-    [signIn, signOut, me, refresh]
+    [signIn, signOut, me, refresh, refreshVersions, versions]
   );
 
   if (initialized) {

interface/src/contexts/authentication/context.ts

@@ -1,12 +1,14 @@
 import { createContext } from 'react';
 
-import type { Me } from 'types';
+import type { Me, VersionsResponse } from 'types';
 
 export interface AuthenticationContextValue {
   refresh: () => Promise<void>;
   signIn: (accessToken: string) => void;
   signOut: (redirect: boolean) => void;
   me?: Me;
+  versions?: VersionsResponse;
+  refreshVersions: () => Promise<void>;
 }
 
 const AuthenticationContextDefaultValue = {} as AuthenticationContextValue;