feat: integrate tags into HomePage and TasksContext

- Added `initialTags` prop to `HomePageClient` for passing tag data.
- Updated `TasksProvider` to accept and utilize `initialTags`, enhancing tag management.
- Modified `useTags` hook to initialize state with provided tags and conditionally refresh tags based on initial data.
- Updated server-side data fetching in `HomePage` to include tags from the `tagsService`.
This commit is contained in:
Julien Froidefond
2025-09-14 22:45:52 +02:00
parent da64221407
commit 95af83b0bc
4 changed files with 25 additions and 13 deletions

View File

@@ -3,7 +3,7 @@
import { KanbanBoardContainer } from '@/components/kanban/BoardContainer'; import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
import { Header } from '@/components/ui/Header'; import { Header } from '@/components/ui/Header';
import { TasksProvider, useTasksContext } from '@/contexts/TasksContext'; import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
import { Task } from '@/lib/types'; import { Task, Tag } from '@/lib/types';
interface HomePageClientProps { interface HomePageClientProps {
initialTasks: Task[]; initialTasks: Task[];
@@ -14,6 +14,7 @@ interface HomePageClientProps {
todo: number; todo: number;
completionRate: number; completionRate: number;
}; };
initialTags: (Tag & { usage: number })[];
} }
function HomePageContent() { function HomePageContent() {
@@ -35,9 +36,13 @@ function HomePageContent() {
); );
} }
export function HomePageClient({ initialTasks, initialStats }: HomePageClientProps) { export function HomePageClient({ initialTasks, initialStats, initialTags }: HomePageClientProps) {
return ( return (
<TasksProvider initialTasks={initialTasks} initialStats={initialStats}> <TasksProvider
initialTasks={initialTasks}
initialStats={initialStats}
initialTags={initialTags}
>
<HomePageContent /> <HomePageContent />
</TasksProvider> </TasksProvider>
); );

View File

@@ -25,12 +25,13 @@ interface UseTagsActions {
* Hook pour la gestion des tags * Hook pour la gestion des tags
*/ */
export function useTags( export function useTags(
initialData?: (Tag & { usage: number })[],
initialFilters?: TagFilters initialFilters?: TagFilters
): UseTagsState & UseTagsActions { ): UseTagsState & UseTagsActions {
const [state, setState] = useState<UseTagsState>({ const [state, setState] = useState<UseTagsState>({
tags: [], tags: initialData?.map(tag => ({ id: tag.id, name: tag.name, color: tag.color, isPinned: tag.isPinned })) || [],
popularTags: [], popularTags: initialData || [],
loading: false, loading: !initialData,
error: null error: null
}); });
@@ -168,10 +169,12 @@ export function useTags(
} }
}, [refreshTags]); }, [refreshTags]);
// Charger les tags au montage et quand les filtres changent // Charger les tags au montage et quand les filtres changent (seulement si pas de données initiales)
useEffect(() => { useEffect(() => {
refreshTags(); if (!initialData) {
}, [refreshTags]); refreshTags();
}
}, [refreshTags, initialData]);
return { return {
...state, ...state,

View File

@@ -1,17 +1,20 @@
import { tasksService } from '@/services/tasks'; import { tasksService } from '@/services/tasks';
import { tagsService } from '@/services/tags';
import { HomePageClient } from '@/components/HomePageClient'; import { HomePageClient } from '@/components/HomePageClient';
export default async function HomePage() { export default async function HomePage() {
// SSR - Récupération des données côté serveur // SSR - Récupération des données côté serveur
const [initialTasks, initialStats] = await Promise.all([ const [initialTasks, initialStats, initialTags] = await Promise.all([
tasksService.getTasks(), tasksService.getTasks(),
tasksService.getTaskStats() tasksService.getTaskStats(),
tagsService.getTags()
]); ]);
return ( return (
<HomePageClient <HomePageClient
initialTasks={initialTasks} initialTasks={initialTasks}
initialStats={initialStats} initialStats={initialStats}
initialTags={initialTags}
/> />
); );
} }

View File

@@ -43,15 +43,16 @@ interface TasksProviderProps {
children: ReactNode; children: ReactNode;
initialTasks: Task[]; initialTasks: Task[];
initialStats: TasksContextType['stats']; initialStats: TasksContextType['stats'];
initialTags?: (Tag & { usage: number })[];
} }
export function TasksProvider({ children, initialTasks, initialStats }: TasksProviderProps) { export function TasksProvider({ children, initialTasks, initialStats, initialTags }: TasksProviderProps) {
const tasksState = useTasks( const tasksState = useTasks(
{ limit: 20 }, { limit: 20 },
{ tasks: initialTasks, stats: initialStats } { tasks: initialTasks, stats: initialStats }
); );
const { tags, loading: tagsLoading, error: tagsError } = useTags(); const { tags, loading: tagsLoading, error: tagsError } = useTags(initialTags);
// État des filtres Kanban avec persistance // État des filtres Kanban avec persistance
const [kanbanFilters, setKanbanFilters] = useState<KanbanFilters>({}); const [kanbanFilters, setKanbanFilters] = useState<KanbanFilters>({});