From edd00b46b0b88f124be738988b5f172291663691 Mon Sep 17 00:00:00 2001 From: Yugay Vasiliy <31739813+Vas9ka@users.noreply.github.com> Date: Fri, 24 May 2024 11:49:09 +0200 Subject: [PATCH] Fix following preceding signs (#481) * * Added space between lines * Signs are aligned by KWIC * Added space after similar text * Underline restored for signs' links * Fixed gradient * Reduced complexity * Refactoring * Added multiple key support Fixed overlap in the signs * Test fixed * fixed test * Refactoring --- src/signs/application/SignService.ts | 5 +- src/signs/infrastructure/SignRepository.ts | 5 +- src/signs/ui/search/SignSearch.test.tsx | 2 +- src/signs/ui/search/Signs.sass | 2 + src/signs/ui/search/Signs.test.tsx | 2 +- src/signs/ui/search/SignsSearch.tsx | 89 ++++++++++++++++------ src/test-support/sign-fixtures.ts | 16 ++-- 7 files changed, 89 insertions(+), 32 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 { return this.signsRepository.listAllSigns() } - findSignsByOrder(signName: string, sortEra: string): Bluebird { + 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 { return this.apiClient.fetchJson(`/signs/all`, false) } - findSignsByOrder(signName: string, sortEra: string): Promise { + findSignsByOrder( + signName: string, + sortEra: string + ): Promise<[OrderedSign[]]> { return this.apiClient.fetchJson( `/signs/${encodeURIComponent(signName)}/${sortEra}`, false diff --git a/src/signs/ui/search/SignSearch.test.tsx b/src/signs/ui/search/SignSearch.test.tsx index 2e8add0ab..2a2a507e8 100644 --- a/src/signs/ui/search/SignSearch.test.tsx +++ b/src/signs/ui/search/SignSearch.test.tsx @@ -14,7 +14,7 @@ jest.mock('signs/application/SignService') let signs: Sign[] const signService = new (SignService as jest.Mock>)() -const orderedSigns = OrderedSignFactory.buildList(2) +const orderedSigns = OrderedSignFactory.build() const query = { value: 'bu', 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/Signs.test.tsx b/src/signs/ui/search/Signs.test.tsx index ae92ab507..58b3b6c12 100644 --- a/src/signs/ui/search/Signs.test.tsx +++ b/src/signs/ui/search/Signs.test.tsx @@ -13,7 +13,7 @@ jest.mock('signs/application/SignService') const SignsWithRouter = withRouter(Signs) const signs = signFactory.buildList(2) -const orderedSigns = OrderedSignFactory.buildList(2) +const orderedSigns = OrderedSignFactory.build() const signService = new (SignService as jest.Mock>)() let session: MemorySession 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 ( + {`Similar ${direction} (${language}): `} + ) + } else if (label === 'before' && !isFirstSubArray) { + return + } else { + return null + } +} + const renderSignColumn = ( data, startIndex, endIndex, label, direction, - language + language, + isFirstSubArray ) => ( <> - {label === 'before' && ( - {`Similar ${direction} (${language}): `} - )} + {renderSimilarText(label, isFirstSubArray, direction, language)} {data.slice(startIndex, endIndex).map((item, index) => ( ( ({ 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 ( + + {renderColumns( + subArray, + signIndex, + direction, + language, + isFirstSubArray + )} + + ) + })} + + ) }, (props) => props.signService.findSignsByOrder(props.sign.name, props.sortEra) ) - function SignsSearch({ signs, isIncludeHomophones, @@ -116,14 +163,12 @@ function SignsSearch({ {parameters.map((params, idx) => ( - - - + ))}
diff --git a/src/test-support/sign-fixtures.ts b/src/test-support/sign-fixtures.ts index 1d6f83bc8..5c19de474 100644 --- a/src/test-support/sign-fixtures.ts +++ b/src/test-support/sign-fixtures.ts @@ -18,12 +18,16 @@ lita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lor ` const LaBaSi = `123` -export const OrderedSignFactory = Factory.define(() => { - return { - name: chance.pickone(['BA', 'BAD', 'BAR', 'PI']), - unicode: chance.pickone([[1444], [1321], [16611], [161771]]), - mzl: chance.pickone(['131', '156', '131', '161']), - } +export const OrderedSignFactory = Factory.define<[OrderedSign[]]>(() => { + return [ + [ + { + name: chance.pickone(['BA', 'BAD', 'BAR', 'PI']), + unicode: [chance.integer({ min: 10000, max: 99999 })], + mzl: chance.pickone(['131', '156', '131', '161']), + }, + ], + ] }) export const signFactory = Factory.define(() => {