diff --git a/src/components/activity-groups-list/activity-groups-list.styles.ts b/src/components/activity-groups-list/activity-groups-list.styles.ts index f9e7e2d03..7039f5aad 100644 --- a/src/components/activity-groups-list/activity-groups-list.styles.ts +++ b/src/components/activity-groups-list/activity-groups-list.styles.ts @@ -4,13 +4,8 @@ import { formatSize } from 'src/styles/format-size'; export const useActivityGroupsListStyles = createUseStyles(({ colors, typography }) => ({ contentContainer: { flex: 1, - paddingTop: formatSize(8), paddingBottom: formatSize(16) }, - adContainer: { - paddingBottom: formatSize(12), - paddingRight: formatSize(16) - }, sectionHeaderText: { ...typography.numbersMedium13, color: colors.gray2, @@ -19,10 +14,7 @@ export const useActivityGroupsListStyles = createUseStyles(({ colors, typography marginLeft: formatSize(16) }, promotionItemWrapper: { - paddingVertical: formatSize(12), - marginLeft: formatSize(16), - borderBottomWidth: formatSize(0.5), - borderBottomColor: colors.lines + margin: formatSize(16) }, centeredItem: { alignSelf: 'center' @@ -35,8 +27,5 @@ export const useActivityGroupsListStyles = createUseStyles(({ colors, typography }, additionalLoader: { paddingTop: formatSize(16) - }, - listPromotionItem: { - marginRight: formatSize(16) } })); diff --git a/src/components/activity-groups-list/activity-groups-list.tsx b/src/components/activity-groups-list/activity-groups-list.tsx index 28d32ac03..6a2f1d29c 100644 --- a/src/components/activity-groups-list/activity-groups-list.tsx +++ b/src/components/activity-groups-list/activity-groups-list.tsx @@ -1,6 +1,6 @@ import { FlashList, ListRenderItem } from '@shopify/flash-list'; import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { ActivityIndicator, LayoutChangeEvent, Text, View } from 'react-native'; +import { ActivityIndicator, Text, View } from 'react-native'; import { DataPlaceholder } from 'src/components/data-placeholder/data-placeholder'; import { PromotionItem } from 'src/components/promotion-item'; @@ -9,7 +9,6 @@ import { emptyFn } from 'src/config/general'; import { useAdTemporaryHiding } from 'src/hooks/use-ad-temporary-hiding.hook'; import { useFakeRefreshControlProps } from 'src/hooks/use-fake-refresh-control-props.hook'; import { useInternalAdsAnalytics } from 'src/hooks/use-internal-ads-analytics.hook'; -import { useListElementIntersection } from 'src/hooks/use-list-element-intersection.hook'; import { useOutsideOfListIntersection } from 'src/hooks/use-outside-of-list-intersection.hook'; import { ActivityGroup, emptyActivity } from 'src/interfaces/activity.interface'; import { useIsPartnersPromoEnabledSelector } from 'src/store/partners-promotion/partners-promotion-selectors'; @@ -23,8 +22,7 @@ import { useActivityGroupsListStyles } from './activity-groups-list.styles'; type ListItem = string | ActivityGroup; const getItemType = (item: ListItem) => (typeof item === 'string' ? 'sectionHeader' : 'row'); - -const ListEmptyComponent = ; +const keyExtractor = (item: ListItem) => (typeof item === 'string' ? item : item[0].hash); const AVERAGE_ITEM_HEIGHT = 150; const PROMOTION_ID = 'activities-promotion'; @@ -50,29 +48,9 @@ export const ActivityGroupsList: FC = ({ const { isHiddenTemporarily } = useAdTemporaryHiding(PROMOTION_ID); const fakeRefreshControlProps = useFakeRefreshControlProps(); const [endIsReached, setEndIsReached] = useState(false); - const [loadingEnded, setLoadingEnded] = useState(!isLoading); const [promotionErrorOccurred, setPromotionErrorOccurred] = useState(false); const shouldShowPromotion = partnersPromotionEnabled && !promotionErrorOccurred && !isHiddenTemporarily; - const keyExtractor = useCallback( - (item: ListItem, index: number) => { - const keyRoot = typeof item === 'string' ? item : item[0].hash; - - if (index === 1 && shouldShowPromotion) { - return `${keyRoot}-with-promotion`; - } - - return keyRoot; - }, - [shouldShowPromotion] - ); - - useEffect(() => { - if (!isLoading) { - setLoadingEnded(true); - } - }, [isLoading]); - const handleEndReached = useCallback(() => { setEndIsReached(true); handleUpdate(); @@ -105,69 +83,53 @@ export const ActivityGroupsList: FC = ({ return result; }, [activityGroups]); - const shouldRenderList = sections.length > 0; const adRef = useRef(null); - const separateAdParentRef = useRef(null); - - const { onAdLoad, resetAdState, onIsVisible } = useInternalAdsAnalytics(pageName); - const { - onListScroll, - onElementLayoutChange: onListAdLayoutChange, - onListLayoutChange, - onUnmount: onListAdUnmount - } = useListElementIntersection(onIsVisible); - const { onElementOrParentLayout: onSeparateAdOrParentLayout, onUnmount: onSeparateAdUnmount } = - useOutsideOfListIntersection(separateAdParentRef, adRef, onIsVisible); - - useEffect(() => { - if (shouldRenderList) { - onSeparateAdUnmount(); - } else { - onListAdUnmount(); - } - resetAdState(); - }, [onListAdUnmount, onSeparateAdUnmount, resetAdState, shouldRenderList]); - const handlePromotionLayout = useCallback( - (e: LayoutChangeEvent) => { - if (shouldRenderList) { - onListAdLayoutChange(e); - } else { - onSeparateAdOrParentLayout(); - } - }, - [onListAdLayoutChange, onSeparateAdOrParentLayout, shouldRenderList] - ); + const { onAdLoad, onIsVisible } = useInternalAdsAnalytics(pageName); - const Promotion = useMemo( - () => ( - + const { onElementOrParentLayout } = useOutsideOfListIntersection(undefined, adRef, onIsVisible); + + const ListHeaderComponent = useMemo( + () => + shouldShowPromotion ? ( + ) : undefined, + [shouldShowPromotion, styles, onElementOrParentLayout, pageName, handlePromotionError, onAdLoad] + ); + + const ListEmptyComponent = useMemo( + () => ( + + {isLoading ? ( + + + + ) : ( + + )} ), - [styles, shouldRenderList, handlePromotionLayout, handlePromotionError, onAdLoad] + [isLoading, styles] ); const renderItem: ListRenderItem = useCallback( - ({ item, index }) => + ({ item }) => typeof item === 'string' ? ( {item} ) : ( - <> - - {index === 1 && shouldShowPromotion && Promotion} - + ), - [shouldShowPromotion, styles, Promotion] + [styles] ); const stickyHeaderIndices = useMemo( @@ -175,49 +137,28 @@ export const ActivityGroupsList: FC = ({ [sections] ); - const shouldRenderAdditionalLoader = !isAllLoaded && endIsReached; + const shouldRenderAdditionalLoader = !isAllLoaded && endIsReached && sections.length > 0; const renderAdditionalLoader = useCallback( () => (shouldRenderAdditionalLoader ? : null), [shouldRenderAdditionalLoader, styles.additionalLoader] ); - if (shouldRenderList) { - return ( - - } - /> - - ); - } - return ( - <> - {shouldShowPromotion && ( - - {Promotion} - - )} - - {loadingEnded ? ( - ListEmptyComponent - ) : ( - - - - )} - - + + } + /> + ); }; diff --git a/src/screens/notifications/notifications.tsx b/src/screens/notifications/notifications.tsx index 058dc9a1d..6276000d2 100644 --- a/src/screens/notifications/notifications.tsx +++ b/src/screens/notifications/notifications.tsx @@ -1,5 +1,5 @@ import { FlashList, ListRenderItem } from '@shopify/flash-list'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { View } from 'react-native'; import { useDispatch } from 'react-redux'; @@ -51,9 +51,9 @@ export const Notifications = () => { usePageAnalytic(ScreensEnum.Notifications); - return ( - <> - {partnersPromoShown && !promotionErrorOccurred && ( + const ListHeaderComponent = useMemo( + () => + partnersPromoShown && !promotionErrorOccurred ? ( <> { /> - )} - - + ) : undefined, + [handlePromotionItemError, onAdLoad, onElementOrParentLayout, partnersPromoShown, promotionErrorOccurred] + ); + + return ( + ); };