feat: add account menu

betagouv · Jun 3, 2024 · 2288fee · 2288fee
1 parent 34682cb
commit 2288fee
Showing 1 changed file with 98 additions and 42 deletions.
diff --git a/packages/frontend/src/routes/__root.tsx b/packages/frontend/src/routes/__root.tsx
@@ -1,17 +1,18 @@
+import { Popover } from "#components/Popover";
+import { ReportSearch } from "#components/ReportSearch.js";
+import { css } from "#styled-system/css";
+import { Box, Center, Divider, Flex, Stack, styled } from "#styled-system/jsx";
 import Badge from "@codegouvfr/react-dsfr/Badge";
+import Button from "@codegouvfr/react-dsfr/Button";
 import Footer from "@codegouvfr/react-dsfr/Footer";
 import Header from "@codegouvfr/react-dsfr/Header/Header";
 import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui";
-import { createRootRouteWithContext, Outlet, useNavigate, useRouter } from "@tanstack/react-router";
-import { TanStackRouterDevtools } from "@tanstack/router-devtools";
-import type { PropsWithChildren } from "react";
-import { useIsLoggedIn, useLogout, useUser } from "../contexts/AuthContext";
-import { Box, Flex, Stack } from "#styled-system/jsx";
+import { createRootRouteWithContext, Outlet, useRouter } from "@tanstack/react-router";
+import { useRef, type PropsWithChildren } from "react";
 import type { RouterOutputs } from "../api";
-import { css, cx } from "#styled-system/css";
-import { useIsDesktop } from "../hooks/useIsDesktop";
-import { ReportSearch } from "#components/ReportSearch.js";
+import { useIsLoggedIn, useLogout } from "../contexts/AuthContext";
 import { electric } from "../db";
+import { useIsDesktop } from "../hooks/useIsDesktop";
 
 export const Route = createRootRouteWithContext<Partial<RouterOutputs<"/api/login">>>()({
   beforeLoad: (ctx) => {
@@ -50,18 +51,14 @@ const getTitle = (pathname: string) => {
 
 const Layout = ({ children }: PropsWithChildren) => {
   const isLoggedIn = useIsLoggedIn();
-  const logout = useLogout();
 
   const isDesktop = useIsDesktop();
   const router = useRouter();
 
-  const user = useUser();
-  console.log(user);
-
   const isHome = router.latestLocation.pathname === "/";
 
   return (
-    <Flex flexDir={"column"} h="100vh">
+    <Flex pos="relative" flexDir={"column"} h="100vh">
       <Header
         brandTop={
           <>
@@ -82,36 +79,12 @@ const Layout = ({ children }: PropsWithChildren) => {
         homeLinkProps={{ title: "Compte rendu vif", to: "/" }}
         quickAccessItems={[
           ...(isLoggedIn
-            ? [
-                {
-                  iconId: "fr-icon-logout-box-r-line" as const,
-                  text: "Se déconnecter",
-                  buttonProps: { onClick: logout },
-                },
-                {
-                  iconId: "fr-icon-warning-fill" as const,
-                  text: "Supprimer les données locales",
-                  buttonProps: {
-                    onClick: () => {
-                      if (electric.isConnected) electric.disconnect();
-                      localStorage.clear();
-                      indexedDB.deleteDatabase("crvif.db");
-                      window.location.reload();
-                    },
-                  },
-                },
-              ]
+            ? [<LoggedInQuickAccessItems />]
             : [
-                {
-                  text: "Connexion",
-                  iconId: "ri-account-circle-line" as const,
-                  linkProps: { to: "/login" },
-                },
-                {
-                  text: "Inscription",
-                  iconId: "fr-icon-add-circle-line" as const,
-                  linkProps: { to: "/signup" },
-                },
+                <Stack className={actionsContainerClassName}>
+                  <Button linkProps={{ to: "/login" }}>Se connecter</Button>
+                  <Button linkProps={{ to: "/signup" }}>S'inscrire</Button>
+                </Stack>,
               ]),
         ]}
         renderSearchInput={
@@ -121,10 +94,93 @@ const Layout = ({ children }: PropsWithChildren) => {
               }
             : undefined
         }
+        classes={{
+          toolsLinks: css({ h: "100%" }),
+          bodyRow: css({
+            "& > .fr-header__tools": {
+              h: "26px",
+            },
+          }),
+        }}
       />
+
       <Box flex="1">{children}</Box>
       {/* <TanStackRouterDevtools /> */}
       <Footer accessibility="partially compliant" />
     </Flex>
   );
 };
+
+export const LoggedInQuickAccessItems = () => {
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  return (
+    <>
+      <styled.div hideBelow="lg">
+        <Popover.Root>
+          <Popover.Trigger asChild>
+            <Button ref={ref as any} priority="tertiary" iconId="fr-icon-account-circle-fill">
+              Mon compte
+            </Button>
+          </Popover.Trigger>
+          <Popover.Positioner>
+            <Popover.Content borderRadius="0">
+              <MyAccountDesktop />
+            </Popover.Content>
+          </Popover.Positioner>
+        </Popover.Root>
+      </styled.div>
+      <styled.div hideFrom="lg">
+        <MyAccountDesktop />
+      </styled.div>
+    </>
+  );
+};
+
+const actionsContainerClassName = css({
+  gap: "0",
+  "& > button": {
+    h: "48px",
+    m: 0,
+    color: "black",
+    fontSize: "14px",
+    "&:disabled": {
+      color: "text-disabled-grey",
+    },
+  },
+});
+
+const MyAccountDesktop = () => {
+  const logout = useLogout();
+  const deleteLocalData = () => {
+    if (electric.isConnected) electric.disconnect();
+    localStorage.clear();
+    indexedDB.deleteDatabase("crvif.db");
+    window.location.reload();
+  };
+
+  const actions = [
+    { text: "Partage des CR", onClick: () => {}, disabled: true },
+    { text: "Clauses départementales", onClick: () => {}, disabled: true },
+    { text: "Clauses nationales", onClick: () => {}, disabled: true },
+    { text: "Se déconnecter", onClick: logout },
+    { text: "Supprimer les données locales", onClick: deleteLocalData },
+  ];
+
+  return (
+    <Stack className={actionsContainerClassName}>
+      {actions.map(({ text, onClick, disabled }, index) => (
+        <>
+          <Button disabled={disabled} onClick={onClick}>
+            {text}
+          </Button>
+          {index < actions.length - 1 && (
+            <Center>
+              <Divider w="85%" />
+            </Center>
+          )}
+        </>
+      ))}
+    </Stack>
+  );
+};