Fix switches logic & refactor

ElectronicBabylonianLiterature · Oct 16, 2024 · f548f86 · f548f86
1 parent f0a4b68
commit f548f86
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 23 deletions.
diff --git a/src/chronology/ui/DateEditor/DateSelectionInput.test.tsx b/src/chronology/ui/DateEditor/DateSelectionInput.test.tsx
@@ -141,15 +141,15 @@ describe('Date Input Groups', () => {
       })
     )
     const yearInput = screen.getByLabelText('Year')
-    const yearBrokenSwitch = screen.getByTestId('year-broken-switch')
-    const yearUncertainSwitch = screen.getByTestId('year-uncertain-switch')
+    const yearBrokenSwitch = screen.getByTestId('0-year-broken-switch')
+    const yearUncertainSwitch = screen.getByTestId('0-year-uncertain-switch')
     const monthInput = screen.getByLabelText('Month')
     const monthIntercalaryCheckbox = screen.getByLabelText('Intercalary')
-    const monthBrokenSwitch = screen.getByTestId('month-broken-switch')
-    const monthUncertainSwitch = screen.getByTestId('month-uncertain-switch')
+    const monthBrokenSwitch = screen.getByTestId('0-month-broken-switch')
+    const monthUncertainSwitch = screen.getByTestId('0-month-uncertain-switch')
     const dayInput = screen.getByLabelText('Day')
-    const dayBrokenSwitch = screen.getByTestId('day-broken-switch')
-    const dayUncertainSwitch = screen.getByTestId('day-uncertain-switch')
+    const dayBrokenSwitch = screen.getByTestId('0-day-broken-switch')
+    const dayUncertainSwitch = screen.getByTestId('0-day-uncertain-switch')
 
     expect(yearInput).toBeInTheDocument()
     expect(yearBrokenSwitch).toBeInTheDocument()

diff --git a/src/common/BrokenAndUncertain.tsx b/src/common/BrokenAndUncertain.tsx
@@ -3,6 +3,7 @@ import { Form } from 'react-bootstrap'
 
 export interface BrokenUncertainProps {
   name: string
+  id?: string | number
   isBroken?: boolean
   isUncertain?: boolean
   setBroken:
@@ -15,6 +16,7 @@ export interface BrokenUncertainProps {
 
 export function BrokenAndUncertainSwitches({
   name,
+  id = 0,
   isBroken = false,
   isUncertain = false,
   setBroken,
@@ -24,18 +26,18 @@ export function BrokenAndUncertainSwitches({
     <>
       <Form.Switch
         label={`Broken`}
-        id={`${name}_broken`}
-        aria-label={`${name}-broken-switch`}
-        data-testid={`${name}-broken-switch`}
+        id={`${id}-${name}_broken`}
+        aria-label={`${id}-${name}-broken-switch`}
+        data-testid={`${id}-${name}-broken-switch`}
         style={{ marginLeft: '10px' }}
         onChange={(event) => setBroken(event.target.checked)}
         checked={isBroken}
       />
       <Form.Switch
         label={`Uncertain`}
-        id={`${name}_uncertain`}
-        aria-label={`${name}-uncertain-switch`}
-        data-testid={`${name}-uncertain-switch`}
+        id={`${id}-${name}_uncertain`}
+        aria-label={`${id}-${name}-uncertain-switch`}
+        data-testid={`${id}-${name}-uncertain-switch`}
         style={{ marginLeft: '10px' }}
         onChange={(event) => setUncertain(event.target.checked)}
         checked={isUncertain}

diff --git a/src/fragmentarium/domain/Colophon.ts b/src/fragmentarium/domain/Colophon.ts
@@ -168,18 +168,31 @@ export class IndividualAttestation {
     item?: NameAttestation | ProvenanceAttestation,
     prefix?: string
   ): string {
-    if (!item || _.isEmpty(item) || _.every(item, (val) => val === false)) {
+    if (this.isItemEmpty(item)) {
       return ''
     }
-    const { isBroken, isUncertain } = item
-    const prefixString = prefix ? prefix + ' ' : ''
-    const valueString = item?.value ?? '…'
-    const brokenUncertainValueString = `${
-      isBroken === true ? '[' : ''
-    }${valueString}${isUncertain === true ? '?' : ''}${
-      isBroken === true ? ']' : ''
-    }`
-    return `${prefixString}${brokenUncertainValueString}`
+
+    const prefixString = prefix ? `${prefix} ` : ''
+    const valueString = this.formatValueString(
+      item as NameAttestation | ProvenanceAttestation
+    )
+
+    return `${prefixString}${valueString}`
+  }
+
+  private isItemEmpty(item?: NameAttestation | ProvenanceAttestation): boolean {
+    return !item || _.isEmpty(item) || _.every(item, (val) => val === false)
+  }
+
+  private formatValueString(
+    item: NameAttestation | ProvenanceAttestation
+  ): string {
+    const value = item.value ?? '…'
+    const brokenSymbol = item.isBroken ? '[' : ''
+    const uncertainSymbol = item.isUncertain ? '?' : ''
+    const closingBrokenSymbol = item.isBroken ? ']' : ''
+
+    return `${brokenSymbol}${value}${uncertainSymbol}${closingBrokenSymbol}`
   }
 }
 

diff --git a/src/fragmentarium/ui/fragment/ColophonEditor.test.tsx b/src/fragmentarium/ui/fragment/ColophonEditor.test.tsx
@@ -125,7 +125,7 @@ describe('ColophonEditor', () => {
       await userEvent.click(screen.getByText('Add Individual'))
       await userEvent.click(screen.getByText('Individual 1.'))
     })
-    userEvent.click(screen.getByLabelText('name-broken-switch'))
+    userEvent.click(screen.getByLabelText('0-name-broken-switch'))
     const nameInput = screen.getByLabelText('select-colophon-individual-name')
     userEvent.type(nameInput, 'ba')
     await selectOption(nameInput, 'Humbaba')

diff --git a/src/fragmentarium/ui/fragment/ColophonEditorIndividualForm.tsx b/src/fragmentarium/ui/fragment/ColophonEditorIndividualForm.tsx
@@ -133,6 +133,7 @@ const getIndividualField = ({
         <BrokenAndUncertainSwitches
           key={`${key}-broken-uncertain`}
           name={key}
+          id={index}
           setBroken={getBrokenOrUncertainMethod('isBroken')}
           setUncertain={getBrokenOrUncertainMethod('isUncertain')}
           isBroken={individual[key]?.isBroken}