From d0d87895d891d73d117d93d3f11d1e8e28a3a360 Mon Sep 17 00:00:00 2001
From: Yugay Vasiliy <vasyayugay99@gmail.com>
Date: Thu, 23 May 2024 09:44:00 +0000
Subject: [PATCH] Added multiple key support Fixed overlap in the signs

---
 src/signs/application/SignService.ts       |  5 +-
 src/signs/infrastructure/SignRepository.ts |  5 +-
 src/signs/ui/search/Signs.sass             |  2 +
 src/signs/ui/search/SignsSearch.tsx        | 89 ++++++++++++++++------
 4 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/src/signs/application/SignService.ts b/src/signs/application/SignService.ts
index 8ef826f9c..bdfeecab4 100644
--- a/src/signs/application/SignService.ts
+++ b/src/signs/application/SignService.ts
@@ -33,7 +33,10 @@ export default class SignService {
   listAllSigns(): Bluebird<string[]> {
     return this.signsRepository.listAllSigns()
   }
-  findSignsByOrder(signName: string, sortEra: string): Bluebird<OrderedSign[]> {
+  findSignsByOrder(
+    signName: string,
+    sortEra: string
+  ): Bluebird<[OrderedSign[]]> {
     return this.signsRepository.findSignsByOrder(signName, sortEra)
   }
 }
diff --git a/src/signs/infrastructure/SignRepository.ts b/src/signs/infrastructure/SignRepository.ts
index 89e0ac500..b575f4b4f 100644
--- a/src/signs/infrastructure/SignRepository.ts
+++ b/src/signs/infrastructure/SignRepository.ts
@@ -80,7 +80,10 @@ class SignRepository {
   listAllSigns(): Promise<string[]> {
     return this.apiClient.fetchJson(`/signs/all`, false)
   }
-  findSignsByOrder(signName: string, sortEra: string): Promise<OrderedSign[]> {
+  findSignsByOrder(
+    signName: string,
+    sortEra: string
+  ): Promise<[OrderedSign[]]> {
     return this.apiClient.fetchJson(
       `/signs/${encodeURIComponent(signName)}/${sortEra}`,
       false
diff --git a/src/signs/ui/search/Signs.sass b/src/signs/ui/search/Signs.sass
index 7cbdce13e..a0ce04d39 100644
--- a/src/signs/ui/search/Signs.sass
+++ b/src/signs/ui/search/Signs.sass
@@ -46,10 +46,12 @@
 .Neo-Assyrian
   font-size: 150%
   font-family: Assurbanipal, Junicode, serif
+  padding-left: 5px
 
 .Neo-Babylonian
   font-size: 150%
   font-family: Neo-Babylonian,'Adobe Blank', Junicode, serif
+  padding-left: 5px
 
 .beginning
   background: linear-gradient(to left, grey 50%, blue 50%)
diff --git a/src/signs/ui/search/SignsSearch.tsx b/src/signs/ui/search/SignsSearch.tsx
index ae549f0b3..cbe6d5793 100644
--- a/src/signs/ui/search/SignsSearch.tsx
+++ b/src/signs/ui/search/SignsSearch.tsx
@@ -27,18 +27,29 @@ function displayUnicode(unicode: readonly number[]): string {
   return unicode.map((unicode) => String.fromCodePoint(unicode)).join('')
 }
 
+function renderSimilarText(label, isFirstSubArray, direction, language) {
+  if (label === 'before' && isFirstSubArray) {
+    return (
+      <td className="similar_text">{`Similar ${direction} (${language}): `}</td>
+    )
+  } else if (label === 'before' && !isFirstSubArray) {
+    return <td className="similar_text"></td>
+  } else {
+    return null
+  }
+}
+
 const renderSignColumn = (
   data,
   startIndex,
   endIndex,
   label,
   direction,
-  language
+  language,
+  isFirstSubArray
 ) => (
   <>
-    {label === 'before' && (
-      <td className="similar_text">{`Similar ${direction} (${language}): `}</td>
-    )}
+    {renderSimilarText(label, isFirstSubArray, direction, language)}
     <td className={label}>
       {data.slice(startIndex, endIndex).map((item, index) => (
         <span
@@ -62,40 +73,76 @@ const renderSignColumn = (
 const SignLists = withData<
   { sign: Sign; sortEra: string },
   { signService: SignService },
-  OrderedSign[]
+  [OrderedSign[]]
 >(
   ({ data, sign, sortEra }) => {
     const direction = sortEra.includes('Onset') ? 'beginning' : 'ending'
     const language = sortEra.includes('Babylonian')
       ? 'Neo-Babylonian'
       : 'Neo-Assyrian'
-    const signIndex = data.findIndex((item) => item.name === sign.name)
 
-    return _.isEmpty(data) ? null : (
+    const renderColumns = (
+      subArray,
+      signIndex,
+      direction,
+      language,
+      isFirstSubArray
+    ) => (
       <>
-        {renderSignColumn(data, 0, signIndex, 'before', direction, language)}
         {renderSignColumn(
-          data,
+          subArray,
+          0,
+          signIndex,
+          'before',
+          direction,
+          language,
+          isFirstSubArray
+        )}
+        {renderSignColumn(
+          subArray,
           signIndex,
           signIndex + 1,
           'center',
           direction,
-          language
+          language,
+          isFirstSubArray
         )}
         {renderSignColumn(
-          data,
+          subArray,
           signIndex + 1,
-          data.length,
+          subArray.length,
           'after',
           direction,
-          language
+          language,
+          isFirstSubArray
         )}
       </>
     )
+
+    return _.isEmpty(data) ? null : (
+      <>
+        {data.map((subArray, index) => {
+          const signIndex = subArray.findIndex(
+            (item) => item.name === sign.name
+          )
+          const isFirstSubArray = index === 0
+          return (
+            <tr key={index}>
+              {renderColumns(
+                subArray,
+                signIndex,
+                direction,
+                language,
+                isFirstSubArray
+              )}
+            </tr>
+          )
+        })}
+      </>
+    )
   },
   (props) => props.signService.findSignsByOrder(props.sign.name, props.sortEra)
 )
-
 function SignsSearch({
   signs,
   isIncludeHomophones,
@@ -116,14 +163,12 @@ function SignsSearch({
           <table>
             <tbody>
               {parameters.map((params, idx) => (
-                <tr key={idx}>
-                  <SignLists
-                    key={idx}
-                    sign={sign}
-                    signService={signService}
-                    sortEra={params}
-                  />
-                </tr>
+                <SignLists
+                  key={idx}
+                  sign={sign}
+                  signService={signService}
+                  sortEra={params}
+                />
               ))}
             </tbody>
           </table>