Can create a family from the GUI

geneit_app/src/dialogs/CreateFamilyDialog.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { TextInputDialog } from "./TextInputDialog";
+import { ServerApi } from "../api/ServerApi";
+import { FamilyApi } from "../api/FamilyApi";
+
+export function CreateFamilyDialog(p: {
+  open: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+}): React.ReactElement {
+  const [name, setName] = React.useState("");
+  const [creating, setCreating] = React.useState(false);
+  const [error, setError] = React.useState(false);
+
+  const cancel = () => {
+    setName("");
+    setCreating(false);
+    setError(false);
+    p.onClose();
+  };
+
+  const createFamily = async () => {
+    setCreating(true);
+    try {
+      await FamilyApi.CreateFamily(name);
+      setName("");
+      p.onCreated();
+    } catch (e) {
+      console.error(e);
+      setError(true);
+    }
+    setCreating(false);
+  };
+
+  return (
+    <TextInputDialog
+      open={p.open}
+      title="Creation d'une famille"
+      text="Veuillez définir le nom que vous souhaitez donner à la famille créée :"
+      label="Nom de la famille"
+      minLen={ServerApi.Config.constraints.family_name_len.min}
+      maxLen={ServerApi.Config.constraints.family_name_len.max}
+      onClose={cancel}
+      onCancel={cancel}
+      submitButton="Créer la famille"
+      value={name}
+      onValueChange={setName}
+      isChecking={creating}
+      checkingMessage="Création en cours..."
+      errorIsBlocking={false}
+      error={error ? "Echec de la création de la famille !" : undefined}
+      onSubmit={createFamily}
+    />
+  );
+}