Refactored filter selection code

Author: ujjavaldesai07

client/src/actions/index.js

@@ -5,7 +5,6 @@ import {
     HANDLE_SIGN_IN_ERROR,
     LOAD_FILTER_PRODUCTS,
     LOAD_FILTER_ATTRIBUTES,
-    SAVE_QUERY_STATUS,
     SHIPPING_ADDRESS_CONFIRMED,
     PAYMENT_INFO_CONFIRMED,
     PAYMENT_RESPONSE,
@@ -296,8 +295,6 @@ export const loadFilterAttributes = filterQuery => async dispatch => {
         if (response != null) {
             log.trace(`[ACTION]: Filter = ${JSON.stringify(response.data)}`)
 
-            const extractRequiredParams = filterQuery.slice(3)
-
             dispatch({
                 type: LOAD_FILTER_ATTRIBUTES,
                 payload: JSON.parse(JSON.stringify(
@@ -307,11 +304,6 @@ export const loadFilterAttributes = filterQuery => async dispatch => {
                     }))
             });
 
-            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,7 +20,9 @@ export const LOAD_TABS_DATA = "LOAD_TABS_DATA";
 
 export const REMOVE_FILTER_ATTRIBUTES = "REMOVE_FILTER_ATTRIBUTES";
 export const SELECT_SORT_CATEGORY = "SELECT_SORT_CATEGORY";
+export const RESET_SELECT_SORT_CATEGORY = "RESET_SELECT_SORT_CATEGORY";
 export const SELECT_PRODUCT_PAGE = "SELECT_PRODUCT_PAGE";
+export const RESET_SELECT_PRODUCT_PAGE = "RESET_SELECT_PRODUCT_PAGE";
 export const SELECT_PRODUCT_DETAIL = "SELECT_PRODUCT_DETAIL";
 export const ADD_TO_CART = "ADD_TO_CART";
 export const RESET_ADD_TO_CART = "RESET_ADD_TO_CART";
@@ -30,8 +32,10 @@ export const DELIVERY_CHARGES = "DELIVERY_CHARGES";
 export const RESET_DELIVERY_CHARGES = "RESET_DELIVERY_CHARGES";
 
 export const SAVE_QUERY_STATUS = "SAVE_QUERY_STATUS";
+export const RESET_QUERY_STATUS = "RESET_QUERY_STATUS";
 export const ADD_SELECTED_CATEGORY = "ADD_SELECTED_CATEGORY";
 export const REMOVE_SELECTED_CATEGORY = "REMOVE_SELECTED_CATEGORY";
+export const RESET_SELECTED_CATEGORY = "RESET_SELECTED_CATEGORY";
 export const SAVE_SORT_LIST = "SAVE_SORT_LIST";
 export const SHIPPING_ADDRESS_CONFIRMED = "SHIPPING_ADDRESS_CONFIRMED";
 export const RESET_SHIPPING_ADDRESS = "RESET_SHIPPING_ADDRESS";

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

@@ -6,10 +6,16 @@ import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import {Link} from "react-router-dom";
-import {useSelector} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import {TAB_CONFIG} from "../../../constants/constants";
 import log from "loglevel";
 import {PRODUCTS_ROUTE} from "../../../constants/react_routes";
+import {
+    RESET_QUERY_STATUS,
+    RESET_SELECT_PRODUCT_PAGE,
+    RESET_SELECT_SORT_CATEGORY,
+    RESET_SELECTED_CATEGORY
+} from "../../../actions/types";
 
 const height = 48
 
@@ -63,12 +69,24 @@ const useStyles = makeStyles((theme) => ({
 export default function AccordionSection() {
     const classes = useStyles();
     const tabsAPIData = useSelector(state => state.tabsDataReducer)
+    const dispatch = useDispatch()
+
+    const handleLinkClick = () => {
+        [RESET_SELECTED_CATEGORY,
+            RESET_SELECT_PRODUCT_PAGE,
+            RESET_SELECT_SORT_CATEGORY,
+            RESET_QUERY_STATUS].forEach(type => {
+            dispatch({
+                type: type
+            })
+        })
+    }
 
     const renderContent = (contentList, mapKey, queryParam) => {
         return contentList.map(({id, value}) => {
             return (
                 <Grid item key={`${mapKey}${id}`}>
-                    <Link to={`${PRODUCTS_ROUTE}?q=${queryParam}=${id}`}>
+                    <Link onClick={handleLinkClick} to={`${PRODUCTS_ROUTE}?q=${queryParam}=${id}`}>
                         <Typography className={classes.content}>
                             {value}
                         </Typography>

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

@@ -4,7 +4,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 import CloseIcon from '@material-ui/icons/Close';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import {Grid} from "@material-ui/core";
-import SearchIcon from '@material-ui/icons/Search';
 import log from 'loglevel';
 import {connect, useSelector} from "react-redux";
 import {getSearchSuggestions, getDataViaAPI} from "../../../actions";
@@ -19,7 +18,7 @@ export const useSearchBarStyles = makeStyles((theme) => ({
         height: 250
     },
     listbox: {
-        maxHeight: 290,
+        maxHeight: 240,
     },
     option: {
         [theme.breakpoints.down("xs")]: {
@@ -64,25 +63,19 @@ function SearchBar(props) {
             if (queryLink) {
                 setIsLoading(true)
                 props.getDataViaAPI(LOAD_FILTER_PRODUCTS,
-                    PRODUCT_BY_CATEGORY_DATA_API + queryLink)
+                    `${PRODUCT_BY_CATEGORY_DATA_API}?q=${queryLink}`)
             }
         }
     }
 
     const handleClose = () => {
-        log.info(`selectedValue------2 ===== ${selectedValue}`)
         let finalSelectedValue = selectedValue
         if (!selectedValue) {
             finalSelectedValue = getSearchKeyword()
         }
         searchKeyword(finalSelectedValue)
     }
 
-    const onSearchBtnClick = () => {
-        searchKeyword(getSearchKeyword())
-        props.handleClose()
-    }
-
     const renderDesktopTextField = (params) => {
         return <TextField {...params} label="Search for products, brands and more" variant="outlined"/>
     }

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

@@ -94,7 +94,8 @@ const FilterChips = () => {
                         [attributeName]: {
                             id: selectedAttrList[i].id,
                             value: selectedAttrList[i].value
-                        }
+                        },
+                        newQuery: null
                     }
                 })
                 return

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

@@ -3,11 +3,12 @@ import log from 'loglevel';
 import {useDispatch, useSelector} from "react-redux";
 import {SELECT_SORT_CATEGORY} from "../../../actions/types";
 import DropdownSection from "../../ui/dropDown";
+import {SORT_ATTRIBUTE} from "../../../constants/constants";
 
 export default function FilterDropdown() {
     const dispatch = useDispatch()
     const sortList = useSelector(state => state.filterAttributesReducer?
-        state.filterAttributesReducer.sorts : null)
+        state.filterAttributesReducer[SORT_ATTRIBUTE] : null)
     const selectedSortValue = useSelector(state => state.selectSortReducer)
 
     if (!sortList) {
@@ -19,12 +20,13 @@ export default function FilterDropdown() {
         dispatch({
             type: SELECT_SORT_CATEGORY,
             payload: {
-                id, value
+                id, value,
+                isLoadedFromURL: false
             }
         })
     }
 
-    log.info(`[FilterDropdown] Rendering FilterDropdown Component selectedSortValue = ${selectedSortValue}`)
+    log.info(`[FilterDropdown] Rendering FilterDropdown Component selectedSortValue = ${JSON.stringify(selectedSortValue)}`)
 
     return (
         <DropdownSection

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

@@ -18,7 +18,8 @@ export default function FilterPagination() {
             type: SELECT_PRODUCT_PAGE,
             payload: {
                 pageNumber: page,
-                maxProducts: MAX_PRODUCTS_PER_PAGE
+                maxProducts: MAX_PRODUCTS_PER_PAGE,
+                isLoadedFromURL: false
             }
         })
     }

client/src/components/routes/product/filterSideNavbar/apparelCheckBox.js

@@ -40,7 +40,8 @@ export default function ApparelCheckBox() {
             payload: {
                 apparels: {
                     id, value
-                }
+                },
+                newQuery: null
             }
         })
     }

client/src/components/routes/product/filterSideNavbar/brandCheckBox.js

@@ -40,7 +40,8 @@ export default function BrandCheckBox() {
             payload: {
                 brands: {
                     id, value
-                }
+                },
+                newQuery: null
             }
         })
     }

client/src/components/routes/product/filterSideNavbar/clearAllButton.js

@@ -2,7 +2,6 @@ import React from 'react';
 import log from 'loglevel';
 import {useDispatch, useSelector} from "react-redux";
 import {REMOVE_SELECTED_CATEGORY} from "../../../../actions/types";
-import history from "../../../../history";
 
 function ClearAllButton() {
     const dispatch = useDispatch()
@@ -20,7 +19,7 @@ function ClearAllButton() {
      */
     const handleClearAllClick = () => {
         log.info(`[ClearAllButton] handleClearAllClick(value)`)
-        dispatch({type: REMOVE_SELECTED_CATEGORY, payload: history.location.search.slice(3)})
+        dispatch({type: REMOVE_SELECTED_CATEGORY})
     }
 
     log.info(`[ClearAllButton] Rendering ClearAllButton Component`)