fixed validation utc clashes, extra validation for start dates

dylmye · Apr 12, 2023 · 5552b0b · 5552b0b
1 parent 11d2243
commit 5552b0b
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/src/components/AddTripItemCard/AddEditTripItemForm.tsx b/src/components/AddTripItemCard/AddEditTripItemForm.tsx
@@ -135,16 +135,16 @@ const AddEditTripItemForm = ({
               <Divider flexItem />
             </Grid>
             <Grid item xs={12} md={6}>
-              <FastField
+              <Field
                 component={DateTimePicker}
                 label="Starts At"
                 name="startsAt"
                 textField={{
                   helperText: "'All day' option coming soon",
                   fullWidth: true,
                 }}
-                minDate={dayjs.utc(tripDetails?.startsAt)}
-                maxDate={dayjs.utc(tripDetails?.endsAt)}
+                minDate={dayjs(tripDetails?.startsAt)}
+                maxDate={dayjs(tripDetails?.endsAt)}
                 validate={(value: string) => {
                   const requireCheck = fieldIsRequired(value);
                   const startsAtAfterTripStart = dayjs
@@ -167,7 +167,7 @@ const AddEditTripItemForm = ({
             </Grid>
             {currentFieldSettings.hasDestination && (
               <Grid item xs={12} md={6}>
-                <FastField
+                <Field
                   component={DateTimePicker}
                   label="Finishes At"
                   name="endsAt"
@@ -178,9 +178,9 @@ const AddEditTripItemForm = ({
                     error: !!errors?.endsAt,
                     fullWidth: true,
                   }}
-                  defaultCalendarMonth={dayjs.utc(values.startsAt)}
-                  minDate={values.startsAt && dayjs.utc(values.startsAt)}
-                  maxDate={dayjs.utc(tripDetails?.endsAt)}
+                  defaultCalendarMonth={dayjs(values.startsAt)}
+                  minDate={values.startsAt && dayjs(values.startsAt)}
+                  maxDate={dayjs(tripDetails?.endsAt)}
                   validate={(value: string) => {
                     // don't show errors when startsAt will be erroring
                     if (!values.startsAt) {

diff --git a/src/components/AddTripModal/FormStepTwo.tsx b/src/components/AddTripModal/FormStepTwo.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { DatePicker } from "formik-mui-x-date-pickers";
-import { FastField, useFormikContext } from "formik";
+import { Field, useFormikContext } from "formik";
 import dayjs from "dayjs";
 
 import TripDraft from "../../types/TripDraft";
@@ -11,15 +11,16 @@ const FormStepTwo = () => {
 
   return (
     <div className={styles.formFieldsContainer}>
-      <FastField
+      <Field
         component={DatePicker}
         label="When does your trip start?"
         name="startsAt"
         textField={{
           fullWidth: true,
         }}
+        maxDate={values?.endsAt && dayjs(values.endsAt)}
       />
-      <FastField
+      <Field
         component={DatePicker}
         label="And when does it end?"
         name="endsAt"

diff --git a/src/components/dialogs/EditTripDetailsModal/index.tsx b/src/components/dialogs/EditTripDetailsModal/index.tsx
@@ -66,6 +66,7 @@ const EditTripDetailsModal = ({
         <Typography variant="h5">
           <strong id="modal-edittrip-title">Edit Trip Details</strong>
         </Typography>
+        {/* @TODO: add validation */}
         <Formik<TripDetails>
           initialValues={{
             title,
@@ -89,13 +90,14 @@ const EditTripDetailsModal = ({
                 name="location"
                 label="Location"
               />
-              <FastField
+              <Field
                 component={DatePicker}
                 label="Start date"
                 name="startsAt"
                 textField={{
                   fullWidth: true,
                 }}
+                maxDate={values?.endsAt && dayjs(values.endsAt)}
               />
               <Field
                 component={DatePicker}
@@ -105,9 +107,9 @@ const EditTripDetailsModal = ({
                   fullWidth: true,
                 }}
                 defaultCalendarMonth={
-                  values?.startsAt && dayjs.utc(values.startsAt)
+                  values?.startsAt && dayjs(values.startsAt)
                 }
-                minDate={values?.startsAt && dayjs.utc(values.startsAt)}
+                minDate={values?.startsAt && dayjs(values.startsAt)}
               />
               <FastField
                 component={TextField}

diff --git a/src/types/TripItemDraft.ts b/src/types/TripItemDraft.ts
@@ -10,6 +10,5 @@ export default interface TripItemDraft extends WithOptional<TripItem, "id"> {
   details?: string;
   urls?: Record<string, string> | null;
   startsAt: string;
-  // @TODO: confirm we don't need to union this with null
   endsAt?: string | null;
 }