diff --git a/client/src/components/forms/ProjectForm/index.tsx b/client/src/components/forms/ProjectForm/index.tsx index e90180eeb78b1f4438e13b3159f19b0b3309f747..9ae4e3a6185815bff565b70dcf9c9aec58a97936 100644 --- a/client/src/components/forms/ProjectForm/index.tsx +++ b/client/src/components/forms/ProjectForm/index.tsx @@ -13,6 +13,7 @@ import CheckboxGroup from 'components/ui/CheckboxGroup'; import '../form.scss'; import './project-form.scss'; +import { formatDate, formatDateShort } from 'timely'; interface Props { project?: Project @@ -63,7 +64,7 @@ export default function ProjectForm({ project, onSubmit }: Props) { const [text, setText] = useState(project?.text); const [status, setStatus] = useState(project?.status); const [color, setColor] = useState(project?.color); - const [deadline, setDeadline] = useState(project?.deadline?.toISOString()); + const [deadline, setDeadline] = useState(project?.deadline ? formatDateShort(new Date(project?.deadline)) : ''); const [error, setError] = useState(''); const [loadError, setLoadError] = useState(false); const [teams, setTeams] = useState(project?.teams ?? []); @@ -85,7 +86,7 @@ export default function ProjectForm({ project, onSubmit }: Props) { } setAllTeams(teams); }) - .catch(() => setLoadError(true)) + .catch(() => setLoadError(true)) }, [project?.teams, loadError]) const colors = Object.values(ProjectColors); @@ -105,6 +106,7 @@ export default function ProjectForm({ project, onSubmit }: Props) { } }, [onSubmit, setError, name, text, color, deadline, teams, status]); + return ( <form onSubmit={handleSubmit} className={'project-form theme-' + color}> {error && <Callout message={error} />} @@ -174,7 +176,7 @@ export default function ProjectForm({ project, onSubmit }: Props) { <div className="teams"> <h2>Teams</h2> <p>Which ones of your teams are working on this project</p> - { loadError + {loadError ? <ErrorScreen /> : <CheckboxGroup choices={allTeams} chosen={teams} setChosen={setTeams} /> } diff --git a/client/src/timely.test.ts b/client/src/timely.test.ts index d342b8b756fd7e79e39c5dfaf155ad2fdab8886f..62c1a9d26b43ff2c55aed39585935e093bc7bf0d 100644 --- a/client/src/timely.test.ts +++ b/client/src/timely.test.ts @@ -8,6 +8,7 @@ import { addTime, subtractTime, durationFor, + formatDateShort } from 'timely'; test('simple duration format works as expected', () => { @@ -397,3 +398,6 @@ test('get duration from amount and unit', () => { expect(durationFor(10, 'hour')).toEqual(10 * 60 * 60 * 1000); }); +test('format simple date', () => { + expect(formatDateShort(new Date('2021-04-29T00:00:00'))).toEqual('2021-04-29'); +}); diff --git a/client/src/timely.ts b/client/src/timely.ts index 6620021a2fc5df6cb59d3bf1f83ca4bf36af9bdf..3741c5d90596903c0195ec88f2cf3eedf5e7f30c 100644 --- a/client/src/timely.ts +++ b/client/src/timely.ts @@ -217,3 +217,6 @@ export function currentTime(): Date { return new Date(); } +export function formatDateShort(date: Date): string { + return date.getFullYear() + '-' + formatNumber(date.getMonth() + 1) + '-' + formatNumber(date.getDate()); +} \ No newline at end of file