From 7ef691ca37228b04e45ce8a51606e94bf175f0d1 Mon Sep 17 00:00:00 2001
From: Ilya Khait <ilya.khait@lmu.de>
Date: Wed, 16 Aug 2023 12:59:25 +0200
Subject: [PATCH] Delete button & fixes (#384)

* Implement date delete & fix display issue
---
 .../infrastructure/FragmentRepository.test.ts |   2 +-
 src/fragmentarium/ui/info/DateSelection.tsx   | 125 ++++++++++--------
 .../ui/info/DateSelectionInput.tsx            |   2 +
 src/fragmentarium/ui/info/Details.tsx         |   2 +-
 4 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/src/fragmentarium/infrastructure/FragmentRepository.test.ts b/src/fragmentarium/infrastructure/FragmentRepository.test.ts
index bc487c9d2..5863c8e1e 100644
--- a/src/fragmentarium/infrastructure/FragmentRepository.test.ts
+++ b/src/fragmentarium/infrastructure/FragmentRepository.test.ts
@@ -80,7 +80,7 @@ const date = {
   day: {
     value: '1',
   },
-  era: 'Seleucid',
+  isSeleucidEra: true,
   month: {
     value: '1',
   },
diff --git a/src/fragmentarium/ui/info/DateSelection.tsx b/src/fragmentarium/ui/info/DateSelection.tsx
index 237b7c121..cc480f0b9 100644
--- a/src/fragmentarium/ui/info/DateSelection.tsx
+++ b/src/fragmentarium/ui/info/DateSelection.tsx
@@ -18,7 +18,7 @@ import {
 
 type Props = {
   fragment: Fragment
-  updateDate: (date: MesopotamianDate) => Bluebird<Fragment>
+  updateDate: (date?: MesopotamianDate) => Bluebird<Fragment>
 }
 
 export default function DateSelection({
@@ -80,6 +80,74 @@ export default function DateSelection({
     })
   }
 
+  const saveDate = (updatedDate?: MesopotamianDate): void => {
+    if (updatedDate !== date) {
+      cancelUpdatePromise()
+      setIsSaving(true)
+      setUpdatePromise(
+        updateDate(updatedDate)
+          .then(() => setIsSaving(false))
+          .then(() => setIsDisplayed(false))
+          .then(() => setDate(updatedDate))
+      )
+    }
+  }
+
+  const saveButton = (
+    <Button
+      className="m-1"
+      disabled={false}
+      onClick={() => saveDate(getDate())}
+    >
+      Save
+    </Button>
+  )
+
+  const deleteButton = (
+    <Button
+      className="m-1"
+      variant="danger"
+      disabled={false}
+      onClick={() => saveDate()}
+    >
+      Delete
+    </Button>
+  )
+
+  const kingInput = getKingInput({
+    date,
+    isSeleucidEra,
+    isCalendarFieldDisplayed,
+    ur3Calendar,
+    setKing,
+    setIsSeleucidEra,
+    setIsCalenderFieldDisplayed,
+    setUr3Calendar,
+  })
+
+  const dateInputGroups = getDateInputGroups({
+    yearValue,
+    yearBroken,
+    yearUncertain,
+    monthValue,
+    monthBroken,
+    monthUncertain,
+    isIntercalary,
+    dayValue,
+    dayBroken,
+    dayUncertain,
+    setYearValue,
+    setYearBroken,
+    setYearUncertain,
+    setMonthValue,
+    setMonthBroken,
+    setMonthUncertain,
+    setIntercalary,
+    setDayValue,
+    setDayBroken,
+    setDayUncertain,
+  })
+
   const popover = (
     <Popover
       style={{ maxWidth: '600px' }}
@@ -87,57 +155,10 @@ export default function DateSelection({
       className={'w-100'}
     >
       <Popover.Content>
-        {getKingInput({
-          date,
-          isSeleucidEra,
-          isCalendarFieldDisplayed,
-          ur3Calendar,
-          setKing,
-          setIsSeleucidEra,
-          setIsCalenderFieldDisplayed,
-          setUr3Calendar,
-        })}
-        {getDateInputGroups({
-          yearValue,
-          yearBroken,
-          yearUncertain,
-          monthValue,
-          monthBroken,
-          monthUncertain,
-          isIntercalary,
-          dayValue,
-          dayBroken,
-          dayUncertain,
-          setYearValue,
-          setYearBroken,
-          setYearUncertain,
-          setMonthValue,
-          setMonthBroken,
-          setMonthUncertain,
-          setIntercalary,
-          setDayValue,
-          setDayBroken,
-          setDayUncertain,
-        })}
-        <Button
-          className="m-1"
-          disabled={false}
-          onClick={() => {
-            const updatedDate = getDate()
-            if (updatedDate !== date) {
-              cancelUpdatePromise()
-              setIsSaving(true)
-              setUpdatePromise(
-                updateDate(updatedDate)
-                  .then(() => setIsSaving(false))
-                  .then(() => setIsDisplayed(false))
-                  .then(() => setDate(updatedDate))
-              )
-            }
-          }}
-        >
-          Save
-        </Button>
+        {kingInput}
+        {dateInputGroups}
+        {date && deleteButton}
+        {saveButton}
         <Spinner loading={isSaving}>Saving...</Spinner>
       </Popover.Content>
     </Popover>
diff --git a/src/fragmentarium/ui/info/DateSelectionInput.tsx b/src/fragmentarium/ui/info/DateSelectionInput.tsx
index 86bef52ad..d76064d0a 100644
--- a/src/fragmentarium/ui/info/DateSelectionInput.tsx
+++ b/src/fragmentarium/ui/info/DateSelectionInput.tsx
@@ -66,6 +66,7 @@ export function getKingInput(props: KingInputProps): JSX.Element {
 }
 
 function getSeleucidSwitch({
+  isSeleucidEra,
   setIsSeleucidEra,
   setIsCalenderFieldDisplayed,
 }: KingInputProps): JSX.Element {
@@ -80,6 +81,7 @@ function getSeleucidSwitch({
           setIsCalenderFieldDisplayed(false)
         }
       }}
+      checked={isSeleucidEra}
     />
   )
 }
diff --git a/src/fragmentarium/ui/info/Details.tsx b/src/fragmentarium/ui/info/Details.tsx
index 7b204ac1e..9ed99fee6 100644
--- a/src/fragmentarium/ui/info/Details.tsx
+++ b/src/fragmentarium/ui/info/Details.tsx
@@ -134,7 +134,7 @@ interface DetailsProps {
   readonly fragment: Fragment
   readonly updateGenres: (genres: Genres) => void
   readonly updateScript: (script: Script) => Bluebird<Fragment>
-  readonly updateDate: (script: MesopotamianDate) => Bluebird<Fragment>
+  readonly updateDate: (date?: MesopotamianDate) => Bluebird<Fragment>
   readonly fragmentService: FragmentService
 }