scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SW-649): let react-hook-form do date state handling

Browse Source
This commit is contained in:
Chuma McPhoy
2024-10-30 13:03:23 +01:00
parent 7ed2e1d5d0
commit 8763346f9d
4 changed files with 86 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/HotelReservation/EnterDetails/Details/schema.ts
View File

@@ -23,7 +23,7 @@ export const joinDetailsSchema = baseDetailsSchema.merge(
z.object({
join: z.literal(true),
zipCode: z.string().min(1, { message: "Zip code is required" }),
dateOfBirth: z.string(),
dateOfBirth: z.string().min(1, { message: "Date of birth is required" }),
termsAccepted: z.literal(true, {
errorMap: (err, ctx) => {
switch (err.code) {

9
components/TempDesignSystem/Form/Date/date.module.css
View File

@@ -18,3 +18,12 @@
.year {
grid-area: year;
}
/* TODO: Handle this in Select component.
- out of scope for now.
*/
.day.invalid > div > div,
.month.invalid > div > div,
.year.invalid > div > div {
border-color: var(--Scandic-Red-60);
}

1
components/TempDesignSystem/Form/Date/date.ts
View File

@@ -2,6 +2,7 @@ import type { RegisterOptions } from "react-hook-form"
export const enum DateName {
date = "date",
day = "day",
month = "month",
year = "year",
}

160
components/TempDesignSystem/Form/Date/index.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { parseDate } from "@internationalized/date"
import { useState } from "react"
import { useEffect } from "react"
import { DateInput, DatePicker, Group } from "react-aria-components"
import { useController, useFormContext, useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -21,37 +21,24 @@ import type { DateProps } from "./date"
export default function DateSelect({ name, registerOptions = {} }: DateProps) {
const intl = useIntl()
const currentValue = useWatch({ name })
const { control, setValue, trigger, formState } = useFormContext()
const { field } = useController({
const { control, setValue, trigger, formState, watch } = useFormContext()
const { field, fieldState } = useController({
control,
name,
rules: registerOptions,
})
const dayLabel = intl.formatMessage({ id: "Day" })
const monthLabel = intl.formatMessage({ id: "Month" })
const yearLabel = intl.formatMessage({ id: "Year" })
const initialDate = dt(currentValue)
const [selectedYear, setSelectedYear] = useState<number | null>(
initialDate.isValid() ? initialDate.year() : null
)
const [selectedMonth, setSelectedMonth] = useState<number | null>(
initialDate.isValid() ? initialDate.month() : null
)
const [selectedDay, setSelectedDay] = useState<number | null>(
initialDate.isValid() ? initialDate.date() : null
)
const currentYear = new Date().getFullYear()
const currentDateValue = useWatch({ name })
const year = watch(DateName.year)
const month = watch(DateName.month)
const day = watch(DateName.day)
const months = rangeArray(1, 12).map((month) => ({
value: month,
label: `${month}`,
}))
const currentYear = new Date().getFullYear()
const years = rangeArray(1900, currentYear - 18)
.reverse()
.map((year) => ({ value: year, label: year.toString() }))
@@ -60,58 +47,61 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
if (month === null) {
return 31
}
// If month is February and no year selected, return minimum.
if (month === 1 && !year) {
return 28
}
const yearToUse = year ?? new Date().getFullYear()
return dt(`${yearToUse}-${month + 1}-01`).daysInMonth()
}
const days = rangeArray(1, getDaysInMonth(selectedYear, selectedMonth)).map(
(day) => ({
value: day,
label: `${day}`,
})
// Calculate available days based on selected year and month
const daysInMonth = getDaysInMonth(
year ? Number(year) : null,
month ? Number(month) - 1 : null
)
function handleSegmentChange(selector: DateName, value: number) {
let newYear = selectedYear
let newMonth = selectedMonth
let newDay = selectedDay
const days = rangeArray(1, daysInMonth).map((day) => ({
value: day,
label: `${day}`,
}))
switch (selector) {
case DateName.year:
newYear = value
setSelectedYear(newYear)
break
/**
* Months are 0 index based and therefore we
* must subtract by 1 to get the selected month
*/
case DateName.month:
newMonth = value - 1
setSelectedMonth(newMonth)
if (selectedDay) {
const maxDays = getDaysInMonth(newYear, newMonth)
if (selectedDay > maxDays) {
newDay = maxDays
setSelectedDay(newDay)
}
}
break
case DateName.date:
newDay = value
setSelectedDay(newDay)
break
}
const dayLabel = intl.formatMessage({ id: "Day" })
const monthLabel = intl.formatMessage({ id: "Month" })
const yearLabel = intl.formatMessage({ id: "Year" })
// Check if all segments are set and update form value.
if (newYear && newMonth !== null && newDay) {
const newDate = dt().year(newYear).month(newMonth).date(newDay)
useEffect(() => {
if (formState.isSubmitting) return
if (newDate.isValid()) {
setValue(name, newDate.format("YYYY-MM-DD"))
trigger(name)
if (month && day) {
const maxDays = getDaysInMonth(
year ? Number(year) : null,
Number(month) - 1
)
const adjustedDay = Number(day) > maxDays ? maxDays : Number(day)
if (adjustedDay !== Number(day)) {
setValue(DateName.day, adjustedDay)
}
}
}
if (year && month && day) {
const newDate = dt()
.year(Number(year))
.month(Number(month) - 1)
.date(Number(day))
if (newDate.isValid()) {
setValue(name, newDate.format("YYYY-MM-DD"), {
shouldDirty: true,
shouldTouch: true,
shouldValidate: true,
})
}
}
}, [year, month, day, setValue, name, formState.isSubmitting])
let dateValue = null
try {
@@ -120,7 +110,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
* date, but we can't check isNan since
* we recieve the date as "1999-01-01"
*/
dateValue = dt(currentValue).isValid() ? parseDate(currentValue) : null
dateValue = dt(currentDateValue).isValid()
? parseDate(currentDateValue)
: null
} catch (error) {
console.warn("Known error for parse date in DateSelect: ", error)
}
@@ -129,6 +121,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
<DatePicker
aria-label={intl.formatMessage({ id: "Select date of birth" })}
isRequired={!!registerOptions.required}
isInvalid={!formState.isValid}
name={name}
ref={field.ref}
value={dateValue}
@@ -140,63 +133,60 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
switch (segment.type) {
case "day":
return (
<div className={styles.day}>
<div
className={`${styles.day} ${fieldState.invalid ? styles.invalid : ""}`}
>
<Select
aria-label={dayLabel}
items={days}
label={dayLabel}
name={DateName.date}
onSelect={(select: Key) =>
handleSegmentChange(DateName.date, Number(select))
name={DateName.day}
onSelect={(key: Key) =>
setValue(DateName.day, Number(key))
}
placeholder="DD"
placeholder={dayLabel}
required
tabIndex={3}
defaultSelectedKey={
segment.isPlaceholder ? undefined : segment.value
}
value={segment.isPlaceholder ? undefined : segment.value}
/>
</div>
)
case "month":
return (
<div className={styles.month}>
<div
className={`${styles.month} ${fieldState.invalid ? styles.invalid : ""}`}
>
<Select
aria-label={monthLabel}
items={months}
label={monthLabel}
name={DateName.month}
onSelect={(select: Key) =>
handleSegmentChange(DateName.month, Number(select))
onSelect={(key: Key) =>
setValue(DateName.month, Number(key))
}
placeholder="MM"
placeholder={monthLabel}
required
tabIndex={2}
defaultSelectedKey={
segment.isPlaceholder ? undefined : segment.value
}
value={segment.isPlaceholder ? undefined : segment.value}
/>
</div>
)
case "year":
return (
<div className={styles.year}>
<div
className={`${styles.year} ${fieldState.invalid ? styles.invalid : ""}`}
>
<Select
aria-label={yearLabel}
items={years}
label={yearLabel}
name={DateName.year}
onSelect={(select: Key) =>
handleSegmentChange(DateName.year, Number(select))
onSelect={(key: Key) =>
setValue(DateName.year, Number(key))
}
placeholder="YYYY"
placeholder={yearLabel}
required
tabIndex={1}
defaultSelectedKey={
segment.isPlaceholder ? undefined : segment.value
}
value={segment.isPlaceholder ? undefined : segment.value}
/>
</div>