Skip to content

Commit

Permalink
feat: use new hook and new component to render properly formatted dates
Browse files Browse the repository at this point in the history
  • Loading branch information
@imouandjolobe-pass
imouandjolobe-pass committed Nov 27, 2024
1 parent a258adf commit e98ca70
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 113 deletions.
55 changes: 11 additions & 44 deletions src/features/home/components/modules/OffersModule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,19 @@ import React, { useCallback, useEffect, useMemo } from 'react'

import { useAuthContext } from 'features/auth/context/AuthContext'
import { useHomeRecommendedOffers } from 'features/home/api/useHomeRecommendedOffers'
import { HomeOfferTile } from 'features/home/components/HomeOfferTile'
import {
ModuleData,
OffersModule as OffersModuleType,
RecommendedOffersModule,
} from 'features/home/types'
import { getSearchStackConfig } from 'features/navigation/SearchStackNavigator/helpers'
import { OfferTileWrapper } from 'features/offer/components/OfferTile/OfferTileWrapper'
import { useAdaptOffersPlaylistParameters } from 'libs/algolia/fetchAlgolia/fetchMultipleOffers/helpers/useAdaptOffersPlaylistParameters'
import { analytics } from 'libs/analytics'
import { ContentTypes } from 'libs/contentful/types'
import { usePlaylistItemDimensionsFromLayout } from 'libs/contentful/usePlaylistItemDimensionsFromLayout'
import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
import useFunctionOnce from 'libs/hooks/useFunctionOnce'
import { useLocation } from 'libs/location'
import { formatDates } from 'libs/parsers/formatDates'
import { getDisplayPrice } from 'libs/parsers/getDisplayPrice'
import { useCategoryHomeLabelMapping, useCategoryIdMapping } from 'libs/subcategories'
import { Offer } from 'shared/offer/types'
import { PassPlaylist } from 'ui/components/PassPlaylist'
import { CustomListRenderItem, ItemDimensions, RenderFooterItem } from 'ui/components/Playlist'
Expand All @@ -38,7 +33,6 @@ export type OffersModuleProps = {
const keyExtractor = (item: Offer) => item.objectID

export const OffersModule = (props: OffersModuleProps) => {
const isNewOfferTileDisplayed = useFeatureFlag(RemoteStoreFeatureFlags.WIP_NEW_OFFER_TILE)
const {
displayParameters,
offersModuleParameters,
Expand All @@ -49,8 +43,6 @@ export const OffersModule = (props: OffersModuleProps) => {
recommendationParameters,
} = props
const adaptedPlaylistParameters = useAdaptOffersPlaylistParameters()
const mapping = useCategoryIdMapping()
const labelMapping = useCategoryHomeLabelMapping()
const { user } = useAuthContext()
const { userLocation } = useLocation()

Expand Down Expand Up @@ -103,40 +95,16 @@ export const OffersModule = (props: OffersModuleProps) => {
: undefined

const renderItem: CustomListRenderItem<Offer> = useCallback(
({ item, width, height }) => {
const timestampsInMillis = item.offer.dates?.map((timestampInSec) => timestampInSec * 1000)
return (
<HomeOfferTile
offerLocation={item._geoloc}
categoryLabel={labelMapping[item.offer.subcategoryId]}
categoryId={mapping[item.offer.subcategoryId]}
subcategoryId={item.offer.subcategoryId}
offerId={+item.objectID}
name={item.offer.name}
date={formatDates(timestampsInMillis)}
isDuo={item.offer.isDuo}
thumbUrl={item.offer.thumbUrl}
price={getDisplayPrice(item.offer.prices)}
isBeneficiary={user?.isBeneficiary}
moduleName={moduleName}
moduleId={moduleId}
homeEntryId={homeEntryId}
width={width}
height={height}
variant={isNewOfferTileDisplayed ? 'new' : 'default'}
/>
)
},

[
labelMapping,
mapping,
user?.isBeneficiary,
moduleName,
moduleId,
homeEntryId,
isNewOfferTileDisplayed,
]
({ item, width, height }) => (
<OfferTileWrapper
item={item}
width={width}
height={height}
moduleName={moduleName}
moduleId={moduleId}
/>
),
[moduleId, moduleName]
)

const { itemWidth, itemHeight } = usePlaylistItemDimensionsFromLayout(displayParameters.layout)
Expand Down Expand Up @@ -165,7 +133,6 @@ export const OffersModule = (props: OffersModuleProps) => {
: false

const offersToDisplay = hasRecommendationParameters ? hybridPlaylistItems : playlistItems

const shouldModuleBeDisplayed =
offersToDisplay.length > 0 && offersToDisplay.length >= displayParameters.minOffers

Expand Down
14 changes: 0 additions & 14 deletions src/features/home/components/modules/RecommendationModule.native.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,6 @@ describe('RecommendationModule', () => {
mockServer.getApi<SubcategoriesResponseModelv2>('/v1/subcategories/v2', subcategoriesDataTest)
})

it('should display V2 playlist when FF activated', () => {
useFeatureFlagSpy.mockReturnValueOnce(true)
renderRecommendationModule()

expect(screen.getAllByTestId('playlist-card-offer-v2')).toBeTruthy()
})

it('should NOT display V2 playlist when FF deactivated', () => {
useFeatureFlagSpy.mockReturnValueOnce(false)
renderRecommendationModule()

expect(screen.queryByTestId('playlist-card-offer-v2')).not.toBeTruthy()
})

it('should trigger logEvent "ModuleDisplayedOnHomepage" when shouldModuleBeDisplayed is true', async () => {
renderRecommendationModule()

Expand Down
49 changes: 12 additions & 37 deletions src/features/home/components/modules/RecommendationModule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,13 @@ import React, { useCallback, useEffect } from 'react'

import { useAuthContext } from 'features/auth/context/AuthContext'
import { useHomeRecommendedOffers } from 'features/home/api/useHomeRecommendedOffers'
import { HomeOfferTile } from 'features/home/components/HomeOfferTile'
import { RecommendedOffersModule } from 'features/home/types'
import { OfferTileWrapper } from 'features/offer/components/OfferTile/OfferTileWrapper'
import { analytics } from 'libs/analytics'
import { ContentTypes, DisplayParametersFields } from 'libs/contentful/types'
import { usePlaylistItemDimensionsFromLayout } from 'libs/contentful/usePlaylistItemDimensionsFromLayout'
import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
import useFunctionOnce from 'libs/hooks/useFunctionOnce'
import { useLocation } from 'libs/location/LocationWrapper'
import { formatDates } from 'libs/parsers/formatDates'
import { getDisplayPrice } from 'libs/parsers/getDisplayPrice'
import { useCategoryHomeLabelMapping, useCategoryIdMapping } from 'libs/subcategories'
import { Offer } from 'shared/offer/types'
import { PassPlaylist } from 'ui/components/PassPlaylist'
import { CustomListRenderItem } from 'ui/components/Playlist'
Expand All @@ -29,12 +24,9 @@ type RecommendationModuleProps = {
const keyExtractor = (item: Offer) => item.objectID

export const RecommendationModule = (props: RecommendationModuleProps) => {
const isNewOfferTileDisplayed = useFeatureFlag(RemoteStoreFeatureFlags.WIP_NEW_OFFER_TILE)
const { displayParameters, index, recommendationParameters, moduleId, homeEntryId } = props
const { userLocation: position } = useLocation()
const { user: profile } = useAuthContext()
const mapping = useCategoryIdMapping()
const labelMapping = useCategoryHomeLabelMapping()

const { offers, recommendationApiParams } = useHomeRecommendedOffers(
position,
Expand Down Expand Up @@ -65,34 +57,17 @@ export const RecommendationModule = (props: RecommendationModuleProps) => {
}, [shouldModuleBeDisplayed])

const renderItem: CustomListRenderItem<Offer> = useCallback(
({ item, width, height }) => {
const timestampsInMillis = item.offer.dates?.map((timestampInSec) => timestampInSec * 1000)

return (
<HomeOfferTile
categoryLabel={labelMapping[item.offer.subcategoryId]}
categoryId={mapping[item.offer.subcategoryId]}
subcategoryId={item.offer.subcategoryId}
offerId={+item.objectID}
offerLocation={item._geoloc}
name={item.offer.name}
date={formatDates(timestampsInMillis)}
isDuo={item.offer.isDuo}
thumbUrl={item.offer.thumbUrl}
price={getDisplayPrice(item.offer.prices)}
isBeneficiary={profile?.isBeneficiary}
moduleName={moduleName}
moduleId={moduleId}
width={width}
height={height}
homeEntryId={homeEntryId}
apiRecoParams={recommendationApiParams}
variant={isNewOfferTileDisplayed ? 'new' : 'default'}
/>
)
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[profile?.isBeneficiary, labelMapping, mapping, recommendationApiParams]
({ item, width, height }) => (
<OfferTileWrapper
item={item}
width={width}
height={height}
moduleName={moduleName}
moduleId={moduleId}
apiRecoParams={recommendationApiParams}
/>
),
[moduleId, moduleName, recommendationApiParams]
)

const { itemWidth, itemHeight } = usePlaylistItemDimensionsFromLayout(displayParameters.layout)
Expand Down
5 changes: 2 additions & 3 deletions src/features/home/components/modules/video/VideoMonoOfferTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import { triggerConsultOfferLog } from 'libs/analytics/helpers/triggerLogConsult
import { OfferAnalyticsParams } from 'libs/analytics/types'
import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
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 { useOfferDates } from 'shared/hook/useOfferDates'
import { Offer } from 'shared/offer/types'
import { usePrePopulateOffer } from 'shared/offer/usePrePopulateOffer'
import { OfferImage } from 'ui/components/tiles/OfferImage'
Expand Down Expand Up @@ -42,8 +42,7 @@ export const VideoMonoOfferTile: FunctionComponent<Props> = ({
const prePopulateOffer = usePrePopulateOffer()
const theme = useTheme()

const timestampsInMillis = offer.offer.dates?.map((timestampInSec) => timestampInSec * 1000)
const displayDate = formatDates(timestampsInMillis)
const displayDate = useOfferDates(offer)

const displayPrice = getDisplayPrice(offer?.offer?.prices)

Expand Down
5 changes: 2 additions & 3 deletions src/features/home/components/modules/video/VideoMultiOfferTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import { OfferAnalyticsParams } from 'libs/analytics/types'
import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
import { useDistance } from 'libs/location/hooks/useDistance'
import { formatDates } from 'libs/parsers/formatDates'
import { getDisplayPrice } from 'libs/parsers/getDisplayPrice'
import { useCategoryHomeLabelMapping, useCategoryIdMapping } from 'libs/subcategories'
import { useOfferDates } from 'shared/hook/useOfferDates'
import { Offer } from 'shared/offer/types'
import { usePrePopulateOffer } from 'shared/offer/usePrePopulateOffer'
import { OfferImage } from 'ui/components/tiles/OfferImage'
Expand Down Expand Up @@ -39,8 +39,7 @@ export const VideoMultiOfferTile: FunctionComponent<Props> = ({

const displayPrice = getDisplayPrice(offer?.offer?.prices)

const timestampsInMillis = offer.offer.dates?.map((timestampInSec) => timestampInSec * 1000)
const displayDate = formatDates(timestampsInMillis)
const displayDate = useOfferDates(offer)

const displayDistance = useDistance(offer._geoloc)

Expand Down
17 changes: 5 additions & 12 deletions src/ui/components/tiles/HorizontalOfferTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,15 @@ import React, { useMemo } from 'react'
import { StyleProp, ViewStyle } from 'react-native'
import styled from 'styled-components/native'

import { SubcategoryIdEnum } from 'api/gen'
import { useLogClickOnOffer } from 'libs/algolia/analytics/logClickOnOffer'
import { triggerConsultOfferLog } from 'libs/analytics/helpers/triggerLogConsultOffer/triggerConsultOfferLog'
import { OfferAnalyticsParams } from 'libs/analytics/types'
import { useDistance } from 'libs/location/hooks/useDistance'
import { formatDates, formatReleaseDate } from 'libs/parsers/formatDates'
import { getDisplayPrice } from 'libs/parsers/getDisplayPrice'
import { useSubcategory } from 'libs/subcategories'
import { useSearchGroupLabel } from 'libs/subcategories/useSearchGroupLabel'
import { tileAccessibilityLabel, TileContentType } from 'libs/tileAccessibilityLabel'
import { useOfferDates } from 'shared/hook/useOfferDates'
import { Offer } from 'shared/offer/types'
import { usePrePopulateOffer } from 'shared/offer/usePrePopulateOffer'
import { useNativeCategoryValue } from 'ui/components/tiles/useNativeCategoryValue'
Expand All @@ -38,24 +37,16 @@ export const HorizontalOfferTile = ({
...horizontalTileProps
}: Props) => {
const { offer: offerDetails, objectID, _geoloc } = offer
const { subcategoryId, dates, prices, thumbUrl, name, releaseDate } = offerDetails
const { subcategoryId, prices, thumbUrl, name } = offerDetails
const prePopulateOffer = usePrePopulateOffer()
const distanceToOffer = useDistance(_geoloc)
const { categoryId, searchGroupName, nativeCategoryId } = useSubcategory(subcategoryId)
const searchGroupLabel = useSearchGroupLabel(searchGroupName)
const { logClickOnOffer } = useLogClickOnOffer()

const isOfferAMovieScreeningWithAReleaseDate =
subcategoryId === SubcategoryIdEnum.SEANCE_CINE &&
releaseDate &&
typeof releaseDate === 'number' // we do this because for now, some offers' releaseDate attribute have the wrong type

const timestampsInMillis = dates?.map((timestampInSec) => timestampInSec * 1000)
const offerId = Number(objectID)

const formattedDate = isOfferAMovieScreeningWithAReleaseDate
? formatReleaseDate(releaseDate * 1000)
: formatDates(timestampsInMillis)
const formattedDate = useOfferDates(offer)

const formattedPrice = getDisplayPrice(prices)
const nativeCategoryValue = useNativeCategoryValue({ nativeCategoryId })
Expand Down Expand Up @@ -133,6 +124,8 @@ const Container = styled(InternalTouchableLink)({
alignItems: 'center',
outlineOffset: 0,
gap: getSpacing(4),
border: 2,
borderColor: 'blue',
})

const Body = styled(TypoDS.Body)(({ theme }) => ({
Expand Down

0 comments on commit e98ca70

Please sign in to comment.