4b27047e63
- Added new API response types (`ApiCheckbox`, `ApiDailyView`, `ApiHistoryItem`) for better type safety. - Updated `getTodaysDailyView`, `getDailyView`, and `getHistory` methods to utilize new types and transform date strings into Date objects. - Refactored `addCheckbox` and `updateCheckbox` methods to handle checkbox creation and updates with improved error handling. - Optimized `DailyAddForm` for better UX by removing unnecessary loading states and implementing optimistic UI updates. - Enhanced `useDaily` hook to support checkbox type management and rollback on errors during updates. - Updated `DailyPageClient` to leverage new checkbox handling methods for adding tasks.
107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useRef } from 'react';
|
||
import { DailyCheckboxType } from '@/lib/types';
|
||
import { Button } from '@/components/ui/Button';
|
||
import { Input } from '@/components/ui/Input';
|
||
|
||
interface DailyAddFormProps {
|
||
onAdd: (text: string, type: DailyCheckboxType) => Promise<void>;
|
||
disabled?: boolean;
|
||
placeholder?: string;
|
||
}
|
||
|
||
export function DailyAddForm({ onAdd, disabled = false, placeholder = "Ajouter une tâche..." }: DailyAddFormProps) {
|
||
const [newCheckboxText, setNewCheckboxText] = useState('');
|
||
const [selectedType, setSelectedType] = useState<DailyCheckboxType>('task');
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const handleAddCheckbox = () => {
|
||
if (!newCheckboxText.trim()) return;
|
||
|
||
const text = newCheckboxText.trim();
|
||
|
||
// Vider et refocus IMMÉDIATEMENT pour l'UX optimiste
|
||
setNewCheckboxText('');
|
||
inputRef.current?.focus();
|
||
|
||
// Lancer l'ajout en arrière-plan (fire and forget)
|
||
onAdd(text, selectedType).catch(error => {
|
||
console.error('Erreur lors de l\'ajout:', error);
|
||
// En cas d'erreur, on pourrait restaurer le texte
|
||
// setNewCheckboxText(text);
|
||
});
|
||
};
|
||
|
||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
handleAddCheckbox();
|
||
}
|
||
};
|
||
|
||
const getPlaceholder = () => {
|
||
if (placeholder !== "Ajouter une tâche...") return placeholder;
|
||
return selectedType === 'meeting' ? 'Ajouter une réunion...' : 'Ajouter une tâche...';
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-2">
|
||
{/* Sélecteur de type */}
|
||
<div className="flex gap-2">
|
||
<Button
|
||
type="button"
|
||
onClick={() => setSelectedType('task')}
|
||
variant="ghost"
|
||
size="sm"
|
||
className={`flex items-center gap-1 text-xs border-l-4 ${
|
||
selectedType === 'task'
|
||
? 'border-l-green-500 bg-green-100 dark:bg-green-900/40 text-green-900 dark:text-green-100 font-medium'
|
||
: 'border-l-green-300 hover:border-l-green-400 opacity-70 hover:opacity-90'
|
||
}`}
|
||
disabled={disabled}
|
||
>
|
||
✅ Tâche
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={() => setSelectedType('meeting')}
|
||
variant="ghost"
|
||
size="sm"
|
||
className={`flex items-center gap-1 text-xs border-l-4 ${
|
||
selectedType === 'meeting'
|
||
? 'border-l-blue-500 bg-blue-100 dark:bg-blue-900/40 text-blue-900 dark:text-blue-100 font-medium'
|
||
: 'border-l-blue-300 hover:border-l-blue-400 opacity-70 hover:opacity-90'
|
||
}`}
|
||
disabled={disabled}
|
||
>
|
||
🗓️ Réunion
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Champ de saisie et options */}
|
||
<div className="flex gap-2">
|
||
<Input
|
||
ref={inputRef}
|
||
type="text"
|
||
placeholder={getPlaceholder()}
|
||
value={newCheckboxText}
|
||
onChange={(e) => setNewCheckboxText(e.target.value)}
|
||
onKeyDown={handleKeyPress}
|
||
disabled={disabled}
|
||
className="flex-1 min-w-[300px]"
|
||
/>
|
||
<Button
|
||
onClick={handleAddCheckbox}
|
||
disabled={!newCheckboxText.trim() || disabled}
|
||
variant="primary"
|
||
size="sm"
|
||
className="min-w-[40px]"
|
||
>
|
||
+
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|