#6 Ajouter l'url au forulaire + contraintes d'unicité (#25)

Author: AntoineQuesnel

bun.lockb

@@ -12,8 +12,9 @@
     }
   },
   "webcamCreation": {
-    "title": "Add a new Webcam",
+    "title": "Submission form for a new webcam",
     "nameLabel": "Webcam name",
+    "urlLabel": "Webcam URL",
     "angleOfViewLabel": "Angle of view (in degrees)",
     "latitudeLabel": "Latitude",
     "longitudeLabel": "Longitude",
@@ -22,7 +23,10 @@
     "submitButton": "Add Webcam",
     "successMessage": "Webcam successfully created",
     "errorMessage": {
-      "nameRequired": "The name is required",
+      "fieldRequired": "This field is required",
+      "nameNotUnique": "This webcam name is already used",
+      "urlNotUnique": "This webcam URL has already been registered",
+      "urlInvalid": "The URL is invalid",
       "angleOfViewPositive": "The angle of view must be positive"
     }
   }

messages/en/webcams.json

@@ -12,8 +12,9 @@
     }
   },
   "webcamCreation": {
-    "title": "Ajouter une nouvelle Webcam",
+    "title": "Formulaire de proposition de webcam",
     "nameLabel": "Nom de la webcam",
+    "urlLabel": "URL de la webcam",
     "angleOfViewLabel": "Angle de vue (en degrés)",
     "latitudeLabel": "Latitude",
     "longitudeLabel": "Longitude",
@@ -22,7 +23,10 @@
     "submitButton": "Ajouter la Webcam",
     "successMessage": "Webcam créée avec succès",
     "errorMessage": {
-      "nameRequired": "Le nom est requis",
+      "fieldRequired": "Ce champ est requis",
+      "nameNotUnique": "Ce nom de webcam est déjà utilisé",
+      "urlNotUnique": "Cette URL de webcam a déjà été enregistrée",
+      "urlInvalid": "L'URL est invalide",
       "angleOfViewPositive": "L'angle de vue doit être positif"
     }
   }

messages/fr/webcams.json

@@ -61,7 +61,7 @@
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.21.0",
     "ws": "^8.17.0",
-    "zod": "^3.23.8"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.7.1",

package.json

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[url]` on the table `Webcam` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "Webcam" ADD COLUMN     "url" TEXT;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Webcam_url_key" ON "Webcam"("url");

prisma/migrations/20260206102802_add_webcam_url/migration.sql

@@ -16,6 +16,7 @@ datasource db {
 model Webcam {
   id                  String            @id @default(cuid())
   name                String            @unique
+  url                 String?           @unique
   angleOfView         Float
   elevation           Int?
   latitude            Float

prisma/schema.prisma

@@ -1,6 +1,10 @@
 "use server";
 
 import { saveNewWebcam } from "@/features/webcams/api/createWebcam";
+import {
+  isWebcamNameUnique,
+  isWebcamUrlUnique,
+} from "@/features/webcams/api/newWebcamChecks";
 
 import { CreateWebcamInputs, createWebcamSchema } from "./schema";
 import { WebcamFormState } from "./types";
@@ -12,10 +16,21 @@ export async function createWebcam(
   const rawData = Object.fromEntries(formData.entries());
 
   const parsed = createWebcamSchema.safeParse(rawData);
+  const errors: Record<string, string[]> =
+    parsed.error?.flatten().fieldErrors ?? {};
 
-  if (!parsed.success) {
+  if (!(await isWebcamNameUnique(formData.get("name") as string))) {
+    errors.name = ["webcamCreation.errorMessage.nameNotUnique"];
+  }
+
+  if (!(await isWebcamUrlUnique(formData.get("url") as string))) {
+    errors.url = ["webcamCreation.errorMessage.urlNotUnique"];
+  }
+
+  if (!parsed.success || Object.keys(errors).length > 0) {
     return {
-      errors: parsed.error.flatten().fieldErrors,
+      createWebcamForm: formData,
+      errors: errors,
     };
   }
 

src/app/[locale]/webcams/action.ts

@@ -1,7 +1,9 @@
 import { z } from "zod";
 
 export const createWebcamSchema = z.object({
-  name: z.string().min(1, "webcamCreation.errorMessage.nameRequired"),
+  name: z.string().min(1, "webcamCreation.errorMessage.fieldRequired"),
+
+  url: z.url("webcamCreation.errorMessage.urlInvalid"),
 
   angleOfView: z.coerce
     .number()

src/app/[locale]/webcams/schema.ts

@@ -1,4 +1,5 @@
 export type WebcamFormState = {
   success?: boolean;
+  createWebcamForm?: FormData;
   errors?: Record<string, string[]>;
 };

src/app/[locale]/webcams/types.ts

@@ -47,6 +47,7 @@ export default function WebcamForm({ action }: Props) {
             )}
 
             <TextField
+              defaultValue={state.createWebcamForm?.get("name") ?? ""}
               error={!!state.errors?.name}
               helperText={
                 state.errors?.name?.[0] ? t(state.errors.name[0]) : undefined
@@ -56,6 +57,17 @@ export default function WebcamForm({ action }: Props) {
             />
 
             <TextField
+              defaultValue={state.createWebcamForm?.get("url") ?? ""}
+              error={!!state.errors?.url}
+              helperText={
+                state.errors?.url?.[0] ? t(state.errors.url[0]) : undefined
+              }
+              label={t("webcamCreation.urlLabel")}
+              name="url"
+            />
+
+            <TextField
+              defaultValue={state.createWebcamForm?.get("angleOfView") ?? ""}
               error={!!state.errors?.angleOfView}
               helperText={
                 state.errors?.angleOfView?.[0]
@@ -68,6 +80,7 @@ export default function WebcamForm({ action }: Props) {
             />
 
             <TextField
+              defaultValue={state.createWebcamForm?.get("latitude") ?? ""}
               error={!!state.errors?.latitude}
               helperText={state.errors?.latitude?.[0]}
               label={t("webcamCreation.latitudeLabel")}
@@ -76,6 +89,7 @@ export default function WebcamForm({ action }: Props) {
             />
 
             <TextField
+              defaultValue={state.createWebcamForm?.get("longitude") ?? ""}
               error={!!state.errors?.longitude}
               helperText={state.errors?.longitude?.[0]}
               label={t("webcamCreation.longitudeLabel")}
@@ -84,6 +98,7 @@ export default function WebcamForm({ action }: Props) {
             />
 
             <TextField
+              defaultValue={state.createWebcamForm?.get("elevation") ?? ""}
               error={!!state.errors?.elevation}
               helperText={state.errors?.elevation?.[0]}
               label={t("webcamCreation.elevationLabel")}
@@ -92,6 +107,7 @@ export default function WebcamForm({ action }: Props) {
             />
 
             <TextField
+              defaultValue={state.createWebcamForm?.get("refreshSeconds") ?? ""}
               error={!!state.errors?.refreshSeconds}
               helperText={state.errors?.refreshSeconds?.[0]}
               label={t("webcamCreation.refreshSecondsLabel")}