Added back button browser support

ujjavaldesai07 · ujjavaldesai07 · commit 2e5d3c000cbc · 2020-07-17T02:34:50.000-07:00
diff --git a/client/src/actions/index.js b/client/src/actions/index.js
@@ -2,13 +2,11 @@ import {
     HANDLE_SIGN_IN,
     HANDLE_SIGN_UP,
     HANDLE_SIGN_UP_ERROR,
-    LOAD_HOME_PAGE,
     HANDLE_SIGN_OUT,
     HANDLE_TOKEN_ID,
     HANDLE_SIGN_IN_ERROR,
     LOAD_FILTER_PRODUCTS,
     LOAD_FILTER_ATTRIBUTES,
-    LOAD_TABS_DATA,
     INTERNAL_SERVER_ERROR_CODE,
     BAD_REQUEST_ERROR_CODE,
 } from './types';
diff --git a/client/src/components/app.js b/client/src/components/app.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import history from "../history";
 import {Router, Route} from 'react-router-dom';
 import log from "loglevel"
@@ -8,11 +8,10 @@ import Home from "./routes/home/home";
 import Login from "./routes/login";
 import SignUp from "./routes/signUp";
 import Product from "./routes/product/product";
-import Detail from "./routes/detail/productDetails";
+import ProductDetail from "./routes/detail/productDetails";
 import Checkout from "./routes/checkout/checkout";
 import ShoppingBag from "./routes/shoppingBag";
 
