Fondation

PROBLEME_CALENDAR_WIDGET.md

@@ -0,0 +1,184 @@
+# Problème TypeScript : Block-scoped variable 'status' used before its declaration
+
+## Contexte du projet
+
+- **Framework** : Next.js 16.1.1 (App Router)
+- **TypeScript** : Mode strict activé (`"strict": true` dans `tsconfig.json`)
+- **Fichier concerné** : `components/calendar/calendar-widget.tsx`
+- **Erreur** : `Type error: Block-scoped variable 'status' used before its declaration.`
+
+## Description du problème
+
+L'erreur TypeScript se produit à la ligne 33 du fichier `components/calendar/calendar-widget.tsx` :
+
+```typescript
+export function CalendarWidget() {
+  const { data: session, status } = useSession();  // Ligne 25 - Déclaration
+  const [events, setEvents] = useState<Event[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { triggerNotification } = useWidgetNotification();
+  const lastEventCountRef = useRef<number>(-1);
+
+  useEffect(() => {
+    console.log("Calendar Widget - Session Status:", status);  // Ligne 33 - ERREUR ICI
+    // ...
+  }, [session, status, triggerNotification]);
+}
+```
+
+**Erreur exacte :**
+```
+./components/calendar/calendar-widget.tsx:33:54
+Type error: Block-scoped variable 'status' used before its declaration.
+```
+
+## Constat important
+
+Le code est **identique en structure** à `components/email.tsx` qui **compile sans erreur** :
+
+```typescript
+// components/email.tsx - FONCTIONNE
+export function Email() {
+  const { data: session, status } = useSession();  // Même déclaration
+  // ... autres hooks ...
+  
+  useEffect(() => {
+    if (status === 'authenticated') {  // Même utilisation
+      loadAccounts();
+    }
+  }, [status]);
+}
+```
+
+## Ce qui a été testé
+
+### 1. Tentatives de solutions (toutes échouées)
+
+#### Tentative 1 : Déclaration dans le useEffect
+```typescript
+useEffect(() => {
+  const session = sessionHook.data;
+  const status = sessionHook.status;
+  // ...
+}, [sessionHook.data, sessionHook.status, triggerNotification]);
+```
+**Résultat** : Erreur `Block-scoped variable 'sessionHook' used before its declaration`
+
+#### Tentative 2 : Séparation de la destructuration
+```typescript
+const sessionResult = useSession();
+const session = sessionResult.data;
+const status = sessionResult.status;
+```
+**Résultat** : Même erreur avec `sessionResult`
+
+#### Tentative 3 : Ordre des hooks modifié
+- Déplacer `useSession()` avant les autres hooks
+- Déplacer `useSession()` après les autres hooks
+**Résultat** : Même erreur
+
+#### Tentative 4 : Alignement avec email.tsx
+Copie exacte de la structure de `email.tsx` qui fonctionne
+**Résultat** : Même erreur
+
+### 2. Vérifications effectuées
+
+✅ **Pas de conflit de noms** : Aucune autre déclaration de `status` dans le fichier
+✅ **Pas de cache** : 
+   - `rm -rf .next` exécuté
+   - `rm -rf node_modules/.cache` exécuté
+   - Erreur persiste après nettoyage
+
+✅ **Fichier sur disque vérifié** : Le code est correct (pas de `sessionResult` ou autre)
+```bash
+sed -n '32,45p' components/calendar/calendar-widget.tsx
+# Confirme que le code est correct
+```
+
+✅ **Comparaison avec email.tsx** : Structure identique, même ordre de déclaration
+
+✅ **Recherche dans le projet** : Aucune autre référence à `sessionResult` trouvée
+
+### 3. État actuel du code
+
+Le fichier `components/calendar/calendar-widget.tsx` contient :
+
+```typescript
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { format, isToday, isTomorrow, addDays } from "date-fns";
+import { fr } from "date-fns/locale";
+import { CalendarIcon, ChevronRight } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { useSession } from "next-auth/react";
+import { useWidgetNotification } from "@/hooks/use-widget-notification";
+
+type Event = {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  isAllDay: boolean;
+  calendarId: string;
+  calendarName?: string;
+  calendarColor?: string;
+};
+
+export function CalendarWidget() {
+  const { data: session, status } = useSession();  // Ligne 25
+  const [events, setEvents] = useState<Event[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { triggerNotification } = useWidgetNotification();
+  const lastEventCountRef = useRef<number>(-1);
+
+  useEffect(() => {
+    console.log("Calendar Widget - Session Status:", status);  // Ligne 33 - ERREUR
+    console.log("Calendar Widget - Session Data:", session);
+
+    if (status === "loading") {
+      console.log("Calendar Widget - Session is loading");
+      return;
+    }
+
+    if (status !== "authenticated" || !session) {
+      console.log("Calendar Widget - Not authenticated, skipping fetch");
+      setLoading(false);
+      return;
+    }
+
+    // ... reste du code ...
+    
+  }, [session, status, triggerNotification]);
+  
+  // ... reste du composant ...
+}
+```
+
+## Hypothèses
+
+1. **Bug TypeScript** : Problème d'analyse statique avec les hooks React dans ce contexte spécifique
+2. **Incompatibilité de versions** : Possible problème entre Next.js 16.1.1 et TypeScript
+3. **Analyse séquentielle** : TypeScript pourrait analyser le `useEffect` avant que la destructuration de `useSession()` soit complètement résolue
+
+## Informations techniques
+
+- **Next.js** : 16.1.1
+- **TypeScript** : Version dans `tsconfig.json` avec `"strict": true`
+- **React** : Version via Next.js 16.1.1
+- **next-auth** : Utilisé pour `useSession()`
+
+## Question
+
+Pourquoi TypeScript signale-t-il que `status` est utilisé avant sa déclaration alors que :
+1. `status` est déclaré ligne 25
+2. `status` est utilisé ligne 33 (dans un `useEffect` qui est déclaré après)
+3. La même structure fonctionne dans `components/email.tsx`
+4. Aucun conflit de noms n'existe
+5. Les caches ont été nettoyés
+
+Quelle est la solution pour résoudre cette erreur TypeScript sans compromettre la structure du code qui fonctionne ailleurs dans le projet ?

