pass form data to server component

src/app/[locale]/(main)/components/Calendar.tsx

@@ -4,12 +4,9 @@ import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import { Calendar } from "react-date-range";
 import "react-date-range/dist/styles.css";
-// main style file
 import "react-date-range/dist/theme/default.css";
 import { Control, useController } from "react-hook-form";
 
-// theme css file
-
 interface DateCalendarProps {
   control: Control<any>;
   name: string;

src/app/[locale]/(main)/match/MatchForm.tsx

@@ -1,49 +1,54 @@
 "use client";
 
+import { useState } from "react";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import Calendar from "@/app/[locale]/(main)/components/Calendar";
 import TeamSelection from "@/app/[locale]/(main)/match/components/TeamSelection";
+import { Button } from "@/components/Button";
+import InfoMessage, { InfoMessageType } from "@/components/InfoMessage";
 import { TextField } from "@/components/form/TextField";
 import { matchSchema } from "@/schemas";
+import { generateFeuilleDeMatch } from "@/server/generateFeuilleDeMatch";
 import { Club } from "@/types";
 
-type MatchFormValues = z.infer<typeof matchSchema>;
+export type MatchFormValues = z.infer<typeof matchSchema>;
 
 interface IProps {
   clubs: Club[];
 }
 
 const MatchForm = ({ clubs }: IProps) => {
+  const [responseMessage, setResponseMessage] = useState<{
+    type: InfoMessageType;
+    message: string;
+  } | null>(null);
+
   const form = useForm<MatchFormValues>({
-    // resolver: zodResolver(addTournamentSchema),
+    resolver: zodResolver(matchSchema),
-    // defaultValues: {
-    //   tournament: {
-    //     norm_tournament: false,
-    //     coordinates: [47.0844, 2.3964],
-    //   },
-    // },
   });
 
   const onSubmit = async (data: MatchFormValues) => {
+    console.log("submitting form with data: ", data);
     try {
-      console.log(data);
+      await generateFeuilleDeMatch(data);
-      // await addTournament(data);
+
-      // setResponseMessage({
+      setResponseMessage({
-      //   type: "success",
+        type: "success",
-      //   message: t("success"),
+        message: "generated feuille de match",
-      // });
+      });
 
       // form.reset(); // do not reset the form
     } catch (err: unknown) {
       console.log(err);
-      //
+
-      // setResponseMessage({
+      setResponseMessage({
-      //   type: "error",
+        type: "error",
-      //   message: t("failure"),
+        message: "error creating feuille de match",
-      // });
+      });
     }
   };
 
@@ -98,7 +103,24 @@ const MatchForm = ({ clubs }: IProps) => {
             className="col-span-3 space-y-4"
           />
         </div>
-        <button type="submit">Submit</button>
+
+        <div className="flex gap-4">
+          <Button disabled={form.formState.isSubmitting} type="submit">
+            {form.formState.isSubmitting ? "Generating" : "Generate"}
+          </Button>
+
+          <Button onClick={() => form.reset()} type="button" intent="secondary">
+            {"Clear"}
+          </Button>
+        </div>
+
+        {responseMessage && (
+          <InfoMessage
+            message={responseMessage.message}
+            type={responseMessage.type}
+            onDismiss={() => setResponseMessage(null)}
+          />
+        )}
       </form>
     </FormProvider>
   );

src/app/[locale]/(main)/match/components/TeamSelection.tsx

@@ -87,7 +87,6 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
         {label}
       </label>
 
-      {/* Team/Club Select */}
       <Controller
         name={name}
         control={control}
@@ -110,13 +109,12 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
         )}
       />
 
-      {/* Dynamic Player List */}
       <div className="space-y-3">
         {fields.map((field, index) => (
           <div key={field.id} className="flex items-center gap-2">
             <div className="flex-1">
               <Controller
-                name={`${name}_players.${index}.playerId`} // Saves as { playerId: "nrFFE_123" }
+                name={`${name}_players.${index}`} // Saves as { playerId: "nrFFE_123" }
                 control={control}
                 render={({ field: selectField }) => (
                   <Select
@@ -126,7 +124,6 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
                     isSearchable
                     placeholder="Search player..."
                     onChange={(option) => selectField.onChange(option?.value)}
-                    // Compare values using strict equality since value is now a string (nrFFE)
                     value={playerOptions.find(
                       (op) => op.value === selectField.value,
                     )}
@@ -149,14 +146,13 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
         ))}
       </div>
 
-      {/* Add Button */}
       {isLoading ? (
         <p className="text-sm text-gray-500">Loading players...</p>
       ) : (
         teamsPlayers[name]?.length > 0 && (
           <button
-            type="button" // Important to prevent form submission
+            type="button"
-            onClick={() => append({ playerId: "" })} // Add new empty row to field array
+            onClick={() => append({ nrFFE: "", name: "", elo: 0 })}
             className="flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-800"
           >
             <FaPlus />

src/schemas.ts

@@ -72,7 +72,7 @@ const matchPlayerSchema = z.object({
 
 export const matchSchema = z.object({
   competition: z.string(),
-  date: z.string(),
+  date: z.date(),
   ronde: z.number(),
   lieu: z.string(),
   team1: z.string(),

src/server/generateFeuilleDeMatch.ts

@@ -0,0 +1,15 @@
+"use server";
+
+import { matchSchema } from "@/schemas";
+import { actionClient } from "@/server/safeAction";
+
+export const generateFeuilleDeMatch = actionClient
+  .schema(matchSchema)
+  .action(async ({ parsedInput }) => {
+    try {
+      console.log("generateFeuilleDeMatch", parsedInput);
+    } catch (error) {
+      console.log(error);
+      throw error;
+    }
+  });