From f2805505a1c08b98597afa3d81b6086ac188fae1 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 12 Dec 2025 10:07:15 +0100
Subject: [PATCH] Refactor FeedbackPage component: Simplify props handling and
 remove unused state and effects related to event and feedback management,
 streamlining the feedback submission process.

---
 app/feedback/[eventId]/page.tsx      | 237 +--------------------------
 components/Avatar.tsx                |   2 +
 components/BackgroundPreferences.tsx |  43 ++---
 components/FeedbackModal.tsx         |   2 +-
 4 files changed, 24 insertions(+), 260 deletions(-)

diff --git a/app/feedback/[eventId]/page.tsx b/app/feedback/[eventId]/page.tsx
index e188fd3..1e41cdb 100644
--- a/app/feedback/[eventId]/page.tsx
+++ b/app/feedback/[eventId]/page.tsx
@@ -9,241 +9,10 @@ interface FeedbackPageProps {
   };
 }
 
-export default async function FeedbackPage({ params }: FeedbackPageProps) {
+export default async function FeedbackPage({
+  params: _params,
+}: FeedbackPageProps) {
   const backgroundImage = await getBackgroundImage("home", "/got-2.jpg");
 
   return <FeedbackPageClient backgroundImage={backgroundImage} />;
 }
-
-  const [event, setEvent] = useState<Event | null>(null);
-  const [existingFeedback, setExistingFeedback] = useState<Feedback | null>(
-    null
-  );
-  const [loading, setLoading] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
-
-  const [rating, setRating] = useState(0);
-  const [comment, setComment] = useState("");
-
-  const fetchEventAndFeedback = async () => {
-    try {
-      // Récupérer l'événement
-      const eventResponse = await fetch(`/api/events/${eventId}`);
-      if (!eventResponse.ok) {
-        setError("Événement introuvable");
-        setLoading(false);
-        return;
-      }
-      const eventData = await eventResponse.json();
-      setEvent(eventData);
-
-      // Récupérer le feedback existant si disponible
-      const feedbackResponse = await fetch(`/api/feedback/${eventId}`);
-      if (feedbackResponse.ok) {
-        const feedbackData = await feedbackResponse.json();
-        if (feedbackData.feedback) {
-          setExistingFeedback(feedbackData.feedback);
-          setRating(feedbackData.feedback.rating);
-          setComment(feedbackData.feedback.comment || "");
-        }
-      }
-    } catch {
-      setError("Erreur lors du chargement des données");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (status === "unauthenticated") {
-      router.push(`/login?redirect=/feedback/${eventId}`);
-      return;
-    }
-
-    if (status === "authenticated" && eventId) {
-      fetchEventAndFeedback();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status, eventId, router]);
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setError("");
-    setSuccess(false);
-
-    if (rating === 0) {
-      setError("Veuillez sélectionner une note");
-      return;
-    }
-
-    setSubmitting(true);
-
-    try {
-      const response = await fetch(`/api/feedback/${eventId}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          rating,
-          comment: comment.trim() || null,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        setError(data.error || "Erreur lors de l&apos;enregistrement");
-        return;
-      }
-
-      setSuccess(true);
-      setExistingFeedback(data.feedback);
-
-      // Rediriger après 2 secondes
-      setTimeout(() => {
-        router.push("/events");
-      }, 2000);
-    } catch {
-      setError("Erreur lors de l&apos;enregistrement");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  if (status === "loading" || loading) {
-    return (
-      <main className="min-h-screen bg-black relative">
-        <Navigation />
-        <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
-          <div className="text-white">Chargement...</div>
-        </section>
-      </main>
-    );
-  }
-
-  if (!event) {
-    return (
-      <main className="min-h-screen bg-black relative">
-        <Navigation />
-        <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
-          <div className="text-red-400">Événement introuvable</div>
-        </section>
-      </main>
-    );
-  }
-
-  return (
-    <main className="min-h-screen bg-black relative">
-      <Navigation />
-      <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
-        {/* Background Image */}
-        <div
-          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-          style={{
-            backgroundImage: `url('${backgroundImage}')`,
-          }}
-        >
-          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
-        </div>
-
-        {/* Feedback Form */}
-        <div className="relative z-10 w-full max-w-2xl mx-auto px-8">
-          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-8 backdrop-blur-sm">
-            <h1 className="text-4xl font-gaming font-black mb-2 text-center">
-              <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
-                FEEDBACK
-              </span>
-            </h1>
-            <p className="text-gray-400 text-sm text-center mb-2">
-              {existingFeedback
-                ? "Modifier votre feedback pour"
-                : "Donnez votre avis sur"}
-            </p>
-            <p className="text-pixel-gold text-lg font-semibold text-center mb-8">
-              {event.name}
-            </p>
-
-            {success && (
-              <div className="bg-green-900/50 border border-green-500/50 text-green-400 px-4 py-3 rounded text-sm mb-6">
-                Feedback enregistré avec succès ! Redirection...
-              </div>
-            )}
-
-            {error && (
-              <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm mb-6">
-                {error}
-              </div>
-            )}
-
-            <form onSubmit={handleSubmit} className="space-y-6">
-              {/* Rating */}
-              <div>
-                <label className="block text-sm font-semibold text-gray-300 mb-4 uppercase tracking-wider">
-                  Note
-                </label>
-                <div className="flex items-center justify-center gap-2">
-                  {[1, 2, 3, 4, 5].map((star) => (
-                    <button
-                      key={star}
-                      type="button"
-                      onClick={() => setRating(star)}
-                      className={`text-4xl transition-transform hover:scale-110 ${
-                        star <= rating
-                          ? "text-pixel-gold"
-                          : "text-gray-600 hover:text-gray-500"
-                      }`}
-                      aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
-                    >
-                      ★
-                    </button>
-                  ))}
-                </div>
-                <p className="text-gray-500 text-xs text-center mt-2">
-                  {rating > 0 && `${rating}/5`}
-                </p>
-              </div>
-
-              {/* Comment */}
-              <div>
-                <label
-                  htmlFor="comment"
-                  className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
-                >
-                  Commentaire (optionnel)
-                </label>
-                <textarea
-                  id="comment"
-                  value={comment}
-                  onChange={(e) => setComment(e.target.value)}
-                  rows={6}
-                  maxLength={1000}
-                  className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition resize-none"
-                  placeholder="Partagez votre expérience, vos suggestions..."
-                />
-                <p className="text-gray-500 text-xs mt-1 text-right">
-                  {comment.length}/1000 caractères
-                </p>
-              </div>
-
-              {/* Submit Button */}
-              <button
-                type="submit"
-                disabled={submitting || rating === 0}
-                className="w-full px-6 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {submitting
-                  ? "Enregistrement..."
-                  : existingFeedback
-                    ? "Modifier le feedback"
-                    : "Envoyer le feedback"}
-              </button>
-            </form>
-          </div>
-        </div>
-      </section>
-    </main>
-  );
-}
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
index d94d07d..f39b636 100644
--- a/components/Avatar.tsx
+++ b/components/Avatar.tsx
@@ -35,6 +35,8 @@ export default function Avatar({
   useEffect(() => {
     if (src !== prevSrcRef.current) {
       prevSrcRef.current = src;
+      // Reset error when src changes to allow retry
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setAvatarError(false);
     }
   }, [src]);
diff --git a/components/BackgroundPreferences.tsx b/components/BackgroundPreferences.tsx
index e58423d..37a727d 100644
--- a/components/BackgroundPreferences.tsx
+++ b/components/BackgroundPreferences.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import ImageSelector from "@/components/ImageSelector";
 
 interface SitePreferences {
@@ -23,11 +23,6 @@ const DEFAULT_IMAGES = {
 export default function BackgroundPreferences({
   initialPreferences,
 }: BackgroundPreferencesProps) {
-  const [preferences, setPreferences] = useState<SitePreferences | null>(
-    initialPreferences
-  );
-  const [isEditing, setIsEditing] = useState(false);
-
   // Helper pour obtenir la valeur à afficher dans le formulaire
   const getFormValue = (
     dbValue: string | null | undefined,
@@ -41,25 +36,13 @@ export default function BackgroundPreferences({
     return formValue === defaultImage ? "" : formValue;
   };
 
-  const [formData, setFormData] = useState({
-    homeBackground: getFormValue(
-      initialPreferences.homeBackground,
-      DEFAULT_IMAGES.home
-    ),
-    eventsBackground: getFormValue(
-      initialPreferences.eventsBackground,
-      DEFAULT_IMAGES.events
-    ),
-    leaderboardBackground: getFormValue(
-      initialPreferences.leaderboardBackground,
-      DEFAULT_IMAGES.leaderboard
-    ),
-  });
+  const [preferences, setPreferences] = useState<SitePreferences | null>(
+    initialPreferences
+  );
+  const [isEditing, setIsEditing] = useState(false);
 
-  // Synchroniser les préférences quand initialPreferences change
-  useEffect(() => {
-    setPreferences(initialPreferences);
-    setFormData({
+  const computedFormData = useMemo(
+    () => ({
       homeBackground: getFormValue(
         initialPreferences.homeBackground,
         DEFAULT_IMAGES.home
@@ -72,7 +55,17 @@ export default function BackgroundPreferences({
         initialPreferences.leaderboardBackground,
         DEFAULT_IMAGES.leaderboard
       ),
-    });
+    }),
+    [initialPreferences]
+  );
+
+  const [formData, setFormData] = useState(computedFormData);
+
+  // Synchroniser les préférences quand initialPreferences change
+  useEffect(() => {
+    setPreferences(initialPreferences);
+    setFormData(computedFormData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialPreferences]);
 
   const handleEdit = () => {
diff --git a/components/FeedbackModal.tsx b/components/FeedbackModal.tsx
index 5b6a0a4..a1176eb 100644
--- a/components/FeedbackModal.tsx
+++ b/components/FeedbackModal.tsx
@@ -24,7 +24,7 @@ interface FeedbackModalProps {
 
 export default function FeedbackModal({
   eventId,
-  eventName,
+  eventName: _eventName,
   onClose,
 }: FeedbackModalProps) {
   const { status } = useSession();