PROMPT_PROBLEME.txt

@@ -0,0 +1,39 @@
+PROBLÈME TYPESCRIPT - Next.js 16.1.1
+
+Contexte :
+- Next.js 16.1.1 (App Router), TypeScript strict mode
+- Fichier : components/calendar/calendar-widget.tsx
+- Erreur : "Block-scoped variable 'status' used before its declaration" ligne 33
+
+Code problématique :
+```typescript
+export function CalendarWidget() {
+  const { data: session, status } = useSession();  // Ligne 25 - déclaration
+  const [events, setEvents] = useState<Event[]>([]);
+  // ... autres hooks ...
+  
+  useEffect(() => {
+    console.log("Status:", status);  // Ligne 33 - ERREUR ICI
+    // ...
+  }, [session, status, triggerNotification]);
+}
+```
+
+Constats :
+✅ Même structure que components/email.tsx qui compile sans erreur
+✅ Pas de conflit de noms (une seule déclaration de 'status')
+✅ Caches nettoyés (.next, node_modules/.cache)
+✅ Fichier vérifié sur disque - code correct
+✅ Aucune autre référence à sessionResult/status trouvée
+
+Tentatives échouées :
+1. Déclarer status dans useEffect → erreur avec sessionHook
+2. Séparer destructuration → erreur avec sessionResult  
+3. Changer ordre des hooks → même erreur
+4. Copier structure exacte de email.tsx → même erreur
+
+Question :
+Pourquoi TypeScript signale "used before declaration" alors que status est déclaré ligne 25 et utilisé ligne 33, et que la même structure fonctionne dans email.tsx ?
+
+Solution recherchée :
+Comment résoudre cette erreur TypeScript sans compromettre la structure du code qui fonctionne ailleurs ?

components/calendar/calendar-widget.tsx

@@ -22,7 +22,7 @@ type Event = {
 };
 
 export function CalendarWidget() {
-  const { data: session, status } = useSession();
+  const { data: session, status: sessionStatus } = useSession();
   const [events, setEvents] = useState<Event[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -30,15 +30,15 @@ export function CalendarWidget() {
   const lastEventCountRef = useRef<number>(-1);
 
   useEffect(() => {
-    console.log("Calendar Widget - Session Status:", status);
+    console.log("Calendar Widget - Session Status:", sessionStatus);
     console.log("Calendar Widget - Session Data:", session);
 
-    if (status === "loading") {
+    if (sessionStatus === "loading") {
       console.log("Calendar Widget - Session is loading");
       return;
     }
 
-    if (status !== "authenticated" || !session) {
+    if (sessionStatus !== "authenticated" || !session) {
       console.log("Calendar Widget - Not authenticated, skipping fetch");
       setLoading(false);
       return;
@@ -199,7 +199,7 @@ export function CalendarWidget() {
     }, 300000);
 
     return () => clearInterval(intervalId);
-  }, [session, status, triggerNotification]);
+  }, [session, sessionStatus, triggerNotification]);
 
   const formatEventDate = (date: Date, isAllDay: boolean) => {
     let dateString = "";