feat: add banner variants

betagouv · May 1, 2024 · 8ef23d4 · 8ef23d4
1 parent f32c730
commit 8ef23d4
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 16 deletions.
diff --git a/packages/backend/src/routes/userRoutes.ts b/packages/backend/src/routes/userRoutes.ts
@@ -23,7 +23,7 @@ export const createUserTSchema = {
   response: { 200: userAndTokenTSchema },
 };
 export const loginTSchema = {
-  body: Type.Pick(userInput, ["email", "password", "udap"]),
+  body: Type.Pick(userInput, ["email", "password"]),
   response: { 200: userAndTokenTSchema },
 };
 export const verifyTokenTSchema = {

diff --git a/packages/frontend/panda.config.ts b/packages/frontend/panda.config.ts
@@ -31,7 +31,12 @@ export default defineConfig({
           "100%": { transform: "rotate(360deg)" },
         },
       },
-      tokens: {},
+      tokens: {
+        colors: {
+          "yellow-waiting": { value: "#FEECC2" },
+          "red-offline": { value: "#FFE9E6" },
+        },
+      },
       semanticTokens: {},
     },
   },

diff --git a/packages/frontend/src/components/Banner.tsx b/packages/frontend/src/components/Banner.tsx
@@ -1,5 +1,19 @@
 import { type CenterProps, Center } from "#styled-system/jsx";
+import { cva } from "#styled-system/css";
+import { SyncFormStatus } from "./SyncForm";
 
-export const Banner = (props: CenterProps) => {
-  return <Center flexDir="column" bgColor="background-open-blue-france" {...props} />;
+export const Banner = ({ status, ...props }: CenterProps & { status: SyncFormStatus }) => {
+  return <Center className={banner({ status })} flexDir="column" bgColor="background-open-blue-france" {...props} />;
 };
+
+const banner = cva({
+  base: { bgColor: "background-open-blue-france" },
+  variants: {
+    status: {
+      offline: { bgColor: "red-offline" },
+      pending: { bgColor: "yellow-waiting" },
+      saved: {},
+      saving: {},
+    },
+  },
+});
diff --git a/packages/frontend/src/components/SyncForm.tsx b/packages/frontend/src/components/SyncForm.tsx
@@ -8,7 +8,7 @@ import Button from "@codegouvfr/react-dsfr/Button";
 import { styled } from "#styled-system/jsx";
 import { fr } from "@codegouvfr/react-dsfr";
 import { css } from "#styled-system/css";
-
+import { useNetworkState } from "react-use";
 export function SyncFormBanner<TFieldValues extends FieldValues>({
   form,
   baseObject,
@@ -25,9 +25,12 @@ export function SyncFormBanner<TFieldValues extends FieldValues>({
 
   const router = useRouter();
   const goBack = () => router.history.back();
+  const { online } = useNetworkState();
+
+  const status = !online ? "offline" : Object.keys(diff).length ? "pending" : "saved";
 
   return (
-    <Banner display="flex" flexDirection="row" justifyContent="space-between" w="100%" h="70px">
+    <Banner status={status} display="flex" flexDirection="row" justifyContent="space-between" w="100%" h="70px">
       {/* @ts-ignore dsfr buttons props must have children */}
       <Button
         className={css({ color: "black", _hover: { bgColor: "transparent" } })}
@@ -38,25 +41,28 @@ export function SyncFormBanner<TFieldValues extends FieldValues>({
       />
       <styled.div mr="10px" color="black" textTransform="uppercase" fontSize="sm" fontWeight="500">
         <styled.span
-          className={fr.cx("fr-icon-refresh-line")}
+          className={fr.cx("fr-icon-wifi-line")}
           aria-hidden={true}
           mr="6px"
           _before={{
             animation: syncMutation.isLoading ? "spin 1s linear infinite" : undefined,
           }}
         />
-        {syncMutation.isLoading
-          ? "Sauvegarde"
-          : syncMutation.isError
-            ? "Erreur"
-            : syncMutation.isSuccess
-              ? "Sauvegardé en ligne"
-              : "En attente"}
+        {messages[status]}
       </styled.div>
     </Banner>
   );
 }
 
+const messages: Record<SyncFormStatus, string> = {
+  offline: "Hors ligne",
+  pending: "En attente",
+  saved: "Connecté(e)",
+  saving: "Sauvegarde",
+};
+
+export type SyncFormStatus = "offline" | "pending" | "saved" | "saving";
+
 async function syncObject(id: string, diff: Record<string, any>) {
   if (!Object.keys(diff).length) return;
 

diff --git a/packages/frontend/src/contexts/AuthContext.tsx b/packages/frontend/src/contexts/AuthContext.tsx
@@ -23,8 +23,8 @@ export const AuthProvider = ({ children }: PropsWithChildren) => {
       await electric.connect(data.token!);
 
       await electric.db.clause.sync();
-      await electric.db.user.sync();
-      await electric.db.report.sync({ include: { user: true } });
+      await electric.db.user.sync({ where: { email: data?.user?.email } });
+      await electric.db.report.sync();
       await electric.db.chip.sync();
 
       return true;

diff --git a/packages/frontend/src/routes/export.$reportId.tsx b/packages/frontend/src/routes/export.$reportId.tsx
@@ -26,6 +26,7 @@ const WithReport = ({ report }: { report: Report }) => {
   return (
     <Flex direction="column">
       <TextEditor defaultValue={value} onChange={(e) => setValue(e)} />
+
       <PDFViewer>
         <Document>
           <Page size="A4" style={styles.page}>

diff --git a/packages/frontend/src/routes/index.tsx b/packages/frontend/src/routes/index.tsx
@@ -10,6 +10,7 @@ import { Tabs } from "../components/Tabs";
 import { useUser } from "../contexts/AuthContext";
 import { db } from "../db";
 import { AllReports, MyReports } from "../features/ReportList";
+import { useLiveQuery } from "electric-sql/react";
 
 const Index = () => {
   const user = useUser()!;
@@ -19,6 +20,8 @@ const Index = () => {
     { id: "udap", label: "UDAP" },
   ];
 
+  console.log("a", useLiveQuery(db.user.liveMany()));
+  console.log("b", useLiveQuery(db.report.liveMany({ include: { user: true } })));
   const createReportMutation = useMutation({
     mutationFn: () =>
       db.report.create({