feat: enhance useDaily hook and DailyPageClient for improved data handling

- Added `refreshDailySilent` method to `useDaily` for silent data refresh without loading state. - Updated `useDaily` to accept an optional `initialDailyView` parameter, improving initial state management. - Modified `DailyPageClient` to utilize `refreshDailySilent` for smoother user experience during checkbox updates. - Implemented server-side data fetching in `DailyPage` for better initial load performance. - Enhanced UI to indicate refreshing state in `DailySectionComponent`.
2025-09-15 21:23:03 +02:00
parent 936e0306fc
commit cb2e8e9c9f
3 changed files with 111 additions and 27 deletions
--- a/hooks/useDaily.ts
+++ b/hooks/useDaily.ts
@@ -7,12 +7,14 @@ import { DailyView, DailyCheckbox, UpdateDailyCheckboxData } from '@/lib/types';
 interface UseDailyState {
  dailyView: DailyView | null;
  loading: boolean;
+  refreshing: boolean; // Pour les refresh silencieux
  error: string | null;
  saving: boolean; // Pour indiquer les opérations en cours
 }

 interface UseDailyActions {
  refreshDaily: () => Promise<void>;
+  refreshDailySilent: () => Promise<void>;
  addTodayCheckbox: (text: string, taskId?: string) => Promise<DailyCheckbox | null>;
  addYesterdayCheckbox: (text: string, taskId?: string) => Promise<DailyCheckbox | null>;
  updateCheckbox: (checkboxId: string, data: UpdateDailyCheckboxData) => Promise<DailyCheckbox | null>;
@@ -28,10 +30,11 @@ interface UseDailyActions {
 /**
 * Hook pour la gestion d'une vue daily spécifique
 */
-export function useDaily(initialDate?: Date): UseDailyState & UseDailyActions & { currentDate: Date } {
+export function useDaily(initialDate?: Date, initialDailyView?: DailyView): UseDailyState & UseDailyActions & { currentDate: Date } {
  const [currentDate, setCurrentDate] = useState<Date>(initialDate || new Date());
-  const [dailyView, setDailyView] = useState<DailyView | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [dailyView, setDailyView] = useState<DailyView | null>(initialDailyView || null);
+  const [loading, setLoading] = useState(!initialDailyView); // Pas de loading si on a des données SSR
+  const [refreshing, setRefreshing] = useState(false); // Pour les refresh silencieux
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

@@ -50,6 +53,20 @@ export function useDaily(initialDate?: Date): UseDailyState & UseDailyActions &
    }
  }, [currentDate]);

+  const refreshDailySilent = useCallback(async () => {
+    try {
+      setRefreshing(true);
+      // Refresh silencieux sans setLoading(true) pour éviter le clignotement
+      const view = await dailyClient.getDailyView(currentDate);
+      setDailyView(view);
+    } catch (err) {
+      console.error('Erreur refreshDailySilent:', err);
+      // On n'affiche pas l'erreur pour ne pas perturber l'UX
+    } finally {
+      setRefreshing(false);
+    }
+  }, [currentDate]);
+
  const addTodayCheckbox = useCallback(async (text: string, taskId?: string): Promise<DailyCheckbox | null> => {
    if (!dailyView) return null;

@@ -200,21 +217,36 @@ export function useDaily(initialDate?: Date): UseDailyState & UseDailyActions &
    setCurrentDate(date);
  }, []);

+  // État pour savoir si c'est le premier chargement
+  const [isInitialLoad, setIsInitialLoad] = useState(!initialDailyView);
+
  // Charger le daily quand la date change
  useEffect(() => {
-    refreshDaily();
-  }, [refreshDaily]);
+    if (isInitialLoad) {
+      // Premier chargement : utiliser refreshDaily normal seulement si pas de données SSR
+      if (!initialDailyView) {
+        refreshDaily().finally(() => setIsInitialLoad(false));
+      } else {
+        setIsInitialLoad(false);
+      }
+    } else {
+      // Changements suivants : utiliser refreshDailySilent
+      refreshDailySilent();
+    }
+  }, [refreshDaily, refreshDailySilent, isInitialLoad, initialDailyView]);

  return {
    // State
    dailyView,
    loading,
+    refreshing,
    error,
    saving,
    currentDate,
    
    // Actions
    refreshDaily,
+    refreshDailySilent,
    addTodayCheckbox,
    addYesterdayCheckbox,
    updateCheckbox,
--- a/src/app/daily/DailyPageClient.tsx
+++ b/src/app/daily/DailyPageClient.tsx
@@ -3,12 +3,13 @@
 import { useState, useRef, useEffect } from 'react';
 import React from 'react';
 import { useDaily } from '@/hooks/useDaily';
-import { DailyCheckbox } from '@/lib/types';
+import { DailyCheckbox, DailyView } from '@/lib/types';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Card } from '@/components/ui/Card';
 import Link from 'next/link';
 import { DailyCalendar } from '@/components/daily/DailyCalendar';
