Create a context to store authentication

geneit_app/src/widgets/AlertDialogProvider.tsx

@@ -6,18 +6,13 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
-import React, {
-  PropsWithChildren,
-  createContext,
-  useContext,
-  useRef,
-} from "react";
+import React, { PropsWithChildren } from "react";
 
-interface AlertHook {
+interface AlertContext {
   alert: (message: string, title?: string) => Promise<void>;
 }
 
-const AlertContext = createContext<AlertHook | null>(null);
+const AlertContextK = React.createContext<AlertContext | null>(null);
 
 export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
   const [open, setOpen] = React.useState(false);
@@ -34,7 +29,7 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
     cb.current = null;
   };
 
-  const hook: AlertHook = {
+  const hook: AlertContext = {
     alert: (message, title) => {
       setTitle(title);
       setMessage(message);
@@ -48,7 +43,7 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <AlertContext.Provider value={hook}>{p.children}</AlertContext.Provider>
+      <AlertContextK.Provider value={hook}>{p.children}</AlertContextK.Provider>
 
       <Dialog
         open={open}
@@ -72,6 +67,6 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
   );
 }
 
-export function useAlert(): AlertHook {
-  return useContext(AlertContext)!;
+export function useAlert(): AlertContext {
+  return React.useContext(AlertContextK)!;
 }

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -7,9 +7,9 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
-import { useSetAtom } from "jotai";
 import * as React from "react";
 import { Link, Outlet, useNavigate } from "react-router-dom";
+import { useAuth } from "../App";
 import { AuthApi } from "../api/AuthApi";
 import { User, UserApi } from "../api/UserApi";
 import { AsyncWidget } from "./AsyncWidget";
@@ -18,7 +18,7 @@ import { RouterLink } from "./RouterLink";
 export function BaseAuthenticatedPage(): React.ReactElement {
   const [user, setUser] = React.useState<null | User>(null);
 
-  const setSignedIn = useSetAtom(AuthApi.authStatus);
+  const auth = useAuth();
   const navigate = useNavigate();
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -39,7 +39,7 @@ export function BaseAuthenticatedPage(): React.ReactElement {
     handleCloseMenu();
     AuthApi.SignOut();
     navigate("/");
-    setSignedIn(false);
+    auth.setSignedIn(false);
   };
 
   return (

geneit_app/src/widgets/ConfirmDialogProvider.tsx

@@ -6,14 +6,9 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
-import React, {
-  PropsWithChildren,
-  createContext,
-  useContext,
-  useRef,
-} from "react";
+import React, { PropsWithChildren } from "react";
 
-interface ConfirmHook {
+interface ConfirmContext {
   confirm: (
     message: string,
     title?: string,
@@ -21,7 +16,7 @@ interface ConfirmHook {
   ) => Promise<boolean>;
 }
 
-const ConfirmContext = createContext<ConfirmHook | null>(null);
+const ConfirmContextK = React.createContext<ConfirmContext | null>(null);
 
 export function ConfirmDialogProvider(
   p: PropsWithChildren
@@ -43,7 +38,7 @@ export function ConfirmDialogProvider(
     cb.current = null;
   };
 
-  const hook: ConfirmHook = {
+  const hook: ConfirmContext = {
     confirm: (message, title, confirmButton) => {
       setTitle(title);
       setMessage(message);
@@ -58,9 +53,9 @@ export function ConfirmDialogProvider(
 
   return (
     <>
-      <ConfirmContext.Provider value={hook}>
+      <ConfirmContextK.Provider value={hook}>
         {p.children}
-      </ConfirmContext.Provider>
+      </ConfirmContextK.Provider>
 
       <Dialog
         open={open}
@@ -87,6 +82,6 @@ export function ConfirmDialogProvider(
   );
 }
 
-export function useConfirm(): ConfirmHook {
-  return useContext(ConfirmContext)!;
+export function useConfirm(): ConfirmContext {
+  return React.useContext(ConfirmContextK)!;
 }