From 1706c0ef77e34227101d0bc2e3d95aafd5be9a3c Mon Sep 17 00:00:00 2001
From: yleclercq-pass <62058919+yleclercq-pass@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:41:52 +0100
Subject: [PATCH] (PC-33888) feat(ChronicleCardList): add chronicle card list
 for mobile and web

---
 .../ChronicleCardList/ChronicleCardList.tsx   |  3 +
 .../ChronicleCardList.web.test.tsx            | 67 +++++++++++++++++++
 .../ChronicleCardList.web.tsx                 | 51 ++++++++++++++
 3 files changed, 121 insertions(+)
 create mode 100644 src/features/chronicle/components/ChronicleCardList/ChronicleCardList.tsx
 create mode 100644 src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.test.tsx
 create mode 100644 src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.tsx

diff --git a/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.tsx b/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.tsx
new file mode 100644
index 00000000000..b5828d755f9
--- /dev/null
+++ b/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.tsx
@@ -0,0 +1,3 @@
+import { ChronicleCardListBase } from 'features/chronicle/components/ChronicleCardListBase/ChronicleCardListBase'
+
+export const ChronicleCardList = ChronicleCardListBase
diff --git a/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.test.tsx b/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.test.tsx
new file mode 100644
index 00000000000..50065e36713
--- /dev/null
+++ b/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+
+import { ChronicleCardList } from 'features/chronicle/components/ChronicleCardList/ChronicleCardList.web'
+import { chroniclesSnap } from 'features/chronicle/fixtures/chroniclesSnap'
+import { fireEvent, render, screen } from 'tests/utils/web'
+
+describe('ChronicleCardList', () => {
+  it('should render the ChronicleCardList correctly with horizontal mode', () => {
+    render(<ChronicleCardList data={chroniclesSnap} />)
+
+    expect(screen.getByText('Le Voyage Extraordinaire')).toBeInTheDocument()
+    expect(screen.getByText('L’Art de la Cuisine')).toBeInTheDocument()
+
+    expect(screen.getByTestId('chronicle-list-right-arrow')).toBeInTheDocument()
+  })
+
+  it('should render the ChronicleCardList correctly with vertical mode', () => {
+    render(<ChronicleCardList data={chroniclesSnap} horizontal={false} />)
+
+    expect(screen.getByText('Le Voyage Extraordinaire')).toBeInTheDocument()
+
+    expect(screen.queryByTestId('chronicle-list-left-arrow')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('chronicle-list-right-arrow')).not.toBeInTheDocument()
+  })
+
+  it('should go to next page when right arrow is pressed', () => {
+    render(<ChronicleCardList data={chroniclesSnap} horizontal />)
+
+    fireEvent.click(screen.getByTestId('chronicle-list-right-arrow'))
+
+    // 2 item
+    expect(screen.getByText('L’Art de la Cuisine')).toBeInTheDocument()
+    // 11 item
+    expect(screen.queryByText('L’Odyssée des Espèces')).not.toBeInTheDocument()
+  })
+
+  it('should go to previous page when left arrow is pressed', () => {
+    render(<ChronicleCardList data={chroniclesSnap} horizontal />)
+
+    fireEvent.click(screen.getByTestId('chronicle-list-right-arrow'))
+
+    fireEvent.click(screen.getByTestId('chronicle-list-left-arrow'))
+
+    expect(screen.getByText('Le Voyage Extraordinaire')).toBeInTheDocument()
+    expect(screen.getByText('Explorateur du monde')).toBeInTheDocument()
+  })
+
+  it('should disable the left arrow when on the first item', () => {
+    render(<ChronicleCardList data={chroniclesSnap} horizontal />)
+
+    // Ensure that the left arrow is not clickable on the first item
+    expect(screen.queryByTestId('chronicle-list-left-arrow')).not.toBeInTheDocument()
+  })
+
+  it('should disable the right arrow when on the last item', () => {
+    render(<ChronicleCardList data={chroniclesSnap} horizontal />)
+
+    const rightArrow = screen.getByTestId('chronicle-list-right-arrow')
+
+    // Simulate clicks until the right arrow button is no longer visible
+    while (rightArrow && rightArrow.isConnected) {
+      fireEvent.click(rightArrow)
+    }
+
+    expect(screen.queryByTestId('chronicle-list-right-arrow')).not.toBeInTheDocument()
+  })
+})
diff --git a/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.tsx b/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.tsx
new file mode 100644
index 00000000000..f0544c81f95
--- /dev/null
+++ b/src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.tsx
@@ -0,0 +1,51 @@
+import React, { FunctionComponent, useState } from 'react'
+import styled from 'styled-components/native'
+
+import { ChronicleCardProps } from 'features/chronicle/components/ChronicleCard/ChronicleCard'
+import { ChronicleCardListBase } from 'features/chronicle/components/ChronicleCardListBase/ChronicleCardListBase'
+import { PlaylistArrowButton } from 'ui/Playlist/PlaylistArrowButton'
+
+type ChronicleCardListProps = {
+  data: ChronicleCardProps[]
+  horizontal?: boolean
+}
+
+export const ChronicleCardList: FunctionComponent<ChronicleCardListProps> = ({
+  data,
+  horizontal = true,
+}) => {
+  const [indexItem, setIndexItem] = useState(0)
+
+  const goToPreviousPage = () => setIndexItem((prev) => Math.max(prev - 1, 0))
+  const goToNextPage = () => setIndexItem((prev) => Math.min(prev + 1, data.length - 1))
+
+  return (
+    <FlatListContainer>
+      {horizontal ? (
+        <React.Fragment>
+          {indexItem > 0 ? (
+            <PlaylistArrowButton
+              direction="left"
+              onPress={goToPreviousPage}
+              testID="chronicle-list-left-arrow"
+            />
+          ) : null}
+
+          {indexItem < data.length - 1 ? (
+            <PlaylistArrowButton
+              direction="right"
+              onPress={goToNextPage}
+              testID="chronicle-list-right-arrow"
+            />
+          ) : null}
+        </React.Fragment>
+      ) : null}
+      <ChronicleCardListBase data={data} indexItem={indexItem} horizontal={horizontal} />
+    </FlatListContainer>
+  )
+}
+
+const FlatListContainer = styled.View<{ minHeight?: number }>({
+  position: 'relative',
+  width: '100%',
+})