julienfroidefond/workshop-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: streamline date and title handling in NewWeatherPage and NewWeeklyCheckInPage components for improved user experience
Some checks failed
Deploy with Docker Compose / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Julien Froidefond
2026-02-04 11:02:52 +01:00
parent ef0772f894
commit e8ffccd286
4 changed files with 68 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/weather/new/page.tsx
View File

@@ -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<string | null>(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<HTMLFormElement>) {
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<HTMLInputElement>) {
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<HTMLInputElement>) {
setTitle(e.target.value);
setIsTitleManuallyEdited(true);
}
return (
<main className="mx-auto max-w-2xl px-4 py-8">
@@ -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"
/>

32
src/app/weekly-checkin/new/page.tsx
View File

@@ -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<string | null>(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<HTMLFormElement>) {
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<HTMLInputElement>) {
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<HTMLInputElement>) {
setTitle(e.target.value);
setIsTitleManuallyEdited(true);
}
return (
<main className="mx-auto max-w-2xl px-4 py-8">
@@ -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"
/>

58
src/components/weather/WeatherCard.tsx
View File

@@ -128,23 +128,23 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
</td>
{/* Performance */}
<td className="px-4 py-3">
<td className="w-24 px-2 py-3">
{canEditThis ? (
<div className="relative">
<div className="relative mx-auto w-fit">
<select
value={performanceEmoji || ''}
onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
className="w-full appearance-none rounded-lg border border-border bg-card px-3 py-2.5 pr-10 text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
>
{WEATHER_EMOJIS.map(({ emoji, label }) => (
{WEATHER_EMOJIS.map(({ emoji }) => (
<option key={emoji || 'none'} value={emoji}>
{emoji} {label}
{emoji}
</option>
))}
</select>
<div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
<div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
<svg
className="h-4 w-4 text-muted"
className="h-3 w-3 text-muted"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -159,23 +159,23 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
</td>
{/* Moral */}
<td className="px-4 py-3">
<td className="w-24 px-2 py-3">
{canEditThis ? (
<div className="relative">
<div className="relative mx-auto w-fit">
<select
value={moralEmoji || ''}
onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
className="w-full appearance-none rounded-lg border border-border bg-card px-3 py-2.5 pr-10 text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
>
{WEATHER_EMOJIS.map(({ emoji, label }) => (
{WEATHER_EMOJIS.map(({ emoji }) => (
<option key={emoji || 'none'} value={emoji}>
{emoji} {label}
{emoji}
</option>
))}
</select>
<div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
<div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
<svg
className="h-4 w-4 text-muted"
className="h-3 w-3 text-muted"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -190,23 +190,23 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
</td>
{/* Flux */}
<td className="px-4 py-3">
<td className="w-24 px-2 py-3">
{canEditThis ? (
<div className="relative">
<div className="relative mx-auto w-fit">
<select
value={fluxEmoji || ''}
onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
className="w-full appearance-none rounded-lg border border-border bg-card px-3 py-2.5 pr-10 text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
>
{WEATHER_EMOJIS.map(({ emoji, label }) => (
{WEATHER_EMOJIS.map(({ emoji }) => (
<option key={emoji || 'none'} value={emoji}>
{emoji} {label}
{emoji}
</option>
))}
</select>
<div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
<div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
<svg
className="h-4 w-4 text-muted"
className="h-3 w-3 text-muted"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -221,23 +221,23 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
</td>
{/* Création de valeur */}
<td className="px-4 py-3">
<td className="w-24 px-2 py-3">
{canEditThis ? (
<div className="relative">
<div className="relative mx-auto w-fit">
<select
value={valueCreationEmoji || ''}
onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
className="w-full appearance-none rounded-lg border border-border bg-card px-3 py-2.5 pr-10 text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
>
{WEATHER_EMOJIS.map(({ emoji, label }) => (
{WEATHER_EMOJIS.map(({ emoji }) => (
<option key={emoji || 'none'} value={emoji}>
{emoji} {label}
{emoji}
</option>
))}
</select>
<div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
<div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
<svg
className="h-4 w-4 text-muted"
className="h-3 w-3 text-muted"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -252,7 +252,7 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
</td>
{/* Notes */}
<td className="px-4 py-3 min-w-[300px]">
<td className="px-4 py-3 min-w-[400px]">
{canEditThis ? (
<Textarea
value={notes}

2
src/components/weather/WeatherShareModal.tsx
View File

@@ -233,7 +233,7 @@ export function WeatherShareModal({
disabled={isPending || (shareType === 'user' && !email) || (shareType === 'team' && !teamId)}
className="w-full"
>
{isPending ? 'Partage...' : shareType === 'team' ? 'Partager à l&apos;équipe' : 'Partager'}
{isPending ? 'Partage...' : shareType === 'team' ? "Partager à l'équipe" : 'Partager'}
</Button>
</form>
)}