wip: desktop drawer mobile modal ^^

betagouv · Jun 6, 2024 · e3ceab2 · e3ceab2
1 parent 030f2ea
commit e3ceab2
Show file tree

Hide file tree

Showing 10 changed files with 369 additions and 104 deletions.
diff --git a/packages/backend/src/routes/pdfRoutes.tsx b/packages/backend/src/routes/pdfRoutes.tsx
@@ -29,7 +29,9 @@ export const pdfPlugin: FastifyPluginAsyncTypebox = async (fastify, _) => {
     const recipients = request.body.recipients.split(",").map((r) => r.trim());
     if (!recipients.includes(userMail)) recipients.push(userMail);
 
-    await sendReportMail({ recipients: recipients.join(","), pdfBuffer: pdf });
+    const report = await db.report.findUnique({ where: { id: reportId } });
+
+    await sendReportMail({ recipients: recipients.join(","), pdfBuffer: pdf, reportTitle: report?.title ?? undefined });
 
     return url;
   });

diff --git a/packages/backend/src/services/userService.ts b/packages/backend/src/services/userService.ts
@@ -147,8 +147,7 @@ export class UserService {
   }
 
   async verifyTokenAndRefreshIfNeeded(token: string, refreshToken?: string) {
-    debug("token", token);
-    debug("refreshToken", refreshToken);
+    debug("refreshing token", token?.slice(0, 6), refreshToken?.slice(0, 6));
     try {
       this.validateToken(token);
       const rToken = refreshToken ?? this.generateRefreshToken(await this.getUserByEmail(token));

diff --git a/packages/frontend/panda.config.ts b/packages/frontend/panda.config.ts
@@ -20,6 +20,11 @@ export default defineConfig({
   presets: ["@pandacss/preset-base", "@park-ui/panda-preset", dsfrPreset],
 
   // Useful for theme customization
+  globalCss: {
+    "#fr-header-mobile-overlay-button-close": {
+      mt: "10px !important",
+    },
+  },
   theme: {
     extend: {
       slotRecipes: {

diff --git a/packages/frontend/src/components/Drawer.tsx b/packages/frontend/src/components/Drawer.tsx
@@ -0,0 +1,54 @@
+import type { Assign, HTMLArkProps } from "@ark-ui/react";
+import { Dialog as ArkDrawer } from "@ark-ui/react/dialog";
+import { ark } from "@ark-ui/react/factory";
+import { type DrawerVariantProps, drawer } from "#styled-system/recipes";
+import type { JsxStyleProps } from "#styled-system/types";
+import { createStyleContext } from "./createStyleContext";
+
+const { withRootProvider, withContext } = createStyleContext(drawer);
+
+export interface RootProps extends ArkDrawer.RootProps, DrawerVariantProps {}
+export const Root = withRootProvider<RootProps>(ArkDrawer.Root);
+
+export const Backdrop = withContext<HTMLDivElement, Assign<JsxStyleProps, ArkDrawer.BackdropProps>>(
+  ArkDrawer.Backdrop,
+  "backdrop",
+);
+
+export const Body = withContext<HTMLDivElement, Assign<JsxStyleProps, HTMLArkProps<"div">>>(ark.div, "body");
+
+export const CloseTrigger = withContext<HTMLButtonElement, Assign<JsxStyleProps, ArkDrawer.CloseTriggerProps>>(
+  ArkDrawer.CloseTrigger,
+  "closeTrigger",
+);
+
+export const Content = withContext<HTMLDivElement, Assign<JsxStyleProps, ArkDrawer.ContentProps>>(
+  ArkDrawer.Content,
+  "content",
+);
+
+export const Description = withContext<HTMLParagraphElement, Assign<JsxStyleProps, ArkDrawer.DescriptionProps>>(
+  ArkDrawer.Description,
+  "description",
+);
+
+export const Footer = withContext<HTMLDivElement, Assign<JsxStyleProps, HTMLArkProps<"div">>>(ark.div, "footer");
+
+export const Header = withContext<HTMLDivElement, Assign<JsxStyleProps, HTMLArkProps<"div">>>(ark.div, "header");
+
+export const Positioner = withContext<HTMLDivElement, Assign<JsxStyleProps, ArkDrawer.PositionerProps>>(
+  ArkDrawer.Positioner,
+  "positioner",
+);
+
+export const Title = withContext<HTMLHeadingElement, Assign<JsxStyleProps, ArkDrawer.TitleProps>>(
+  ArkDrawer.Title,
+  "title",
+);
+
+export const Trigger = withContext<HTMLButtonElement, Assign<JsxStyleProps, ArkDrawer.TriggerProps>>(
+  ArkDrawer.Trigger,
+  "trigger",
+);
+
+export { DialogContext as Context, type DialogContextProps as ContextProps } from "@ark-ui/react/dialog";
diff --git a/packages/frontend/src/features/MyAccountMenu.tsx b/packages/frontend/src/features/MyAccountMenu.tsx
diff --git a/packages/frontend/src/features/menu/Menu.tsx b/packages/frontend/src/features/menu/Menu.tsx
@@ -0,0 +1,117 @@
+import { Flex } from "#styled-system/jsx";
+import { createPortal } from "react-dom";
+import { MyAccountMenu, MyAccountMenuActions, menuModal } from "./MyAccountMenu";
+import { css } from "#styled-system/css";
+import { drawerMenu } from "./MenuDrawer";
+import { useEffect } from "react";
+
+export const Menu = ({ headerRef }: { headerRef: React.RefObject<HTMLElement> }) => {
+  const headerBody = headerRef.current?.getElementsByClassName("fr-header__body-row")?.[0];
+
+  useEffect(() => {
+    setTimeout(() => {
+      drawerMenu.open();
+    }, 1000);
+  }, []);
+
+  if (!headerBody) return null;
+
+  return (
+    <>
+      <drawerMenu.Component
+        title=""
+        className={css({
+          display: "flex",
+          justifyContent: "flex-start !important",
+          alignItems: "flex-end !important",
+          width: "100%",
+          height: "100%",
+          "& .fr-container": {
+            maxWidth: "initial !important",
+            height: "100%",
+            maxHeight: "100%",
+            p: 0,
+          },
+          "& .fr-grid-row": {
+            height: "100%",
+            maxHeight: "100%",
+            p: 0,
+          },
+          "& .fr-col-12": {
+            flex: 1,
+            height: "100%",
+            maxHeight: "100%",
+            p: 0,
+          },
+          "& .fr-modal__body": {
+            height: "100%",
+            maxHeight: "100vh !important",
+            p: 0,
+          },
+          "&::before, &::after": {
+            display: "none",
+          },
+        })}
+      >
+        Salut à tous
+      </drawerMenu.Component>
+      <menuModal.Component
+        className={css({
+          hideFrom: "lg",
+          "& .fr-container": {
+            width: "100%",
+            maxWidth: "100%",
+            height: "100%",
+            maxHeight: "100%",
+            p: 0,
+          },
+          "& .fr-grid-row": {
+            width: "100%",
+            maxWidth: "100%",
+            height: "100%",
+            maxHeight: "100%",
+            p: 0,
+          },
+          "& .fr-col-12": {
+            flex: 1,
+            width: "100%",
+            maxWidth: "100%",
+            height: "100%",
+            maxHeight: "100%",
+            p: 0,
+          },
+          "& .fr-modal__body": {
+            width: { base: "100%", lg: "600px" },
+            maxWidth: "100%",
+            height: "100%",
+            maxHeight: "100vh !important",
+            p: 0,
+          },
+
+          "&::before": {
+            display: "none",
+          },
+          "&::after": {
+            display: "none",
+          },
+        })}
+        title=""
+      >
+        <MyAccountMenuActions />
+      </menuModal.Component>
+      {createPortal(
+        <Flex
+          zIndex="800"
+          position="absolute"
+          top={{ base: "8px", lg: "0" }}
+          right={{ base: "16px", lg: "0" }}
+          alignItems={{ base: "unset", lg: "center" }}
+          h="100%"
+        >
+          <MyAccountMenu />
+        </Flex>,
+        headerBody,
+      )}
+    </>
+  );
+};
diff --git a/packages/frontend/src/features/menu/MenuDrawer.tsx b/packages/frontend/src/features/menu/MenuDrawer.tsx
@@ -0,0 +1,3 @@
+import { createModal } from "@codegouvfr/react-dsfr/Modal";
+
+export const drawerMenu = createModal({ isOpenedByDefault: false, id: "drawer-menu" });
diff --git a/packages/frontend/src/features/menu/MenuModal.tsx b/packages/frontend/src/features/menu/MenuModal.tsx