From 76a1efca96bd8535b500e342aea69c99b0c8c152 Mon Sep 17 00:00:00 2001
From: alexandre-kakal-akarah <alexandre.kakal@akarah.com>
Date: Tue, 25 Jun 2024 23:40:10 +0200
Subject: [PATCH] WIP: journey form

---
 package-lock.json                             |  33 ++++
 package.json                                  |   1 +
 src/app/(app)/layout.tsx                      |   2 +
 src/app/(app)/parcours/[id]/page.tsx          |  16 +-
 src/app/(app)/profil/page.tsx                 |   3 +-
 src/components/form/event/EventForm.tsx       | 163 ++++++++++++------
 .../form/event/steps/EventFormSteps.tsx       |  23 ---
 src/components/ui/button.tsx                  |  43 ++++-
 src/components/ui/slider.tsx                  |  28 +++
 src/store/eventFormStore.ts                   |   7 +-
 src/types/enums/button.ts                     |   5 +
 src/validators/EventFormSchema.ts             |  24 +--
 12 files changed, 250 insertions(+), 98 deletions(-)
 delete mode 100644 src/components/form/event/steps/EventFormSteps.tsx
 create mode 100644 src/components/ui/slider.tsx
 create mode 100644 src/types/enums/button.ts

diff --git a/package-lock.json b/package-lock.json
index 559db5d..bb187a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-radio-group": "^1.2.0",
         "@radix-ui/react-select": "^2.1.1",
+        "@radix-ui/react-slider": "^1.2.0",
         "@radix-ui/react-slot": "^1.1.0",
         "bcrypt": "^5.1.1",
         "class-variance-authority": "^0.7.0",
@@ -3412,6 +3413,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.0.tgz",
+      "integrity": "sha512-dAHCDA4/ySXROEPaRtaMV5WHL8+JB/DbtyTbJjYkY0RXmKMO2Ln8DFZhywG5/mVQ4WqHDBc8smc14yPXPqZHYA==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
diff --git a/package.json b/package.json
index 3d6fcac..3fd10c6 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index dc31b80..3657450 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Nav from "@/components/Nav";
 import { ReactParallaxProvider } from "@/providers/Providers";
