NeahStable/PROBLEME_CALENDAR_WIDGET.md

# 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 ?