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

refactor: consolidate editable title components into a unified UI module, removing redundant files and updating imports

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-16 08:58:09 +01:00
parent 56a9c2c3be
commit 246298dd82
11 changed files with 123 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/app/motivators/[id]/EditableTitle.tsx
View File

@@ -1,115 +0,0 @@
'use client';
import { useState, useTransition, useRef, useEffect } from 'react';
import { updateMotivatorSession } from '@/actions/moving-motivators';
interface EditableMotivatorTitleProps {
sessionId: string;
initialTitle: string;
isOwner: boolean;
}
export function EditableMotivatorTitle({
sessionId,
initialTitle,
isOwner,
}: EditableMotivatorTitleProps) {
const [isEditing, setIsEditing] = useState(false);
const [title, setTitle] = useState(initialTitle);
const [isPending, startTransition] = useTransition();
const inputRef = useRef<HTMLInputElement>(null);
const prevInitialTitleRef = useRef(initialTitle);
useEffect(() => {
if (isEditing && inputRef.current) {
inputRef.current.focus();
inputRef.current.select();
}
}, [isEditing]);
// Update local state when prop changes (e.g., from SSE) - only when not editing
// This is a valid pattern for syncing external state (SSE updates) with local state
// eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => {
if (!isEditing && prevInitialTitleRef.current !== initialTitle) {
prevInitialTitleRef.current = initialTitle;
// Synchronizing with external prop updates (e.g., from SSE)
// eslint-disable-next-line react-hooks/exhaustive-deps
setTitle(initialTitle);
}
}, [initialTitle, isEditing]);
const handleSave = () => {
if (!title.trim()) {
setTitle(initialTitle);
setIsEditing(false);
return;
}
if (title.trim() === initialTitle) {
setIsEditing(false);
return;
}
startTransition(async () => {
const result = await updateMotivatorSession(sessionId, { title: title.trim() });
if (!result.success) {
setTitle(initialTitle);
console.error(result.error);
}
setIsEditing(false);
});
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
e.preventDefault();
handleSave();
} else if (e.key === 'Escape') {
setTitle(initialTitle);
setIsEditing(false);
}
};
if (!isOwner) {
return <h1 className="text-3xl font-bold text-foreground">{title}</h1>;
}
if (isEditing) {
return (
<input
ref={inputRef}
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
onBlur={handleSave}
onKeyDown={handleKeyDown}
disabled={isPending}
className="w-full max-w-md rounded-lg border border-border bg-input px-3 py-1.5 text-3xl font-bold text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50"
/>
);
}
return (
<button
onClick={() => setIsEditing(true)}
className="group flex items-center gap-2 text-left"
title="Cliquez pour modifier"
>
<h1 className="text-3xl font-bold text-foreground">{title}</h1>
<svg
className="h-5 w-5 text-muted opacity-0 transition-opacity group-hover:opacity-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
/>
</svg>
</button>
);
}

2
src/app/motivators/[id]/page.tsx
View File

