From 97dc2ec0b1b5a08afa9845fe77f874a03446ff5f Mon Sep 17 00:00:00 2001
From: Ilya Khait <ilya.khait@lmu.de>
Date: Wed, 16 Oct 2024 22:16:47 +0000
Subject: [PATCH] Refactor & style

---
 src/common/BrokenAndUncertain.tsx      | 53 +++++++++++++-------------
 src/fragmentarium/ui/info/Colophon.tsx |  5 ++-
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/common/BrokenAndUncertain.tsx b/src/common/BrokenAndUncertain.tsx
index 628a38e6c..b6f8b86fd 100644
--- a/src/common/BrokenAndUncertain.tsx
+++ b/src/common/BrokenAndUncertain.tsx
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import React from 'react'
 import { Form } from 'react-bootstrap'
 
@@ -14,34 +15,34 @@ export interface BrokenUncertainProps {
     | ((isUncertain: boolean) => void)
 }
 
-export function BrokenAndUncertainSwitches({
-  name,
-  id = 0,
-  isBroken = false,
-  isUncertain = false,
-  setBroken,
-  setUncertain,
-}: BrokenUncertainProps): JSX.Element {
+export function BrokenAndUncertainSwitches(
+  props: BrokenUncertainProps
+): JSX.Element {
   return (
     <>
-      <Form.Switch
-        label={`Broken`}
-        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={`${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}
-      />
+      {getSwitch('broken', props)}
+      {getSwitch('uncertain', props)}
     </>
   )
 }
+
+function getSwitch(
+  type: 'broken' | 'uncertain',
+  props: BrokenUncertainProps
+): JSX.Element {
+  const { name, id } = props
+  const onChange = props[`set${_.capitalize(type)}`]
+  const checked = props[`is${_.capitalize(type)}`]
+  const _id = id ?? 0
+  return (
+    <Form.Switch
+      label={_.capitalize(type)}
+      id={`${_id}-${name}_${type}`}
+      aria-label={`${_id}-${name}-${type}-switch`}
+      data-testid={`${_id}-${name}-${type}-switch`}
+      style={{ marginLeft: '10px' }}
+      onChange={(event) => onChange(event.target.checked)}
+      checked={checked}
+    />
+  )
+}
diff --git a/src/fragmentarium/ui/info/Colophon.tsx b/src/fragmentarium/ui/info/Colophon.tsx
index c872e9bbd..19c7aed98 100644
--- a/src/fragmentarium/ui/info/Colophon.tsx
+++ b/src/fragmentarium/ui/info/Colophon.tsx
@@ -34,7 +34,10 @@ const ColophonInfo = ({ fragment }: { fragment: Fragment }): JSX.Element => {
   const mapToList = (text, index) => <li key={index}>{text}</li>
   const individuals = colophon?.individuals && colophon?.individuals.length > 0 && (
     <li>
-      Individuals: <ol>{getIndividualsItems(colophon).map(mapToList)}</ol>
+      Individuals:{' '}
+      <ol style={{ listStylePosition: 'outside' }}>
+        {getIndividualsItems(colophon).map(mapToList)}
+      </ol>
     </li>
   )