Date fixes

src/chronology/application/DateSelection.tsx

@@ -14,6 +14,7 @@ import {
 } from 'chronology/ui/DateEditor/DateSelectionInput'
 import useDateSelectionState, {
   DateEditorStateProps,
+  DateSelectionState,
 } from 'chronology/application/DateSelectionState'
 
 type Props = {
@@ -30,6 +31,28 @@ interface DateEditorProps extends DateEditorStateProps {
   isDisplayed: boolean
 }
 
+function getSelectedDateAndValidation(
+  state: DateSelectionState,
+  savedDate?: MesopotamianDate
+): { selectedDate?: MesopotamianDate; isSelectedDateValid: boolean } {
+  let isSelectedDateValid: boolean
+  let selectedDate: MesopotamianDate | undefined
+  try {
+    selectedDate = state.getDate()
+    const dateString = selectedDate.toString()
+    const isDatesNotSame =
+      savedDate === undefined || dateString !== savedDate.toString()
+    const isDateEmpty = dateString.replaceAll('SE', '') !== ''
+    const isAssyrianDateNotEmpty =
+      !state.isAssyrianDate || dateString !== '∅.∅.1'
+    isSelectedDateValid =
+      isDateEmpty && isAssyrianDateNotEmpty && isDatesNotSame
+  } catch {
+    isSelectedDateValid = false
+  }
+  return { selectedDate, isSelectedDateValid }
+}
+
 export function DateEditor({
   date,
   setDate,
@@ -55,27 +78,50 @@ export function DateEditor({
   const dateOptionsInput = DateOptionsInput({ ...state })
   const dateInputGroups = DateInputGroups({ ...state })
 
-  const saveButton = (
+  const deleteButton = (
     <Button
       className="m-1"
+      variant="danger"
       disabled={false}
-      onClick={() => state.saveDate(state.getDate(), index)}
+      onClick={() => state.saveDate(undefined, index)}
     >
-      Save
+      Delete
     </Button>
   )
 
-  const deleteButton = (
+  const { selectedDate, isSelectedDateValid } = getSelectedDateAndValidation(
+    state,
+    date
+  )
+
+  const saveButton = (
     <Button
       className="m-1"
-      variant="danger"
-      disabled={false}
-      onClick={() => state.saveDate(undefined, index)}
+      disabled={!isSelectedDateValid}
+      onClick={() => state.saveDate(state.getDate(), index)}
     >
-      Delete
+      Save
     </Button>
   )
 
+  const savedDateDisplay = date ? (
+    <>
+      <b>Saved date</b>
+      <DateDisplay date={date} />
+    </>
+  ) : (
+    ''
+  )
+  const selectedDateDisplay =
+    selectedDate && isSelectedDateValid ? (
+      <>
+        <b>Selected date</b>
+        <DateDisplay date={selectedDate} />
+      </>
+    ) : (
+      ''
+    )
+
   const popover = (
     <Popover
       style={{ maxWidth: '600px' }}
@@ -85,6 +131,8 @@ export function DateEditor({
       <Popover.Content>
         {dateOptionsInput}
         {dateInputGroups}
+        {savedDateDisplay}
+        {selectedDateDisplay}
         {date && deleteButton}
         {saveButton}
         <Spinner loading={isSaving}>Saving...</Spinner>

src/chronology/ui/DateEditor/DateSelection.test.tsx

@@ -126,8 +126,11 @@ describe('DateSelection', () => {
     act(() => {
       fireEvent.click(editButton)
     })
+    const yearInput = screen.getByPlaceholderText('Year')
+    await act(async () => {
+      fireEvent.change(yearInput, { target: { value: '189' } })
+    })
     const saveButton = screen.getByText('Save')
-
     fireEvent.click(saveButton)
     const loadingSpinner = screen.getByText('Saving...')
     expect(loadingSpinner).toBeInTheDocument()

src/chronology/ui/DateEditor/DatesInTextSelection.test.tsx

@@ -44,6 +44,12 @@ describe('DatesInTextSelection', () => {
     await act(async () => {
       fireEvent.click(addButton)
     })
+    const dayInput = screen.getByPlaceholderText('Day')
+    const monthInput = screen.getByPlaceholderText('Month')
+    await act(async () => {
+      fireEvent.change(dayInput, { target: { value: '18' } })
+      fireEvent.change(monthInput, { target: { value: '10' } })
+    })
     const saveButton = screen.getByText('Save')
     await act(async () => {
       fireEvent.click(saveButton)
@@ -62,6 +68,12 @@ describe('DatesInTextSelection', () => {
     await act(async () => {
       fireEvent.click(editButton)
     })
+    const dayInput = screen.getByPlaceholderText('Day')
+    const monthInput = screen.getByPlaceholderText('Month')
+    await act(async () => {
+      fireEvent.change(dayInput, { target: { value: '18' } })
+      fireEvent.change(monthInput, { target: { value: '10' } })
+    })
     const saveButton = screen.getByText('Save')
     await act(async () => {
       fireEvent.click(saveButton)