130 lines
3.2 KiB
Markdown
130 lines
3.2 KiB
Markdown
# Navigation Bar Time Integration
|
|
|
|
## 🎯 Overview
|
|
|
|
The navigation bar (`components/main-nav.tsx`) currently displays a static time that doesn't refresh. This document outlines how to integrate it into the unified refresh system.
|
|
|
|
## 🔍 Current Issue
|
|
|
|
**File**: `components/main-nav.tsx` (lines 228-231)
|
|
|
|
```typescript
|
|
// Current code - STATIC (doesn't refresh)
|
|
const now = new Date();
|
|
const formattedDate = format(now, "d MMMM yyyy", { locale: fr });
|
|
const formattedTime = format(now, "HH:mm");
|
|
```
|
|
|
|
**Problem**: Time is calculated once when component renders and never updates.
|
|
|
|
## ✅ Solution
|
|
|
|
### Step 1: Create Time Component
|
|
|
|
**File**: `components/main-nav-time.tsx` (✅ Already created)
|
|
|
|
This component:
|
|
- Uses `useState` to track current time
|
|
- Uses `useUnifiedRefresh` hook for 1-second updates
|
|
- Properly cleans up on unmount
|
|
- No API calls needed (client-side only)
|
|
|
|
### Step 2: Update MainNav Component
|
|
|
|
**File**: `components/main-nav.tsx`
|
|
|
|
**Changes needed**:
|
|
|
|
1. **Import the new component**:
|
|
```typescript
|
|
import { MainNavTime } from './main-nav-time';
|
|
```
|
|
|
|
2. **Remove static time code** (lines 228-231):
|
|
```typescript
|
|
// DELETE THESE LINES:
|
|
// Format current date and time
|
|
const now = new Date();
|
|
const formattedDate = format(now, "d MMMM yyyy", { locale: fr });
|
|
const formattedTime = format(now, "HH:mm");
|
|
```
|
|
|
|
3. **Replace time display** (lines 294-298):
|
|
```typescript
|
|
// BEFORE:
|
|
{/* Center - Date and Time */}
|
|
<div className="hidden md:flex flex-col items-center">
|
|
<div className="text-white/80 text-xs">{formattedDate}</div>
|
|
<div className="text-white text-sm font-medium">{formattedTime}</div>
|
|
</div>
|
|
|
|
// AFTER:
|
|
{/* Center - Date and Time */}
|
|
<MainNavTime />
|
|
```
|
|
|
|
### Step 3: Verify Integration
|
|
|
|
After changes:
|
|
- ✅ Time updates every second
|
|
- ✅ Uses unified refresh system
|
|
- ✅ Proper cleanup on unmount
|
|
- ✅ No memory leaks
|
|
- ✅ Consistent with other widgets
|
|
|
|
## 📊 Benefits
|
|
|
|
1. **Real-time clock**: Time updates every second
|
|
2. **Unified system**: Uses same refresh manager as widgets
|
|
3. **Memory safe**: Proper cleanup prevents leaks
|
|
4. **Consistent**: Same pattern as other components
|
|
5. **Maintainable**: Centralized refresh logic
|
|
|
|
## 🔧 Technical Details
|
|
|
|
### Refresh Configuration
|
|
|
|
- **Resource**: `navbar-time`
|
|
- **Interval**: 1000ms (1 second)
|
|
- **Priority**: `high` (real-time display)
|
|
- **API Calls**: None (client-side only)
|
|
- **Cleanup**: Automatic via `useUnifiedRefresh`
|
|
|
|
### Integration with Refresh Manager
|
|
|
|
The time component registers with the refresh manager:
|
|
|
|
```typescript
|
|
useUnifiedRefresh({
|
|
resource: 'navbar-time',
|
|
interval: REFRESH_INTERVALS.NAVBAR_TIME, // 1000ms
|
|
enabled: true, // Always enabled
|
|
onRefresh: async () => {
|
|
setCurrentTime(new Date());
|
|
},
|
|
priority: 'high',
|
|
});
|
|
```
|
|
|
|
## ✅ Implementation Checklist
|
|
|
|
- [x] Create `components/main-nav-time.tsx`
|
|
- [x] Add `NAVBAR_TIME` to refresh intervals
|
|
- [x] Add `navbar-time` to refreshable resources
|
|
- [ ] Update `components/main-nav.tsx` to use new component
|
|
- [ ] Test time updates correctly
|
|
- [ ] Verify cleanup on unmount
|
|
- [ ] Test with multiple tabs
|
|
|
|
## 🎯 Expected Result
|
|
|
|
After implementation:
|
|
- Time updates smoothly every second
|
|
- No performance impact
|
|
- No memory leaks
|
|
- Consistent with unified refresh system
|
|
|
|
---
|
|
|
|
*Last Updated: Navbar Time Integration Guide*
|