+import EventForm from "@/components/form/event/EventForm";
 
 export default function AppLayout({
   children,
@@ -10,6 +11,7 @@ export default function AppLayout({
   return (
     <ReactParallaxProvider>
       {children}
+      <EventForm />
       <Nav />
     </ReactParallaxProvider>
   );
diff --git a/src/app/(app)/parcours/[id]/page.tsx b/src/app/(app)/parcours/[id]/page.tsx
index 82398bf..bbe715d 100644
--- a/src/app/(app)/parcours/[id]/page.tsx
+++ b/src/app/(app)/parcours/[id]/page.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import ParallaxImage from "@/components/clients/ParallaxImage";
 import Rating from "@/components/Rating";
 import { Icons } from "@/components/Icons";
+import { Button } from "@/components/ui/button";
+import { buttonAction } from "@/types/enums/button";
 
 type Params = { id: string };
 
@@ -9,8 +11,18 @@ const JourneyDetail = ({ params }: { params: Params }) => {
   // get journey by id
   return (
     <main className="flex min-h-screen flex-col bg-gray">
-      <ParallaxImage />
-      <div className="relative flex-1 -translate-y-4 rounded-t-2xl px-5 pb-40 pt-14">
+      <div className="relative">
+        <ParallaxImage />
+        <Button
+          action={buttonAction.SET_JOURNEY_ID}
+          ressourceId={parseInt(params.id)}
+          className="absolute right-5 top-5 border-orange bg-gray"
+        >
+          <span>Créer un évènement</span>
+          <Icons.arrowLink fill="#d8552b" className="ml-2" />
+        </Button>
+      </div>
+      <div className="relative flex-1 rounded-t-2xl px-5 pb-40 pt-14">
         <div className="absolute left-4 top-0 flex gap-[6px]">
           <div className="flex items-center rounded-b-md bg-white px-2 py-[6px]">
             <Icons.dumbbel />
diff --git a/src/app/(app)/profil/page.tsx b/src/app/(app)/profil/page.tsx
index 293e760..7dfd01b 100644
--- a/src/app/(app)/profil/page.tsx
+++ b/src/app/(app)/profil/page.tsx
@@ -3,6 +3,7 @@ import TopBar from "@/components/TopBar";
 import Link from "next/link";
 import { Icons } from "@/components/Icons";
 import { Button } from "@/components/ui/button";
+import { buttonAction } from "@/types/enums/button";
 
 const Profil = () => {
   return (
@@ -55,7 +56,7 @@ const Profil = () => {
             <span className="font-semibold">Mentions légales</span>
           </Link>
         </section>
-        <Button isSignOut variant="danger">
+        <Button action={buttonAction.SIGN_OUT} variant="danger">
           Déconnexion
         </Button>
         <Button variant="dangerFilled">Supprimer mon compte</Button>
diff --git a/src/components/form/event/EventForm.tsx b/src/components/form/event/EventForm.tsx
index 2a931e0..72b5011 100644
--- a/src/components/form/event/EventForm.tsx
+++ b/src/components/form/event/EventForm.tsx
@@ -1,40 +1,31 @@
 "use client";
 import React, { useState } from "react";
-import {
-  eventJourneySchema,
-  eventDataSchema,
-  eventFormSchema,
-} from "@/validators/EventFormSchema";
+import { eventFormSchema } from "@/validators/EventFormSchema";
 import { z } from "zod";
 import { useEventFormStore } from "@/store/eventFormStore";
 import { useForm, SubmitHandler } from "react-hook-form";
-import { Form } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
 import { Button } from "@/components/ui/button";
 import { zodResolver } from "@hookform/resolvers/zod";
-import StepCounter from "../StepCounter";
-import EventFormSteps from "./steps/EventFormSteps";
 import { Icons } from "@/components/Icons";
+import { Input } from "@/components/ui/input";
+import { Label } from "@radix-ui/react-label";
+import { Event } from "@prisma/client";
+import { Textarea } from "@/components/ui/textarea";
 
+type EventRequestBody = Omit<Event, "id" | "createdAt" | "updatedAt">;
 export type EventFormValues = z.infer<typeof eventFormSchema>;
-type FieldName = keyof EventFormValues;
-
-const firstFormStepFields = Object.keys(eventJourneySchema.shape);
-const secondFormStepFields = Object.keys(eventDataSchema.shape);
-
-const formSteps = [
-  {
-    fields: firstFormStepFields,
-  },
-  {
-    fields: secondFormStepFields,
-  },
-];
 
 const EventForm = () => {
-  const { isVisible, hideModal } = useEventFormStore();
+  const { isVisible, hideModal, journeyIdValue, setJourneyIdValue } =
+    useEventFormStore();
   const [formStatus, setFormStatus] = useState<"idle" | "errored">("idle");
-  const [currentStep, setCurrentStep] = useState(0);
-  const [dir, setDir] = useState<"ltr" | "rtl">("ltr");
 
   const form = useForm<EventFormValues>({
     resolver: zodResolver(eventFormSchema),
@@ -51,31 +42,45 @@ const EventForm = () => {
   if (!isVisible) return null;
 
   const processForm: SubmitHandler<EventFormValues> = async (data) => {
-    console.log(data);
-  };
-
-  const next = async () => {
-    const fields = formSteps[currentStep].fields;
-    const output = await form.trigger(fields as FieldName[]);
-    if (!output) return;
-    if (currentStep < formSteps.length - 1) {
-      setCurrentStep((step) => step + 1);
-      setDir("ltr");
+    const parsedData = eventFormSchema.safeParse(data);
+    if (!parsedData.success || !journeyIdValue) {
+      setFormStatus("errored");
+      return;
     }
-  };
+    try {
+      const body: EventRequestBody = {
+        journeyId: journeyIdValue,
+        authorId: 1,
+        title: data.title,
+        description: data.description,
+        numberPlayerMin: data.numberPlayerMin,
+        numberPlayerMax: data.numberPlayerMax,
+        isPrivate: data.isPrivate,
+        accessCode: data.accessCode || null,
+        endAt: data.endAt,
+        startAt: data.startAt,
+        image: "",
+      };
+      const response = await fetch("/api/events", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+      });
 
-  const prev = () => {
-    if (currentStep > 0) {
-      setCurrentStep((step) => step - 1);
-      setDir("rtl");
+      console.log(response, "create event response");
+    } catch (error) {
+      console.log(error);
     }
+    console.log(data);
   };
 
   const dismissModal = () => {
     hideModal();
-    setCurrentStep(0);
     form.reset();
     setFormStatus("idle");
+    setJourneyIdValue(null);
   };
 
   return (
@@ -89,21 +94,80 @@ const EventForm = () => {
       <Form {...form}>
         {!form.formState.isSubmitSuccessful && formStatus === "idle" && (
           <form onSubmit={form.handleSubmit(processForm)}>
-            <StepCounter step={currentStep} totalSteps={4} />
-            <EventFormSteps
-              form={form}
-              step={currentStep}
-              next={next}
-              prev={prev}
-              dir={dir}
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <>
+                      <Label htmlFor="title">Titre*</Label>
+                      <Input {...field} id="title" />
+                    </>
+                  </FormControl>
+                  <FormMessage className="text-red-500" />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <>
+                      <Label htmlFor="description">Description*</Label>
+                      <Textarea {...field} id="description" />
+                    </>
+                  </FormControl>
+                  <FormMessage className="text-red-500" />
+                </FormItem>
+              )}
             />
+            <div className="flex gap-5">
+              <FormField
+                control={form.control}
+                name="numberPlayerMin"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <>
+                        <Label htmlFor="numberPlayerMin">
+                          Nombre mininum de participants*
+                        </Label>
+                        <Input {...field} type="number" id="numberPlayerMin" />
+                      </>
+                    </FormControl>
+                    <FormMessage className="text-red-500" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="numberPlayerMax"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <>
+                        <Label htmlFor="numberPlayerMax">
+                          Nombre maximum de participants*
+                        </Label>
+                        <Input {...field} type="number" id="numberPlayerMax" />
+                      </>
+                    </FormControl>
+                    <FormMessage className="text-red-500" />
+                  </FormItem>
+                )}
+              />
+            </div>
           </form>
         )}
 
         {form.formState.isSubmitSuccessful && formStatus !== "errored" && (
           <div className="mt-[10vh]">
             <h2 className="mb-8 text-4xl font-bold">
-              Votre parcours a bien été enregistré !
+              Votre évènement a bien été enregistré !
             </h2>
             <p className="mb-6">
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
@@ -127,7 +191,8 @@ const EventForm = () => {
               Oups, une erreur est survenue...
             </h2>
             <p className="mb-6">
-              Votre parcours n'a pas pu être créé, veuillez réessayer plus tard.
+              Votre évènement n'a pas pu être créé, veuillez réessayer plus
+              tard.
             </p>
             <Button type="button" onClick={dismissModal}>
               <span>Fermer</span>
diff --git a/src/components/form/event/steps/EventFormSteps.tsx b/src/components/form/event/steps/EventFormSteps.tsx
deleted file mode 100644
index ca7b81e..0000000
--- a/src/components/form/event/steps/EventFormSteps.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { UseFormReturn } from "react-hook-form";
-import { EventFormValues } from "../EventForm";
-
-type EventFormStepsProps = {
-  step: number;
-  next: () => Promise<void>;
-  prev: () => void;
-  form: UseFormReturn<EventFormValues>;
-  dir: "ltr" | "rtl";
-};
-
-const EventFormSteps = ({
-  step,
-  next,
-  prev,
-  form,
-  dir,
-}: EventFormStepsProps) => {
-  return <div>EventFormSteps</div>;
-};
-
-export default EventFormSteps;
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index d388d11..a644abe 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,8 +3,11 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { signOut } from "next-auth/react";
-
+import { useEventFormStore } from "@/store/eventFormStore";
 import { cn } from "@/lib/tailwindUtils";
+import { buttonAction } from "@/types/enums/button";
+import { BadRequestException } from "@/types/exceptions";
+import { handleException } from "@/utils/errorHandlerUtils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium uppercase  disabled:pointer-events-none disabled:opacity-50",
@@ -36,25 +39,55 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
-  isSignOut?: boolean;
+  action?: buttonAction;
+  ressourceId?: number;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    { className, variant, size, asChild = false, isSignOut = false, ...props },
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      action,
+      ressourceId,
+      ...props
+    },
     ref,
   ) => {
     const Comp = asChild ? Slot : "button";
+
+    const { setJourneyIdValue, showModal } = useEventFormStore();
+    const handleAction = async () => {
+      try {
+        switch (action) {
+          case buttonAction.SIGN_OUT:
+            await signOut();
+            break;
+          case buttonAction.SET_JOURNEY_ID:
+            if (!ressourceId) throw new BadRequestException("id is required");
+            setJourneyIdValue(ressourceId);
+            showModal();
+            break;
+          default:
+            break;
+        }
+      } catch (error) {
+        handleException(error);
+      }
+    };
+
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
         onClick={
-          isSignOut
+          action
             ? async (e) => {
                 e.preventDefault();
-                await signOut();
+                await handleAction();
               }
             : props.onClick
         }
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 0000000..883dbad
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/tailwindUtils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="bg-primary absolute h-full" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="border-primary block size-5 rounded-full border-2 bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/src/store/eventFormStore.ts b/src/store/eventFormStore.ts
index 4b15769..c8b06c1 100644
--- a/src/store/eventFormStore.ts
+++ b/src/store/eventFormStore.ts
@@ -4,10 +4,12 @@ interface EventFormStore {
   isVisible: boolean;
   showModal: () => void;
   hideModal: () => void;
+  journeyIdValue: number | null;
+  setJourneyIdValue: (value: number | null) => void;
 }
 
 export const useEventFormStore = create<EventFormStore>((set) => ({
-  isVisible: false,
+  isVisible: true,
   showModal: () => {
     const body = document.querySelector("body");
     body?.classList.add("overflow-hidden");
@@ -18,5 +20,6 @@ export const useEventFormStore = create<EventFormStore>((set) => ({
     body?.classList.remove("overflow-hidden");
     set({ isVisible: false });
   },
-  bottomSheetVisible: false,
+  journeyIdValue: null,
+  setJourneyIdValue: (value) => set({ journeyIdValue: value }),
 }));
diff --git a/src/types/enums/button.ts b/src/types/enums/button.ts
new file mode 100644
index 0000000..914e061
--- /dev/null
+++ b/src/types/enums/button.ts
@@ -0,0 +1,5 @@
+/* eslint-disable no-unused-vars */
+export enum buttonAction {
+  SIGN_OUT = "SIGN_OUT",
+  SET_JOURNEY_ID = "SET_JOURNEY_ID",
+}
diff --git a/src/validators/EventFormSchema.ts b/src/validators/EventFormSchema.ts
index d2cffc2..4cd4081 100644
--- a/src/validators/EventFormSchema.ts
+++ b/src/validators/EventFormSchema.ts
@@ -1,15 +1,6 @@
 import { z } from "zod";
 
-export const eventJourneySchema = z.object({
-  journeyId: z.preprocess(
-    (value) => Number(value),
-    z.number({
-      required_error: "Ce champ est requis",
-    }),
-  ),
-});
-
-export const eventDataSchema = z.object({
+export const eventFormSchema = z.object({
   title: z.string({
     required_error: "Ce champ est requis",
   }),
@@ -32,9 +23,15 @@ export const eventDataSchema = z.object({
     }),
   isPrivate: z.boolean(),
   accessCode: z.string().optional(),
+  startAt: z.date({
+    required_error: "Ce champ est requis",
+  }),
+  endAt: z.date({
+    required_error: "Ce champ est requis",
+  }),
 });
 
-eventDataSchema.superRefine((data, ctx) => {
+eventFormSchema.superRefine((data, ctx) => {
   if (data.numberPlayerMax <= data.numberPlayerMin) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
@@ -52,8 +49,3 @@ eventDataSchema.superRefine((data, ctx) => {
     });
   }
 });
-
-export const eventFormSchema = z.object({
-  ...eventJourneySchema.shape,
-  ...eventDataSchema.shape,
-});