refactor: Remove local pagination logic in useCategoryProducts hook

Author: Sanjeev Yadav

src/apollo/client.ts

@@ -17,13 +17,13 @@ export async function getApolloClient(): Promise<ApolloClient<any>> {
       Query: {
         fields: {
           products: {
-            // Don't cache separate results based on
+            // Cache separate results based on
             // any of this field's arguments.
-            keyArgs: ['search'],
+            keyArgs: ['search', 'filter'],
             // Concatenate the incoming list items with
             // the existing list items.
-            merge(existing, incoming, { args: { search, currentPage } }) {
-              if (currentPage === 1 || !search) {
+            merge(existing, incoming, { args: { currentPage } }) {
+              if (currentPage === 1) {
                 return incoming;
               }
               const _existing = existing ?? { items: [] };

src/constants/limits.ts

@@ -1,4 +1,5 @@
 const LIMITS = Object.freeze({
+  categoryProductsPageSize: 10,
   searchTextMinLength: 3,
   searchScreenPageSize: 10,
   autoSearchApiTimeDelay: 1000,

src/logic/products/useCategoryProducts.ts

@@ -1,87 +1,72 @@
 import { useEffect, useState } from 'react';
-import { useLazyQuery, ApolloError } from '@apollo/client';
+import { useQuery, ApolloError } from '@apollo/client';
 import {
   GET_CATGEORY_PRODUCTS,
   GetCategoryProductsVars,
   CategoryProductsDataType,
 } from '../../apollo/queries/getCategoryProducts';
-import { ProductInListType } from '../../apollo/queries/productsFragment';
+import { LIMITS } from '../../constants';
 
 interface Props {
   categoryId: string;
 }
 
 interface Result {
-  products: Array<ProductInListType>;
-  getCategoryProducts(): void;
+  data: CategoryProductsDataType | undefined;
   loading: boolean;
   error: ApolloError | undefined;
   currentPage: number;
   refresh(): void;
   loadMore(): void;
 }
 
-const PAGE_SIZE = 10;
-
 export const useCategoryProducts = ({ categoryId: id }: Props): Result => {
-  const [products, setProducts] = useState<Array<ProductInListType>>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const [getCategoryProducts, { loading, error }] = useLazyQuery<
+  const { refetch, data, loading, error, fetchMore } = useQuery<
     CategoryProductsDataType,
     GetCategoryProductsVars
   >(GET_CATGEORY_PRODUCTS, {
     variables: {
       id,
-      pageSize: PAGE_SIZE,
-      currentPage,
-    },
-    fetchPolicy: 'no-cache',
-    onCompleted: responseData => {
-      if (responseData?.products?.items && currentPage === 1) {
-        setProducts(responseData.products.items);
-      } else if (
-        responseData?.products?.items &&
-        products.length < responseData.products.total_count &&
-        products.length < currentPage * PAGE_SIZE
-      ) {
-        setProducts(prevState => [
-          ...prevState,
-          ...responseData?.products?.items,
-        ]);
-      }
+      pageSize: LIMITS.categoryProductsPageSize,
+      currentPage: 1,
     },
   });
 
   useEffect(() => {
-    if (!loading) {
-      getCategoryProducts();
+    if (!loading && currentPage !== 1) {
+      fetchMore({
+        variables: {
+          currentPage,
+        },
+      });
     }
-  }, [currentPage, getCategoryProducts]);
+  }, [currentPage]);
 
   const loadMore = () => {
     if (loading) {
       return;
     }
 
-    if (currentPage * PAGE_SIZE === products.length) {
+    if (
+      currentPage * LIMITS.categoryProductsPageSize ===
+        data?.products?.items?.length &&
+      data?.products?.items.length < data?.products?.total_count
+    ) {
       setCurrentPage(prevState => prevState + 1);
     }
   };
 
   const refresh = () => {
-    if (currentPage !== 1) {
-      setCurrentPage(1);
-    } else {
-      getCategoryProducts();
-    }
+    refetch();
+    setCurrentPage(1);
   };
 
   return {
-    products,
+    data,
     loading,
     error,
-    getCategoryProducts,
     currentPage,
     refresh,
     loadMore,

src/logic/products/useSearch.ts

@@ -22,7 +22,7 @@ export const useSearch = (): Result => {
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [
     getSearchProducts,
-    { called, loading, error, fetchMore, refetch, data },
+    { called, loading, error, fetchMore, data },
   ] = useLazyQuery<SearchProductsDataType, GetSearchProductsVars>(
     GET_SEARCH_PRODUCTS,
   );
@@ -63,7 +63,11 @@ export const useSearch = (): Result => {
       return;
     }
 
-    if (data && data?.products?.items?.length < data?.products?.total_count) {
+    if (
+      currentPage * LIMITS.searchScreenPageSize ===
+        data?.products?.items?.length &&
+      data?.products?.items.length < data?.products?.total_count
+    ) {
       setCurrentPage(prevPage => prevPage + 1);
     }
   };

src/screens/HomeScreen/FeaturedProductList.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import { useNavigation } from '@react-navigation/native';
-import React, { useEffect } from 'react';
 import { ActivityIndicator, View, FlatList, StyleSheet } from 'react-native';
 import { Text } from 'react-native-elements';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
@@ -17,23 +17,16 @@ const FeaturedProductList = ({
   name,
   categoryId,
 }: Props): React.ReactElement => {
-  const {
-    getCategoryProducts,
-    loading,
-    products,
-    error,
-  } = useCategoryProducts({ categoryId });
+  const { data, loading, error } = useCategoryProducts({ categoryId });
   const navigation = useNavigation();
 
-  useEffect(() => {
-    getCategoryProducts();
-  }, []);
-
   const onProductItemClicked = (index: number) => {
-    navigation.navigate(Routes.NAVIGATION_TO_PRODUCT_DETAILS_SCREEN, {
-      name: products[index].name,
-      sku: products[index].sku,
-    });
+    if (data?.products?.items) {
+      navigation.navigate(Routes.NAVIGATION_TO_PRODUCT_DETAILS_SCREEN, {
+        name: data.products.items[index].name,
+        sku: data.products.items[index].sku,
+      });
+    }
   };
 
   const renderItem = ({
@@ -75,7 +68,7 @@ const FeaturedProductList = ({
       <FlatList
         horizontal
         showsHorizontalScrollIndicator={false}
-        data={products}
+        data={data?.products?.items ?? []}
         renderItem={renderItem}
         keyExtractor={item => `productListItem${item.sku}`}
       />

src/screens/HomeScreen/HomeScreen.tsx

@@ -25,6 +25,7 @@ const HomeScreen = ({}: Props): React.ReactElement => {
       />
       {magentoConfig.homeFeaturedCategories.map(featuredCategory => (
         <FeaturedProductList
+          key={String(featuredCategory.id)}
           name={featuredCategory.name}
           categoryId={featuredCategory.id}
         />

src/screens/ProductListScreen/ProductListScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import {
   View,
   RefreshControl,
@@ -29,8 +29,7 @@ const ProductListScreen = ({
   },
 }: Props): React.ReactElement => {
   const {
-    getCategoryProducts,
-    products,
+    data,
     loading,
     currentPage,
     error,
@@ -40,15 +39,13 @@ const ProductListScreen = ({
     categoryId,
   });
 
-  useEffect(() => {
-    getCategoryProducts();
-  }, []);
-
   const onProductItemClicked = (index: number) => {
-    navigation.navigate(Routes.NAVIGATION_TO_PRODUCT_DETAILS_SCREEN, {
-      name: products[index].name,
-      sku: products[index].sku,
-    });
+    if (data?.products?.items) {
+      navigation.navigate(Routes.NAVIGATION_TO_PRODUCT_DETAILS_SCREEN, {
+        name: data.products.items[index].name,
+        sku: data.products.items[index].sku,
+      });
+    }
   };
 
   const renderItem = ({
@@ -67,22 +64,18 @@ const ProductListScreen = ({
     );
   };
 
-  const renderFooter = () => {
-    if (loading && products.length !== 0) {
-      return (
-        <View style={styles.footerContainer}>
-          <ActivityIndicator size="large" />
-        </View>
-      );
-    }
-    return null;
-  };
+  const renderFooterComponent = () =>
+    (loading && data?.products?.items?.length !== 0 && (
+      <View style={styles.footerContainer}>
+        <ActivityIndicator size="large" />
+      </View>
+    )) || <></>;
 
   return (
     <GenericTemplate errorMessage={error?.message}>
       <FlatList
         numColumns={2}
-        data={products}
+        data={data?.products?.items ?? []}
         renderItem={renderItem}
         keyExtractor={item => `productListItem${item.sku}`}
         refreshControl={
@@ -92,7 +85,7 @@ const ProductListScreen = ({
           />
         }
         onEndReached={loadMore}
-        ListFooterComponent={renderFooter}
+        ListFooterComponent={renderFooterComponent}
       />
     </GenericTemplate>
   );

src/screens/SearchScreen/SearchScreen.tsx

@@ -16,7 +16,6 @@ type Props = {
   >;
 };
 
-// TODO: Implement pagination
 const SearchScreen = ({ navigation }: Props): React.ReactElement => {
   const {
     searchText,
@@ -66,6 +65,13 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
         </View>
       )) || <></>;
 
+  const renderFooterComponent = () =>
+    (loading && products.length !== 0 && (
+      <View style={styles.footerContainer}>
+        <ActivityIndicator size="large" />
+      </View>
+    )) || <></>;
+
   return (
     <GenericTemplate>
       <SearchBar
@@ -77,6 +83,7 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
           name: 'arrow-back',
           onPress: handleBackPress,
         }}
+        loadingProps={styles.searchBarLoading}
         containerStyle={styles.searchBarContainer}
         inputContainerStyle={styles.searchBarInputContainer}
       />
@@ -86,12 +93,14 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
         renderItem={renderItem}
         keyExtractor={item => `productListItem${item.sku}`}
         ListEmptyComponent={renderEmptyComponent}
+        ListFooterComponent={renderFooterComponent}
         onEndReached={loadMore}
       />
     </GenericTemplate>
   );
 };
 
+// TODO: Remove hard-coded values
 const styles = StyleSheet.create({
   center: {
     flex: 1,
@@ -119,6 +128,13 @@ const styles = StyleSheet.create({
     borderRadius: 0,
     backgroundColor: 'white',
   },
+  searchBarLoading: {
+    color: 'black',
+  },
+  footerContainer: {
+    alignItems: 'center',
+    marginVertical: SPACING.small,
+  },
 });
 
 export default SearchScreen;