Fix restartRequired context handling

frontend/src/App.tsx

@@ -126,14 +126,12 @@ export function App(): JSX.Element {
   return (
     <>
       <RestartRequiredProvider>
-        <>
-          <NavPathContext.Provider value={navPath}>
-            <Header routes={routes} />
-          </NavPathContext.Provider>
-          {routes.length === 0 ? null : (
-            <Router onChange={handleRouteChange}>{routeComponents}</Router>
-          )}
-        </>
+        <NavPathContext.Provider value={navPath}>
+          <Header routes={routes} />
+        </NavPathContext.Provider>
+        {routes.length === 0 ? null : (
+          <Router onChange={handleRouteChange}>{routeComponents}</Router>
+        )}
       </RestartRequiredProvider>
     </>
   );

frontend/src/common/RestartRequiredContext.tsx

@@ -1,22 +1,19 @@
-import { createContext, JSX } from "preact";
+import { createContext } from "preact";
 import { useState } from "preact/hooks";
 
 export interface RestartRequiredContextProps {
   restartRequired: boolean;
   setRestartRequired: (value: boolean) => void;
 }
 
-export const RestartRequiredContext = createContext<RestartRequiredContextProps>({
-  restartRequired: false,
-  setRestartRequired: () => {},
-});
+export const RestartRequiredContext =
+  createContext<RestartRequiredContextProps>({
+    restartRequired: false,
+    setRestartRequired: () => {},
+  });
 
-export const RestartRequiredProvider = ({
-  children,
-}: {
-  children: JSX.Element;
-}) => {
-  const [restartRequired, setRestartRequired] = useState<boolean>(false);
+export const RestartRequiredProvider = ({ children }) => {
+  const [restartRequired, setRestartRequired] = useState(false);
 
   return (
     <RestartRequiredContext.Provider

frontend/src/pages/System/index.tsx

@@ -69,12 +69,12 @@ function SystemSettingsCard({
   children,
 }: SystemSettingsCardProps): JSX.Element {
   const [saving, setSaving] = useState<boolean>(false);
+  const { restartRequired, setRestartRequired } =
+    useContext<RestartRequiredContextProps>(RestartRequiredContext);
 
   const id = useId();
 
   async function handleSave(e: MouseEvent): Promise<void> {
-    const { restartRequired, setRestartRequired } =
-      useContext<RestartRequiredContextProps>(RestartRequiredContext);
     e.preventDefault();
     setSaving(true);
     await handleSaveData();
@@ -126,6 +126,8 @@ function DeviceNameCard(): JSX.Element {
   const [origData, setOrigData] = useState<JsonObject>({});
   const [data, setData] = useState<JsonObject>({});
   const [errorMessage, setErrorMessage] = useState<string>("");
+  const { restartRequired, setRestartRequired } =
+    useContext<RestartRequiredContextProps>(RestartRequiredContext);
 
   const id = useId();
 
@@ -141,9 +143,6 @@ function DeviceNameCard(): JSX.Element {
   };
 
   async function handleSaveData(): Promise<void> {
-    const { restartRequired, setRestartRequired } =
-      useContext<RestartRequiredContextProps>(RestartRequiredContext);
-
     const success = await saveConfigData(
       configPath,
       JSON.stringify(data),
@@ -199,6 +198,9 @@ function AuthCard(): JSX.Element {
   const [origData, setOrigData] = useState<JsonObject>({});
   const [data, setData] = useState<JsonObject>({});
   const [errorMessage, setErrorMessage] = useState<string>("");
+  const { restartRequired, setRestartRequired } =
+    useContext<RestartRequiredContextProps>(RestartRequiredContext);
+
   const id = useId();
 
   const configPath = "/system/httpserver";
@@ -221,9 +223,6 @@ function AuthCard(): JSX.Element {
   }, []);
 
   async function handleSaveData(): Promise<void> {
-    const { restartRequired, setRestartRequired } =
-      useContext<RestartRequiredContextProps>(RestartRequiredContext);
-
     const success = await saveConfigData(
       configPath,
       JSON.stringify(data),
@@ -355,7 +354,9 @@ function RestartCard(): JSX.Element {
       <ToastMessage
         color="text-bg-warning"
         show={showRestartToast}
-        onHide={() => {setShowRestartToast(false)}}
+        onHide={() => {
+          setShowRestartToast(false);
+        }}
       >
         <p>Restarting the device...</p>
       </ToastMessage>

frontend/src/pages/WiFi/WiFiSettingsPanel.tsx

@@ -1,4 +1,7 @@
-import { RestartRequiredContext } from "common/RestartRequiredContext";
+import {
+  RestartRequiredContext,
+  RestartRequiredContextProps,
+} from "common/RestartRequiredContext";
 import { fetchConfigData, saveConfigData } from "common/configAPIClient";
 import { JsonValue } from "common/jsonTypes";
 import { CollapseCard } from "components/Card";
@@ -28,6 +31,8 @@ export function WiFiSettingsPanel(): JSX.Element {
     new WiFiSettingsConfig(),
   );
   const [errorText, setErrorText] = useState("");
+  const { restartRequired, setRestartRequired } =
+    useContext<RestartRequiredContextProps>(RestartRequiredContext);
 
   const id = useId();
 
@@ -36,9 +41,6 @@ export function WiFiSettingsPanel(): JSX.Element {
   }
 
   async function handleSave(): Promise<void> {
-    const { restartRequired, setRestartRequired } = useContext(
-      RestartRequiredContext,
-    );
     try {
       await saveConfigData(
         "/System/WiFi Settings",