Redesign Latest Addition List (#418)

* add "latest" parameter * redesign latest transliterations * update latest transliteration test * relocate queryItemOf * update Fragmentarium test * add Record to latest * update snapshot for record * remove deprecated fetchLatestTransliterations * Refactoring * add ResultPageButtons tests * style record display * extend page buttons tests * minor bug fixes * refactoring
ElectronicBabylonianLiterature · Dec 4, 2023 · 81dc2b6 · 81dc2b6
1 parent 543418b
commit 81dc2b6
Show file tree

Hide file tree

Showing 24 changed files with 12,010 additions and 234 deletions.
diff --git a/src/common/ResultPageButtons.test.tsx b/src/common/ResultPageButtons.test.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { render, screen, act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ResultPageButtons } from './ResultPageButtons'
+import { queryItemFactory } from 'test-support/query-item-factory'
+
+const setActive = jest.fn()
+
+async function renderPages(numberOfPages: number, active = 0) {
+  const pages = Array.from({ length: numberOfPages }, () =>
+    queryItemFactory.buildList(3)
+  )
+  await act(async () => {
+    render(
+      <ResultPageButtons pages={pages} active={active} setActive={setActive} />
+    )
+  })
+}
+
+describe('ResultPageButtons for few pages', () => {
+  beforeEach(() => renderPages(3))
+
+  it('renders pagination buttons correctly', () => {
+    const pagination = screen.getByLabelText('result-pagination')
+    expect(pagination).toBeInTheDocument()
+    expect(screen.getByText('1')).toBeVisible()
+    expect(screen.getByText('3')).toBeVisible()
+    expect(screen.queryByText('…')).not.toBeInTheDocument()
+  })
+
+  it('triggers setActive when clicking on pagination buttons', () => {
+    const paginationItem = screen.getByText('1')
+    userEvent.click(paginationItem)
+
+    expect(setActive).toHaveBeenCalledWith(0)
+  })
+})
+
+describe('ResultPageButtons for many pages', () => {
+  beforeEach(() => renderPages(15, 4))
+
+  it('renders pagination buttons correctly', () => {
+    const pagination = screen.getByLabelText('result-pagination')
+    expect(pagination).toBeInTheDocument()
+    expect(screen.getByText('1')).toBeVisible()
+    expect(screen.getByText('15')).toBeVisible()
+    expect(screen.getByText('…')).toBeVisible()
+  })
+
+  it('shows ellipsis when page 7 is active', () => {
+    const paginationItem = screen.getByText('7')
+    userEvent.click(paginationItem)
+
+    expect(setActive).toHaveBeenCalledWith(6)
+    expect(screen.getByText('…')).toBeVisible()
+  })
+})
diff --git a/src/common/ResultPageButtons.tsx b/src/common/ResultPageButtons.tsx
@@ -1,24 +1,31 @@
 import React, { Dispatch, SetStateAction } from 'react'
 import { CorpusQueryItem, QueryItem } from 'query/QueryResult'
 import { Col, Row, Pagination } from 'react-bootstrap'
-import { createPages } from '../fragmentarium/ui/search/FragmentariumSearchResult'
+import _ from 'lodash'
 
-export function ResultPageButtons({
-  pages,
-  active,
-  setActive,
-}: {
-  pages: (QueryItem | CorpusQueryItem)[][]
+function createButtonGroups(
+  pages: readonly unknown[][],
   active: number
-  setActive: (number) => void
-}): JSX.Element {
-  return (
-    <Row>
-      <Col>
-        <ResultPagination pages={pages} active={active} setActive={setActive} />
-      </Col>
-    </Row>
+): number[][] {
+  const pageNumbers = _.range(pages.length)
+
+  if (pages.length <= 10) {
+    return [pageNumbers]
+  }
+  const buttonGroups: number[][] = []
+  const showEllipsis1 = active > 5
+  const showEllipsis2 = active < pageNumbers.length - 6
+
+  const activeGroup = pageNumbers.slice(
+    showEllipsis1 ? active - 3 : 0,
+    showEllipsis2 ? active + 4 : pageNumbers.length
   )
+
+  showEllipsis1 && buttonGroups.push([0])
+  buttonGroups.push(activeGroup)
+  showEllipsis2 && buttonGroups.push(pageNumbers.slice(-1))
+
+  return buttonGroups
 }
 function ResultPagination({
   pages,
@@ -30,8 +37,12 @@ function ResultPagination({
   setActive: Dispatch<SetStateAction<number>>
 }): JSX.Element {
   return (
-    <Pagination className="justify-content-center">
-      {createPages(pages, active).map((pages, index) => {
+    <Pagination
+      className="justify-content-center"
+      role="navigation"
+      aria-label="result-pagination"
+    >
+      {createButtonGroups(pages, active).map((pages, index) => {
         return (
           <React.Fragment key={index}>
             {index > 0 && <Pagination.Ellipsis />}
@@ -53,3 +64,20 @@ function ResultPagination({
     </Pagination>
   )
 }
+export function ResultPageButtons({
+  pages,
+  active,
+  setActive,
+}: {
+  pages: (QueryItem | CorpusQueryItem)[][]
+  active: number
+  setActive: (number) => void
+}): JSX.Element {
+  return (
+    <Row>
+      <Col>
+        <ResultPagination pages={pages} active={active} setActive={setActive} />
+      </Col>
+    </Row>
+  )
+}
diff --git a/src/corpus/ui/__snapshots__/TextView.integration.test.ts.snap b/src/corpus/ui/__snapshots__/TextView.integration.test.ts.snap
@@ -231,19 +231,25 @@ exports[`Chapter Show chapter 1`] = `
         <section
           class="text-view__projects"
         >
-          <a
-            aria-label="Link to Cuneiform Artefacts of Iraq in Context project"
-            href="https://caic.badw.de/"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Cuneiform Artefacts of Iraq in Context"
+          <ul
+            class="ResultList"
           >
-            <img
-              alt="Cuneiform Artefacts of Iraq in Context"
-              class="ExternalResources__image"
-              src="CAIC Briefkopf 2023.png"
-            />
-          </a>
+            <li>
+              <a
+                aria-label="Link to Cuneiform Artefacts of Iraq in Context project"
+                href="https://caic.badw.de/"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Cuneiform Artefacts of Iraq in Context"
+              >
+                <img
+                  alt="Cuneiform Artefacts of Iraq in Context"
+                  class="ExternalResources__image"
+                  src="CAIC Briefkopf 2023.png"
+                />
+              </a>
+            </li>
+          </ul>
         </section>
       </section>
       <section
@@ -558,19 +564,25 @@ exports[`Chapter Show list of manuscripts 1`] = `
         <section
           class="text-view__projects"
         >
-          <a
-            aria-label="Link to Cuneiform Artefacts of Iraq in Context project"
-            href="https://caic.badw.de/"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Cuneiform Artefacts of Iraq in Context"
+          <ul
+            class="ResultList"
           >
-            <img
-              alt="Cuneiform Artefacts of Iraq in Context"
-              class="ExternalResources__image"
-              src="CAIC Briefkopf 2023.png"
-            />
-          </a>
+            <li>
+              <a
+                aria-label="Link to Cuneiform Artefacts of Iraq in Context project"
+                href="https://caic.badw.de/"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Cuneiform Artefacts of Iraq in Context"
+              >
+                <img
+                  alt="Cuneiform Artefacts of Iraq in Context"
+                  class="ExternalResources__image"
+                  src="CAIC Briefkopf 2023.png"
+                />
+              </a>
+            </li>
+          </ul>
         </section>
       </section>
       <section
@@ -1059,19 +1071,25 @@ exports[`With session 1`] = `
         <section
           class="text-view__projects"
         >
-          <a
-            aria-label="Link to Cuneiform Artefacts of Iraq in Context project"
-            href="https://caic.badw.de/"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Cuneiform Artefacts of Iraq in Context"
+          <ul
+            class="ResultList"
           >
-            <img
-              alt="Cuneiform Artefacts of Iraq in Context"
-              class="ExternalResources__image"
-              src="CAIC Briefkopf 2023.png"
-            />
-          </a>
+            <li>
+              <a
+                aria-label="Link to Cuneiform Artefacts of Iraq in Context project"
+                href="https://caic.badw.de/"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Cuneiform Artefacts of Iraq in Context"
+              >
+                <img
+                  alt="Cuneiform Artefacts of Iraq in Context"
+                  class="ExternalResources__image"
+                  src="CAIC Briefkopf 2023.png"
+                />
+              </a>
+            </li>
+          </ul>
         </section>
       </section>
       <section

diff --git a/src/corpus/ui/manuscripts/ManuscriptForm.tsx b/src/corpus/ui/manuscripts/ManuscriptForm.tsx
@@ -16,6 +16,8 @@ import { provenances, Provenances } from 'corpus/domain/provenance'
 import BibliographyEntry from 'bibliography/domain/BibliographyEntry'
 import Editor from 'editor/Editor'
 
+const indent = '\u00A0'.repeat(4)
+
 export default function ManuscriptForm({
   manuscript,
   onChange,
@@ -86,17 +88,12 @@ export default function ManuscriptForm({
             value={manuscript.provenance.name}
             onChange={handleEnumChange('provenance', Provenances)}
           >
-            {provenances.map((provenance) =>
-              _.isNil(provenance.parent) ? (
-                <option key={provenance.name} value={provenance.name}>
-                  {provenance.name}
-                </option>
-              ) : (
-                <option key={provenance.name} value={provenance.name}>
-                  &nbsp;&nbsp;&nbsp;&nbsp;{provenance.name}
-                </option>
-              )
-            )}
+            {provenances.map((provenance, index) => (
+              <option key={index} value={provenance.name}>
+                {provenance.parent && indent}
+                {provenance.name}
+              </option>
+            ))}
           </Form.Control>
         </Form.Group>
         <Form.Group as={Col}>
@@ -120,17 +117,12 @@ export default function ManuscriptForm({
               value={manuscript.period.name}
               onChange={handleEnumChange('period', Periods)}
             >
-              {periods.map((period) =>
-                _.isNil(period.parent) ? (
-                  <option key={period.name} value={period.name}>
-                    {period.displayName ?? period.name} {period.description}
-                  </option>
-                ) : (
-                  <option key={period.name} value={period.name}>
-                    &nbsp;&nbsp;&nbsp;&nbsp;{period.name} {period.description}
-                  </option>
-                )
-              )}
+              {periods.map((period, index) => (
+                <option key={index} value={period.name}>
+                  {period.parent && indent}
+                  {period.displayName ?? period.name} {period.description}
+                </option>
+              ))}
             </Form.Control>
           </InputGroup>
         </Form.Group>

diff --git a/src/fragmentarium/application/FragmentSearchService.test.ts b/src/fragmentarium/application/FragmentSearchService.test.ts
@@ -11,7 +11,6 @@ const fragmentRepository = {
   random: jest.fn(),
   interesting: jest.fn(),
   searchReference: jest.fn(),
-  fetchLatestTransliterations: jest.fn(),
   fetchNeedsRevision: jest.fn(),
 }
 
@@ -33,14 +32,6 @@ const testData: TestData<FragmentSearchService>[] = [
     null,
     Promise.resolve([expectedResultStub])
   ),
-  new TestData(
-    'fetchLatestTransliterations',
-    [],
-    fragmentRepository.fetchLatestTransliterations,
-    [expectedResultStub],
-    null,
-    Promise.resolve([expectedResultStub])
-  ),
   new TestData(
     'fetchNeedsRevision',
     [],

diff --git a/src/fragmentarium/application/FragmentSearchService.ts b/src/fragmentarium/application/FragmentSearchService.ts
@@ -14,7 +14,6 @@ export type FragmentInfosPaginationPromise = Promise<FragmentInfosPagination>
 export interface FragmentInfoRepository {
   random(): FragmentInfosPromise
   interesting(): FragmentInfosPromise
-  fetchLatestTransliterations(): FragmentInfosPromise
   fetchNeedsRevision(): FragmentInfosPromise
 }
 
@@ -51,10 +50,6 @@ export default class FragmentSearchService {
       })
   }
 
-  fetchLatestTransliterations(): FragmentInfosPromise {
-    return this.fragmentRepository.fetchLatestTransliterations()
-  }
-
   fetchNeedsRevision(): FragmentInfosPromise {
     return this.fragmentRepository.fetchNeedsRevision()
   }

diff --git a/src/fragmentarium/infrastructure/FragmentRepository.test.ts b/src/fragmentarium/infrastructure/FragmentRepository.test.ts
@@ -168,14 +168,6 @@ const testData: TestData<FragmentRepository>[] = [
     ['/fragments?interesting=true', false],
     Promise.resolve([fragmentInfoDto])
   ),
-  new TestData(
-    'fetchLatestTransliterations',
-    [],
-    apiClient.fetchJson,
-    [fragmentInfo],
-    ['/fragments?latest=true', false],
-    Promise.resolve([fragmentInfoDto])
-  ),
   new TestData(
     'fetchNeedsRevision',
     [],
@@ -392,6 +384,7 @@ const queryTestCases: FragmentQuery[] = [
   { bibId: 'foo' },
   { bibId: 'foo', pages: '1-2' },
   { number: 'X.1' },
+  { latest: true },
 ]
 
 const queryTestData: TestData<FragmentRepository>[] = queryTestCases.map(

diff --git a/src/fragmentarium/infrastructure/FragmentRepository.ts b/src/fragmentarium/infrastructure/FragmentRepository.ts
@@ -174,12 +174,6 @@ class ApiFragmentRepository
     )
   }
 
-  fetchLatestTransliterations(): FragmentInfosPromise {
-    return this._fetch({ latest: true }).then((fragmentInfos) =>
-      fragmentInfos.map(createFragmentInfo)
-    )
-  }
-
   fetchNeedsRevision(): FragmentInfosPromise {
     return this._fetch({ needsRevision: true }).then((fragmentInfos) =>
       fragmentInfos.map(createFragmentInfo)

diff --git a/src/fragmentarium/ui/front-page/Fragmentarium.css b/src/fragmentarium/ui/front-page/Fragmentarium.css
@@ -1,3 +1,4 @@
 .SubsectionHeading--indented {
   padding-left: 2em;
+  margin-bottom: 1rem;
 }