@@ -4,7 +4,7 @@ import { auth } from '@/lib/auth';
import { getMotivatorSessionById } from '@/services/moving-motivators';
import { MotivatorBoard, MotivatorLiveWrapper } from '@/components/moving-motivators';
import { Badge, CollaboratorDisplay } from '@/components/ui';
import { EditableMotivatorTitle } from './EditableTitle';
import { EditableMotivatorTitle } from '@/components/ui';
interface MotivatorSessionPageProps {
params: Promise<{ id: string }>;

4
src/app/sessions/[id]/page.tsx
View File

@@ -4,7 +4,7 @@ import { auth } from '@/lib/auth';
import { getSessionById } from '@/services/sessions';
import { SwotBoard } from '@/components/swot/SwotBoard';
import { SessionLiveWrapper } from '@/components/collaboration';
import { EditableTitle } from '@/components/session';
import { EditableSessionTitle } from '@/components/ui';
import { Badge, CollaboratorDisplay } from '@/components/ui';
interface SessionPageProps {
@@ -44,7 +44,7 @@ export default async function SessionPage({ params }: SessionPageProps) {
<div className="flex items-start justify-between">
<div>
<EditableTitle
<EditableSessionTitle
sessionId={session.id}
initialTitle={session.title}
isOwner={session.isOwner}

114
src/app/year-review/[id]/EditableTitle.tsx
View File

@@ -1,114 +0,0 @@
'use client';
import { useState, useTransition, useRef, useEffect } from 'react';
import { updateYearReviewSession } from '@/actions/year-review';
interface EditableYearReviewTitleProps {
sessionId: string;
initialTitle: string;
isOwner: boolean;
}
export function EditableYearReviewTitle({
sessionId,
initialTitle,
isOwner,
}: EditableYearReviewTitleProps) {
const [isEditing, setIsEditing] = useState(false);
const [title, setTitle] = useState(initialTitle);
const [isPending, startTransition] = useTransition();
const inputRef = useRef<HTMLInputElement>(null);
const prevInitialTitleRef = useRef(initialTitle);
useEffect(() => {
if (isEditing && inputRef.current) {
inputRef.current.focus();
inputRef.current.select();
}
}, [isEditing]);
// Update local state when prop changes (e.g., from SSE) - only when not editing
// This is a valid pattern for syncing external state (SSE updates) with local state
useEffect(() => {
if (!isEditing && prevInitialTitleRef.current !== initialTitle) {
prevInitialTitleRef.current = initialTitle;
// Synchronizing with external prop updates (e.g., from SSE)
// eslint-disable-next-line react-hooks/exhaustive-deps
setTitle(initialTitle);
}
}, [initialTitle, isEditing]);
const handleSave = () => {
if (!title.trim()) {
setTitle(initialTitle);
setIsEditing(false);
return;
}
if (title.trim() === initialTitle) {
setIsEditing(false);
return;
}
startTransition(async () => {
const result = await updateYearReviewSession(sessionId, { title: title.trim() });
if (!result.success) {
setTitle(initialTitle);
console.error(result.error);
}
setIsEditing(false);
});
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
e.preventDefault();
handleSave();
} else if (e.key === 'Escape') {
setTitle(initialTitle);
setIsEditing(false);
}
};
if (!isOwner) {
return <h1 className="text-3xl font-bold text-foreground">{title}</h1>;
}
if (isEditing) {
return (
<input
ref={inputRef}
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
onBlur={handleSave}
onKeyDown={handleKeyDown}
disabled={isPending}
className="w-full max-w-md rounded-lg border border-border bg-input px-3 py-1.5 text-3xl font-bold text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50"
/>
);
}
return (
<button
onClick={() => setIsEditing(true)}
className="group flex items-center gap-2 text-left"
title="Cliquez pour modifier"
>
<h1 className="text-3xl font-bold text-foreground">{title}</h1>
<svg
className="h-5 w-5 text-muted opacity-0 transition-opacity group-hover:opacity-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
/>
</svg>
</button>
);
}

2
src/app/year-review/[id]/page.tsx
View File

@@ -4,7 +4,7 @@ import { auth } from '@/lib/auth';
import { getYearReviewSessionById } from '@/services/year-review';
import { YearReviewBoard, YearReviewLiveWrapper } from '@/components/year-review';
import { Badge, CollaboratorDisplay } from '@/components/ui';
import { EditableYearReviewTitle } from './EditableTitle';
import { EditableYearReviewTitle } from '@/components/ui';
interface YearReviewSessionPageProps {
params: Promise<{ id: string }>;

1
src/components/session/index.ts
View File

@@ -1 +0,0 @@
export { EditableTitle } from './EditableTitle';

29
src/components/ui/EditableMotivatorTitle.tsx Normal file
View File

@@ -0,0 +1,29 @@
'use client';
import { EditableTitle } from './EditableTitle';
import { updateMotivatorSession } from '@/actions/moving-motivators';
interface EditableMotivatorTitleProps {
sessionId: string;
initialTitle: string;
isOwner: boolean;
}
export function EditableMotivatorTitle({
sessionId,
initialTitle,
isOwner,
}: EditableMotivatorTitleProps) {
return (
<EditableTitle
sessionId={sessionId}
initialTitle={initialTitle}
isOwner={isOwner}
onUpdate={async (id, title) => {
const result = await updateMotivatorSession(id, { title });
return result;
}}
/>
);
}

29
src/components/ui/EditableSessionTitle.tsx Normal file
View File

@@ -0,0 +1,29 @@
'use client';
import { EditableTitle } from './EditableTitle';
import { updateSessionTitle } from '@/actions/session';
interface EditableSessionTitleProps {
sessionId: string;
initialTitle: string;
isOwner: boolean;
}
export function EditableSessionTitle({
sessionId,
initialTitle,
isOwner,
}: EditableSessionTitleProps) {
return (
<EditableTitle
sessionId={sessionId}
initialTitle={initialTitle}
isOwner={isOwner}
onUpdate={async (id, title) => {
const result = await updateSessionTitle(id, title);
return result;
}}
/>
);
}

51
src/components/session/EditableTitle.tsx → src/components/ui/EditableTitle.tsx
View File

@@ -1,20 +1,28 @@
'use client';
import { useState, useTransition, useRef, useEffect } from 'react';
import { updateSessionTitle } from '@/actions/session';
import { useState, useTransition, useRef, useEffect, useMemo } from 'react';
interface EditableTitleProps {
sessionId: string;
initialTitle: string;
isOwner: boolean;
onUpdate: (sessionId: string, title: string) => Promise<{ success: boolean; error?: string }>;
}
export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitleProps) {
export function EditableTitle({
sessionId,
initialTitle,
isOwner,
onUpdate,
}: EditableTitleProps) {
const [isEditing, setIsEditing] = useState(false);
const [title, setTitle] = useState(initialTitle);
const [editingTitle, setEditingTitle] = useState('');
const [isPending, startTransition] = useTransition();
const inputRef = useRef<HTMLInputElement>(null);
// Use editingTitle when editing, otherwise use initialTitle (synced from SSE)
const title = useMemo(() => (isEditing ? editingTitle : initialTitle), [isEditing, editingTitle, initialTitle]);
useEffect(() => {
if (isEditing && inputRef.current) {
inputRef.current.focus();
@@ -22,35 +30,28 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
}
}, [isEditing]);
// Update local state when prop changes (e.g., from SSE) - only when not editing
// This is a valid pattern for syncing external state (SSE updates) with local state
useEffect(() => {
if (!isEditing) {
// Synchronizing with external prop updates (e.g., from SSE)
// eslint-disable-next-line react-hooks/exhaustive-deps
setTitle(initialTitle);
}
}, [initialTitle, isEditing]);
const handleSave = () => {
if (!title.trim()) {
setTitle(initialTitle);
const trimmedTitle = editingTitle.trim();
if (!trimmedTitle) {
setEditingTitle('');
setIsEditing(false);
return;
}
if (title.trim() === initialTitle) {
if (trimmedTitle === initialTitle) {
setEditingTitle('');
setIsEditing(false);
return;
}
startTransition(async () => {
const result = await updateSessionTitle(sessionId, title.trim());
const result = await onUpdate(sessionId, trimmedTitle);
if (!result.success) {
setTitle(initialTitle);
setEditingTitle('');
console.error(result.error);
}
setIsEditing(false);
setEditingTitle('');
});
};
@@ -59,7 +60,7 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
e.preventDefault();
handleSave();
} else if (e.key === 'Escape') {
setTitle(initialTitle);
setEditingTitle('');
setIsEditing(false);
}
};
@@ -73,8 +74,8 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
<input
ref={inputRef}
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
value={editingTitle}
onChange={(e) => setEditingTitle(e.target.value)}
onBlur={handleSave}
onKeyDown={handleKeyDown}
disabled={isPending}
@@ -85,7 +86,10 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
return (
<button
onClick={() => setIsEditing(true)}
onClick={() => {
setEditingTitle(initialTitle);
setIsEditing(true);
}}
className="group flex items-center gap-2 text-left"
title="Cliquez pour modifier"
>
@@ -106,3 +110,4 @@ export function EditableTitle({ sessionId, initialTitle, isOwner }: EditableTitl
</button>
);
}

29
src/components/ui/EditableYearReviewTitle.tsx Normal file
View File

@@ -0,0 +1,29 @@
'use client';
import { EditableTitle } from './EditableTitle';
import { updateYearReviewSession } from '@/actions/year-review';
interface EditableYearReviewTitleProps {
sessionId: string;
initialTitle: string;
isOwner: boolean;
}
export function EditableYearReviewTitle({
sessionId,
initialTitle,
isOwner,
}: EditableYearReviewTitleProps) {
return (
<EditableTitle
sessionId={sessionId}
initialTitle={initialTitle}
isOwner={isOwner}
onUpdate={async (id, title) => {
const result = await updateYearReviewSession(id, { title });
return result;
}}
/>
);
}

4
src/components/ui/index.ts
View File

@@ -3,6 +3,10 @@ export { Badge } from './Badge';
export { Button } from './Button';
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
export { CollaboratorDisplay } from './CollaboratorDisplay';
export { EditableTitle } from './EditableTitle';
export { EditableSessionTitle } from './EditableSessionTitle';
export { EditableMotivatorTitle } from './EditableMotivatorTitle';
export { EditableYearReviewTitle } from './EditableYearReviewTitle';
export { Input } from './Input';
export { Modal, ModalFooter } from './Modal';
export { Textarea } from './Textarea';