GeneIT/geneit_app/src/App.tsx

import React from "react";
import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";
import "./App.css";
import { AuthApi } from "./api/AuthApi";
import { DeleteAccountRoute } from "./routes/DeleteAccountRoute";
import { FamiliesListRoute } from "./routes/FamiliesListRoute";
import { NotFoundRoute } from "./routes/NotFound";
import { ProfileRoute } from "./routes/ProfileRoute";
import { LoginRoute } from "./routes/auth/LoginRoute";
import { NewAccountRoute } from "./routes/auth/NewAccountRoute";
import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
import { PasswordForgottenRoute } from "./routes/auth/PasswordForgottenRoute";
import { ResetPasswordRoute } from "./routes/auth/ResetPasswordRoute";
import { FamilyHomeRoute } from "./routes/family/FamilyHomeRoute";
import {
  FamilyCreateMemberRoute,
  FamilyEditMemberRoute,
  FamilyMemberRoute,
} from "./routes/family/FamilyMemberRoute";
import { FamilySettingsRoute } from "./routes/family/FamilySettingsRoute";
import { FamilyUsersListRoute } from "./routes/family/FamilyUsersListRoute";
import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
import { BaseFamilyRoute } from "./widgets/BaseFamilyRoute";
import { BaseLoginPage } from "./widgets/BaseLoginpage";

interface AuthContext {
  signedIn: boolean;
  setSignedIn: (signedIn: boolean) => void;
}

const AuthContextK = React.createContext<AuthContext | null>(null);

/**
 * Core app
 */
export function App(): React.ReactElement {
  const [signedIn, setSignedIn] = React.useState(AuthApi.SignedIn);

  const context: AuthContext = {
    signedIn: signedIn,
    setSignedIn: (s) => setSignedIn(s),
  };

  const router = createBrowserRouter(
    createRoutesFromElements(
      <>
        <Route path="delete_account" element={<DeleteAccountRoute />} />

        {signedIn ? (
          <Route path="*" element={<BaseAuthenticatedPage />}>
            <Route path="" element={<FamiliesListRoute />} />
            <Route path="profile" element={<ProfileRoute />} />
            <Route path="family/:familyId/*" element={<BaseFamilyRoute />}>
              <Route path="" element={<FamilyHomeRoute />} />
              <Route
                path="member/create"
                element={<FamilyCreateMemberRoute />}
              />
              <Route path="member/:memberId" element={<FamilyMemberRoute />} />
              <Route
                path="member/:memberId/edit"
                element={<FamilyEditMemberRoute />}
              />
              <Route path="settings" element={<FamilySettingsRoute />} />
              <Route path="users" element={<FamilyUsersListRoute />} />
              <Route path="*" element={<NotFoundRoute />} />
            </Route>
            <Route path="*" element={<NotFoundRoute />} />
          </Route>
        ) : (
          <Route path="*" element={<BaseLoginPage />}>
            <Route path="" element={<LoginRoute />} />
            <Route path="oidc_cb" element={<OIDCCbRoute />} />
            <Route path="new-account" element={<NewAccountRoute />} />
            <Route
              path="password_forgotten"
              element={<PasswordForgottenRoute />}
            />
            <Route path="reset_password" element={<ResetPasswordRoute />} />
            <Route path="*" element={<NotFoundRoute />} />
          </Route>
        )}
      </>
    )
  );

  return (
    <AuthContextK.Provider value={context}>
      <RouterProvider router={router} />
    </AuthContextK.Provider>
  );
}

export function useAuth(): AuthContext {
  return React.useContext(AuthContextK)!;
}