diff --git a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx index 3d625827..ea87d8f5 100644 --- a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx +++ b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx @@ -103,9 +103,9 @@ export default function ContributeQuestionForm({ year: field.value.getFullYear(), }} yearRequired={true} - onChange={({ month, year }) => - field.onChange(startOfMonth(new Date(year, month - 1))) - } + onChange={({ month, year }) => { + field.onChange(startOfMonth(new Date(year!, month! - 1))); + }} /> )} /> diff --git a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx index 6cd5be29..fbebb6f9 100644 --- a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx +++ b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx @@ -87,15 +87,17 @@ export default function CreateQuestionEncounterForm({ )} {step === 3 && ( { setSelectedDate( - startOfMonth(new Date(value.year, value.month - 1)), + startOfMonth(new Date(value.year!, value.month! - 1)), ); }} /> diff --git a/apps/portal/src/components/shared/MonthYearPicker.tsx b/apps/portal/src/components/shared/MonthYearPicker.tsx index 4b97b319..aa3fb1d8 100644 --- a/apps/portal/src/components/shared/MonthYearPicker.tsx +++ b/apps/portal/src/components/shared/MonthYearPicker.tsx @@ -1,4 +1,4 @@ -import { useId } from 'react'; +import { useEffect, useId, useState } from 'react'; import { Select } from '@tih/ui'; export type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; @@ -8,12 +8,17 @@ export type MonthYear = Readonly<{ year: number; }>; +export type MonthYearOptional = Readonly<{ + month: Month | null; + year: number | null; +}>; + type Props = Readonly<{ errorMessage?: string; monthLabel?: string; monthRequired?: boolean; - onChange: (value: MonthYear) => void; - value: MonthYear; + onChange: (value: MonthYearOptional) => void; + value: MonthYearOptional; yearLabel?: string; yearRequired?: boolean; }>; @@ -89,29 +94,45 @@ export default function MonthYearPicker({ }: Props) { const hasError = errorMessage != null; const errorId = useId(); + const [monthCounter, setMonthCounter] = useState(0); + const [yearCounter, setYearCounter] = useState(0); + + useEffect(() => { + if (value.month == null) { + setMonthCounter((val) => val + 1); + } + + if (value.year == null) { + setYearCounter((val) => val + 1); + } + }, [value.month, value.year]); return ( -
- - onChange({ month: value.month, year: Number(newYear) }) - } - /> +
+
+ + onChange({ month: value.month, year: Number(newYear) }) + } + /> +
{errorMessage && (

{errorMessage} diff --git a/apps/portal/src/pages/test__.tsx b/apps/portal/src/pages/test__.tsx index f7309e26..7ead1888 100644 --- a/apps/portal/src/pages/test__.tsx +++ b/apps/portal/src/pages/test__.tsx @@ -6,7 +6,10 @@ import { HorizontalDivider } from '@tih/ui'; import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead'; -import type { Month, MonthYear } from '~/components/shared/MonthYearPicker'; +import type { + Month, + MonthYearOptional, +} from '~/components/shared/MonthYearPicker'; import MonthYearPicker from '~/components/shared/MonthYearPicker'; export default function HomePage() { @@ -14,7 +17,8 @@ export default function HomePage() { useState(null); const [selectedJobTitle, setSelectedJobTitle] = useState(null); - const [monthYear, setMonthYear] = useState({ + + const [monthYear, setMonthYear] = useState({ month: (new Date().getMonth() + 1) as Month, year: new Date().getFullYear(), }); @@ -38,7 +42,24 @@ export default function HomePage() { />

{JSON.stringify(selectedJobTitle, null, 2)}
- + +