Remove unused OfflineIndicator, OfflineSyncDetails, and OfflineSyncManager components
- Deleted obsolete offline-related components as they are no longer in use. - Simplified imports and removed related context dependencies. - Updated synchronization and toggle switch handling in `CharacterComponent`, `WorldSetting`, and `LocationComponent` to improve consistency.
This commit is contained in:
natreex
@@ -1,174 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import OfflineContext from '@/context/OfflineContext';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faWifi, faWifiSlash, faSync, faCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
/**
|
||||
* OfflineIndicator - Displays current online/offline status and sync progress
|
||||
* Allows user to toggle manual offline mode
|
||||
*/
|
||||
export default function OfflineIndicator() {
|
||||
const { offlineMode, toggleOfflineMode, syncNow } = useContext(OfflineContext);
|
||||
|
||||
const {
|
||||
isOffline,
|
||||
isManuallyOffline,
|
||||
isNetworkOnline,
|
||||
isDatabaseInitialized,
|
||||
syncProgress,
|
||||
lastSyncAt,
|
||||
error
|
||||
} = offlineMode;
|
||||
|
||||
// Determine status color and text
|
||||
const getStatusInfo = () => {
|
||||
if (!isDatabaseInitialized) {
|
||||
return {
|
||||
color: 'text-gray-400',
|
||||
bgColor: 'bg-gray-100',
|
||||
icon: faCircle,
|
||||
text: 'DB non initialisée'
|
||||
};
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return {
|
||||
color: 'text-red-500',
|
||||
bgColor: 'bg-red-50',
|
||||
icon: faExclamationTriangle,
|
||||
text: 'Erreur de sync'
|
||||
};
|
||||
}
|
||||
|
||||
if (syncProgress.isSyncing) {
|
||||
return {
|
||||
color: 'text-blue-500',
|
||||
bgColor: 'bg-blue-50',
|
||||
icon: faSync,
|
||||
text: 'Synchronisation...',
|
||||
spin: true
|
||||
};
|
||||
}
|
||||
|
||||
if (isOffline) {
|
||||
if (syncProgress.pendingChanges > 0) {
|
||||
return {
|
||||
color: 'text-orange-500',
|
||||
bgColor: 'bg-orange-50',
|
||||
icon: faWifiSlash,
|
||||
text: `Hors ligne (${syncProgress.pendingChanges} en attente)`
|
||||
};
|
||||
}
|
||||
return {
|
||||
color: 'text-orange-500',
|
||||
bgColor: 'bg-orange-50',
|
||||
icon: faWifiSlash,
|
||||
text: isManuallyOffline ? 'Mode hors ligne' : 'Hors ligne'
|
||||
};
|
||||
}
|
||||
|
||||
if (syncProgress.pendingChanges > 0) {
|
||||
return {
|
||||
color: 'text-yellow-500',
|
||||
bgColor: 'bg-yellow-50',
|
||||
icon: faSync,
|
||||
text: `${syncProgress.pendingChanges} changements à sync`
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
color: 'text-green-500',
|
||||
bgColor: 'bg-green-50',
|
||||
icon: faCheck,
|
||||
text: 'Synchronisé'
|
||||
};
|
||||
};
|
||||
|
||||
const statusInfo = getStatusInfo();
|
||||
|
||||
// Format last sync time
|
||||
const formatLastSync = () => {
|
||||
if (!lastSyncAt) return 'Jamais';
|
||||
|
||||
const diff = Date.now() - lastSyncAt;
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
|
||||
if (hours > 0) return `Il y a ${hours}h`;
|
||||
if (minutes > 0) return `Il y a ${minutes}min`;
|
||||
return 'À l\'instant';
|
||||
};
|
||||
|
||||
const handleSyncNow = async () => {
|
||||
if (!isOffline && !syncProgress.isSyncing) {
|
||||
await syncNow();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-white border-b border-gray-200">
|
||||
{/* Status indicator */}
|
||||
<div className={`flex items-center gap-2 px-3 py-1 rounded-full ${statusInfo.bgColor}`}>
|
||||
<FontAwesomeIcon
|
||||
icon={statusInfo.icon}
|
||||
className={`${statusInfo.color} text-sm`}
|
||||
spin={statusInfo.spin}
|
||||
/>
|
||||
<span className={`text-sm font-medium ${statusInfo.color}`}>
|
||||
{statusInfo.text}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Last sync time */}
|
||||
{isDatabaseInitialized && !isOffline && (
|
||||
<span className="text-xs text-gray-500">
|
||||
Dernière sync: {formatLastSync()}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Error message */}
|
||||
{error && (
|
||||
<span className="text-xs text-red-500 max-w-xs truncate" title={error}>
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
{/* Manual sync button */}
|
||||
{isDatabaseInitialized && !isOffline && !syncProgress.isSyncing && (
|
||||
<button
|
||||
onClick={handleSyncNow}
|
||||
className="px-3 py-1 text-sm text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
||||
title="Synchroniser maintenant"
|
||||
>
|
||||
<FontAwesomeIcon icon={faSync} className="mr-1" />
|
||||
Sync
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Offline toggle */}
|
||||
{isDatabaseInitialized && (
|
||||
<button
|
||||
onClick={toggleOfflineMode}
|
||||
className={`px-3 py-1 text-sm rounded transition-colors ${
|
||||
isManuallyOffline
|
||||
? 'bg-orange-100 text-orange-700 hover:bg-orange-200'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}
|
||||
title={isManuallyOffline ? 'Passer en ligne' : 'Passer hors ligne'}
|
||||
disabled={!isNetworkOnline && !isManuallyOffline}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={isOffline ? faWifiSlash : faWifi}
|
||||
className="mr-1"
|
||||
/>
|
||||
{isManuallyOffline ? 'En ligne' : 'Hors ligne'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import OfflineContext from '@/context/OfflineContext';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faDatabase, faSync, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
/**
|
||||
* OfflineSyncDetails - Detailed view of sync status per table
|
||||
* Shows pending changes and last sync time for each data type
|
||||
*/
|
||||
export default function OfflineSyncDetails() {
|
||||
const { offlineMode } = useContext(OfflineContext);
|
||||
const { syncProgress, isDatabaseInitialized } = offlineMode;
|
||||
|
||||
if (!isDatabaseInitialized) {
|
||||
return (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<FontAwesomeIcon icon={faDatabase} className="text-3xl mb-2" />
|
||||
<p>Base de données non initialisée</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!syncProgress.tables || syncProgress.tables.length === 0) {
|
||||
return (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<FontAwesomeIcon icon={faSync} className="text-3xl mb-2" />
|
||||
<p>Aucune donnée de synchronisation disponible</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Format timestamp
|
||||
const formatTime = (timestamp: number) => {
|
||||
if (!timestamp) return 'Jamais';
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
// Get friendly name for table
|
||||
const getTableName = (table: string): string => {
|
||||
const names: { [key: string]: string } = {
|
||||
'erit_books': 'Livres',
|
||||
'book_chapters': 'Chapitres',
|
||||
'book_chapter_content': 'Contenu des chapitres',
|
||||
'book_characters': 'Personnages',
|
||||
'book_world': 'Monde',
|
||||
'book_world_elements': 'Éléments du monde',
|
||||
'ai_conversations': 'Conversations IA',
|
||||
'ai_messages_history': 'Messages IA',
|
||||
'book_guide_line': 'Lignes directrices',
|
||||
'book_plot_points': 'Points de l\'intrigue',
|
||||
'book_incidents': 'Incidents'
|
||||
};
|
||||
return names[table] || table;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<FontAwesomeIcon icon={faDatabase} />
|
||||
État de synchronisation
|
||||
</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
{syncProgress.tables.map((tableStatus) => {
|
||||
const hasPending = tableStatus.pending > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={tableStatus.table}
|
||||
className={`p-3 rounded-lg border ${
|
||||
hasPending
|
||||
? 'border-orange-200 bg-orange-50'
|
||||
: 'border-gray-200 bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-sm">
|
||||
{getTableName(tableStatus.table)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Dernière sync: {formatTime(tableStatus.lastSync)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasPending && (
|
||||
<div className="flex items-center gap-2 text-orange-600">
|
||||
<FontAwesomeIcon
|
||||
icon={faExclamationCircle}
|
||||
className="text-sm"
|
||||
/>
|
||||
<span className="text-sm font-medium">
|
||||
{tableStatus.pending} en attente
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!hasPending && tableStatus.lastSync > 0 && (
|
||||
<div className="text-green-600 text-sm">
|
||||
✓ Synchronisé
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<div className="text-sm text-blue-800">
|
||||
<strong>Total:</strong> {syncProgress.pendingChanges} changement(s) en attente
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,233 +0,0 @@
|
||||
'use client';
|
||||
import { useState, useEffect, useContext } from 'react';
|
||||
import { SessionContext } from '@/context/SessionContext';
|
||||
import { OfflineContext } from '@/context/OfflineContext';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faCloudDownloadAlt,
|
||||
faWifi,
|
||||
faCheckCircle,
|
||||
faSpinner,
|
||||
faBook
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
interface SyncOption {
|
||||
id: 'current' | 'recent' | 'all' | 'skip';
|
||||
label: string;
|
||||
description: string;
|
||||
estimatedSize?: string;
|
||||
bookCount?: number;
|
||||
}
|
||||
|
||||
export default function OfflineSyncManager() {
|
||||
const t = useTranslations();
|
||||
const { session } = useContext(SessionContext);
|
||||
const { syncBooks, isOnline } = useContext(OfflineContext);
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [isFirstSync, setIsFirstSync] = useState(false);
|
||||
const [syncProgress, setSyncProgress] = useState(0);
|
||||
const [selectedOption, setSelectedOption] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
// Check if this is first time user sees sync options
|
||||
const hasSeenSync = localStorage.getItem('hasSeenSyncDialog');
|
||||
if (!hasSeenSync && isOnline && session?.user) {
|
||||
setIsFirstSync(true);
|
||||
setShowDialog(true);
|
||||
}
|
||||
}, [session, isOnline]);
|
||||
|
||||
const syncOptions: SyncOption[] = [
|
||||
{
|
||||
id: 'current',
|
||||
label: t('sync.currentBook'),
|
||||
description: t('sync.currentBookDesc'),
|
||||
estimatedSize: '~5 MB',
|
||||
bookCount: 1
|
||||
},
|
||||
{
|
||||
id: 'recent',
|
||||
label: t('sync.recentBooks'),
|
||||
description: t('sync.recentBooksDesc'),
|
||||
estimatedSize: '~25 MB',
|
||||
bookCount: 3
|
||||
},
|
||||
{
|
||||
id: 'all',
|
||||
label: t('sync.allBooks'),
|
||||
description: t('sync.allBooksDesc'),
|
||||
estimatedSize: '~120 MB',
|
||||
bookCount: 12
|
||||
},
|
||||
{
|
||||
id: 'skip',
|
||||
label: t('sync.skipForNow'),
|
||||
description: t('sync.skipDesc'),
|
||||
}
|
||||
];
|
||||
|
||||
const handleSync = async (option: string) => {
|
||||
if (option === 'skip') {
|
||||
localStorage.setItem('hasSeenSyncDialog', 'true');
|
||||
setShowDialog(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setSyncProgress(0);
|
||||
|
||||
try {
|
||||
// Simulate progressive download
|
||||
const interval = setInterval(() => {
|
||||
setSyncProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(interval);
|
||||
return 100;
|
||||
}
|
||||
return prev + 10;
|
||||
});
|
||||
}, 200);
|
||||
|
||||
// Actual sync logic here
|
||||
// await syncBooks(option);
|
||||
|
||||
localStorage.setItem('hasSeenSyncDialog', 'true');
|
||||
localStorage.setItem('syncPreference', option);
|
||||
|
||||
setTimeout(() => {
|
||||
setShowDialog(false);
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error('Sync failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!showDialog) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-tertiary rounded-2xl p-8 max-w-2xl w-full mx-4 shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="relative">
|
||||
<FontAwesomeIcon
|
||||
icon={faCloudDownloadAlt}
|
||||
className="w-8 h-8 text-primary"
|
||||
/>
|
||||
{isOnline && (
|
||||
<FontAwesomeIcon
|
||||
icon={faWifi}
|
||||
className="w-4 h-4 text-success absolute -bottom-1 -right-1 bg-tertiary rounded-full p-0.5"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">
|
||||
{isFirstSync ? t('sync.welcomeOffline') : t('sync.syncOptions')}
|
||||
</h2>
|
||||
<p className="text-muted text-sm">
|
||||
{t('sync.workAnywhere')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sync Options */}
|
||||
{syncProgress === 0 ? (
|
||||
<div className="space-y-3 mb-6">
|
||||
{syncOptions.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => setSelectedOption(option.id)}
|
||||
className={`
|
||||
w-full p-4 rounded-lg border-2 text-left transition-all
|
||||
${selectedOption === option.id
|
||||
? 'border-primary bg-primary/10'
|
||||
: 'border-gray-dark hover:border-gray'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold flex items-center gap-2">
|
||||
{option.bookCount && (
|
||||
<span className="text-primary">
|
||||
<FontAwesomeIcon icon={faBook} className="w-4 h-4" />
|
||||
{' '}{option.bookCount}
|
||||
</span>
|
||||
)}
|
||||
{option.label}
|
||||
</div>
|
||||
<p className="text-sm text-muted mt-1">
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
{option.estimatedSize && (
|
||||
<span className="text-sm text-muted">
|
||||
{option.estimatedSize}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* Progress Bar */
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-muted">
|
||||
{t('sync.downloading')}...
|
||||
</span>
|
||||
<span className="text-sm font-semibold">
|
||||
{syncProgress}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-dark rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-primary to-info transition-all duration-300"
|
||||
style={{ width: `${syncProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
{syncProgress === 100 && (
|
||||
<div className="mt-4 text-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faCheckCircle}
|
||||
className="w-12 h-12 text-success mx-auto mb-2"
|
||||
/>
|
||||
<p className="text-success font-semibold">
|
||||
{t('sync.complete')}!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
{syncProgress === 0 && (
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => handleSync('skip')}
|
||||
className="px-6 py-2 text-muted hover:text-textPrimary transition-colors"
|
||||
>
|
||||
{t('common.later')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSync(selectedOption)}
|
||||
disabled={!selectedOption}
|
||||
className="
|
||||
px-6 py-2 bg-primary hover:bg-primary/90
|
||||
text-white rounded-lg transition-all
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
flex items-center gap-2
|
||||
"
|
||||
>
|
||||
{selectedOption === 'skip' ? t('common.continue') : t('sync.startSync')}
|
||||
{selectedOption && selectedOption !== 'skip' && (
|
||||
<FontAwesomeIcon icon={faCloudDownloadAlt} className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user