Can copy invitation code to clipboard

geneit_app/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.2",
@@ -21,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

geneit_app/src/index.tsx

@@ -14,6 +14,7 @@ import { BrowserRouter } from "react-router-dom";
 import { ConfirmDialogProvider } from "./widgets/ConfirmDialogProvider";
 import { AlertDialogProvider } from "./widgets/AlertDialogProvider";
 import { AsyncWidget } from "./widgets/AsyncWidget";
+import { SnackbarProvider } from "./widgets/SnackbarProvider";
 
 async function init() {
   try {
@@ -26,6 +27,7 @@ async function init() {
         <BrowserRouter>
           <AlertDialogProvider>
             <ConfirmDialogProvider>
+              <SnackbarProvider>
                 <div style={{ height: "100vh" }}>
                   <AsyncWidget
                     loadKey={1}
@@ -34,6 +36,7 @@ async function init() {
                     build={() => <App />}
                   />
                 </div>
+              </SnackbarProvider>
             </ConfirmDialogProvider>
           </AlertDialogProvider>
         </BrowserRouter>

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -1,7 +1,7 @@
 import { mdiFamilyTree } from "@mdi/js";
 import Icon from "@mdi/react";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { Button } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
@@ -61,11 +61,20 @@ export function BaseAuthenticatedPage(): React.ReactElement {
             reloadUserInfo: load,
           }}
         >
-          <div
-            style={{
+          <Box
+            component="div"
+            sx={{
               minHeight: "100vh",
               display: "flex",
               flexDirection: "column",
+              backgroundColor: (theme) =>
+                theme.palette.mode === "light"
+                  ? theme.palette.grey[100]
+                  : theme.palette.grey[900],
+              color: (theme) =>
+                theme.palette.mode === "light"
+                  ? theme.palette.grey[900]
+                  : theme.palette.grey[100],
             }}
           >
             <AppBar position="sticky">
@@ -122,7 +131,7 @@ export function BaseAuthenticatedPage(): React.ReactElement {
               </Toolbar>
             </AppBar>
             <Outlet />
-          </div>
+          </Box>
         </UserContextK.Provider>
       )}
     />

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -4,6 +4,7 @@ import {
   mdiCrowd,
   mdiFamilyTree,
   mdiHumanMaleFemale,
+  mdiLockCheck,
 } from "@mdi/js";
 import Icon from "@mdi/react";
 import HomeIcon from "@mui/icons-material/Home";
@@ -15,12 +16,14 @@ import {
   ListItemIcon,
   ListItemText,
   ListSubheader,
+  Tooltip,
 } from "@mui/material";
 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 "./SnackbarProvider";
 
 interface FamilyContext {
   family: Family;
@@ -31,6 +34,7 @@ const FamilyContextK = React.createContext<FamilyContext | null>(null);
 
 export function BaseFamilyRoute(): React.ReactElement {
   const { familyId } = useParams();
+  const snackbar = useSnackbar();
 
   const [family, setFamily] = React.useState<null | Family>(null);
 
@@ -45,6 +49,11 @@ export function BaseFamilyRoute(): React.ReactElement {
     setFamily(null);
   };
 
+  const copyInvitationCode = async () => {
+    navigator.clipboard.writeText(family!.invitation_code);
+    snackbar("Le code d'invitation a été copié dans le presse papier !");
+  };
+
   return (
     <AsyncWidget
       ready={family != null}
@@ -58,8 +67,21 @@ export function BaseFamilyRoute(): React.ReactElement {
             reloadFamilyInfo: onReload,
           }}
         >
-          <Box sx={{ display: "flex", flex: "2" }}>
-            <List component="nav">
+          <Box
+            sx={{
+              display: "flex",
+              flex: "2",
+            }}
+          >
+            <List
+              component="nav"
+              sx={{
+                backgroundColor: (theme) =>
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[100]
+                    : "background.paper",
+              }}
+            >
               <FamilyLink icon={<HomeIcon />} label="Accueil" uri="" />
 
               <FamilyLink
@@ -81,9 +103,7 @@ export function BaseFamilyRoute(): React.ReactElement {
               />
 
               <Divider sx={{ my: 1 }} />
-              <ListSubheader component="div" inset>
-                Administration
-              </ListSubheader>
+              <ListSubheader component="div">Administration</ListSubheader>
 
               <FamilyLink
                 icon={<Icon path={mdiAccountMultiple} size={1} />}
@@ -96,15 +116,24 @@ export function BaseFamilyRoute(): React.ReactElement {
                 label="Paramètres"
                 uri="settings"
               />
+
+              {/* Invitation code */}
+              <Tooltip title="Copier le code d'invitation dans le presse papier">
+                <ListItemButton onClick={copyInvitationCode}>
+                  <ListItemIcon>
+                    <Icon path={mdiLockCheck} size={1} />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Code d'invitation"
+                    secondary={family?.invitation_code}
+                  />
+                </ListItemButton>
+              </Tooltip>
             </List>
 
             <Box
               component="main"
               sx={{
-                backgroundColor: (theme) =>
-                  theme.palette.mode === "light"
-                    ? theme.palette.grey[100]
-                    : theme.palette.grey[900],
                 flexGrow: 1,
                 overflow: "auto",
                 padding: "20px",

geneit_app/src/widgets/SnackbarProvider.tsx

@@ -0,0 +1,43 @@
+import { Snackbar } from "@mui/material";
+
+import React, { PropsWithChildren } from "react";
+
+type SnackbarContext = (message: string, duration?: number) => void;
+
+const SnackbarContextK = React.createContext<SnackbarContext | null>(null);
+
+export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
+  const [message, setMessage] = React.useState("");
+  const [duration, setDuration] = React.useState(0);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const hook: SnackbarContext = (message, duration) => {
+    setMessage(message);
+    setDuration(duration ?? 6000);
+    setOpen(true);
+  };
+
+  return (
+    <>
+      <SnackbarContextK.Provider value={hook}>
+        {p.children}
+      </SnackbarContextK.Provider>
+
+      <Snackbar
+        open={open}
+        autoHideDuration={duration}
+        onClose={handleClose}
+        message={message}
+      />
+    </>
+  );
+}
+
+export function useSnackbar(): SnackbarContext {
+  return React.useContext(SnackbarContextK)!;
+}