Fix the navigation issue using history object

Author: ujjavaldesai07

client/src/actions/index.js

@@ -109,7 +109,9 @@ export const getDataViaAPI = (type, uri) => async dispatch => {
                     {isLoading: false, data: JSON.parse(JSON.stringify(response.data))}
             });
             if (LOAD_FILTER_PRODUCTS.localeCompare(type) === 0) {
-                window.history.pushState('', '', uri)
+                if(window.location.search.localeCompare(uri.split("/products")[1]) !== 0) {
+                    history.push(uri)
+                }
             }
         } else {
             dispatch({type: type, payload: {isLoading: false, statusCode: BAD_REQUEST_ERROR_CODE}});
@@ -146,4 +148,4 @@ export const loadFilterAttributes = filterQuery => async dispatch => {
             log.info(`[ACTION]: unable to fetch response for Filter API`)
         }
     }
-};
+};

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

@@ -8,7 +8,6 @@ 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 "../../../hooks/backButtonHook";
 
 const checkoutBgColor = "#80808033"
 
@@ -58,8 +57,6 @@ const AccordionDetails = withStyles((theme) => ({
 function Checkout() {
     const [expanded, setExpanded] = React.useState('panel1');
 
-    useBackButton()
-
     const handleChange = (panel) => (event, newExpanded) => {
         setExpanded(newExpanded ? panel : false);
     };

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

@@ -18,7 +18,6 @@ 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 "../../../hooks/backButtonHook";
 
 export const useButtonStyles = makeStyles(() => ({
     buttonStartIcon: {
@@ -37,8 +36,6 @@ 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)}`)

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

@@ -14,14 +14,11 @@ 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 "../../../hooks/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.")

client/src/components/routes/login.js

@@ -8,12 +8,9 @@ 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 "../../hooks/backButtonHook";
 
 const Login = (props) => {
 
-    useBackButton()
-
     const onSubmit = formValues => {
         log.debug(`[LoginScreen]: formValues = ${JSON.stringify(formValues)}`)
         props.signIn(formValues)

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

@@ -14,7 +14,6 @@ import BottomNavBar from "./bottomNavBar";
 import history from "../../../history";
 import BreadcrumbsSection from "../../ui/breadcrumbs";
 import {SearchMatchesNotFound} from "../../ui/error/searchMatchesNotFound";
-import {useBackButton} from "../../../hooks/backButtonHook";
 import {useDispatch} from "react-redux";
 import {SAVE_QUERY_STATUS} from "../../../actions/types";
 
@@ -53,8 +52,6 @@ function Product() {
         }
     }, [])
 
-    useBackButton()
-
     if (history.location.pathname.localeCompare('/products') !== 0
         || !history.location.search.startsWith('?q=')) {
         return <SearchMatchesNotFound/>

client/src/components/routes/shoppingBag.js

@@ -25,7 +25,6 @@ import PriceDetails from "./priceDetails";
 import Modal from "../../components/ui/modal";
 import _ from 'lodash';
 import Hidden from "@material-ui/core/Hidden";
-import {useBackButton} from "../../hooks/backButtonHook";
 
 const modalWidth = 430
 
@@ -45,8 +44,6 @@ function ShoppingBag(props) {
         return idList
     }
 
-    useBackButton()
-
     useEffect(() => {
         log.info("[ShoppingBag] Component will mount... addToCart = " + JSON.stringify(addToCart))
 

client/src/components/routes/signUp.js

@@ -5,16 +5,13 @@ import {signUp} from "../../actions";
 import {Grid} from "semantic-ui-react";
 import {StyledLoginScreenGrid} from "../../styles/semanticUI/customStyles";
 import log from "loglevel";
-import {useBackButton} from "../../hooks/backButtonHook";
 
 const SignUp = (props) => {
     const onSubmit = formValues => {
         log.debug(`[SignUpScreen]: onSubmit formValues = ${JSON.stringify(formValues)}`)
         props.signUp(formValues)
     };
 
-    useBackButton()
-
     log.info(`[SignUpScreen]: Rendering SignUpScreen Component`)
     return (
         <StyledLoginScreenGrid centered>