get and send system name in AuthenticaionContext to prevent /rest/settings on each render

interface/src/app/settings/ApplicationSettings.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
@@ -31,6 +31,7 @@ import {
   useLayoutTitle
 } from 'components';
 import { toast } from 'components/toast';
+import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValueDirty, useRest } from 'utils';
 import { ValidationError, validate } from 'validators';
@@ -68,6 +69,14 @@ const ApplicationSettings = () => {
     update: writeSettings
   });
 
+  // the menu drawer reads the system name from the authentication context
+  const { setSystemName } = useContext(AuthenticatedContext);
+  useEffect(() => {
+    if (origData?.system_name !== undefined) {
+      setSystemName(origData.system_name);
+    }
+  }, [origData?.system_name, setSystemName]);
+
   const [restarting, setRestarting] = useState<boolean>();
 
   const { LL } = useI18nContext();

interface/src/components/layout/LayoutDrawer.tsx

@@ -1,10 +1,8 @@
-import { memo } from 'react';
+import { memo, useContext } from 'react';
 
 import { Box, Divider, Drawer, Toolbar, Typography, styled } from '@mui/material';
 
-import { readSettings } from 'api/app';
-
-import { useRequest } from 'alova/client';
+import { AuthenticatedContext } from 'contexts/authentication';
 import { PROJECT_NAME } from 'env';
 
 import { DRAWER_WIDTH } from './Layout';
@@ -27,8 +25,7 @@ interface LayoutDrawerProps {
 }
 
 const LayoutDrawerComponent = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
-  const { data: settings } = useRequest(readSettings);
-  const system_name = settings?.system_name;
+  const { systemName } = useContext(AuthenticatedContext);
 
   const drawer = (
     <>
@@ -43,9 +40,9 @@ const LayoutDrawerComponent = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
             }}
           >
             <Typography>{PROJECT_NAME}</Typography>
-            {system_name && (
+            {systemName && (
               <Typography color="secondary" variant="body2">
-                {system_name}
+                {systemName}
               </Typography>
             )}
           </Box>

interface/src/contexts/authentication/Authentication.tsx

@@ -23,6 +23,7 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
   const [initialized, setInitialized] = useState<boolean>(false);
   const [me, setMe] = useState<Me>();
   const [versions, setVersions] = useState<VersionsResponse>();
+  const [systemName, setSystemName] = useState<string>();
 
   const { send: sendVerifyAuthorization } = useRequest(verifyAuthorization(), {
     immediate: false
@@ -33,7 +34,9 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
     { immediate: false }
   )
     .onSuccess((event) => {
-      setVersions(event.data as VersionsResponse);
+      const response = event.data as VersionsResponse;
+      setVersions(response);
+      setSystemName(response.system_name);
     })
     .onError(() => {
       setVersions(undefined);
@@ -60,6 +63,7 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
     AuthenticationApi.clearAccessToken();
     setMe(undefined);
     setVersions(undefined);
+    setSystemName(undefined);
     if (doRedirect) {
       void navigate('/', { replace: true });
     }
@@ -96,8 +100,10 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
           signOut,
           refresh,
           refreshVersions,
+          setSystemName,
           ...(me && { me }),
-          ...(versions && { versions })
+          ...(versions && { versions }),
+          ...(systemName !== undefined && { systemName })
         }}
       >
         {children}

interface/src/contexts/authentication/context.ts

@@ -9,6 +9,8 @@ export interface AuthenticationContextValue {
   me?: Me;
   versions?: VersionsResponse;
   refreshVersions: () => Promise<void>;
+  systemName?: string;
+  setSystemName: (systemName: string) => void;
 }
 
 const AuthenticationContextDefaultValue = {} as AuthenticationContextValue;

interface/src/types/versions.ts

@@ -1,6 +1,7 @@
 // Types for the `getVersions` action response coming from the device.
 // The device proxies the request to emsesp.org/versions.json. If the device
-// is offline the `stable` and `dev` fields are omitted.
+// is offline the `stable` and `dev` fields are omitted, but `system_name` is
+// always sent as it comes from the device itself.
 
 export interface VersionInfo {
   version: string;
@@ -20,4 +21,5 @@ export interface VersionsResponse {
   current: CurrentVersionInfo;
   stable?: RemoteVersionInfo;
   dev?: RemoteVersionInfo;
+  system_name?: string;
 }