Merge pull request #268 from giraugh/feat/warn-about-past-events

Show warning when selected dates are in the past

frontend/src/components/CalendarField/components/Month/Month.module.scss

@@ -91,3 +91,12 @@
     color: rgba(255,255,255,.5);
   }
 }
+
+.warningLabel {
+  display: flex;
+  padding-block: 0.9em;
+  gap: 0.5em;
+  align-items: center;
+  opacity: .75;
+  font-size: .9em;
+}

frontend/src/components/CalendarField/components/Month/Month.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { rotateArray } from '@giraugh/tools'
 import { Temporal } from '@js-temporal/polyfill'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { AlertTriangle, ChevronLeft, ChevronRight } from 'lucide-react'
 
 import Button from '/src/components/Button/Button'
 import { useTranslation } from '/src/i18n/client'
@@ -22,7 +22,8 @@ const Month = ({ value, onChange }: MonthProps) => {
 
   const weekStart = useStore(useSettingsStore, state => state.weekStart) ?? 0
 
-  const [page, setPage] = useState<Temporal.PlainYearMonth>(Temporal.Now.plainDateISO().toPlainYearMonth())
+  const now = useMemo(() => Temporal.Now.plainDateISO(), [])
+  const [page, setPage] = useState<Temporal.PlainYearMonth>(now.toPlainYearMonth())
   const dates = useMemo(() => calculateMonth(page, weekStart, i18n.language), [page, weekStart, i18n.language])
 
   // Ref and state required to rerender but also access static version in callbacks
@@ -36,6 +37,12 @@ const Month = ({ value, onChange }: MonthProps) => {
   const startPos = useRef({ x: 0, y: 0 })
   const mode = useRef<'add' | 'remove'>()
 
+  // Is 1 or more of the selected dates in the past?
+  const hasPastDates = useMemo(() => value
+    .some(plainDate => Temporal.PlainDate.compare(
+      now, Temporal.PlainDate.from(plainDate)
+    ) > 0), [value])
+
   const handleFinishSelection = useCallback(() => {
     if (mode.current === 'add') {
       onChange([...value, ...selectingRef.current])
@@ -112,6 +119,11 @@ const Month = ({ value, onChange }: MonthProps) => {
         >{date.label}</button>)
       )}
     </div>
+
+    {hasPastDates && <div className={styles.warningLabel}>
+      <AlertTriangle size='1.2em' />
+      <span>{t('form.dates.warnings.date_in_past')}</span>
+    </div>}
   </>
 }
 

frontend/src/i18n/locales/en-GB/home.json

@@ -17,6 +17,9 @@
         "previous": "Previous month",
         "next": "Next month",
         "today": "today"
+      },
+      "warnings": {
+        "date_in_past": "Some of the dates you've selected are in the past"
       }
     },
     "times": {

frontend/src/i18n/locales/en/home.json

@@ -17,6 +17,9 @@
         "previous": "Previous month",
         "next": "Next month",
         "today": "today"
+      },
+      "warnings": {
+        "date_in_past": "Some of the dates you've selected are in the past"
       }
     },
     "times": {