feat: Extract product list in fragment & create useSearch hook

Author: Sanjeev Yadav

src/apollo/queries/getCategoryProducts.ts

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client';
+import { ProductInListType, PRODUCTS_FRAGMENT } from './productsFragment';
 
 export interface GetCategoryProductsVars {
   id: string;
@@ -9,26 +10,7 @@ export interface GetCategoryProductsVars {
 export interface CategoryProductsDataType {
   products: {
     total_count: number;
-    items: Array<CategoryProductType>;
-  };
-}
-
-export interface CategoryProductType {
-  id: number;
-  sku: string;
-  name: string;
-  small_image: {
-    url: String;
-  };
-  price_range: PriceRangeType;
-}
-
-export interface PriceRangeType {
-  maximum_price: {
-    final_price: {
-      currency: string;
-      value: number;
-    };
+    items: Array<ProductInListType>;
   };
 }
 
@@ -40,22 +22,8 @@ export const GET_CATGEORY_PRODUCTS = gql`
       currentPage: $currentPage
     ) {
       total_count
-      items {
-        id
-        sku
-        name
-        small_image {
-          url
-        }
-        price_range {
-          maximum_price {
-            final_price {
-              currency
-              value
-            }
-          }
-        }
-      }
+      ...ProductListFragment
     }
   }
+  ${PRODUCTS_FRAGMENT}
 `;

src/apollo/queries/getSearchProducts.ts

@@ -0,0 +1,29 @@
+import { gql } from '@apollo/client';
+import { CategoryProductsDataType } from './getCategoryProducts';
+import { PRODUCTS_FRAGMENT } from './productsFragment';
+
+export interface GetSearchProductsVars {
+  searchText: string;
+  pageSize: number;
+  currentPage: number;
+}
+
+export interface SearchProductsDataType extends CategoryProductsDataType {}
+
+export const GET_SEARCH_PRODUCTS = gql`
+  query GetSearchProducts(
+    $searchText: String!
+    $pageSize: Int!
+    $currentPage: Int!
+  ) {
+    products(
+      search: $searchText
+      pageSize: $pageSize
+      currentPage: $currentPage
+    ) {
+      total_count
+      ...ProductListFragment
+    }
+  }
+  ${PRODUCTS_FRAGMENT}
+`;

src/apollo/queries/productsFragment.ts

@@ -0,0 +1,41 @@
+import { gql } from '@apollo/client';
+
+export interface ProductInListType {
+  id: number;
+  sku: string;
+  name: string;
+  small_image: {
+    url: String;
+  };
+  price_range: PriceRangeType;
+}
+
+export interface PriceRangeType {
+  maximum_price: {
+    final_price: {
+      currency: string;
+      value: number;
+    };
+  };
+}
+
+export const PRODUCTS_FRAGMENT = gql`
+  fragment ProductListFragment on Products {
+    items {
+      id
+      sku
+      name
+      small_image {
+        url
+      }
+      price_range {
+        maximum_price {
+          final_price {
+            currency
+            value
+          }
+        }
+      }
+    }
+  }
+`;

src/i18n/locales/en.json

@@ -6,6 +6,7 @@
     "yes": "Yes",
     "no": "No",
     "menu": "Menu",
+    "search": "Search",
     "user": "User",
     "dearUser": "Dear User",
     "login": "Login",

src/logic/cart/useCart.ts

@@ -1,23 +1,30 @@
 import { useEffect, useState } from 'react';
-import { useMutation } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import {
   CreateCartDataType,
   CREATE_CART,
 } from '../../apollo/mutations/createCart';
+import {
+  IsLoggedInDataType,
+  IS_LOGGED_IN,
+} from '../../apollo/queries/isLoggedIn';
 
 interface Result {
   cartId: string | null | undefined;
 }
 
 export const useCart = (): Result => {
   const [cartId, setCartId] = useState<string | null | undefined>(null);
+  const { data: { isLoggedIn = false } = {} } = useQuery<IsLoggedInDataType>(
+    IS_LOGGED_IN,
+  );
   const [fetchCartId] = useMutation<CreateCartDataType>(CREATE_CART);
 
   useEffect(() => {
-    if (!cartId) {
+    if (isLoggedIn && !cartId) {
       createCart();
     }
-  }, []);
+  }, [isLoggedIn]);
 
   const createCart = async () => {
     try {

src/logic/index.ts

@@ -1,6 +1,7 @@
 export * from './app/useForm';
 export * from './categories/useCategories';
 export * from './products/useCategoryProducts';
+export * from './products/useSearch';
 export * from './auth/useLogin';
 export * from './auth/useLogout';
 export * from './auth/useSignup';

src/logic/products/useCategoryProducts.ts

@@ -2,17 +2,17 @@ import { useEffect, useState } from 'react';
 import { useLazyQuery, ApolloError } from '@apollo/client';
 import {
   GET_CATGEORY_PRODUCTS,
-  CategoryProductType,
   GetCategoryProductsVars,
   CategoryProductsDataType,
 } from '../../apollo/queries/getCategoryProducts';
+import { ProductInListType } from '../../apollo/queries/productsFragment';
 
 interface Props {
   categoryId: string;
 }
 
 interface Result {
-  products: Array<CategoryProductType>;
+  products: Array<ProductInListType>;
   getCategoryProducts(): void;
   loading: boolean;
   error: ApolloError | undefined;
@@ -24,7 +24,7 @@ interface Result {
 const PAGE_SIZE = 10;
 
 export const useCategoryProducts = ({ categoryId: id }: Props): Result => {
-  const [products, setProducts] = useState<Array<CategoryProductType>>([]);
+  const [products, setProducts] = useState<Array<ProductInListType>>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
   const [getCategoryProducts, { loading, error }] = useLazyQuery<

src/logic/products/useSearch.ts

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { useLazyQuery } from '@apollo/client';
+import {
+  GetSearchProductsVars,
+  GET_SEARCH_PRODUCTS,
+  SearchProductsDataType,
+} from '../../apollo/queries/getSearchProducts';
+
+const PAGE_SIZE = 10;
+const AUTO_SUGGESTION_API_TIME_DELAY = 1000;
+
+export const useSearch = () => {
+  const [searchText, handleChange] = useState<string>('');
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [getSearchProducts, { loading, error, data }] = useLazyQuery<
+    SearchProductsDataType,
+    GetSearchProductsVars
+  >(GET_SEARCH_PRODUCTS);
+
+  useEffect(() => {
+    if (searchText.trim() === '' || searchText.trim().length < 3) {
+      // can do something
+      return;
+    }
+    const task = setTimeout(
+      () =>
+        getSearchProducts({
+          variables: {
+            searchText,
+            pageSize: PAGE_SIZE,
+            currentPage,
+          },
+        }),
+      AUTO_SUGGESTION_API_TIME_DELAY,
+    );
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      clearTimeout(task);
+    };
+  }, [searchText]);
+
+  console.log({ loading, error, data });
+  return {
+    data,
+    loading,
+    searchText,
+    handleChange,
+    getSearchProducts,
+  };
+};

src/navigation/StackNavigator.tsx

@@ -7,6 +7,7 @@ import { Routes } from './routeNames';
 import { AppStackParamList } from './routeParams';
 import { translate } from '../i18n';
 import {
+  SearchScreen,
   CategoriesScreen,
   ProductListScreen,
   ProductDetailsScreen,
@@ -30,6 +31,17 @@ const StackNavigator = () => (
             />
           </CustomHeaderButtons>
         ),
+        headerRight: () => (
+          <CustomHeaderButtons>
+            <CustomHeaderItem
+              title={translate('common.search')}
+              iconName="search"
+              onPress={() =>
+                navigation.navigate(Routes.NAVIGATION_TO_SEARCH_SCREEN)
+              }
+            />
+          </CustomHeaderButtons>
+        ),
       })}
     />
     <Stack.Screen
@@ -75,6 +87,13 @@ const StackNavigator = () => (
         };
       }}
     />
+    <Stack.Screen
+      name={Routes.NAVIGATION_TO_SEARCH_SCREEN}
+      component={SearchScreen}
+      options={{
+        headerShown: false,
+      }}
+    />
   </Stack.Navigator>
 );
 

src/navigation/routeNames.ts

@@ -8,4 +8,5 @@ export enum Routes {
   NAVIGATION_TO_AUTHENTICATION_SPLASH_SCREEN = 'AuthenticationSplashScreen',
   NAVIGATION_TO_LOGIN_SCREEN = 'LoginScreen',
   NAVIGATION_TO_SIGNUP_SCREEN = 'SignupScreen',
+  NAVIGATION_TO_SEARCH_SCREEN = 'SearchScreen',
 }