Refactored ColophonText

CHANGELOG.md

@@ -5,6 +5,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.7.2] - 2025-01-05
+### Changed
+- Refactored ColophonText
+
 ## [2.7.1] - 2025-01-05
 ### Changed
 - Fixed bug with missing ref attribute

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paths-atlas",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "The Archaeological Atlas of Coptic Literature by PAThs, an ERC Advanced funded project",
   "bugs": "https://github.com/paths-erc/atlas/issues",
   "email": "julian.bogdani@uniroma1.it",

src/components/Record/ColophonText.jsx

@@ -30,8 +30,51 @@ const formatColophon = (xml) => {
   return allParagraphs;
 }
 
+/**
+ * Component to render a single colophon text item.
+ * @param {Object} props - The properties object.
+ * @param {Object} props.paragraph - The colophon text item.
+ * @returns {JSX.Element} The rendered colophon text item.
+ */
+const ColophonTextItem = ({ paragraph }) => (
+  <React.Fragment>
+    {paragraph.fol && <small>fol. {paragraph.fol}</small>}
+    <ol className='colophons'>
+      {paragraph.content.split('\n').map((line, key) => (
+        <li key={key} dangerouslySetInnerHTML={{ __html: line.trim() }} />
+      ))}
+    </ol>
+  </React.Fragment>
+);
 
-export default function ColophonText(props) {
+/**
+ * Component to render the colophon text.
+ * @param {Object} props - The properties object.
+ * @param {string} props.clph - The colophon identifier.
+ * @param {Array} props.clphText - The colophon text data.
+ * @returns {JSX.Element} The rendered colophon text.
+ */
+const ColophonText = ({ clph, clphText }) => {
+  if (!clphText) {
+    return <Loading>Loading the marked text of the colophon #{clph}</Loading>;
+  }
+
+  return (
+    <div>
+      {clphText.map((p, k) => (
+        <ColophonTextItem key={k} paragraph={p} />
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Wrapper component to fetch and manage the state of the colophon text.
+ * @param {Object} props - The properties object.
+ * @param {number} props.colophon - The id of the colohpon to fetch.
+ * @returns {JSX.Element} The rendered colophon text wrapper.
+ */
+export default function ColophonTextWrapper(props) {
 
   const clph = props.colophon;
 
@@ -55,27 +98,10 @@ export default function ColophonText(props) {
 
 
   if (errorText) {
-    return <div className='text-danger'>{errorText}</div>;
+    return <div>{errorText}</div>;
   }
-  if (!clphText) {
-    return <Loading>Loading the marked text of the colophon #{clph}</Loading>;
-  }
-
 
   return (
-    <div>
-      {
-        clphText.map((p, k) => {
-          return <React.Fragment key={k}>
-            {p.fol && <small>fol. {p.fol}</small>}
-            <ol className='colophons'>
-              {p.content.split('\n').map((line, key) => {
-                return <li key={key} dangerouslySetInnerHTML={{ __html: line.trim() }} />
-              })}
-            </ol>
-          </React.Fragment>
-        })
-      }
-    </div>
+    <ColophonText clph={clph} clphText={clphText} />
   );
 }