diff --git a/src/app/components/ProjectForm.tsx b/src/app/components/ProjectForm.tsx index 2c2ae11..6898f0f 100644 --- a/src/app/components/ProjectForm.tsx +++ b/src/app/components/ProjectForm.tsx @@ -21,21 +21,20 @@ export function ProjectForm({ onSubmit: (value: ProjectWriteRequest) => void; }) { const options = useProjectOptions(yearId); - const [name, setName] = useState(project?.name ?? ''); - const [summary, setSummary] = useState(project?.summary ?? ''); - const [repository, setRepository] = useState(project?.repository ?? ''); - const [kind, setKind] = useState( - claim ? 'project' : (project?.kind ?? 'project'), - ); - const [groupId, setGroupId] = useState(project?.group?.id ?? ''); - const [memberIds, setMemberIds] = useState(project?.members.map(({id}) => id) ?? []); + const initial = initialValues(project, claim); + const [name, setName] = useState(initial.name); + const [summary, setSummary] = useState(initial.summary); + const [repository, setRepository] = useState(initial.repository); + const [kind, setKind] = useState(initial.kind); + const [groupId, setGroupId] = useState(initial.groupId); + const [memberIds, setMemberIds] = useState(initial.memberIds); const [memberQuery, setMemberQuery] = useState(''); const [memberResultsOpen, setMemberResultsOpen] = useState(false); const [highlightedMember, setHighlightedMember] = useState(-1); const memberListboxId = useId(); const memberSearchId = useId(); - const [needsHelp, setNeedsHelp] = useState(project?.needsHelp ?? false); - const [helpDetails, setHelpDetails] = useState(project?.helpDetails ?? ''); + const [needsHelp, setNeedsHelp] = useState(initial.needsHelp); + const [helpDetails, setHelpDetails] = useState(initial.helpDetails); useEffect(() => { if (!project || claim) return; @@ -68,6 +67,16 @@ export function ProjectForm({ .slice(0, 8) : []; const showMemberResults = memberResultsOpen && Boolean(normalizedMemberQuery); + const dirty = + name !== initial.name || + summary !== initial.summary || + repository !== initial.repository || + kind !== initial.kind || + groupId !== initial.groupId || + needsHelp !== initial.needsHelp || + helpDetails !== initial.helpDetails || + memberIds.length !== initial.memberIds.length || + memberIds.some((id) => !initial.memberIds.includes(id)); function addMember(id: string) { setMemberIds((members) => (members.includes(id) ? members : [...members, id])); @@ -104,6 +113,11 @@ export function ProjectForm({ } } + function cancel() { + if (dirty && !window.confirm('Discard your unsaved changes to this project?')) return; + onCancel(); + } + function submit(event: FormEvent) { event.preventDefault(); onSubmit({ @@ -327,7 +341,7 @@ export function ProjectForm({

)}
-