Enhance HouseManagement and HousesPage components: Introduce invitation management features, including fetching and displaying pending invitations. Refactor data handling and UI updates for improved user experience and maintainability. Optimize state management with useCallback and useEffect for better performance.

app/houses/page.tsx

@@ -5,7 +5,11 @@ 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";
+import type {
+  House,
+  HouseMembership,
+  HouseInvitation,
+} from "@/prisma/generated/prisma/client";
 
 export const dynamic = "force-dynamic";
 
@@ -17,15 +21,17 @@ type HouseWithRelations = House & {
     avatar: string | null;
   } | null;
   creatorId?: string;
-  memberships?: Array<HouseMembership & {
-    user: {
-      id: string;
-      username: string;
-      avatar: string | null;
-      score: number | null;
-      level: number | null;
-    };
-  }>;
+  memberships?: Array<
+    HouseMembership & {
+      user: {
+        id: string;
+        username: string;
+        avatar: string | null;
+        score: number | null;
+        level: number | null;
+      };
+    }
+  >;
 };
 
 type InvitationWithRelations = HouseInvitation & {
@@ -47,10 +53,39 @@ export default async function HousesPage() {
     redirect("/login");
   }
 
-  const [housesData, myHouseData, invitationsData, users, backgroundImage] = await Promise.all([
-    // Récupérer les maisons
-    houseService.getAllHouses({
-      include: {
+  const [housesData, myHouseData, invitationsData, users, backgroundImage] =
+    await Promise.all([
+      // Récupérer les maisons
+      houseService.getAllHouses({
+        include: {
+          memberships: {
+            include: {
+              user: {
+                select: {
+                  id: true,
+                  username: true,
+                  avatar: true,
+                  score: true,
+                  level: true,
+                },
+              },
+            },
+            orderBy: [
+              { role: "asc" }, // OWNER, ADMIN, MEMBER
+              { user: { score: "desc" } }, // Puis par score décroissant
+            ],
+          },
+          creator: {
+            select: {
+              id: true,
+              username: true,
+              avatar: true,
+            },
+          },
+        },
+      }),
+      // Récupérer la maison de l'utilisateur
+      houseService.getUserHouse(session.user.id, {
         memberships: {
           include: {
             user: {
@@ -63,10 +98,6 @@ export default async function HousesPage() {
               },
             },
           },
-          orderBy: [
-            { role: "asc" }, // OWNER, ADMIN, MEMBER
-            { user: { score: "desc" } }, // Puis par score décroissant
-          ],
         },
         creator: {
           select: {
@@ -75,78 +106,66 @@ export default async function HousesPage() {
             avatar: true,
           },
         },
-      },
-    }),
-    // Récupérer la maison de l'utilisateur
-    houseService.getUserHouse(session.user.id, {
-      memberships: {
-        include: {
-          user: {
-            select: {
-              id: true,
-              username: true,
-              avatar: true,
-              score: true,
-              level: true,
-            },
+      }),
+      // Récupérer les invitations de l'utilisateur
+      houseService.getUserInvitations(session.user.id, "PENDING"),
+      // Récupérer tous les utilisateurs sans maison pour les invitations
+      prisma.user.findMany({
+        where: {
+          houseMemberships: {
+            none: {},
           },
         },
-      },
-      creator: {
         select: {
           id: true,
           username: true,
           avatar: true,
         },
-      },
-    }),
-    // Récupérer les invitations de l'utilisateur
-    houseService.getUserInvitations(session.user.id, "PENDING"),
-    // Récupérer tous les utilisateurs sans maison pour les invitations
-    prisma.user.findMany({
-      where: {
-        houseMemberships: {
-          none: {},
+        orderBy: {
+          username: "asc",
         },
-      },
-      select: {
-        id: true,
-        username: true,
-        avatar: true,
-      },
-      orderBy: {
-        username: "asc",
-      },
-    }),
-    getBackgroundImage("challenges", "/got-2.jpg"),
-  ]);
+      }),
+      getBackgroundImage("challenges", "/got-2.jpg"),
+    ]);
 
   // Sérialiser les données pour le client
-  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 },
-    memberships: (house.memberships || []).map((m) => ({
-      id: m.id,
-      role: m.role,
-      user: {
-        id: m.user.id,
-        username: m.user.username,
-        avatar: m.user.avatar,
-        score: m.user.score ?? 0,
-        level: m.user.level ?? 1,
+  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,
       },
-    })),
-  }));
+      memberships: (house.memberships || []).map((m) => ({
+        id: m.id,
+        role: m.role,
+        user: {
+          id: m.user.id,
+          username: m.user.username,
+          avatar: m.user.avatar,
+          score: m.user.score ?? 0,
+          level: m.user.level ?? 1,
+        },
+      })),
+    })
+  );
 
   const myHouse = myHouseData
     ? {
         id: myHouseData.id,
         name: myHouseData.name,
         description: myHouseData.description,
-        creator: (myHouseData as HouseWithRelations).creator || { id: (myHouseData as HouseWithRelations).creatorId || "", username: "Unknown", avatar: null },
-        memberships: ((myHouseData as HouseWithRelations).memberships || []).map((m) => ({
+        creator: (myHouseData as HouseWithRelations).creator || {
+          id: (myHouseData as HouseWithRelations).creatorId || "",
+          username: "Unknown",
+          avatar: null,
+        },
+        memberships: (
+          (myHouseData as HouseWithRelations).memberships || []
+        ).map((m) => ({
           id: m.id,
           role: m.role,
           user: {
@@ -160,16 +179,18 @@ export default async function HousesPage() {
       }
     : null;
 
-  const invitations = (invitationsData as InvitationWithRelations[]).map((inv: InvitationWithRelations) => ({
-    id: inv.id,
-    house: {
-      id: inv.house.id,
-      name: inv.house.name,
-    },
-    inviter: inv.inviter,
-    status: inv.status,
-    createdAt: inv.createdAt.toISOString(),
-  }));
+  const invitations = (invitationsData as InvitationWithRelations[]).map(
+    (inv: InvitationWithRelations) => ({
+      id: inv.id,
+      house: {
+        id: inv.house.id,
+        name: inv.house.name,
+      },
+      inviter: inv.inviter,
+      status: inv.status,
+      createdAt: inv.createdAt.toISOString(),
+    })
+  );
 
   return (
     <main className="min-h-screen bg-black relative">