refactor(MovieCalendarProvider): give more control towards calendar c…

…ontext dates

src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx

@@ -15,7 +15,7 @@ import styled from 'styled-components/native'
 
 import { MovieCalendar } from 'features/offer/components/MovieCalendar/MovieCalendar'
 import { handleMovieCalendarScroll } from 'features/offer/components/MoviesScreeningCalendar/utils'
-import { useNextDays } from 'features/offer/helpers/useNextDays/useNextDays'
+import { useDaysSelector } from 'features/offer/helpers/useDaysSelector/useDaysSelector'
 import { Anchor } from 'ui/components/anchor/Anchor'
 import { useScrollToAnchor } from 'ui/components/anchor/AnchorContext'
 import { useLayout } from 'ui/hooks/useLayout'
@@ -24,6 +24,8 @@ type MovieCalendarContextType = {
   selectedDate: Date
   goToDate: (date: Date) => void
   displayCalendar: (shouldDisplayCalendar: boolean) => void
+  displayDates: (dates: Date[]) => void
+  disableDates: (dates: Date[]) => void
 }
 
 const MovieCalendarContext = createContext<MovieCalendarContextType | undefined>(undefined)
@@ -72,11 +74,12 @@ const AnimatedCalendarView: React.FC<PropsWithChildren<{ selectedDate: Date }>>
 }
 
 export const MovieCalendarProvider: React.FC<{
-  nbOfDays: number
   children: React.ReactNode
   containerStyle?: ViewStyle
-}> = ({ nbOfDays, containerStyle, children }) => {
-  const { dates, selectedDate, setSelectedDate } = useNextDays(nbOfDays)
+  initialDates?: Date[]
+}> = ({ containerStyle, children, initialDates = [] }) => {
+  const { dates, selectedDate, setSelectedDate, setDates } = useDaysSelector(initialDates)
+  const [_disabledDates, setDisabledDates] = useState<Date[]>([])
   const flatListRef = useRef<FlatList | null>(null)
   const { width: flatListWidth, onLayout: onFlatListLayout } = useLayout()
   const { width: itemWidth, onLayout: onItemLayout } = useLayout()
@@ -117,9 +120,22 @@ export const MovieCalendarProvider: React.FC<{
     [scrollToAnchor, setSelectedDate]
   )
 
+  const displayDates = useCallback(
+    (dates: Date[]) => {
+      setDates(dates)
+    },
+    [setDates]
+  )
+
   const value = useMemo(
-    () => ({ selectedDate, goToDate, displayCalendar: setIsVisible }),
-    [selectedDate, goToDate]
+    () => ({
+      selectedDate,
+      goToDate,
+      displayCalendar: setIsVisible,
+      displayDates,
+      disableDates: setDisabledDates,
+    }),
+    [selectedDate, goToDate, displayDates]
   )
 
   return (

src/features/offer/components/MoviesScreeningCalendar/MoviesScreeningCalendar.tsx

@@ -13,6 +13,7 @@ import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
 import { formatDates } from 'libs/parsers/formatDates'
 import { getDisplayPrice } from 'libs/parsers/getDisplayPrice'
 import { useCategoryHomeLabelMapping, useCategoryIdMapping } from 'libs/subcategories'
+import { getDates } from 'shared/date/getDates'
 import { Offer } from 'shared/offer/types'
 import { PassPlaylist } from 'ui/components/PassPlaylist'
 import { CustomListRenderItem } from 'ui/components/Playlist'
@@ -35,6 +36,7 @@ export const MoviesScreeningCalendar: FunctionComponent<Props> = ({ venueOffers
     (offer) => offer.offer.subcategoryId !== SubcategoryIdEnum.SEANCE_CINE
   )
 
+  const next15Dates = getDates(new Date(), 15)
   const mapping = useCategoryIdMapping()
   const labelMapping = useCategoryHomeLabelMapping()
 
@@ -65,7 +67,7 @@ export const MoviesScreeningCalendar: FunctionComponent<Props> = ({ venueOffers
   return (
     <React.Fragment>
       <Spacer.Column numberOfSpaces={4} />
-      <MovieCalendarProvider nbOfDays={15}>
+      <MovieCalendarProvider initialDates={next15Dates}>
         <VenueCalendar venueOffers={venueOffers} offerIds={offerIds} />
       </MovieCalendarProvider>
       {nonScreeningOffers.length > 0 ? (

src/features/offer/components/OfferCine/OfferCineBlock.tsx

@@ -5,6 +5,7 @@ import styled, { useTheme } from 'styled-components/native'
 import { OfferResponseV2 } from 'api/gen'
 import { MovieCalendarProvider } from 'features/offer/components/MoviesScreeningCalendar/MovieCalendarContext'
 import { OfferCineContent } from 'features/offer/components/OfferCine/OfferCineContent'
+import { getDates } from 'shared/date/getDates'
 import { AppThemeType } from 'theme'
 import { getSpacing, Spacer, TypoDS } from 'ui/theme'
 import { getHeadingAttrs } from 'ui/theme/typographyAttrs/getHeadingAttrs'
@@ -17,14 +18,15 @@ type Props = {
 
 export const OfferCineBlock: FC<Props> = ({ title, onSeeVenuePress, offer }) => {
   const theme = useTheme()
+  const next15Dates = getDates(new Date(), 15)
 
   return (
     <Container testID="offer-new-xp-cine-block">
       <TitleContainer>
         <TypoDS.Title3 {...getHeadingAttrs(2)}>{title}</TypoDS.Title3>
       </TitleContainer>
       <Spacer.Column numberOfSpaces={4} />
-      <MovieCalendarProvider nbOfDays={15} containerStyle={getCalendarStyle(theme)}>
+      <MovieCalendarProvider initialDates={next15Dates} containerStyle={getCalendarStyle(theme)}>
         <OfferCineContent offer={offer} onSeeVenuePress={onSeeVenuePress} />
       </MovieCalendarProvider>
     </Container>

src/features/offer/helpers/useNextDays/useNextDays.native.test.ts → src/features/offer/helpers/useDaysSelector/useDaysSelector.native.test.ts

@@ -3,26 +3,26 @@ import { isSameDay, startOfDay } from 'date-fns'
 import { getDates } from 'shared/date/getDates'
 import { renderHook, act } from 'tests/utils'
 
-import { useNextDays } from './useNextDays'
+import { useDaysSelector } from './useDaysSelector'
 
 jest.mock('shared/date/getDates')
 
-describe('useNextDays', () => {
+describe('useDaysSelector', () => {
   const mockDates = [new Date('2023-01-01'), new Date('2023-01-02'), new Date('2023-01-03')]
 
   beforeEach(() => {
     jest.mocked(getDates).mockReturnValue(mockDates as unknown as [])
   })
 
   it('should initialize with the first date', () => {
-    const { result } = renderHook(() => useNextDays(3))
+    const { result } = renderHook(() => useDaysSelector(mockDates))
 
     expect(result.current.selectedDate).toEqual(mockDates[0])
     expect(result.current.dates).toEqual(mockDates)
   })
 
   it('should update selectedDate when setSelectedDate is called with a new date', () => {
-    const { result } = renderHook(() => useNextDays(3))
+    const { result } = renderHook(() => useDaysSelector(mockDates))
 
     act(() => {
       result.current.setSelectedDate(new Date('2023-01-02'))
@@ -32,7 +32,7 @@ describe('useNextDays', () => {
   })
 
   it('should not update selectedDate when setSelectedDate is called with the same date', () => {
-    const { result } = renderHook(() => useNextDays(3))
+    const { result } = renderHook(() => useDaysSelector(mockDates))
 
     const initialSelectedDate = result.current.selectedDate
 
@@ -44,7 +44,7 @@ describe('useNextDays', () => {
   })
 
   it('should set selectedDate to start of day', () => {
-    const { result } = renderHook(() => useNextDays(3))
+    const { result } = renderHook(() => useDaysSelector(mockDates))
 
     const dateWithTime = new Date('2023-01-02T12:34:56')
     act(() => {
@@ -53,10 +53,4 @@ describe('useNextDays', () => {
 
     expect(result.current.selectedDate).toEqual(startOfDay(dateWithTime))
   })
-
-  it('should call getDates with correct arguments', () => {
-    renderHook(() => useNextDays(5))
-
-    expect(getDates).toHaveBeenCalledWith(expect.any(Date), 5)
-  })
 })

src/features/offer/helpers/useNextDays/useNextDays.ts → src/features/offer/helpers/useDaysSelector/useDaysSelector.ts

@@ -1,12 +1,10 @@
 import { isSameDay, startOfDay } from 'date-fns'
 import { useCallback, useState } from 'react'
 
-import { getDates } from 'shared/date/getDates'
-
-export const useNextDays = <T extends Readonly<number>>(nbOfDays: T) => {
-  const dates = getDates(new Date(), nbOfDays)
+export const useDaysSelector = (dates: Date[]) => {
+  const [internalDates, setInternalDates] = useState<Date[]>(dates)
   const [selectedInternalDate, setSelectedInternalDate] = useState<Date>(
-    (dates as Date[])[0] as Date
+    dates?.[0] || startOfDay(new Date())
   )
 
   const setSelectedDate = useCallback(
@@ -18,5 +16,10 @@ export const useNextDays = <T extends Readonly<number>>(nbOfDays: T) => {
     [selectedInternalDate]
   )
 
-  return { selectedDate: selectedInternalDate, setSelectedDate, dates }
+  return {
+    selectedDate: selectedInternalDate,
+    dates: internalDates,
+    setSelectedDate,
+    setDates: setInternalDates,
+  }
 }