+import { dailyClient } from '@/clients/daily-client';

 interface DailySectionProps {
  title: string;
@@ -19,6 +20,7 @@ interface DailySectionProps {
  onUpdateCheckbox: (checkboxId: string, text: string) => Promise<void>;
  onDeleteCheckbox: (checkboxId: string) => Promise<void>;
  saving: boolean;
+  refreshing?: boolean;
 }

 function DailySectionComponent({ 
@@ -29,7 +31,8 @@ function DailySectionComponent({
  onToggleCheckbox, 
  onUpdateCheckbox,
  onDeleteCheckbox,
-  saving 
+  saving,
+  refreshing = false
 }: DailySectionProps) {
  const [newCheckboxText, setNewCheckboxText] = useState('');
  const [addingCheckbox, setAddingCheckbox] = useState(false);
@@ -103,8 +106,11 @@ function DailySectionComponent({
  return (
    <Card className="p-4">
      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-bold text-[var(--foreground)] font-mono">
+        <h2 className="text-lg font-bold text-[var(--foreground)] font-mono flex items-center gap-2">
          {title} <span className="text-sm font-normal text-[var(--muted-foreground)]">({formatShortDate(date)})</span>
+          {refreshing && (
+            <div className="w-4 h-4 border-2 border-[var(--primary)] border-t-transparent rounded-full animate-spin"></div>
+          )}
        </h2>
        <span className="text-xs text-[var(--muted-foreground)] font-mono">
          {checkboxes.filter(cb => cb.isChecked).length}/{checkboxes.length}
@@ -204,14 +210,25 @@ function DailySectionComponent({
  );
 }

-export function DailyPageClient() {
+interface DailyPageClientProps {
+  initialDailyView?: DailyView;
+  initialDailyDates?: string[];
+  initialDate?: Date;
+}
+
+export function DailyPageClient({ 
+  initialDailyView, 
+  initialDailyDates = [], 
+  initialDate 
+}: DailyPageClientProps = {}) {
  const {
    dailyView,
    loading,
+    refreshing,
    error,
    saving,
    currentDate,
-    refreshDaily,
+    refreshDailySilent,
    toggleCheckbox,
    updateCheckbox,
    deleteCheckbox,
@@ -219,16 +236,28 @@ export function DailyPageClient() {
    goToNextDay,
    goToToday,
    setDate
-  } = useDaily();
+  } = useDaily(initialDate, initialDailyView);

-  const [dailyDates, setDailyDates] = useState<string[]>([]);
+  const [dailyDates, setDailyDates] = useState<string[]>(initialDailyDates);

-  // Charger les dates avec des dailies pour le calendrier
+  // Fonction pour rafraîchir la liste des dates avec des dailies
+  const refreshDailyDates = async () => {
+    try {
+      const dates = await dailyClient.getDailyDates();
+      setDailyDates(dates);
+    } catch (error) {
+      console.error('Erreur lors du refresh des dates:', error);
+    }
+  };
+
+  // Charger les dates avec des dailies pour le calendrier (seulement si pas de données SSR)
  useEffect(() => {
-    import('@/clients/daily-client').then(({ dailyClient }) => {
-      return dailyClient.getDailyDates();
-    }).then(setDailyDates).catch(console.error);
-  }, []);
+    if (initialDailyDates.length === 0) {
+      import('@/clients/daily-client').then(({ dailyClient }) => {
+        return dailyClient.getDailyDates();
+      }).then(setDailyDates).catch(console.error);
+    }
+  }, [initialDailyDates.length]);

  const handleAddTodayCheckbox = async (text: string) => {
    try {
@@ -238,11 +267,10 @@ export function DailyPageClient() {
        text,
        isChecked: false
      });
-      // Recharger la vue daily après ajout
-      await refreshDaily();
+      // Recharger silencieusement la vue daily (sans clignotement)
+      refreshDailySilent().catch(console.error);
      // Recharger aussi les dates pour le calendrier
-      const updatedDates = await dailyClient.getDailyDates();
-      setDailyDates(updatedDates);
+      await refreshDailyDates();
    } catch (error) {
      console.error('Erreur lors de l\'ajout de la tâche:', error);
    }
@@ -259,11 +287,10 @@ export function DailyPageClient() {
        text,
        isChecked: false
      });
-      // Recharger la vue daily après ajout
-      await refreshDaily();
+      // Recharger silencieusement la vue daily (sans clignotement)
+      refreshDailySilent().catch(console.error);
      // Recharger aussi les dates pour le calendrier
-      const updatedDates = await dailyClient.getDailyDates();
-      setDailyDates(updatedDates);
+      await refreshDailyDates();
    } catch (error) {
      console.error('Erreur lors de l\'ajout de la tâche:', error);
    }
@@ -275,6 +302,8 @@ export function DailyPageClient() {

  const handleDeleteCheckbox = async (checkboxId: string) => {
    await deleteCheckbox(checkboxId);
+    // Refresh dates après suppression pour mettre à jour le calendrier
+    await refreshDailyDates();
  };

  const handleUpdateCheckbox = async (checkboxId: string, text: string) => {
@@ -416,6 +445,7 @@ export function DailyPageClient() {
              onUpdateCheckbox={handleUpdateCheckbox}
              onDeleteCheckbox={handleDeleteCheckbox}
              saving={saving}
+              refreshing={refreshing}
            />

            {/* Section Aujourd'hui */}
@@ -428,6 +458,7 @@ export function DailyPageClient() {
              onUpdateCheckbox={handleUpdateCheckbox}
              onDeleteCheckbox={handleDeleteCheckbox}
              saving={saving}
+              refreshing={refreshing}
            />
            </div>
          )}
--- a/src/app/daily/page.tsx
+++ b/src/app/daily/page.tsx
@@ -1,11 +1,32 @@
 import { Metadata } from 'next';
 import { DailyPageClient } from './DailyPageClient';
+import { dailyService } from '@/services/daily';

 export const metadata: Metadata = {
  title: 'Daily - Tower Control',
  description: 'Gestion quotidienne des tâches et objectifs',
 };

-export default function DailyPage() {
-  return <DailyPageClient />;
+export default async function DailyPage() {
+  // Récupérer les données côté serveur
+  const today = new Date();
+  
+  try {
+    const [dailyView, dailyDates] = await Promise.all([
+      dailyService.getDailyView(today),
+      dailyService.getDailyDates()
+    ]);
+
+    return (
+      <DailyPageClient 
+        initialDailyView={dailyView}
+        initialDailyDates={dailyDates}
+        initialDate={today}
+      />
+    );
+  } catch (error) {
+    console.error('Erreur SSR Daily:', error);
+    // Fallback vers client-side rendering
+    return <DailyPageClient />;
+  }
 }