GeneIT/geneit_app/src/routes/family/FamilySettingsRoute.tsx

import {
  Alert,
  Box,
  Button,
  Card,
  CardActions,
  CardContent,
  TextField,
  Typography,
} from "@mui/material";
import React from "react";
import { useNavigate } from "react-router-dom";
import { FamilyApi } from "../../api/FamilyApi";
import { ServerApi } from "../../api/ServerApi";
import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
import { useFamily } from "../../widgets/BaseFamilyRoute";
import { formatDate } from "../../widgets/TimeWidget";
import { FamilyCard } from "../../widgets/FamilyCard";
import DownloadIcon from "@mui/icons-material/Download";
import { useLoadingMessage } from "../../hooks/context_providers/LoadingMessageProvider";
import { DataApi } from "../../api/DataApi";
import { downloadBlob } from "../../utils/blob_utils";

export function FamilySettingsRoute(): React.ReactElement {
  const alert = useAlert();
  const confirm = useConfirm();
  const navigate = useNavigate();

  const family = useFamily();

  const deleteFamily = async () => {
    try {
      if (
        !(await confirm(
          "Voulez-vous vraiment supprimer cette famille, et toute les données qui s'y rattachent ? Cette opération est absolument irréversible !"
        ))
      )
        return;

      await FamilyApi.DeleteFamily(family.family);

      await alert("La famille a été supprimée avec succès !");

      navigate("/");
    } catch (e) {
      console.error(e);
      alert("Echec de la suppression de la famille !");
    }
  };

  return (
    <>
      <FamilySettingsCard />
      <FamilyExportCard />
      <div style={{ textAlign: "center", marginTop: "50px" }}>
        <Button
          size="small"
          color="error"
          onClick={deleteFamily}
          disabled={!family.family.is_admin}
        >
          Supprimer la famille
        </Button>
      </div>
    </>
  );
}

function FamilySettingsCard(): React.ReactElement {
  const alert = useAlert();

  const family = useFamily();

  const [newName, setNewName] = React.useState(family.family.name);

  const canEdit = family.family.is_admin;

  const [error, setError] = React.useState<string>();
  const [success, setSuccess] = React.useState<string>();

  const updateFamily = async () => {
    try {
      setError(undefined);
      setSuccess(undefined);

      await FamilyApi.UpdateFamily({
        id: family.family.family_id,
        name: newName,
      });

      family.reloadFamilyInfo();

      alert("Les paramètres de la famille ont été mis à jour avec succès !");
    } catch (e) {
      console.error(e);
      setError("Echec de la mise à jour des paramètres de la famille !");
    }
  };

  return (
    <FamilyCard error={error} success={success}>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Paramètres de la famille
        </Typography>

        <Box
          component="form"
          sx={{
            "& .MuiTextField-root": { my: 1 },
          }}
          noValidate
          autoComplete="off"
        >
          <TextField
            disabled
            fullWidth
            label="Identifiant"
            value={family.family.family_id}
          />

          <TextField
            disabled
            fullWidth
            label="Création de la famille"
            value={formatDate(family.family.time_create)}
          />

          <TextField
            fullWidth
            label="Nom de la famille"
            value={newName}
            disabled={!canEdit}
            onChange={(e) => setNewName(e.target.value)}
            inputProps={{
              maxLength: ServerApi.Config.constraints.family_name_len.max,
            }}
          />
        </Box>
      </CardContent>
      <CardActions>
        <Button
          onClick={updateFamily}
          disabled={!canEdit}
          style={{ marginLeft: "auto" }}
        >
          Enregistrer
        </Button>
      </CardActions>
    </FamilyCard>
  );
}

function FamilyExportCard(): React.ReactElement {
  const loading = useLoadingMessage();
  const alert = useAlert();

  const family = useFamily();

  const [error, setError] = React.useState<string>();
  const [success, setSuccess] = React.useState<string>();

  const exportData = async () => {
    loading.show("Export des données");
    try {
      setError(undefined);
      setSuccess(undefined);

      const blob = await DataApi.ExportData(family.familyId);
      downloadBlob(blob, `Export-${new Date().getTime()}.zip`);
    } catch (e) {
      console.error(e);
      setError("Echec de l'export des données de la famille !");
    }
    loading.hide();
  };

  return (
    <FamilyCard error={error} success={success}>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Export / import des données de la famille
        </Typography>
        <p>
          Vous pouvez, à des fins de sauvegardes ou de transfert, exporter et
          importer l'ensemble des données des membres et des couples de cette
          famille, sous format ZIP.
        </p>

        <Alert severity="warning">
          Attention ! La restauration des données de la famille provoque
          préalablement l'effacement de toutes les données enregistrées dans la
          famille ! Par ailleurs, la restauration n'est pas réversible !
        </Alert>

        <p>&nbsp;</p>

        <Button
          startIcon={<DownloadIcon />}
          variant="outlined"
          fullWidth
          onClick={exportData}
        >
          Exporter les données de la famille
        </Button>
      </CardContent>
    </FamilyCard>
  );
}