Refactor HousesPage and HouseManagement components: Introduce TypeScript types for house and invitation data structures to enhance type safety. Update data serialization logic for improved clarity and maintainability. Refactor UI components for better readability and consistency, including adjustments to conditional rendering and styling in HouseManagement. Optimize fetch logic in HousesSection with useCallback for performance improvements.

app/houses/page.tsx

@@ -5,9 +5,41 @@ import NavigationWrapper from "@/components/navigation/NavigationWrapper";
 import HousesSection from "@/components/houses/HousesSection";
 import { houseService } from "@/services/houses/house.service";
 import { prisma } from "@/services/database";
+import type { House, HouseMembership, HouseInvitation } from "@/prisma/generated/prisma/client";
 
 export const dynamic = "force-dynamic";
 
+// Types pour les données sérialisées
+type HouseWithRelations = House & {
+  creator?: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  } | null;
+  creatorId?: string;
+  memberships?: Array<HouseMembership & {
+    user: {
+      id: string;
+      username: string;
+      avatar: string | null;
+      score: number | null;
+      level: number | null;
+    };
+  }>;
+};
+
+type InvitationWithRelations = HouseInvitation & {
+  house: {
+    id: string;
+    name: string;
+  };
+  inviter: {
+    id: string;
+    username: string;
+    avatar: string | null;
+  };
+};
+
 export default async function HousesPage() {
   const session = await auth();
 
@@ -90,12 +122,12 @@ export default async function HousesPage() {
   ]);
 
   // Sérialiser les données pour le client
