Fix the redundant network calls made by filter and product API

ujjavaldesai07 · ujjavaldesai07 · commit bb3be72c8c99 · 2020-08-19T21:04:49.000-07:00
diff --git a/client/src/actions/index.js b/client/src/actions/index.js
@@ -252,10 +252,14 @@ export const sendPaymentToken = (token) => async dispatch => {
 }
 
 
-export const getDataViaAPI = (type, uri, subsequent_request) => async dispatch => {
-    log.info(`[ACTION]: invokeAndDispatchAPIData Calling API = ${uri}.`)
-
+export const getDataViaAPI = (type, uri, query) => async dispatch => {
     if (uri) {
+        if(query) {
+            uri += query
+        }
+
+        log.info(`[ACTION]: invokeAndDispatchAPIData Calling API = ${uri}.`)
+
         // uri = uri.replace(/\s/g, '')
         let responseError = false
         const response = await commonServiceAPI.get(uri)
@@ -271,10 +275,18 @@ export const getDataViaAPI = (type, uri, subsequent_request) => async dispatch =
 
         if (response != null) {
             log.debug(`[ACTION]: Data = ${JSON.parse(JSON.stringify(response.data))}.`)
-            dispatch({
-                type: type, payload:
-                    {isLoading: false, data: JSON.parse(JSON.stringify(response.data))}
-            });
+            let payload = {isLoading: false, data: JSON.parse(JSON.stringify(response.data))}
+            if(query) {
+                dispatch({
+                    type: type, payload:
+                        {...payload, query: query}
+                });
+            } else {
+                dispatch({
+                    type: type, payload: payload
+                });
+            }
+
 
             if (LOAD_FILTER_PRODUCTS.localeCompare(type) === 0 &&
                 window.location.search.localeCompare(uri.split("/products")[1]) !== 0) {
diff --git a/client/src/components/routes/navbar/searchBar.js b/client/src/components/routes/navbar/searchBar.js
@@ -5,11 +5,10 @@ import CloseIcon from '@material-ui/icons/Close';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import {Grid} from "@material-ui/core";
 import log from 'loglevel';
-import {connect, useSelector} from "react-redux";
+import {connect, useDispatch, useSelector} from "react-redux";
 import {getSearchSuggestions, getDataViaAPI} from "../../../actions";
 import {makeStyles} from "@material-ui/core/styles";
-import {LOAD_FILTER_PRODUCTS} from "../../../actions/types";
-import {PRODUCT_BY_CATEGORY_DATA_API} from "../../../constants/api_routes";
+import {SAVE_QUERY_STATUS} from "../../../actions/types";
 import {Loader} from "semantic-ui-react";
 import {StyledSearchBarDimmer} from "../../../styles/semanticUI/customStyles";
 
@@ -33,6 +32,7 @@ function SearchBar(props) {
     const filterProductsReducer = useSelector(state => state.filterProductsReducer)
     const classes = useSearchBarStyles()
     const [isLoading, setIsLoading] = useState(false)
+    const dispatch = useDispatch()
     let selectedValue = null
 
     useEffect(() => {
@@ -62,8 +62,10 @@ function SearchBar(props) {
             log.info(`queryLink = ${queryLink}, value = ${value}`)
             if (queryLink) {
                 setIsLoading(true)
-                props.getDataViaAPI(LOAD_FILTER_PRODUCTS,
-                    `${PRODUCT_BY_CATEGORY_DATA_API}?q=${queryLink}`)
+                dispatch({
+                    type: SAVE_QUERY_STATUS,
+                    payload: `?q=${queryLink}`
+                })
             }
         }
     }
diff --git a/client/src/components/routes/product/filterProductDisplay.js b/client/src/components/routes/product/filterProductDisplay.js
@@ -24,10 +24,10 @@ const FilterProductDisplay = props => {
             log.info(`[FilterProductDisplay] Component did mount`)
 
             try {
-                // if query is present then call the products API
-                if (queryStatus) {
-                    log.info(`[FilterProductDisplay] Getting products from API.....`)
-                    props.getDataViaAPI(LOAD_FILTER_PRODUCTS, PRODUCT_BY_CATEGORY_DATA_API + queryStatus)
+                // if we already have the data then dont make a API request.
+                if (queryStatus && (queryStatus.localeCompare(filterProductsReducer.query) !== 0)) {
+                    log.info(`[FilterProductDisplay] Getting products from API.....query = ${filterProductsReducer.query}, queryStatus = ${queryStatus}, URL = ${history.location.search}`)
+                    props.getDataViaAPI(LOAD_FILTER_PRODUCTS, PRODUCT_BY_CATEGORY_DATA_API, queryStatus)
                 }
             } catch (e) {
                 log.error(`[FilterProductDisplay] Bad URL found in history.location.search`)
diff --git a/client/src/components/routes/product/filterSideNavbar/filterNavBar.js b/client/src/components/routes/product/filterSideNavbar/filterNavBar.js
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import Divider from '@material-ui/core/Divider';
 import Drawer from '@material-ui/core/Drawer';
 import Hidden from '@material-ui/core/Hidden';
@@ -33,6 +33,7 @@ function FilterNavBar(props) {
     const selectedSort = useSelector(state => state.selectSortReducer)
     const selectedPage = useSelector(state => state.selectPageReducer)
     const dispatch = useDispatch()
+    const [loadOnlyProducts, setLoadOnlyProducts] = useState(false)
 
     /**
      * multiple selected options IDs are appended
@@ -301,49 +302,52 @@ function FilterNavBar(props) {
 
         const {oldQuery, newQuery} = selectedFilterAttributes;
 
-        let dispatchQueryForProducts = null
+        // this means we are seeing new URL
+        if (!oldQuery || (oldQuery && oldQuery.localeCompare(newQuery) === 0)) {
+            return
+        }
+
         let queryFromURL = history.location.search
 
         log.info(`[FilterNavBar] filter selection hook oldQuery = ${oldQuery}, newQuery = ${newQuery}, queryFromURL = ${queryFromURL}`)
         if (!newQuery) {
-            log.info(`[FilterNavBar] filter selection hook oldQuery = ${oldQuery}, newQuery = ${newQuery}`)
+            log.info(`[FilterNavBar] updating states for filter selection hook`)
 
             // on filter selection scenario
             let queryPreparedFromFilters = prepareQuery()
 
             props.loadFilterAttributes(queryPreparedFromFilters).then(data => {
-                dispatchSortList(data)
-            })
-
-            // set new query
-            dispatch({
-                type: ADD_SELECTED_CATEGORY,
-                payload: {newQuery: queryPreparedFromFilters}
-            })
-
-            // by default first page should be selected.
-            if (selectedPage.pageNumber > 1) {
-                log.info(`[FilterNavBar] filter selection hook dispatching selectedPage = ${JSON.stringify(selectedPage)}`)
+                if(!data) {
+                    log.error(`[FilterNavBar]  loadFilterAttributes failed. No data found.`)
+                    return
+                }
 
+                dispatchSortList(data)
+                // set new query
                 dispatch({
-                    type: SELECT_PRODUCT_PAGE,
-                    payload: {
-                        pageNumber: 1,
-                        maxProducts: MAX_PRODUCTS_PER_PAGE,
-                        isLoadedFromURL: false
-                    }
+                    type: ADD_SELECTED_CATEGORY,
+                    payload: {newQuery: queryPreparedFromFilters}
                 })
-            } else {
-                dispatchQueryForProducts = queryPreparedFromFilters
-            }
-        }
 
-        if (dispatchQueryForProducts) {
-            log.info(`[FilterNavBar] filter selection hook dispatchQueryForProducts = ${dispatchQueryForProducts}`)
+                // by default first page should be selected.
+                if (selectedPage.pageNumber > 1) {
+                    log.info(`[FilterNavBar] filter selection hook dispatching selectedPage = ${JSON.stringify(selectedPage)}`)
 
-            dispatch({
-                type: SAVE_QUERY_STATUS,
-                payload: dispatchQueryForProducts
+                    dispatch({
+                        type: SELECT_PRODUCT_PAGE,
+                        payload: {
+                            pageNumber: 1,
+                            maxProducts: MAX_PRODUCTS_PER_PAGE,
+                            isLoadedFromURL: false
+                        }
+                    })
+                } else {
+                    log.info(`[FilterNavBar] filter selection hook dispatching SAVE_QUERY_STATUS = ${queryPreparedFromFilters}`)
+                    dispatch({
+                        type: SAVE_QUERY_STATUS,
+                        payload: queryPreparedFromFilters
+                    })
+                }
             })
         }
 
@@ -355,29 +359,33 @@ function FilterNavBar(props) {
 
         const {oldQuery, newQuery} = selectedFilterAttributes;
 
-        let dispatchQueryForProducts = null
         let queryFromURL = history.location.search
 
         log.info(`[FilterNavBar] new URL hook oldQuery = ${oldQuery}, newQuery = ${newQuery}, queryFromURL = ${queryFromURL}`)
+
+        if(loadOnlyProducts) {
+            setLoadOnlyProducts(false)
+            return
+        }
+
         if (!oldQuery || newQuery.localeCompare(queryFromURL) !== 0) {
-            log.info(`[FilterNavBar]  new URL hook oldQuery = ${oldQuery}, newQuery = ${newQuery}`)
+            log.info(`[FilterNavBar] updating states for new URL hook`)
 
             // on links click from tabs
             props.loadFilterAttributes(queryFromURL).then(data => {
+                if(!data) {
+                    log.error(`[FilterNavBar]  loadFilterAttributes failed. No data found.`)
+                    return
+                }
+
                 dispatchFilterAttributesFromURL(data, queryFromURL)
                 dispatchSortAttributeFromURL(data, queryFromURL)
                 dispatchPageAttributeFromURL(data, queryFromURL)
                 dispatchSortList(data)
-            })
-            dispatchQueryForProducts = queryFromURL
-        }
-
-        if (dispatchQueryForProducts) {
-            log.info(`[FilterNavBar]  new URL hook dispatchQueryForProducts = ${dispatchQueryForProducts}`)
-
-            dispatch({
-                type: SAVE_QUERY_STATUS,
-                payload: dispatchQueryForProducts
+                dispatch({
+                    type: SAVE_QUERY_STATUS,
+                    payload: queryFromURL
+                })
             })
         }
 
@@ -391,12 +399,14 @@ function FilterNavBar(props) {
         log.info("[FilterNavBar] Component did mount selectedPage, selectedSort hook.")
 
         if (!selectedPage.isLoadedFromURL || !selectedSort.isLoadedFromURL) {
-            log.info("[FilterNavBar] selectedPage, selectedSort hook Preparing query for selectedPage and selectedSort.")
+            log.info(`[FilterNavBar] updating states for selectedPage, selectedSort hook`)
 
             let query = prepareQuery()
             log.info(`[FilterNavBar] selectedPage, selectedSort hook dispatchQueryForProducts = ${query}`)
 
             if (query) {
+                setLoadOnlyProducts(true)
+
                 dispatch({
                     type: SAVE_QUERY_STATUS,
                     payload: query
diff --git a/client/src/components/routes/product/product.js b/client/src/components/routes/product/product.js
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 
 import Grid from '@material-ui/core/Grid';
 import FilterNavBar from "./filterSideNavbar/filterNavBar";
@@ -12,13 +12,6 @@ import Hidden from "@material-ui/core/Hidden";
 // import BottomNavBar from "./bottomNavBar";
 import history from "../../../history";
 import BreadcrumbsSection from "../../ui/breadcrumbs";
-import {useDispatch} from "react-redux";
-import {
-    RESET_QUERY_STATUS,
-    RESET_SELECT_PRODUCT_PAGE,
-    RESET_SELECT_SORT_CATEGORY,
-    RESET_SELECTED_CATEGORY,
-} from "../../../actions/types";
 import {BadRequest} from "../../ui/error/badRequest";
 import {HOME_ROUTE} from "../../../constants/react_routes";
 import {DocumentTitle} from "../../ui/documentTitle";
@@ -31,15 +24,7 @@ export const stickyBoxStyle = {
     paddingLeft: "1rem"
 }
 
-const RESET_ALL_PRODUCT_STATES = [
-    RESET_SELECTED_CATEGORY,
-    RESET_SELECT_PRODUCT_PAGE,
-    RESET_SELECT_SORT_CATEGORY,
-    RESET_QUERY_STATUS]
-
-
 function Product() {
-    const dispatch = useDispatch();
 
     // define breadcrumbs
     const breadcrumbLinks = [
@@ -53,28 +38,6 @@ function Product() {
         },
     ]
 
-    useEffect(() => {
-        log.info(`[Product] Component did mount...`)
-
-        return () => {
-            log.info(`[Product] Component will unmount...`)
-
-            // reset the saved query as we will load
-            // next time from the URL.
-            // This required to support the case where user
-            // executes URL directly and we need to construct
-            // fresh states for eg selecting options based on URL
-            RESET_ALL_PRODUCT_STATES.forEach(type => {
-                dispatch({
-                    type: type
-                })
-            })
-
-        }
-        // dont need any dependency as we want to update any states
-        // eslint-disable-next-line
-    }, [])
-
     // if we got unexpected uri then just send bad request component.
     if (history.location.pathname.localeCompare('/products') !== 0
         || !history.location.search.startsWith('?q=')) {