-
 const App = () => {
     log.info(`[App]: Rendering App Component window`)
     return (
@@ -25,7 +24,7 @@ const App = () => {
             <Route path="/shopping-bag" exact component={ShoppingBag}/>
             <Route path="/checkout" exact component={Checkout}/>
             <Route path="/products/details/:shopping-bag" exact component={ShoppingBag}/>
-            <Route path="/products/:details" exact component={Detail}/>
+            <Route path="/products/:details" exact component={ProductDetail}/>
             <Route path="/products" exact component={Product}/>
         </Router>
     )
diff --git a/client/src/components/backButtonHook.js b/client/src/components/backButtonHook.js
@@ -0,0 +1,21 @@
+import{ useEffect } from "react";
+import log from "loglevel";
+import history from "../history";
+
+export function useBackButton() {
+    useEffect(() => {
+
+        function handleBackButton() {
+            log.info(`[useBackButton] GOING BACKKKKKKKKK..............................................`)
+            history.go(-1)
+        }
+
+        // Bind the event listener
+        window.addEventListener("popstate", handleBackButton);
+
+        return () => {
+            // Unbind the event listener on clean up
+            window.removeEventListener("popstate", handleBackButton);
+        };
+    }, []);
+}
diff --git a/client/src/components/routes/checkout/checkout.js b/client/src/components/routes/checkout/checkout.js
@@ -8,6 +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";
 
 const checkoutBgColor = "#80808033"
 
@@ -57,6 +58,8 @@ const AccordionDetails = withStyles((theme) => ({
 function Checkout() {
     const [expanded, setExpanded] = React.useState('panel1');
 
+    useBackButton()
+
     const handleChange = (panel) => (event, newExpanded) => {
         setExpanded(newExpanded ? panel : false);
     };
diff --git a/client/src/components/routes/detail/productDetails.js b/client/src/components/routes/detail/productDetails.js
@@ -18,6 +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";
 
 export const useButtonStyles = makeStyles(() => ({
     buttonStartIcon: {
@@ -36,6 +37,8 @@ function ProductDetails(props) {
     const addToCart = useSelector(state => state.addToCartReducer)
     const [productQuantity, setProductQuantity] = useState(1)
 
+    useBackButton()
+
     useEffect(() => {
         log.info(`[Product Detail] Component did mount selectProductDetail = ${JSON.stringify(selectProductDetail)}`)
         log.info(`[Product Detail] Component did mount selectedProduct = ${JSON.stringify(selectedProduct)}`)
@@ -48,7 +51,6 @@ function ProductDetails(props) {
         }
     }, [selectedProduct])
 
-
     if (history.location.pathname.localeCompare('/products/details') !== 0 ||
         history.location.search.search('product_id=') === -1
         || !history.location.search.startsWith('?q=')) {
diff --git a/client/src/components/routes/home/home.js b/client/src/components/routes/home/home.js
@@ -14,11 +14,14 @@ 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";
 
 const Home = props => {
     const {hover} = useSelector(state => state.tabHoverEventReducer)
     const homeAPIData = useSelector(state => state.homePageDataReducer)
 
+    useBackButton()
+
     // Main screen API is loaded during Component Did mount
     useEffect(() => {
         log.info("[Home]: component did mount and home API is called.")
diff --git a/client/src/components/routes/login.js b/client/src/components/routes/login.js
@@ -8,8 +8,12 @@ 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";
 
 const Login = (props) => {
+
+    useBackButton()
+
     const onSubmit = formValues => {
         log.debug(`[LoginScreen]: formValues = ${JSON.stringify(formValues)}`)
         props.signIn(formValues)
diff --git a/client/src/components/routes/navbar/navBar.js b/client/src/components/routes/navbar/navBar.js
@@ -13,7 +13,7 @@ import {connect, useDispatch} from 'react-redux'
 
 import {
     AppBar, Toolbar, IconButton, Typography,
-    InputBase, Badge, Box
+    Badge, Box
 } from '@material-ui/core';
 
 import useNavBarStyles from "../../../styles/materialUI/navBarStyles";
@@ -35,7 +35,6 @@ import {HTTPError} from "../../ui/error/httpError";
 import {BadRequest} from "../../ui/error/badRequest";
 import SearchBar from "./searchBar";
 import SideBar from "./sideBar";
-import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 
 const NavBar = props => {
     const classes = useNavBarStyles();
diff --git a/client/src/components/routes/product/filterProductDisplay.js b/client/src/components/routes/product/filterProductDisplay.js
@@ -14,9 +14,9 @@ import {
 } from "../../../actions/types";
 import {Box, Grid} from "@material-ui/core";
 import Spinner from "../../ui/spinner";
-import {BadRequest} from "../../ui/error/badRequest";
 import {HTTPError} from "../../ui/error/httpError";
 import {SearchMatchesNotFound} from "../../ui/error/searchMatchesNotFound";
+import {compareURLWithFilterQuery} from "./filterSideNavbar/helper/helper";
 
 const FilterProductDisplay = props => {
         const filterProductsReducer = useSelector(state => state.filterProductsReducer)
@@ -29,6 +29,11 @@ const FilterProductDisplay = props => {
 
             try {
                 if (filterQuery) {
+                    if(filterProductsReducer.hasOwnProperty("data")
+                        && compareURLWithFilterQuery(filterQuery) === 0) {
+                        return
+                    }
+
                     props.getDataViaAPI(LOAD_FILTER_PRODUCTS, PRODUCT_BY_CATEGORY_DATA_API + filterQuery)
                 }
             } catch (e) {
diff --git a/client/src/components/routes/product/filterSideNavbar/apparelCheckBox.js b/client/src/components/routes/product/filterSideNavbar/apparelCheckBox.js
@@ -1,8 +1,8 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import CheckboxList from "../../../ui/checkboxList";
 import log from 'loglevel';
 import {useDispatch, useSelector} from "react-redux";
-import {ADD_SELECTED_CATEGORY} from "../../../../actions/types";
+import {ADD_SELECTED_CATEGORY, SAVE_SORT_LIST} from "../../../../actions/types";
 import CheckboxMoreButton from "./checkboxMoreButton";
 import CheckboxSearchBar from "./checkboxSearchBar";
 import {useSortList} from "./sortListHook";
diff --git a/client/src/components/routes/product/filterSideNavbar/brandCheckBox.js b/client/src/components/routes/product/filterSideNavbar/brandCheckBox.js
@@ -1,15 +1,15 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import CheckboxList from "../../../ui/checkboxList";
 import log from 'loglevel';
 import {useDispatch, useSelector} from "react-redux";
-import {ADD_SELECTED_CATEGORY} from "../../../../actions/types";
+import {ADD_SELECTED_CATEGORY, SAVE_SORT_LIST} from "../../../../actions/types";
 import CheckboxMoreButton from "./checkboxMoreButton";
 import CheckboxSearchBar from "./checkboxSearchBar";
 import {useSortList} from "./sortListHook";
 
 export default function BrandCheckBox() {
     const TITLE = "Brand"
-    const propName = "brands"
+    const propName="brands"
     const dispatch = useDispatch()
     const brandList = useSelector(state => state.filterAttributesReducer ?
         state.filterAttributesReducer.brands : null)
@@ -61,7 +61,7 @@ export default function BrandCheckBox() {
                           selectedAttrList={selectedBrands}
                           onChangeHandler={handleCheckBoxChange}/>
             <CheckboxMoreButton title={TITLE}
-                                propName="brands"
+                                propName={propName}
                                 checkboxList={brandList}
                                 selectedCheckboxList={selectedBrands}
                                 checkboxChangeHandler={handleCheckBoxChange}/>
diff --git a/client/src/components/routes/product/filterSideNavbar/checkboxMoreButton.js b/client/src/components/routes/product/filterSideNavbar/checkboxMoreButton.js
@@ -31,17 +31,19 @@ export default function CheckboxMoreButton(props) {
     const renderMoreButtonList = () => {
         return (
             <Paper elevation={3} variant="outlined" square
-                   style={{backgroundColor: "inherit", width: "100%", height: "70vh"}}>
-                <Grid item container direction="row" sm={11} style={{
-                    height: '70vh', zIndex: 1300, overflow: "auto", left: 0,
-                    position: "fixed", top: 180, backgroundColor: "rgb(230, 230, 230)",
+                   style={{backgroundColor: "inherit", width: "200vh", height: "70vh"}}>
+                <Grid container direction="row" style={{
+                    height: '70vh', zIndex: 1300, overflow: "auto", left: 0, width: "60%",
+                    position: "fixed", top: 150, backgroundColor: "white", border: "1px solid #eaeaec",
+                    boxShadow: "0 1px 8px rgba(0,0,0,.1)"
                 }}>
+                    <Grid item sm={11}>
                     <SortedCheckboxList attrList={props.checkboxList}
-                                        fontSize="0.9rem"
                                         title={props.title}
                                         propName={props.propName}
                                         selectedAttrList={props.selectedCheckboxList}
                                         onChangeHandler={handleCheckBoxChange}/>
+                    </Grid>
                     <Grid item sm={1} container justify="flex-end" style={{height: "5%", paddingRight: "0.5rem"}}>
                         <IconButton size="medium"
                                     color="primary"
diff --git a/client/src/components/routes/product/filterSideNavbar/filterNavBar.js b/client/src/components/routes/product/filterSideNavbar/filterNavBar.js
@@ -22,6 +22,7 @@ import {
     ADD_SELECTED_CATEGORY,
     SAVE_FILTER_QUERY,
 } from "../../../../actions/types";
+import {compareURLWithFilterQuery} from "./helper/helper";
 
 function FilterNavBar(props) {
     const classes = useFilterNavBarStyles();
@@ -34,6 +35,7 @@ function FilterNavBar(props) {
     const selectedSort = useSelector(state => state.selectSortReducer)
     const selectedPage = useSelector(state => state.selectPageReducer)
     const filterAttributes = useSelector(state => state.filterAttributesReducer)
+    const filterQuery = useSelector(state => state.filterQueryReducer)
     const [filterAttributeFromUrlState, setFilterAttributeFromUrlState] = React.useState(false);
     const dispatch = useDispatch()
 
@@ -174,22 +176,34 @@ function FilterNavBar(props) {
             }
         }
     }
-    
+
     useEffect(() => {
         log.info("[FilterNavBar] Component did mount for " +
             "selectedApparels, selectedGenders, selectedBrands, selectedPriceRanges.")
-        
+
+        if(compareURLWithFilterQuery(filterQuery) === 0) {
+            return
+        }
+
+        log.info(`1) URL didn't matched history.location.search= ${history.location.search}, filterQuery = ${filterQuery}, result = ${history.location.search[1].localeCompare(filterQuery)}`)
         if (!filterAttributes) {
             log.info(`[FilterNavBar] setting selected attributes from URL`)
             let promise = props.loadFilterAttributes(history.location.search);
             promise.then((data) => {
                 dispatchFilterAttributesFromURL(data)
+
+                if (!data) {
+                    return
+                }
+
                 dispatch({
                     type: SAVE_FILTER_QUERY,
                     payload: history.location.search.split("?q=")[1]
                 })
-            }).catch((message) => log.error(`[FilterNavBar] ${message}`))
-            log.info(`[FilterNavBar] setting filterAttributeFromUrlState to true`)
+            }).catch((message) => {
+                log.error(`[FilterNavBar] ${message}}`)
+            })
+
         } else {
             log.info(`[FilterNavBar] prepare query for selectedFilterAttribute`)
             let query = prepareQuery()
@@ -203,7 +217,6 @@ function FilterNavBar(props) {
             } else {
                 setFilterAttributeFromUrlState(false)
             }
-            log.info(`[FilterNavBar] setting filterAttributeFromUrlState to false`)
         }
 
         // eslint-disable-next-line
@@ -212,6 +225,11 @@ function FilterNavBar(props) {
     useEffect(() => {
         log.info("[FilterNavBar] Component did mount selectedPage, selectedSort.")
 
+        if(compareURLWithFilterQuery(filterQuery) === 0) {
+            return
+        }
+
+        log.info(`2) URL didn't matched history.location.search= ${history.location.search}, filterQuery = ${filterQuery}`)
         if (filterAttributes) {
             log.info(`[FilterNavBar] prepare query for selectedPage, selectedSort`)
             let query = prepareQuery()
@@ -249,8 +267,10 @@ function FilterNavBar(props) {
 
     const drawer = (
         <>
-            <Box display="flex" p={2} style={{position: 'sticky', top: 0, backgroundColor: 'white',
-                fontWeight: "bold", fontSize: "1.2rem", zIndex: 1040}}>
+            <Box display="flex" p={2} style={{
+                position: 'sticky', top: 0, backgroundColor: 'white',
+                fontWeight: "bold", fontSize: "1.2rem", zIndex: 1040
+            }}>
                 <Box alignSelf="center" flex="1">FILTERS</Box>
                 <Box alignSelf="center"><ClearAllButton/></Box>
             </Box>
diff --git a/client/src/components/routes/product/filterSideNavbar/helper/helper.js b/client/src/components/routes/product/filterSideNavbar/helper/helper.js
@@ -0,0 +1,21 @@
+import history from "../../../../../history";
+import log from "loglevel";
+
+export const compareURLWithFilterQuery = (filterQuery) => {
+    if(!filterQuery) {
+        return -1
+    }
+    const uri = history.location.search.split("q=")
+
+    if(uri.length === 2) {
+        return uri[1].localeCompare(`${filterQuery}`)
+    }
+    return -1
+}
+
+export const sortByObjValues = (list) => {
+    let cloneList = JSON.parse(JSON.stringify(list));
+
+    return cloneList.sort((a, b) =>
+        (a.value.charAt(0).toUpperCase() > b.value.charAt(0).toUpperCase()) ? 1 : -1)
+}
diff --git a/client/src/components/routes/product/filterSideNavbar/sortListHook.js b/client/src/components/routes/product/filterSideNavbar/sortListHook.js
@@ -1,11 +1,11 @@
 import{ useEffect } from "react";
 import log from "loglevel";
-import {useDispatch} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import {SAVE_SORT_LIST} from "../../../../actions/types";
-import {filterAttributesReducer} from "../../../../reducers/screens/commonScreenReducer";
 
 export function useSortList(list, propName) {
     const dispatch = useDispatch();
+    const filterQuery = useSelector(state => state.filterQueryReducer)
 
     useEffect(() => {
         if(!list) {
@@ -14,19 +14,21 @@ export function useSortList(list, propName) {
 
         try {
             log.info(`[useSortList] Sorting list for prop = ${propName}`)
-            let sortedAttrList = list.sort((a, b) =>
+            let cloneList = JSON.parse(JSON.stringify(list));
+
+            cloneList.sort((a, b) =>
                 (a.value.charAt(0).toUpperCase() > b.value.charAt(0).toUpperCase()) ? 1 : -1)
 
             dispatch({
                 type: SAVE_SORT_LIST,
                 payload: {
-                    [propName]: sortedAttrList
+                    [propName]: cloneList
                 }
             })
         } catch (e) {
             log.error("[CheckboxList] unable to sort data.")
             return null
         }
 
-    }, [filterAttributesReducer]);
+    }, [list]);
 }
diff --git a/client/src/components/routes/product/product.js b/client/src/components/routes/product/product.js
diff --git a/client/src/components/routes/shoppingBag.js b/client/src/components/routes/shoppingBag.js
diff --git a/client/src/components/routes/signUp.js b/client/src/components/routes/signUp.js
diff --git a/client/src/components/ui/sortedCheckboxList.js b/client/src/components/ui/sortedCheckboxList.js
