chore: improve problematic

marmelab · Sep 18, 2024 · ffa528b · ffa528b
1 parent 9448cb6
commit ffa528b
Show file tree

Hide file tree

Showing 13 changed files with 454 additions and 330 deletions.
diff --git a/src/components/DueDateTimeInput/DueDateTimeInput.tsx b/src/components/DueDateTimeInput/DueDateTimeInput.tsx
@@ -3,11 +3,13 @@ import { useFormContext } from "react-hook-form";
 
 export const DueDateTimeInput = (props: HTMLAttributes<HTMLInputElement>) => {
   const { register } = useFormContext();
+  const futureDate = new Date();
+  futureDate.setHours(futureDate.getHours() + 24);
   return (
     <input
       type="datetime-local"
       data-testId="datetime-input"
-      defaultValue={new Date().toISOString().slice(0, 16)}
+      defaultValue={futureDate.toISOString().slice(0, 16)}
       className="input input-bordered input-lg w-full join-item"
       {...register("dueDate")}
       {...props}

diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx
@@ -5,6 +5,7 @@ import { List } from "./List";
 import { expect, userEvent, within } from "@storybook/test";
 import { HIGHLIGHT } from "@storybook/addon-highlight";
 import { useChannel } from "storybook/internal/preview-api";
+import { data } from "@/msw/data";
 
 const queryClient = new QueryClient();
 
@@ -26,7 +27,7 @@ const meta: Meta<typeof List> = {
       });
       return (
         <QueryClientProvider client={queryClient}>
-          <MswWrapper>
+          <MswWrapper data={data}>
             <Story />
           </MswWrapper>
         </QueryClientProvider>

diff --git a/src/components/Todos.stories.tsx b/src/components/Todos.stories.tsx
@@ -5,6 +5,7 @@ import { Todos } from "./Todos";
 import { MswWrapper } from "../msw/MswWrapper";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { expect, fireEvent, userEvent, within } from "@storybook/test";
+import { data } from "@/msw/data";
 
 const queryClient = new QueryClient();
 
@@ -26,7 +27,7 @@ const meta: Meta<typeof Todos> = {
       });
       return (
         <QueryClientProvider client={queryClient}>
-          <MswWrapper>
+          <MswWrapper data={data}>
             <Story />
           </MswWrapper>
         </QueryClientProvider>

diff --git a/src/msw/MswWrapper.tsx b/src/msw/MswWrapper.tsx
@@ -1,11 +1,17 @@
 import { ReactNode, useEffect, useState } from "react";
 import { initMsw } from "./initMsw";
 
-export const MswWrapper = ({ children }: { children: ReactNode }) => {
+export const MswWrapper = ({
+  data,
+  children,
+}: {
+  data: object;
+  children: ReactNode;
+}) => {
   const [render, setRender] = useState(false);
 
   useEffect(() => {
-    initMsw().then(() => {
+    initMsw(data).then(() => {
       setRender(true);
     });
   }, []);

diff --git a/src/msw/data.ts b/src/msw/data.ts
@@ -1,4 +1,4 @@
-const generateDate = (daysToAdd: number) => {
+export const generateDate = (daysToAdd: number) => {
   const now = new Date();
   now.setDate(now.getDate() + daysToAdd);
   return now;

diff --git a/src/msw/initMsw.ts b/src/msw/initMsw.ts
@@ -2,9 +2,8 @@ import { http } from "msw";
 import { setupWorker } from "msw/browser";
 //@ts-expect-error - Don't know why cannot find module 'fakerest'
 import { getMswHandler } from "fakerest";
-import { data } from "./data";
 
-export const initMsw = async () => {
+export const initMsw = async (data: object) => {
   const handler = getMswHandler({
     baseUrl: "https://localhost",
     data,

diff --git a/src/pages/Slideshow.tsx b/src/pages/Slideshow.tsx
@@ -7,11 +7,11 @@ import {
   Conclusion,
   Title,
   Why,
-  What,
-  Yata,
   HowTo,
 } from "@/slides";
+import { Component } from "@/slides/Component";
 import { Demo } from "@/slides/Demo";
+import { Problematic } from "@/slides/Problematic";
 import { Thanks } from "@/slides/Thanks";
 import { Deck, DeckProps, DefaultTemplate } from "spectacle";
 
@@ -28,15 +28,15 @@ export const Slideshow = () => (
   <Deck theme={theme} template={<DefaultTemplate />}>
     <Title />
     <Hero />
+    <Component />
+    <Problematic />
+    <HowTo />
+    <Demo />
     <B2bApp />
     <ApiPlatformAdmin />
     <ReactAdmin />
     <Why />
     <HackDay />
-    <What />
-    <Yata />
-    <HowTo />
-    <Demo />
     <Conclusion />
     <Thanks />
   </Deck>

diff --git a/src/slides/Component.tsx b/src/slides/Component.tsx
@@ -0,0 +1,160 @@
+import {
+  Appear,
+  Box,
+  CodePane,
+  Heading,
+  Notes,
+  Slide,
+  SlideLayout,
+} from "spectacle";
+import { useCountdown } from "@/components/Countdown/useCountdown";
+import { CSSProperties } from "react";
+
+const Countdown = ({ targetDate }: { targetDate: Date }) => {
+  const [days, hours, minutes, seconds] = useCountdown(targetDate);
+
+  return (
+    <div className="grid grid-flow-col gap-5 text-center auto-cols-max">
+      <div className="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+        <span className="countdown font-mono text-5xl">
+          <span style={{ "--value": days } as CSSProperties}></span>
+        </span>
+        days
+      </div>
+      <div className="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+        <span className="countdown font-mono text-5xl">
+          <span style={{ "--value": hours } as CSSProperties}></span>
+        </span>
+        hours
+      </div>
+      <div className="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+        <span className="countdown font-mono text-5xl">
+          <span style={{ "--value": minutes } as CSSProperties}></span>
+        </span>
+        min
+      </div>
+      <div className="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+        <span className="countdown font-mono text-5xl">
+          <span style={{ "--value": seconds } as CSSProperties}></span>
+        </span>
+        sec
+      </div>
+    </div>
+  );
+};
+
+export const Component = () => (
+  <>
+    <SlideLayout.Section>
+      <Heading>C'est quoi un composant ?</Heading>
+    </SlideLayout.Section>
+    <Slide>
+      <Box className="overflow-auto">
+        <CodePane language="tsx">
+          {`
+            import { CSSProperties } from "react";
+            import { useCountdown } from "./useCountdown";
+
+            const Countdown = ({ targetDate }: { targetDate: Date }) => {
+              const [days, hours, minutes, seconds] = useCountdown(targetDate);
+
+              return (
+                <div className="grid grid-flow-col gap-5 text-center auto-cols-max">
+                  <div className="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+                    <span className="countdown font-mono text-5xl">
+                      <span style={{ "--value": days } as CSSProperties}></span>
+                    </span>
+                    days
+                  </div>
+                  <div className="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+                    <span className="countdown font-mono text-5xl">
+                      <span style={{ "--value": hours } as CSSProperties}></span>
+                    </span>
+                    hours
+                  </div>
+                  <div className="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+                    <span className="countdown font-mono text-5xl">
+                      <span style={{ "--value": minutes } as CSSProperties}></span>
+                    </span>
+                    min
+                  </div>
+                  <div className="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+                    <span className="countdown font-mono text-5xl">
+                      <span style={{ "--value": seconds } as CSSProperties}></span>
+                    </span>
+                    sec
+                  </div>
+                </div>
+              );
+          };
+      `}
+        </CodePane>
+      </Box>
+      <Notes>
+        Un composant est une unité de code JavaScript qui représente une partie
+        de l’interface utilisateur (UI) d’une application. Ils se veulent
+        réutilisables et modulaires. Un composant nous permet de modifier notre
+        code à un seul endroit et de voir ces modifications propagées partout où
+        ce composant est utilisé.
+      </Notes>
+    </Slide>
+    <Slide>
+      <div className="flex justify-center flex-col items-center gap-2">
+        <Appear>
+          <div className="flex gap-2 items-center">
+            <Countdown targetDate={new Date("2024-10-10T15:45:26")} />
+            <CodePane language="tsx">
+              {`
+                <Countdown targetDate={new Date("2024-10-10T15:45:26")} />
+              `}
+            </CodePane>
+          </div>
+        </Appear>
+        <Appear>
+          <div className="flex gap-2 items-center">
+            <Countdown targetDate={new Date("2024-12-12T16:18:24")} />
+            <CodePane language="tsx">
+              {`
+                <Countdown targetDate={new Date("2024-12-12T16:18:24")} />
+              `}
+            </CodePane>
+          </div>
+        </Appear>
+        <Appear>
+          <div className="flex gap-2 items-center">
+            <Countdown targetDate={new Date("2024-11-10T15:45:10")} />
+            <CodePane language="tsx">
+              {`
+                <Countdown targetDate={new Date("2024-11-10T15:45:10")} />
+              `}
+            </CodePane>
+          </div>
+        </Appear>
+        <Appear>
+          <div className="flex gap-2 items-center">
+            <Countdown targetDate={new Date("2024-12-20T08:15:30")} />
+            <CodePane language="tsx">
+              {`
+                <Countdown targetDate={new Date("2024-12-20T08:15:30")} />
+              `}
+            </CodePane>
+          </div>
+        </Appear>
+        <Appear>
+          <div className="flex gap-2 items-center">
+            <Countdown targetDate={new Date("2024-09-20T15:00:00")} />
+            <CodePane language="tsx">
+              {`
+                <Countdown targetDate={new Date("2024-12-20T08:15:30")} />
+              `}
+            </CodePane>
+          </div>
+        </Appear>
+      </div>
+      <Notes>
+        Ici je vais pouvoir réutiliser ce composant Countdown où je le souhaite
+        dans mon application
+      </Notes>
+    </Slide>
+  </>
+);
diff --git a/src/slides/HackDay.tsx b/src/slides/HackDay.tsx
@@ -46,9 +46,7 @@ export const HackDay = () => (
         mais ce sont des jours où nous pouvons explorer une technologie,
         développer des projets, etc... Venant de l'univers PHP/Symfony, et
         fraîchement débarqué dans l'univers React, j'ai voulu m'amuser un peu
-        avec Api-platform et l'interface B2B. C'était l'occasion pour moi de
-        garder un pied dans PHP et de montrer à mes collègues que "PHP c'est
-        bien quand même !" 😄
+        avec Api-platform et l'interface B2B.
       </Notes>
     </Slide>
     <Slide backgroundImage={`url(${errorBlocked})`}>
@@ -81,8 +79,7 @@ export const HackDay = () => (
         J'ai donc créé une appli test et j'ai remarqué que le projet
         api-platform/admin n'avait pas intégré certaines mises de React-admin.
         J'ai passé beaucoup plus de temps à débogguer qu'à travailler sur mon
-        projet. La démo de mon POC devant mes collègues n'a pas eut l'effet
-        WAHOU que j'espérait.
+        projet.
       </Notes>
     </Slide>
     <Slide backgroundImage="url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExbTltOW9tbXdhYnIwMzQ4c3BsMDJsd2lkdGJwdzd6aHNodnUyNjllZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1zRgQYRbZWFXGZ1Tgw/giphy.gif)">