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:
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>({});
|
||||||
|
|||||||
Reference in New Issue
Block a user