GeneIT/geneit_app/src/widgets/BaseFamilyRoute.tsx

import {
  mdiAccountMultiple,
  mdiCog,
  mdiContentCopy,
  mdiCrowd,
  mdiFamilyTree,
  mdiHumanMaleFemale,
  mdiLockCheck,
} from "@mdi/js";
import Icon from "@mdi/react";
import HomeIcon from "@mui/icons-material/Home";
import {
  Box,
  Divider,
  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  ListSubheader,
  Tooltip,
} from "@mui/material";
import { mdiRefresh } from "@mdi/js";
import React from "react";
import { Outlet, useLocation, useParams } from "react-router-dom";
import { Family, FamilyApi } from "../api/FamilyApi";
import { AsyncWidget } from "./AsyncWidget";
import { RouterLink } from "./RouterLink";
import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
import { useAlert } from "../hooks/context_providers/AlertDialogProvider";

interface FamilyContext {
  family: Family;
  familyId: number;
  reloadFamilyInfo: () => void;
}

const FamilyContextK = React.createContext<FamilyContext | null>(null);

export function BaseFamilyRoute(): React.ReactElement {
  const { familyId } = useParams();
  const snackbar = useSnackbar();
  const alert = useAlert();
  const confirm = useConfirm();

  const [family, setFamily] = React.useState<null | Family>(null);

  const loadKey = React.useRef(1);

  const load = async () => {
    setFamily(await FamilyApi.GetSingle(Number(familyId)));
  };

  const onReload = () => {
    loadKey.current += 1;
    setFamily(null);
  };

  const copyInvitationCode = async () => {
    navigator.clipboard.writeText(family!.invitation_code);
    snackbar("Le code d'invitation a été copié dans le presse papier !");
  };

  const changeInvitationCode = async () => {
    try {
      if (
        !(await confirm(
          "Voulez-vous vraiment générer un nouveau code d'invitation pour cette famille ? Cette action aura pour effet d'invalider l'ancien code !"
        ))
      )
        return;

      await FamilyApi.RenewInvitationCode(family!.family_id);

      snackbar("Le code d'invitation a été changé avec succès !");

      onReload();
    } catch (e) {
      console.error(e);
      alert("Echec du renouvellement du code d'invitation !");
    }
  };

  return (
    <AsyncWidget
      ready={family != null}
      loadKey={`${familyId}-${loadKey.current}`}
      load={load}
      errMsg="Échec du chargement des informations de la famille !"
      build={() => (
        <FamilyContextK.Provider
          value={{
            family: family!,
            familyId: family!.family_id,
            reloadFamilyInfo: onReload,
          }}
        >
          <Box
            sx={{
              display: "flex",
              flex: "2",
            }}
          >
            <List
              component="nav"
              sx={{
                minWidth: "280px",
                backgroundColor: "background.paper",
              }}
            >
              <FamilyLink icon={<HomeIcon />} label="Accueil" uri="" />

              <FamilyLink
                icon={<Icon path={mdiCrowd} size={1} />}
                label="Membres"
                uri="members"
              />

              <FamilyLink
                icon={<Icon path={mdiHumanMaleFemale} size={1} />}
                label="Couples"
                uri="couples"
              />

              <FamilyLink
                icon={<Icon path={mdiFamilyTree} size={1} />}
                label="Arbre"
                uri="tree"
              />

              <Divider sx={{ my: 1 }} />
              <ListSubheader component="div">Administration</ListSubheader>

              <FamilyLink
                icon={<Icon path={mdiAccountMultiple} size={1} />}
                label="Utilisateurs"
                uri="users"
              />

              <FamilyLink
                icon={<Icon path={mdiCog} size={1} />}
                label="Paramètres"
                uri="settings"
              />

              {/* Invitation code */}

              <ListItem
                dense
                secondaryAction={
                  <span>
                    <Tooltip title="Copier le code d'invitation dans le presse papier">
                      <IconButton onClick={copyInvitationCode}>
                        <Icon path={mdiContentCopy} size={0.75} />
                      </IconButton>
                    </Tooltip>

                    {family!.is_admin && (
                      <Tooltip title="Changer le code d'activation">
                        <IconButton onClick={changeInvitationCode}>
                          <Icon path={mdiRefresh} size={0.75} />
                        </IconButton>
                      </Tooltip>
                    )}
                  </span>
                }
              >
                <ListItemIcon>
                  <Icon path={mdiLockCheck} size={1} />
                </ListItemIcon>
                <ListItemText
                  primary="Code d'invitation"
                  secondary={family?.invitation_code}
                />
              </ListItem>
            </List>

            <Box
              component="main"
              sx={{
                flexGrow: 1,
                overflow: "auto",
                padding: "20px",
                display: "flex",
                flexDirection: "column",
              }}
            >
              <Outlet />
            </Box>
          </Box>
        </FamilyContextK.Provider>
      )}
    />
  );
}

export function useFamily(): FamilyContext {
  return React.useContext(FamilyContextK)!;
}

function FamilyLink(p: {
  icon: React.ReactElement;
  uri: string;
  label: string;
}): React.ReactElement {
  const family = useFamily();
  const location = useLocation();
  const link = family.family.URL(p.uri);

  return (
    <RouterLink to={link}>
      <ListItemButton selected={link === location.pathname}>
        <ListItemIcon>{p.icon}</ListItemIcon>
        <ListItemText primary={p.label} />
      </ListItemButton>
    </RouterLink>
  );
}