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 (
+
);
};