Fix the issue with unnecessary api call if the data already present in the redux store

Author: ujjavaldesai07

client/src/actions/index.js

@@ -8,7 +8,7 @@ import {
     LOAD_FILTER_PRODUCTS,
     LOAD_FILTER_ATTRIBUTES,
     INTERNAL_SERVER_ERROR_CODE,
-    BAD_REQUEST_ERROR_CODE,
+    BAD_REQUEST_ERROR_CODE, SAVE_QUERY_STATE, SAVE_QUERY_STATUS,
 } from './types';
 import authApi from "../api/authServiceApi";
 import history from "../history";
@@ -87,7 +87,7 @@ export const signUp = formValues => async (dispatch) => {
 export const getDataViaAPI = (type, uri) => async dispatch => {
     log.info(`[ACTION]: invokeAndDispatchAPIData Calling API = ${uri}.`)
 
-    if(uri) {
+    if (uri) {
         commonServiceApi.defaults.timeout = 15000;
         uri = uri.replace(/\s/g, '')
         let responseError = false
@@ -108,7 +108,7 @@ export const getDataViaAPI = (type, uri) => async dispatch => {
                 type: type, payload:
                     {isLoading: false, data: JSON.parse(JSON.stringify(response.data))}
             });
-            if(LOAD_FILTER_PRODUCTS.localeCompare(type) === 0) {
+            if (LOAD_FILTER_PRODUCTS.localeCompare(type) === 0) {
                 window.history.pushState('', '', uri)
             }
         } else {
@@ -121,11 +121,26 @@ export const loadFilterAttributes = filterQuery => async dispatch => {
     log.info(`[ACTION]: loadFilterAttributes Calling Filter API filterQuery = ${filterQuery}`)
 
     if (filterQuery) {
-        let uri = `/filter${filterQuery.replace(/\s/g, '')}`
+        let removedSpacesFromFilterQuery = filterQuery.replace(/\s/g, '')
+        let uri = `/filter${removedSpacesFromFilterQuery}`
         const response = await commonServiceApi.get(uri);
         if (response != null) {
             log.trace(`[ACTION]: Filter = ${JSON.stringify(response.data)}`)
-            dispatch({type: LOAD_FILTER_ATTRIBUTES, payload: JSON.parse(JSON.stringify(response.data))});
+
+            const extractRequiredParams = removedSpacesFromFilterQuery.slice(3)
+
+            dispatch({
+                type: LOAD_FILTER_ATTRIBUTES,
+                payload: JSON.parse(JSON.stringify(
+                    {...response.data,
+                    "query": removedSpacesFromFilterQuery.slice(3)}))
+            });
+
+            dispatch({
+                type: SAVE_QUERY_STATUS,
+                payload: extractRequiredParams
+            });
+
             return JSON.parse(JSON.stringify(response.data))
         } else {
             log.info(`[ACTION]: unable to fetch response for Filter API`)

client/src/actions/types.js

@@ -20,8 +20,7 @@ export const SELECT_PRODUCT_DETAIL = "SELECT_PRODUCT_DETAIL";
 export const ADD_TO_CART = "ADD_TO_CART";
 export const CART_TOTAL = "CART_TOTAL";
 
-export const SAVE_FILTER_QUERY = "SAVE_FILTER_QUERY";
-export const DELETE_FILTER_QUERY = "DELETE_FILTER_QUERY";
+export const SAVE_QUERY_STATUS = "SAVE_QUERY_STATUS";
 export const ADD_SELECTED_CATEGORY = "ADD_SELECTED_CATEGORY";
 export const REMOVE_SELECTED_CATEGORY = "REMOVE_SELECTED_CATEGORY";
 export const SAVE_SORT_LIST = "SAVE_SORT_LIST";

client/src/components/routes/checkout/checkout.js

@@ -8,7 +8,7 @@ import {withStyles} from '@material-ui/core/styles';
 import MuiAccordion from '@material-ui/core/Accordion';
 import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
 import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
-import {useBackButton} from "../../backButtonHook";
+import {useBackButton} from "../../../hooks/backButtonHook";
 
 const checkoutBgColor = "#80808033"
 

client/src/components/routes/checkout/shippingAddress.js

@@ -72,14 +72,14 @@ function ShippingAddress() {
                     {renderTextField("Address Line 2 (optional)", false)}
 
                     <Grid item container>
-                        <Grid container xs={6} sm={6} style={{paddingRight: 15}}>
+                        <Grid item container xs={6} sm={6} style={{paddingRight: 15}}>
                             <TextField label="Zip Code" variant="outlined"
                                        size="medium" required
                                        fullWidth
                                        style={textFieldStyles}/>
                         </Grid>
 
-                        <Grid container xs={6} sm={6}>
+                        <Grid item container xs={6} sm={6}>
                             <TextField
                                 id="state-code"
                                 select

client/src/components/routes/checkout/shippingOptions.js

@@ -30,7 +30,7 @@ function ShippingOptions() {
 
     const renderRadioBtnLabel = (lblText, helperText, price) => {
         return (
-            <Grid container xs={12} sm={12} style={{width: "inherit", paddingTop: 20}}>
+            <Grid item container xs={12} sm={12} style={{width: "inherit", paddingTop: 20}}>
 
                 <Grid item sm={5}>
                     <Grid item style={{fontWeight: "bolder", fontSize: "1.1rem"}}>
@@ -53,13 +53,13 @@ function ShippingOptions() {
 
     return (
         <Grid item style={{width: "100%", height: 400}}>
-            <Grid container sm={10} wrap="wrap" spacing={1}
+            <Grid item container sm={10} wrap="wrap" spacing={1}
                   style={{padding: "25px 0 0 30px", height: 80}}>
                 <Grid item sm={2}>
                     <img src=".." alt="image" width={65} height={80}/>
                 </Grid>
             </Grid>
-            <Grid container sm={12} justify="center">
+            <Grid item container sm={12} justify="center">
                 <FormControl component="fieldset" style={{width: "inherit"}}>
                     <RadioGroup aria-label="gender" name="gender1" value={value}
                                 onChange={handleRadioBtnChange} style={{width: "inherit"}}>
@@ -81,7 +81,7 @@ function ShippingOptions() {
                     </RadioGroup>
                 </FormControl>
             </Grid>
-            <Grid container justify="center" sm={12}
+            <Grid item container justify="center" sm={12}
                   style={{paddingTop: 20}}>
                 <Divider style={{height: 1, width: "inherit"}}/>
             </Grid>

client/src/components/routes/detail/productDetails.js

@@ -18,7 +18,7 @@ import {makeStyles} from "@material-ui/core/styles";
 import Spinner from "../../ui/spinner";
 import {InternalServerError} from "../../ui/error/internalServerError";
 import {BadRequest} from "../../ui/error/badRequest";
-import {useBackButton} from "../../backButtonHook";
+import {useBackButton} from "../../../hooks/backButtonHook";
 
 export const useButtonStyles = makeStyles(() => ({
     buttonStartIcon: {

client/src/components/routes/home/home.js

@@ -14,7 +14,7 @@ import Spinner from "../../ui/spinner";
 import {HTTPError} from "../../ui/error/httpError";
 import {LOAD_HOME_PAGE, HOME_PAGE_DATA_API, HOME_PAGE_API_OBJECT_LEN} from "../../../actions/types";
 import {BadRequest} from "../../ui/error/badRequest";
-import {useBackButton} from "../../backButtonHook";
+import {useBackButton} from "../../../hooks/backButtonHook";
 
 const Home = props => {
     const {hover} = useSelector(state => state.tabHoverEventReducer)

client/src/components/routes/login.js

@@ -8,7 +8,7 @@ import Icon from "semantic-ui-react/dist/commonjs/elements/Icon";
 import {Typography} from "@material-ui/core";
 import {Link} from "react-router-dom";
 import log from "loglevel";
-import {useBackButton} from "../backButtonHook";
+import {useBackButton} from "../../hooks/backButtonHook";
 
 const Login = (props) => {
 

client/src/components/routes/navbar/sideBar.js

@@ -3,7 +3,7 @@ import {makeStyles} from "@material-ui/core/styles";
 import AccordionSection from "./accordionSection";
 import Drawer from "@material-ui/core/Drawer";
 import log from 'loglevel';
-import {useClickAway} from "./clickAwayHook";
+import {useClickAway} from "../../../hooks/clickAwayHook";
 
 export const useSideBarStyles = makeStyles((theme) => ({
     root: {

client/src/components/routes/product/filterPagination.js

@@ -4,25 +4,14 @@ import log from 'loglevel';
 import {useDispatch, useSelector} from "react-redux";
 import {SELECT_PRODUCT_PAGE} from "../../../actions/types";
 import Pagination from "@material-ui/lab/Pagination";
-import {INITIAL_PAGINATION_STATE, MAX_PRODUCTS_PER_PAGE} from "../../../constants/constants";
+import {MAX_PRODUCTS_PER_PAGE} from "../../../constants/constants";
 
 export default function FilterPagination() {
     const dispatch = useDispatch()
     const selectedPage = useSelector(state => state.selectPageReducer)
     const filterProductsReducer = useSelector(state => state.filterProductsReducer)
-    const selectedFilterAttributes = useSelector(state => state.selectedFilterAttributesReducer)
     let totalProducts = 0
 
-    useEffect(() => {
-        log.info("[FilterPagination] Component will mount...")
-        dispatch({
-            type: SELECT_PRODUCT_PAGE,
-            payload: INITIAL_PAGINATION_STATE
-        })
-
-        // eslint-disable-next-line
-    },[selectedFilterAttributes])
-
     const handleChangePage = (event, page) => {
         log.info(`[FilterPagination] dispatching SELECT_PRODUCT_PAGE for page = ${page}`)
         dispatch({