VBM-253: infinity scroll and refresh added

packages/mobile/src/components/components.ts

@@ -8,6 +8,7 @@ export {
   TouchableOpacity,
   TouchableWithoutFeedback,
   Modal,
+  RefreshControl,
 } from 'react-native';
 export { SafeAreaView } from 'react-native-safe-area-context';
 export { default as Popover } from 'react-native-popover-view';

packages/mobile/src/localization/languages/en/screens.ts

@@ -257,6 +257,7 @@ export const screens = {
   },
   items_and_services: {
     TITLE: 'Items & Services',
+    END_COLLECTION: 'You have reached the end of the collection',
   },
   filter: {
     TITLE: 'Filter',

packages/mobile/src/localization/languages/ua/screens.ts

@@ -256,6 +256,7 @@ export const screens = {
   },
   items_and_services: {
     TITLE: 'Товари & Послуги',
+    END_COLLECTION: 'Ви дійшли до кінця колекції',
   },
   filter: {
     TITLE: 'Фільтр',

packages/mobile/src/screens/filter/filter.tsx

@@ -1,5 +1,4 @@
-import React, { FC, useCallback } from 'react';
-import { ProductQuery } from '@vse-bude/shared';
+import React, { FC } from 'react';
 
 import {
   ScreenWrapper,
@@ -20,14 +19,12 @@ import {
   useTranslation,
 } from '~/hooks/hooks';
 import { globalStyles } from '~/styles/styles';
-import { selectCategoriesDataStatus, selectFilters } from '~/store/selectors';
+import { selectCategoriesDataStatus } from '~/store/selectors';
 import {
-  products as productsActions,
   categories as categoriesApi,
   filters as filtersActions,
 } from '~/store/actions';
-import { removeObjectFalsyFields } from '~/helpers/helpers';
-import { RootNavigationProps, RootState } from '~/common/types/types';
+import { RootNavigationProps } from '~/common/types/types';
 import { ButtonAppearance, DataStatus } from '~/common/enums/enums';
 import { SPACERS } from '~/styles/spacers/spacers';
 import {
@@ -44,20 +41,13 @@ const FilterScreen: FC = () => {
   const dispatch = useAppDispatch();
   const { bottom: bottomInset } = useSafeAreaInsets();
   const { t } = useTranslation();
-
-  const filters = useAppSelector(selectFilters);
   const categoriesDataStatus = useAppSelector(selectCategoriesDataStatus);
 
   const loading = categoriesDataStatus === DataStatus.PENDING;
 
-  const handleFiltersSubmitPress = useCallback(() => {
-    dispatch(
-      productsActions.loadProducts(
-        removeObjectFalsyFields<RootState['filters'], ProductQuery>(filters),
-      ),
-    );
+  const handleFiltersSubmitPress = (): void => {
     navigation.goBack();
-  }, [filters]);
+  };
 
   const handleCancelPress = () => {
     dispatch(filtersActions.reset());

packages/mobile/src/screens/items-and-services/items-and-services.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import { ProductQuery, ProductDto } from '@vse-bude/shared';
-
 import {
+  useTranslation,
   useAppSelector,
   useCustomTheme,
   useEffect,
   useAppDispatch,
   useCallback,
+  useState,
+  useRef,
 } from '~/hooks/hooks';
 import {
   ScreenWrapper,
   Product,
   FlatList,
   Spinner,
+  RefreshControl,
   FocusAwareStatusBar,
 } from '~/components/components';
 import { globalStyles } from '~/styles/styles';
@@ -22,25 +25,82 @@ import {
   productsDataStatus,
 } from '~/store/selectors';
 import { products as productActions } from '~/store/actions';
+import { DataStatus } from '~/common/enums/enums';
+import { notification } from '~/services/services';
 import { removeObjectFalsyFields } from '~/helpers/helpers';
 import { RootState } from '~/common/types/types';
-import { DataStatus } from '~/common/enums/enums';
 import { styles } from './styles';
 
+const NUMBER_PER_PAGE = 10;
+
+const initialParams: ProductQuery = {
+  limit: NUMBER_PER_PAGE,
+  from: 0,
+};
+
 const ItemsAndServices = () => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const filters = useAppSelector(selectFilters);
   const dataStatus = useAppSelector(productsDataStatus);
-  const { items } = useAppSelector(selectProducts);
+  const { items, count } = useAppSelector(selectProducts);
   const { colors } = useCustomTheme();
+  const isLoading = dataStatus === DataStatus.PENDING;
+  const [params, setParams] = useState<ProductQuery>({
+    ...initialParams,
+    ...filters,
+  });
+  const isFirstRender = useRef(true);
+
+  const loadProducts = useCallback(
+    (paramsPayload: ProductQuery) => {
+      dispatch(productActions.loadProducts(paramsPayload));
+    },
+    [dispatch],
+  );
+
   useEffect(() => {
-    dispatch(
-      productActions.loadProducts(
-        removeObjectFalsyFields<RootState['filters'], ProductQuery>(filters),
-      ),
-    );
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+
+      return;
+    }
+
+    const parsedFilters = removeObjectFalsyFields<
+      RootState['filters'],
+      ProductQuery
+    >(filters);
+
+    setParams(() => ({
+      ...initialParams,
+      ...parsedFilters,
+    }));
   }, [filters]);
-  const isLoading = dataStatus === DataStatus.PENDING;
+
+  useEffect(() => {
+    loadProducts(params);
+  }, [params]);
+
+  const handleRefresh = () => {
+    setParams((prev) => ({
+      ...prev,
+      ...initialParams,
+    }));
+  };
+
+  const handleEnd = (): void => {
+    if (Number(params.from) >= count) {
+      notification.success(t('items_and_services.END_COLLECTION'));
+
+      return;
+    }
+
+    setParams((prev) => ({
+      ...prev,
+      from: Number(prev.from) + NUMBER_PER_PAGE,
+    }));
+  };
+
   const renderItem = useCallback(
     ({ item }: { item: ProductDto }) => (
       <Product
@@ -50,21 +110,28 @@ const ItemsAndServices = () => {
     ),
     [],
   );
+
   const keyExtractor = useCallback((item: ProductDto) => item.id, []);
 
   return (
     <ScreenWrapper>
       <FocusAwareStatusBar backgroundColor={colors.backgroundSecondary} />
-      {isLoading ? (
-        <Spinner />
-      ) : (
-        <FlatList
-          style={globalStyles.px4}
-          data={items}
-          keyExtractor={keyExtractor}
-          renderItem={renderItem}
-        />
-      )}
+      <FlatList
+        style={globalStyles.px4}
+        data={items}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        onEndReached={handleEnd}
+        onEndReachedThreshold={0.1}
+        refreshControl={
+          <RefreshControl
+            // colors={[AppColor.PRIMARY]}
+            refreshing={isLoading}
+            onRefresh={handleRefresh}
+          />
+        }
+      />
+      {isLoading && <Spinner />}
     </ScreenWrapper>
   );
 };

packages/mobile/src/store/products/actions.ts

@@ -19,10 +19,20 @@ const loadProducts = createAsyncThunk<
   AllProductsDto,
   Readonly<ProductQuery>,
   AsyncThunkConfig
->(ActionType.PRODUCTS_FETCH, async (requestParams, { extra }) => {
+>(ActionType.PRODUCTS_FETCH, async (requestParams, { extra, getState }) => {
   const { productApi } = extra;
 
-  return productApi.getProducts(requestParams);
+  const { items, count } = await productApi.getProducts(requestParams);
+
+  if (requestParams.from === 0) {
+    return { items, count };
+  }
+
+  const {
+    products: { products },
+  } = getState();
+
+  return { items: [...products.items, ...items], count };
 });
 
 const loadPopularProducts = createAsyncThunk<