From e8ffccd28670391c5e5596903dcbdf2b1ba3a422 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Wed, 4 Feb 2026 11:02:52 +0100 Subject: [PATCH] refactor: streamline date and title handling in NewWeatherPage and NewWeeklyCheckInPage components for improved user experience --- src/app/weather/new/page.tsx | 33 ++++++----- src/app/weekly-checkin/new/page.tsx | 32 ++++++----- src/components/weather/WeatherCard.tsx | 58 ++++++++++---------- src/components/weather/WeatherShareModal.tsx | 2 +- 4 files changed, 68 insertions(+), 57 deletions(-) diff --git a/src/app/weather/new/page.tsx b/src/app/weather/new/page.tsx index b1bf2be..8bc6275 100644 --- a/src/app/weather/new/page.tsx +++ b/src/app/weather/new/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState } from 'react'; import { useRouter } from 'next/navigation'; import { Card, @@ -19,16 +19,15 @@ export default function NewWeatherPage() { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]); - const [title, setTitle] = useState(''); + const [title, setTitle] = useState(() => getWeekYearLabel(new Date(new Date().toISOString().split('T')[0]))); + const [isTitleManuallyEdited, setIsTitleManuallyEdited] = useState(false); async function handleSubmit(e: React.FormEvent) { e.preventDefault(); setError(null); setLoading(true); - const formData = new FormData(e.currentTarget); - const dateStr = formData.get('date') as string; - const date = dateStr ? new Date(dateStr) : undefined; + const date = selectedDate ? new Date(selectedDate) : undefined; if (!title) { setError('Veuillez remplir le titre'); @@ -47,13 +46,19 @@ export default function NewWeatherPage() { router.push(`/weather/${result.data?.id}`); } - // Default date to today - const today = new Date().toISOString().split('T')[0]; + function handleDateChange(e: React.ChangeEvent) { + const newDate = e.target.value; + setSelectedDate(newDate); + // Only update title if user hasn't manually modified it + if (!isTitleManuallyEdited) { + setTitle(getWeekYearLabel(new Date(newDate))); + } + } - // Update title when date changes - useEffect(() => { - setTitle(getWeekYearLabel(new Date(selectedDate))); - }, [selectedDate]); + function handleTitleChange(e: React.ChangeEvent) { + setTitle(e.target.value); + setIsTitleManuallyEdited(true); + } return (
@@ -81,7 +86,7 @@ export default function NewWeatherPage() { name="title" placeholder="Ex: Météo S05 - 2026" value={title} - onChange={(e) => setTitle(e.target.value)} + onChange={handleTitleChange} required /> @@ -93,8 +98,8 @@ export default function NewWeatherPage() { id="date" name="date" type="date" - defaultValue={today} - onChange={(e) => setSelectedDate(e.target.value)} + value={selectedDate} + onChange={handleDateChange} required className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" /> diff --git a/src/app/weekly-checkin/new/page.tsx b/src/app/weekly-checkin/new/page.tsx index 3529419..63d06f4 100644 --- a/src/app/weekly-checkin/new/page.tsx +++ b/src/app/weekly-checkin/new/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState } from 'react'; import { useRouter } from 'next/navigation'; import { Card, @@ -19,7 +19,8 @@ export default function NewWeeklyCheckInPage() { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]); - const [title, setTitle] = useState(''); + const [title, setTitle] = useState(() => getWeekYearLabel(new Date(new Date().toISOString().split('T')[0]))); + const [isTitleManuallyEdited, setIsTitleManuallyEdited] = useState(false); async function handleSubmit(e: React.FormEvent) { e.preventDefault(); @@ -28,8 +29,7 @@ export default function NewWeeklyCheckInPage() { const formData = new FormData(e.currentTarget); const participant = formData.get('participant') as string; - const dateStr = formData.get('date') as string; - const date = dateStr ? new Date(dateStr) : undefined; + const date = selectedDate ? new Date(selectedDate) : undefined; if (!title || !participant) { setError('Veuillez remplir tous les champs'); @@ -48,13 +48,19 @@ export default function NewWeeklyCheckInPage() { router.push(`/weekly-checkin/${result.data?.id}`); } - // Default date to today - const today = new Date().toISOString().split('T')[0]; + function handleDateChange(e: React.ChangeEvent) { + const newDate = e.target.value; + setSelectedDate(newDate); + // Only update title if user hasn't manually modified it + if (!isTitleManuallyEdited) { + setTitle(getWeekYearLabel(new Date(newDate))); + } + } - // Update title when date changes - useEffect(() => { - setTitle(getWeekYearLabel(new Date(selectedDate))); - }, [selectedDate]); + function handleTitleChange(e: React.ChangeEvent) { + setTitle(e.target.value); + setIsTitleManuallyEdited(true); + } return (
@@ -83,7 +89,7 @@ export default function NewWeeklyCheckInPage() { name="title" placeholder="Ex: Check-in semaine du 15 janvier" value={title} - onChange={(e) => setTitle(e.target.value)} + onChange={handleTitleChange} required /> @@ -102,8 +108,8 @@ export default function NewWeeklyCheckInPage() { id="date" name="date" type="date" - defaultValue={today} - onChange={(e) => setSelectedDate(e.target.value)} + value={selectedDate} + onChange={handleDateChange} required className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" /> diff --git a/src/components/weather/WeatherCard.tsx b/src/components/weather/WeatherCard.tsx index da385a5..74d5c36 100644 --- a/src/components/weather/WeatherCard.tsx +++ b/src/components/weather/WeatherCard.tsx @@ -128,23 +128,23 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe {/* Performance */} - + {canEditThis ? ( -
+
-
+
{/* Moral */} - + {canEditThis ? ( -
+
-
+
{/* Flux */} - + {canEditThis ? ( -
+
-
+
{/* Création de valeur */} - + {canEditThis ? ( -
+
-
+
{/* Notes */} - + {canEditThis ? (