Add error checking for date limits form in dashboard

onyx-initiative · Sep 3, 2024 · 48227cf · 48227cf
1 parent f1c9234
commit 48227cf
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 26 deletions.
diff --git a/frontend/pages/Dashboard.tsx b/frontend/pages/Dashboard.tsx
@@ -19,6 +19,7 @@ export default function Dashboard() {
   const [endDate, setEndDate] = useState(`${currentYear}-12-31`)
   const [fetchedStartDate, setFetchedStartDate] = useState(startDate)
   const [fetchedEndDate, setFetchedEndDate] = useState(endDate)
+  const [dateRangeFormError, setDateRangeFormError] = useState('')
 
   const [
     getPageData,
@@ -35,6 +36,29 @@ export default function Dashboard() {
     }
   }, [endDate, getPageData, pageCalled, startDate])
 
+  const hasDateRangeFormError = () => {
+    setDateRangeFormError('')
+
+    const validDateRegex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/
+    if (!validDateRegex.test(startDate)) {
+      setDateRangeFormError('Start date is invalid.')
+      return true
+    }
+    if (!validDateRegex.test(endDate)) {
+      setDateRangeFormError('End date is invalid.')
+      return true
+    }
+
+    return false
+  }
+  const submitGetPageDataForm = () => {
+    if (hasDateRangeFormError()) {
+      return
+    }
+
+    getPageData({ variables: { startDate, endDate } })
+  }
+
   let DashboardContent = (
     <div className={styles.center}>
       <FancySpinner />
@@ -173,32 +197,41 @@ export default function Dashboard() {
         <DashboardTitleRow
           title={`Click Counts from ${fetchedStartDate} to ${fetchedEndDate}`}
           rightComponent={
-            <form action='' className={styles.dateLimitsForm}>
-              <DashboardDateLimitInput
-                label='Start Date'
-                value={startDate}
-                onChange={(e) => setStartDate(e.target.value)}
-                className={styles.dateLimitInput}
-                max={currentDate}
-                disabled={pageLoading}
-              />
-              <DashboardDateLimitInput
-                label='End Date'
-                value={endDate}
-                onChange={(e) => setEndDate(e.target.value)}
-                className={styles.dateLimitInput}
-                min={startDate}
-                max={currentDate}
-                disabled={pageLoading}
-              />
-              <DashboardDateLimitSubmit
-                onClick={() => getPageData({ variables: { startDate, endDate } })}
-                loading={pageLoading}
-                disabled={pageLoading}
-              >
-                Get Clicks
-              </DashboardDateLimitSubmit>
-            </form>
+            <div>
+              <form action='' className={styles.dateLimitsForm}>
+                <DashboardDateLimitInput
+                  label='Start Date'
+                  value={startDate}
+                  onChange={(e) => {
+                    setStartDate(e.target.value)
+                    hasDateRangeFormError()
+                  }}
+                  onFocus={hasDateRangeFormError}
+                  onBlur={hasDateRangeFormError}
+                  className={styles.dateLimitInput}
+                  max={currentDate}
+                  disabled={pageLoading}
+                />
+                <DashboardDateLimitInput
+                  label='End Date'
+                  value={endDate}
+                  onChange={(e) => {
+                    setEndDate(e.target.value)
+                    hasDateRangeFormError()
+                  }}
+                  onFocus={hasDateRangeFormError}
+                  onBlur={hasDateRangeFormError}
+                  className={styles.dateLimitInput}
+                  min={startDate}
+                  max={currentDate}
+                  disabled={pageLoading}
+                />
+                <DashboardDateLimitSubmit onClick={submitGetPageDataForm} loading={pageLoading} disabled={pageLoading}>
+                  Get Clicks
+                </DashboardDateLimitSubmit>
+              </form>
+              {dateRangeFormError ? <div className={styles.dateLimitsFormError}>{dateRangeFormError}</div> : null}
+            </div>
           }
         />
         <div className={styles.quickStats}>

diff --git a/frontend/styles/Dashboard.module.css b/frontend/styles/Dashboard.module.css
@@ -26,6 +26,12 @@
   gap: 1rem;
 }
 
+.dateLimitsFormError {
+  color: #ef8b8b;
+  padding: 1rem 0;
+  text-align: center;
+}
+
 .quickStats {
   display: grid;
   grid-template-columns: minmax(0, 1fr);

diff --git a/frontend/styles/components/DashboardDateLimitComponents.module.css b/frontend/styles/components/DashboardDateLimitComponents.module.css
@@ -35,6 +35,7 @@
   border-width: 1px;
   border-style: solid;
   border-radius: 0.5rem;
+  min-width: 9rem;
   cursor: text;
 }