Fix the filterNavBar component for not rendering products and attributes via selection of tab links.

ujjavaldesai07 · ujjavaldesai07 · commit 84a7944ee4ac · 2020-08-19T19:28:57.000-07:00
diff --git a/client/src/actions/types.js b/client/src/actions/types.js
@@ -33,6 +33,7 @@ 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 LOAD_SELECTED_CATEGORY_FROM_URL = "LOAD_SELECTED_CATEGORY_FROM_URL";
 export const ADD_SELECTED_CATEGORY = "ADD_SELECTED_CATEGORY";
 export const REMOVE_SELECTED_CATEGORY = "REMOVE_SELECTED_CATEGORY";
 export const RESET_SELECTED_CATEGORY = "RESET_SELECTED_CATEGORY";
diff --git a/client/src/components/routes/navbar/accordionSection.js b/client/src/components/routes/navbar/accordionSection.js
@@ -6,16 +6,10 @@ 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 {useDispatch, useSelector} from "react-redux";
+import {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
 
@@ -69,24 +63,12 @@ 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 onClick={handleLinkClick} to={`${PRODUCTS_ROUTE}?q=${queryParam}=${id}`}>
+                    <Link to={`${PRODUCTS_ROUTE}?q=${queryParam}=${id}`}>
                         <Typography className={classes.content}>
                             {value}
                         </Typography>
diff --git a/client/src/components/routes/navbar/tabList.js b/client/src/components/routes/navbar/tabList.js
@@ -33,7 +33,7 @@ export default function TabList() {
     const mouseLeaveHandler = event => {
         log.info(`[TabList]: mouseLeaveHandler = ${event.pageX}, ${window.scrollY}`)
         // detect the mouse is going out horizontally and vertically upwards.
-        if(event.pageX < 230 || event.pageX > 700 || (event.pageY - window.scrollY) < 1) {
+        if(event.pageX < 230 || event.pageX > 795 || (event.pageY - window.scrollY) < 1) {
             dispatch({
                 type: HANDLE_TAB_HOVER_EVENT, payload: {
                     index: false,
diff --git a/client/src/components/routes/product/filterSideNavbar/clearAllButton.js b/client/src/components/routes/product/filterSideNavbar/clearAllButton.js
@@ -8,7 +8,7 @@ function ClearAllButton() {
     const selectedFilterAttribute = useSelector(state => state.selectedFilterAttributesReducer)
 
     // check if any filter is selected or not
-    if((selectedFilterAttribute.genders.length + selectedFilterAttribute.apparels.length
+    if ((selectedFilterAttribute.genders.length + selectedFilterAttribute.apparels.length
         + selectedFilterAttribute.brands.length + selectedFilterAttribute.prices.length) === 0) {
         log.info(`[ClearAllButton] selected attribute are null`)
         return null
@@ -19,15 +19,23 @@ function ClearAllButton() {
      */
     const handleClearAllClick = () => {
         log.info(`[ClearAllButton] handleClearAllClick(value)`)
-        dispatch({type: REMOVE_SELECTED_CATEGORY})
+        dispatch({
+            type: REMOVE_SELECTED_CATEGORY,
+            payload: {
+                newQuery: null
+            }
+        })
     }
 
     log.info(`[ClearAllButton] Rendering ClearAllButton Component`)
 
     return (
         <>
-            <div onClick={handleClearAllClick} style={{fontWeight: "bold", cursor: 'pointer',
-                fontSize: '0.9rem', height: 'inherit', color: 'red'}}>CLEAR ALL</div>
+            <div onClick={handleClearAllClick} style={{
+                fontWeight: "bold", cursor: 'pointer',
+                fontSize: '0.9rem', height: 'inherit', color: 'red'
+            }}>CLEAR ALL
+            </div>
         </>
     );
 }
diff --git a/client/src/components/routes/product/filterSideNavbar/filterNavBar.js b/client/src/components/routes/product/filterSideNavbar/filterNavBar.js
@@ -18,7 +18,7 @@ import {
     PAGE_ATTRIBUTE, SORT_ATTRIBUTE
 } from "../../../../constants/constants";
 import {
-    ADD_SELECTED_CATEGORY,
+    ADD_SELECTED_CATEGORY, LOAD_SELECTED_CATEGORY_FROM_URL,
     SAVE_QUERY_STATUS, SAVE_SORT_LIST, SELECT_PRODUCT_PAGE, SELECT_SORT_CATEGORY,
 } from "../../../../actions/types";
 import {PRODUCTS_ROUTE} from "../../../../constants/react_routes";
@@ -213,7 +213,7 @@ function FilterNavBar(props) {
             log.info(`[FilterNavBar] dispatchFilterAttributesFromURL` +
                 `dispatching selectedFilterAttributes=${JSON.stringify(selectedFilterAttributes)}`)
             dispatch({
-                type: ADD_SELECTED_CATEGORY,
+                type: LOAD_SELECTED_CATEGORY_FROM_URL,
                 payload: selectedFilterAttributes
             })
         }
@@ -297,35 +297,18 @@ function FilterNavBar(props) {
      * Component Did Update for Genders, Apparels, Brands and Prices
      */
     useEffect(() => {
-        log.info("[FilterNavBar] Component did mount for " +
-            "selectedApparels, selectedGenders, selectedBrands, selectedPriceRanges.")
+        log.info("[FilterNavBar] Component did mount for filter selection hook")
 
         const {oldQuery, newQuery} = selectedFilterAttributes;
 
-        log.info(`[FilterNavBar] oldQuery = ${oldQuery}, newQuery = ${newQuery}`)
         let dispatchQueryForProducts = null
         let queryFromURL = history.location.search
 
-        if (!oldQuery) {
-
-            // first load and navigation scenario
-            if (!newQuery || newQuery.localeCompare(queryFromURL) !== 0) {
-                log.info(`[FilterNavBar] Updating from First time page load ` +
-                    `scenario is null oldQuery = ${oldQuery}, ` +
-                    `newQuery = ${newQuery}, queryFromURL = ${queryFromURL}`)
-
-                props.loadFilterAttributes(queryFromURL).then(data => {
-                    dispatchFilterAttributesFromURL(data, queryFromURL)
-                    dispatchSortAttributeFromURL(data, queryFromURL)
-                    dispatchPageAttributeFromURL(data, queryFromURL)
-                    dispatchSortList(data)
-                })
+        log.info(`[FilterNavBar] filter selection hook oldQuery = ${oldQuery}, newQuery = ${newQuery}, queryFromURL = ${queryFromURL}`)
+        if (!newQuery) {
+            log.info(`[FilterNavBar] filter selection hook oldQuery = ${oldQuery}, newQuery = ${newQuery}`)
 
-                dispatchQueryForProducts = queryFromURL
-            }
-        } else if (!newQuery) {
-            log.info(`[FilterNavBar] Updating when filter is selected ` +
-                `oldQuery = ${oldQuery}, newQuery = ${newQuery}`)
+            // on filter selection scenario
             let queryPreparedFromFilters = prepareQuery()
 
             props.loadFilterAttributes(queryPreparedFromFilters).then(data => {
@@ -340,7 +323,8 @@ function FilterNavBar(props) {
 
             // by default first page should be selected.
             if (selectedPage.pageNumber > 1) {
-                log.info(`dispatching selectedPage = ${JSON.stringify(selectedPage)}`)
+                log.info(`[FilterNavBar] filter selection hook dispatching selectedPage = ${JSON.stringify(selectedPage)}`)
+
                 dispatch({
                     type: SELECT_PRODUCT_PAGE,
                     payload: {
@@ -355,27 +339,62 @@ function FilterNavBar(props) {
         }
 
         if (dispatchQueryForProducts) {
-            log.info(`selectedFilterAttributes useEffect dispatchQueryForProducts = ${dispatchQueryForProducts}`)
+            log.info(`[FilterNavBar] filter selection hook dispatchQueryForProducts = ${dispatchQueryForProducts}`)
+
+            dispatch({
+                type: SAVE_QUERY_STATUS,
+                payload: dispatchQueryForProducts
+            })
+        }
+
+        // eslint-disable-next-line
+    }, [selectedFilterAttributes]);
+
+    useEffect(() => {
+        log.info("[FilterNavBar] Component did mount for new URL hook")
+
+        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 (!oldQuery || newQuery.localeCompare(queryFromURL) !== 0) {
+            log.info(`[FilterNavBar]  new URL hook oldQuery = ${oldQuery}, newQuery = ${newQuery}`)
+
+            // on links click from tabs
+            props.loadFilterAttributes(queryFromURL).then(data => {
+                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
             })
         }
 
         // eslint-disable-next-line
-    }, [selectedFilterAttributes, props]);
+    }, [props]);
 
     /**
      * Component Did Update for Sort and Page Options
      */
     useEffect(() => {
-        log.info("[FilterNavBar] Component did mount selectedPage, selectedSort.")
+        log.info("[FilterNavBar] Component did mount selectedPage, selectedSort hook.")
 
         if (!selectedPage.isLoadedFromURL || !selectedSort.isLoadedFromURL) {
-            log.info("[FilterNavBar] Preparing query for selectedPage and selectedSort.")
+            log.info("[FilterNavBar] selectedPage, selectedSort hook Preparing query for selectedPage and selectedSort.")
 
             let query = prepareQuery()
-            log.info(`selectedPage useEffect dispatchQueryForProducts = ${query}`)
+            log.info(`[FilterNavBar] selectedPage, selectedSort hook dispatchQueryForProducts = ${query}`)
 
             if (query) {
                 dispatch({
diff --git a/client/src/components/routes/product/product.js b/client/src/components/routes/product/product.js
@@ -31,6 +31,13 @@ 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();
 
@@ -49,38 +56,15 @@ function Product() {
     useEffect(() => {
         log.info(`[Product] Component did mount...`)
 
-        /* TODO: Replace this reloadPage option with
-                 setting the right dependency in useEffect*/
-        const reloadPage = () => {
-
-            // this is required to reload the page when user
-            // navigates on browser using back or forward button.
-            [RESET_SELECTED_CATEGORY,
-                RESET_SELECT_PRODUCT_PAGE,
-                RESET_SELECT_SORT_CATEGORY,
-                RESET_QUERY_STATUS].forEach(type => {
-                dispatch({
-                    type: type
-                })
-            })
-        }
-
-        window.addEventListener("popstate", reloadPage);
-
         return () => {
             log.info(`[Product] Component will unmount...`)
 
-            window.removeEventListener("popstate", reloadPage);
-
             // 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_SELECTED_CATEGORY,
-                RESET_SELECT_PRODUCT_PAGE,
-                RESET_SELECT_SORT_CATEGORY,
-                RESET_QUERY_STATUS].forEach(type => {
+            RESET_ALL_PRODUCT_STATES.forEach(type => {
                 dispatch({
                     type: type
                 })
diff --git a/client/src/reducers/screens/filter/selectedFilterAttributesReducer.js b/client/src/reducers/screens/filter/selectedFilterAttributesReducer.js
@@ -1,5 +1,5 @@
 import {
-    ADD_SELECTED_CATEGORY,
+    ADD_SELECTED_CATEGORY, LOAD_SELECTED_CATEGORY_FROM_URL,
     REMOVE_SELECTED_CATEGORY, RESET_SELECT_PRODUCT_PAGE, RESET_SELECT_SORT_CATEGORY, RESET_SELECTED_CATEGORY,
     SELECT_PRODUCT_PAGE,
     SELECT_SORT_CATEGORY
@@ -89,11 +89,14 @@ export const selectedFilterAttributesReducer = (state = INITIAL_SELECTED_FILTER_
             return appendNewPayloadToPrevState(state, action.payload);
 
         case REMOVE_SELECTED_CATEGORY:
-            return {...INITIAL_SELECTED_FILTER_ATTRIBUTE_STATE, oldQuery: state.oldQuery, newQuery: null}
+            return {...INITIAL_SELECTED_FILTER_ATTRIBUTE_STATE, oldQuery: state.oldQuery, newQuery: action.payload.newQuery}
 
         case RESET_SELECTED_CATEGORY:
             return {...INITIAL_SELECTED_FILTER_ATTRIBUTE_STATE, newQuery: state.newQuery}
 
+        case LOAD_SELECTED_CATEGORY_FROM_URL:
+            return appendNewPayloadToPrevState(INITIAL_SELECTED_FILTER_ATTRIBUTE_STATE, action.payload);
+
         default:
             return state;
     }
diff --git a/server/common-data-service/src/main/resources/application-dev.properties b/server/common-data-service/src/main/resources/application-dev.properties
@@ -1,4 +1,4 @@
 spring.jpa.generate-ddl=true
 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
-#spring.jpa.hibernate.ddl-auto=create-drop
+spring.jpa.hibernate.ddl-auto=create-drop
 spring.data.redis.repositories.enabled=false
