GeneIT/geneit_app/src/routes/FamiliesListRoute.tsx

import AddIcon from "@mui/icons-material/Add";
import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
import { Button, IconButton, Tooltip, Typography } from "@mui/material";
import React from "react";
import { Family, FamilyApi } from "../api/FamilyApi";
import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
import { AsyncWidget } from "../widgets/AsyncWidget";

export function FamiliesListRoute(): React.ReactElement {
  const loadKey = React.useRef(1);

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

  const [createFamily, setCreateFamily] = React.useState(false);
  const [joinFamily, setJoinFamily] = React.useState(false);

  const load = async () => {
    setFamilies(await FamilyApi.GetList());
  };

  const reload = () => {
    loadKey.current += 1;
  };

  const onRequestCreateFamily = async () => {
    setCreateFamily(true);
  };

  const onRequestJoinFamily = async () => {
    setJoinFamily(true);
  };

  return (
    <AsyncWidget
      ready={families !== null}
      loadKey={`families-list-${loadKey.current}`}
      load={load}
      errMsg="Echec du chargement de la liste des familles"
      build={() => (
        <>
          {families!!.length === 0 ? (
            <NoFamilyWidget
              onRequestCreateFamily={onRequestCreateFamily}
              onRequestJoinFamily={onRequestJoinFamily}
            />
          ) : (
            <HasFamilysWidget
              onRequestCreateFamily={onRequestCreateFamily}
              onRequestJoinFamily={onRequestJoinFamily}
              families={families!}
            />
          )}

          {/** Create family dialog anchor */}
          <CreateFamilyDialog
            open={createFamily}
            onClose={() => setCreateFamily(false)}
            onCreated={() => {
              setCreateFamily(false);
              reload();
            }}
          />

          {/** Join family dialog anchor */}
          <JoinFamilyDialog
            open={joinFamily}
            onClose={() => setJoinFamily(false)}
            onJoined={() => {
              setJoinFamily(false);
              reload();
            }}
          />
        </>
      )}
    />
  );
}

function NoFamilyWidget(p: {
  onRequestCreateFamily: () => void;
  onRequestJoinFamily: () => void;
}): React.ReactElement {
  return (
    <div style={{ flex: 1, display: "flex", alignItems: "center" }}>
      <Typography variant="h3" style={{ flex: 3, textAlign: "center" }}>
        Vous n'appartenez à aucune famille !
      </Typography>

      <div
        style={{
          flex: 2,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <NoFamilyButton
          label="Créer une famille"
          onClick={p.onRequestCreateFamily}
        />

        <NoFamilyButton
          label="Rejoindre une famille"
          onClick={p.onRequestJoinFamily}
        />
      </div>
    </div>
  );
}

function NoFamilyButton(p: {
  label: string;
  onClick: () => void;
}): React.ReactElement {
  return (
    <Button
      variant="outlined"
      size="large"
      style={{ width: "300px", marginBottom: "10px" }}
      onClick={p.onClick}
    >
      {p.label}
    </Button>
  );
}

function HasFamilysWidget(p: {
  families: Family[];
  onRequestCreateFamily: () => void;
  onRequestJoinFamily: () => void;
}): React.ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <Typography variant="h4">Mes familles</Typography>
        <div>
          <IconButton aria-label="create" onClick={p.onRequestCreateFamily}>
            <Tooltip title="Créer une nouvelle famille">
              <AddIcon />
            </Tooltip>
          </IconButton>
          <IconButton aria-label="create" onClick={p.onRequestJoinFamily}>
            <Tooltip title="Rejoindre une famille">
              <ConfirmationNumberIcon />
            </Tooltip>
          </IconButton>
        </div>
      </div>
      TODO list of families
    </div>
  );
}