-  const houses = (housesData as any[]).map((house: any) => ({
+  const houses = (housesData as HouseWithRelations[]).map((house: HouseWithRelations) => ({
     id: house.id,
     name: house.name,
     description: house.description,
-    creator: house.creator || { id: house.creatorId, username: "Unknown", avatar: null },
+    creator: house.creator || { id: house.creatorId || "", username: "Unknown", avatar: null },
-    memberships: (house.memberships || []).map((m: any) => ({
+    memberships: (house.memberships || []).map((m) => ({
       id: m.id,
       role: m.role,
       user: {
@@ -113,8 +145,8 @@ export default async function HousesPage() {
         id: myHouseData.id,
         name: myHouseData.name,
         description: myHouseData.description,
-        creator: (myHouseData as any).creator || { id: (myHouseData as any).creatorId, username: "Unknown", avatar: null },
+        creator: (myHouseData as HouseWithRelations).creator || { id: (myHouseData as HouseWithRelations).creatorId || "", username: "Unknown", avatar: null },
-        memberships: ((myHouseData as any).memberships || []).map((m: any) => ({
+        memberships: ((myHouseData as HouseWithRelations).memberships || []).map((m) => ({
           id: m.id,
           role: m.role,
           user: {
@@ -128,7 +160,7 @@ export default async function HousesPage() {
       }
     : null;
 
-  const invitations = invitationsData.map((inv: any) => ({
+  const invitations = (invitationsData as InvitationWithRelations[]).map((inv: InvitationWithRelations) => ({
     id: inv.id,
     house: {
       id: inv.house.id,

components/houses/HouseManagement.tsx

@@ -91,7 +91,9 @@ export default function HouseManagement({
     const fetchRequests = async () => {
       if (!house || !isAdmin) return;
       try {
-        const response = await fetch(`/api/houses/${house.id}/requests?status=PENDING`);
+        const response = await fetch(
+          `/api/houses/${house.id}/requests?status=PENDING`
+        );
         if (response.ok) {
           const data = await response.json();
           setRequests(data);
@@ -101,10 +103,13 @@ export default function HouseManagement({
       }
     };
     fetchRequests();
-  }, [house?.id, isAdmin]);
+  }, [house, isAdmin]);
 
   const handleDelete = () => {
-    if (!house || !confirm("Êtes-vous sûr de vouloir supprimer cette maison ?")) {
+    if (
+      !house ||
+      !confirm("Êtes-vous sûr de vouloir supprimer cette maison ?")
+    ) {
       return;
     }
 
@@ -168,11 +173,17 @@ export default function HouseManagement({
   if (!house) {
     return (
       <Card className="p-6">
-        <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+        <h2
+          className="text-lg sm:text-xl font-bold mb-4"
+          style={{ color: "var(--foreground)" }}
+        >
           Ma Maison
         </h2>
-        <p className="text-sm mb-4" style={{ color: "var(--muted-foreground)" }}>
+        <p
-          Vous n'êtes membre d'aucune maison pour le moment.
+          className="text-sm mb-4"
+          style={{ color: "var(--muted-foreground)" }}
+        >
+          Vous n&apos;êtes membre d&apos;aucune maison pour le moment.
         </p>
       </Card>
     );
@@ -185,7 +196,7 @@ export default function HouseManagement({
         style={{
           borderColor: `color-mix(in srgb, var(--accent) 40%, var(--border))`,
           borderWidth: "2px",
-          boxShadow: `0 0 20px color-mix(in srgb, var(--accent) 10%, transparent)`
+          boxShadow: `0 0 20px color-mix(in srgb, var(--accent) 10%, transparent)`,
         }}
       >
         <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-4">
@@ -194,13 +205,16 @@ export default function HouseManagement({
               className="text-xl sm:text-2xl font-bold mb-2 break-words"
               style={{
                 color: "var(--accent)",
-                textShadow: `0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)`
+                textShadow: `0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)`,
               }}
             >
               {house.name}
             </h3>
             {house.description && (
-              <p className="text-sm mt-2 break-words" style={{ color: "var(--muted-foreground)" }}>
+              <p
+                className="text-sm mt-2 break-words"
+                style={{ color: "var(--muted-foreground)" }}
+              >
                 {house.description}
               </p>
             )}
@@ -217,22 +231,40 @@ export default function HouseManagement({
                   {isEditing ? "Annuler" : "Modifier"}
                 </Button>
                 {isOwner && (
-                  <Button onClick={handleDelete} variant="danger" size="sm" className="flex-1 sm:flex-none">
+                  <Button
+                    onClick={handleDelete}
+                    variant="danger"
+                    size="sm"
+                    className="flex-1 sm:flex-none"
+                  >
                     Supprimer
                   </Button>
                 )}
               </>
             )}
             {!isOwner && (
-              <Button onClick={handleLeave} variant="danger" size="sm" className="flex-1 sm:flex-none">
+              <Button
+                onClick={handleLeave}
+                variant="danger"
+                size="sm"
+                className="flex-1 sm:flex-none"
+              >
                 Quitter
               </Button>
             )}
           </div>
         </div>
 
-        {error && <Alert variant="error" className="mb-4">{error}</Alert>}
+        {error && (
-        {success && <Alert variant="success" className="mb-4">{success}</Alert>}
+          <Alert variant="error" className="mb-4">
+            {error}
+          </Alert>
+        )}
+        {success && (
+          <Alert variant="success" className="mb-4">
+            {success}
+          </Alert>
+        )}
 
         {isEditing ? (
           <HouseForm
@@ -250,7 +282,7 @@ export default function HouseManagement({
               style={{
                 color: "var(--primary)",
                 borderBottom: `2px solid color-mix(in srgb, var(--primary) 30%, transparent)`,
-                paddingBottom: "0.5rem"
+                paddingBottom: "0.5rem",
               }}
             >
               Membres ({house.memberships?.length ?? 0})
@@ -259,9 +291,11 @@ export default function HouseManagement({
               {(house.memberships || []).map((membership) => {
                 const isCurrentUser = membership.user.id === session?.user?.id;
                 const roleColor =
-                  membership.role === "OWNER" ? "var(--accent)" :
+                  membership.role === "OWNER"
-                  membership.role === "ADMIN" ? "var(--primary)" :
+                    ? "var(--accent)"
-                  "var(--muted-foreground)";
+                    : membership.role === "ADMIN"
+                      ? "var(--primary)"
+                      : "var(--muted-foreground)";
 
                 return (
                   <div
@@ -272,7 +306,9 @@ export default function HouseManagement({
                         ? "color-mix(in srgb, var(--primary) 10%, var(--card-hover))"
                         : "var(--card-hover)",
                       borderLeft: `3px solid ${roleColor}`,
-                      borderColor: isCurrentUser ? "var(--primary)" : "transparent"
+                      borderColor: isCurrentUser
+                        ? "var(--primary)"
+                        : "transparent",
                     }}
                   >
                     <div className="flex items-center gap-2 min-w-0 flex-1">
@@ -288,7 +324,9 @@ export default function HouseManagement({
                         <span
                           className="font-semibold block sm:inline"
                           style={{
-                            color: isCurrentUser ? "var(--primary)" : "var(--foreground)"
+                            color: isCurrentUser
+                              ? "var(--primary)"
+                              : "var(--foreground)",
                           }}
                         >
                           {membership.user.username}
@@ -314,7 +352,7 @@ export default function HouseManagement({
                         style={{
                           color: roleColor,
                           backgroundColor: `color-mix(in srgb, ${roleColor} 15%, transparent)`,
-                          border: `1px solid color-mix(in srgb, ${roleColor} 30%, transparent)`
+                          border: `1px solid color-mix(in srgb, ${roleColor} 30%, transparent)`,
                         }}
                       >
                         {membership.role === "OWNER" && "👑 "}
@@ -326,15 +364,27 @@ export default function HouseManagement({
                         membership.role !== "OWNER" && (
                           <Button
                             onClick={() => {
-                            if (confirm(`Êtes-vous sûr de vouloir retirer ${membership.user.username} de la maison ?`)) {
+                              if (
+                                confirm(
+                                  `Êtes-vous sûr de vouloir retirer ${membership.user.username} de la maison ?`
+                                )
+                              ) {
                                 startTransition(async () => {
-                                const result = await removeMember(house.id, membership.user.id);
+                                  const result = await removeMember(
+                                    house.id,
+                                    membership.user.id
+                                  );
                                   if (result.success) {
                                     // Rafraîchir le score dans le header (le membre retiré perd des points)
-                                  window.dispatchEvent(new Event("refreshUserScore"));
+                                    window.dispatchEvent(
+                                      new Event("refreshUserScore")
+                                    );
                                     onUpdate?.();
                                   } else {
-                                  setError(result.error || "Erreur lors du retrait du membre");
+                                    setError(
+                                      result.error ||
+                                        "Erreur lors du retrait du membre"
+                                    );
                                   }
                                 });
                               }
@@ -416,10 +466,10 @@ export default function HouseManagement({
             style={{
               color: "var(--purple)",
               borderBottom: `2px solid color-mix(in srgb, var(--purple) 30%, transparent)`,
-              paddingBottom: "0.5rem"
+              paddingBottom: "0.5rem",
             }}
           >
-            Demandes d'adhésion
+            Demandes d&apos;adhésion
           </h2>
           <RequestList requests={pendingRequests} onUpdate={onUpdate} />
         </Card>
@@ -427,4 +477,3 @@ export default function HouseManagement({
     </div>
   );
 }
-

components/houses/HousesSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useSession } from "next-auth/react";
 import Card from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
@@ -78,7 +78,7 @@ export default function HousesSection({
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
 
-  const fetchHouses = async () => {
+  const fetchHouses = useCallback(async () => {
     try {
       const params = new URLSearchParams();
       if (searchTerm) {
@@ -94,7 +94,7 @@ export default function HousesSection({
     } catch (error) {
       console.error("Error fetching houses:", error);
     }
-  };
+  }, [searchTerm]);
 
   const fetchMyHouse = async () => {
     try {
@@ -129,9 +129,13 @@ export default function HousesSection({
       }, 300);
       return () => clearTimeout(timeout);
     } else {
+      // Utiliser un timeout pour éviter setState synchrone dans effect
+      const timeout = setTimeout(() => {
         fetchHouses();
+      }, 0);
+      return () => clearTimeout(timeout);
     }
-  }, [searchTerm]);
+  }, [searchTerm, fetchHouses]);
 
   const handleUpdate = () => {
     fetchMyHouse();
@@ -165,15 +169,24 @@ export default function HousesSection({
           <>
             {invitations.length > 0 && (
               <Card className="p-4 sm:p-6">
-                <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+                <h2
+                  className="text-lg sm:text-xl font-bold mb-4"
+                  style={{ color: "var(--foreground)" }}
+                >
                   Mes Invitations
                 </h2>
-                <InvitationList invitations={invitations} onUpdate={handleUpdate} />
+                <InvitationList
+                  invitations={invitations}
+                  onUpdate={handleUpdate}
+                />
               </Card>
             )}
 
             <Card className="p-4 sm:p-6">
-              <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+              <h2
+                className="text-lg sm:text-xl font-bold mb-4"
+                style={{ color: "var(--foreground)" }}
+              >
                 Ma Maison
               </h2>
               {myHouse ? (
@@ -194,8 +207,12 @@ export default function HousesSection({
                     />
                   ) : (
                     <div>
-                      <p className="text-sm mb-4 break-words" style={{ color: "var(--muted-foreground)" }}>
+                      <p
-                        Vous n'êtes membre d'aucune maison. Créez-en une ou demandez à rejoindre une maison existante.
+                        className="text-sm mb-4 break-words"
+                        style={{ color: "var(--muted-foreground)" }}
+                      >
+                        Vous n&apos;êtes membre d&apos;aucune maison. Créez-en
+                        une ou demandez à rejoindre une maison existante.
                       </p>
                       <Button
                         onClick={() => setShowCreateForm(true)}
@@ -213,7 +230,10 @@ export default function HousesSection({
         )}
 
         <Card className="p-4 sm:p-6">
-          <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+          <h2
+            className="text-lg sm:text-xl font-bold mb-4"
+            style={{ color: "var(--foreground)" }}
+          >
             Toutes les Maisons
           </h2>
           <div className="mb-4">
@@ -243,4 +263,3 @@ export default function HousesSection({
     </BackgroundSection>
   );
 }
-

services/challenges/challenge.service.ts

@@ -346,8 +346,13 @@ export class ChallengeService {
         where: { id: challengeId },
         data: updateData,
       });
-    } catch (error: any) {
+    } catch (error: unknown) {
-      if (error?.code === "P2025") {
+      if (
+        error &&
+        typeof error === "object" &&
+        "code" in error &&
+        error.code === "P2025"
+      ) {
         // Record not found
         throw new NotFoundError("Défi");
       }
@@ -431,8 +436,13 @@ export class ChallengeService {
       await prisma.challenge.delete({
         where: { id: challengeId },
       });
-    } catch (error: any) {
+    } catch (error: unknown) {
-      if (error?.code === "P2025") {
+      if (
+        error &&
+        typeof error === "object" &&
+        "code" in error &&
+        error.code === "P2025"
+      ) {
         // Record not found
         throw new NotFoundError("Défi");
       }