julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 4m25s
Details

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-18 08:50:14 +01:00
parent 1b82bd9ee6
commit f5dab3cb95
4 changed files with 195 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/houses/HousesSection.tsx
View File

@@ -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 {
fetchHouses();
// 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)" }}>
Vous n'êtes membre d'aucune maison. Créez-en une ou demandez à rejoindre une maison existante.
<p
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>
);
}