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

Author: ujjavaldesai07

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";

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>

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,

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>
  </>
  );
 }

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({

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
  })

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;
  }

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