Fixed search bar to get closest results if search keyword is not matched

ujjavaldesai07 · ujjavaldesai07 · commit 3e9df4f435ce · 2020-08-15T00:03:27.000-07:00
diff --git a/client/src/components/routes/navbar/searchBar.js b/client/src/components/routes/navbar/searchBar.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import CloseIcon from '@material-ui/icons/Close';
@@ -11,66 +11,75 @@ import {getSearchSuggestions, getDataViaAPI} from "../../../actions";
 import {makeStyles} from "@material-ui/core/styles";
 import {LOAD_FILTER_PRODUCTS} from "../../../actions/types";
 import {PRODUCT_BY_CATEGORY_DATA_API} from "../../../constants/api_routes";
+import {Loader} from "semantic-ui-react";
+import {StyledSearchBarDimmer} from "../../../styles/semanticUI/customStyles";
 
-export const useSearchBarStyles = makeStyles(() => ({
+export const useSearchBarStyles = makeStyles((theme) => ({
     paper: {
-        height: 300
+        height: 250
     },
     listbox: {
-        maxHeight: 340
+        maxHeight: 290,
+    },
+    option: {
+        [theme.breakpoints.down("xs")]: {
+            paddingLeft: 40
+        },
     }
 }));
 
 function SearchBar(props) {
     const [value, setValue] = useState(null);
     const searchSuggestions = useSelector(state => state.searchKeywordReducer)
+    const filterProductsReducer = useSelector(state => state.filterProductsReducer)
     const classes = useSearchBarStyles()
+    const [isLoading, setIsLoading] = useState(false)
+    let selectedValue = null
+
+    useEffect(() => {
+        log.info(`[SearchBar] Component did mount`)
+        setIsLoading(false)
+    }, [filterProductsReducer])
 
-    const getSelectedValue = () => {
+    const getSearchKeyword = () => {
         return document.querySelector('input[id="free-solo"]').value
     }
 
-    const searchKeyword = () => {
-        const selectedValue = getSelectedValue()
-        if(selectedValue && !selectedValue.isEmpty) {
+    const searchKeyword = (value) => {
+        if (value && !value.isEmpty) {
             let queryLink = null
             for (let index = 0; index < searchSuggestions.data.length; ++index) {
-                if (searchSuggestions.data[index].keyword.length === selectedValue.length
-                    && searchSuggestions.data[index].keyword.localeCompare(selectedValue) === 0) {
+                if (searchSuggestions.data[index].keyword.length === value.length
+                    && searchSuggestions.data[index].keyword.localeCompare(value) === 0) {
 
                     // complete match
                     queryLink = searchSuggestions.data[index].link
                     break;
-                }
-                if(searchSuggestions.data[index].keyword.length > selectedValue.length) {
-                    // just stop finding if length exceeds.
-                    if(!queryLink) {
-                        // then match whatever we have.
-                        queryLink = searchSuggestions.data[index].link
-                    }
-                    break;
                 } else {
-                    // closest match
-                    log.info(``)
                     queryLink = searchSuggestions.data[index].link
                 }
             }
-            props.getDataViaAPI(LOAD_FILTER_PRODUCTS,
-                PRODUCT_BY_CATEGORY_DATA_API + queryLink)
+
+            log.info(`queryLink = ${queryLink}, value = ${value}`)
+            if (queryLink) {
+                setIsLoading(true)
+                props.getDataViaAPI(LOAD_FILTER_PRODUCTS,
+                    PRODUCT_BY_CATEGORY_DATA_API + queryLink)
+            }
         }
     }
 
-    const handleClose = (event, reason) => {
-        setValue('')
-
-        // search is selected
-        if (reason === "select-option") {
-            searchKeyword()
+    const handleClose = () => {
+        log.info(`selectedValue------2 ===== ${selectedValue}`)
+        let finalSelectedValue = selectedValue
+        if (!selectedValue) {
+            finalSelectedValue = getSearchKeyword()
         }
+        searchKeyword(finalSelectedValue)
     }
 
     const onSearchBtnClick = () => {
-        searchKeyword()
+        searchKeyword(getSearchKeyword())
         props.handleClose()
     }
 
@@ -88,17 +97,17 @@ function SearchBar(props) {
                 InputProps={{
                     ...params.InputProps,
                     startAdornment: <ArrowBackIcon onClick={props.handleClose} fontSize="large"/>,
-                    endAdornment: <SearchIcon onClick={onSearchBtnClick} fontSize="large"/>
                 }}
             />
         )
     }
 
     const handleInputChange = (event, newValue) => {
+        selectedValue = newValue
         props.getSearchSuggestions(newValue)
     }
 
-    log.info("[Search Bar] Rendering search bar....")
+    log.info(`[Search Bar] Rendering search bar....`)
 
     return (
         <Grid container alignItems="center">
@@ -144,10 +153,15 @@ function SearchBar(props) {
                 fullWidth
                 onClose={handleClose}
                 size={props.size}
-                classes={{paper: classes.paper, listbox: classes.listbox}}
+                classes={{paper: classes.paper, listbox: classes.listbox, option: classes.option}}
                 renderInput={(params) =>
                     props.device ? renderMobileTextField(params) : renderDesktopTextField(params)}
             />
+            {isLoading ?
+                <StyledSearchBarDimmer active inverted>
+                    <Loader inverted>Loading</Loader>
+                </StyledSearchBarDimmer> : null}
+
         </Grid>
     );
 }
diff --git a/client/src/components/routes/navbar/tabList.js b/client/src/components/routes/navbar/tabList.js
@@ -31,9 +31,9 @@ export default function TabList() {
     }
 
     const mouseLeaveHandler = event => {
-        log.info(`[TabList]: mouseLeaveHandler = ${event.pageY}, ${window.scrollY}`)
+        log.info(`[TabList]: mouseLeaveHandler = ${event.pageX}, ${window.scrollY}`)
         // detect the mouse is going out horizontally and vertically upwards.
-        if(event.pageX < 190 || event.pageX > 700 || (event.pageY - window.scrollY) < 1) {
+        if(event.pageX < 230 || event.pageX > 700 || (event.pageY - window.scrollY) < 1) {
             dispatch({
                 type: HANDLE_TAB_HOVER_EVENT, payload: {
                     index: false,
diff --git a/client/src/components/routes/shoppingBag.js b/client/src/components/routes/shoppingBag.js
@@ -16,15 +16,13 @@ import Spinner from "../ui/spinner";
 import {EmptyShoppingBag} from "../ui/error/emptyShoppingBag";
 import {HTTPError} from "../ui/error/httpError";
 import PriceDetails from "./priceDetails";
-import Modal from "../../components/ui/modal";
 import _ from 'lodash';
 import Hidden from "@material-ui/core/Hidden";
 import {useAddProductsToShoppingBag} from "../../hooks/useAddProductsToShoppingBag";
 import {CART_TOTAL_COOKIE, SHOPPERS_PRODUCT_INFO_COOKIE} from "../../constants/cookies";
 import {HOME_ROUTE} from "../../constants/react_routes";
 import {DocumentTitle} from "../ui/documentTitle";
-
-const modalWidth = 430
+import {ModalConfirmation} from "../ui/modalConfirmation";
 
 function ShoppingBag(props) {
     const addToCart = useSelector(state => state.addToCartReducer)
@@ -104,47 +102,6 @@ function ShoppingBag(props) {
         })
     }
 
-    const renderItemRemoveConfirmation = () => {
-        log.info(`Rendering renderRemoveModalWarning`)
-        return (
-            <>
-                <Box display="flex" flexDirection="row">
-                    <Box mx={2.5} mt={2} mb={1}>
-                        {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
-                        <img src={shoppingBagProducts.data[itemRemovalModalState.productId].imageName}
-                             width={60} height={90} alt="image"/>
-                    </Box>
-                    <Box mt={2.5} display="flex" flexDirection="column">
-                        <Box style={{color: "#3e4152", fontSize: 14, fontWeight: 200}}>
-                            Remove Item
-                        </Box>
-                        <Box style={{color: "#696b79", fontSize: 14, fontWeight: 200}}>
-                            Are you sure you want to remove this item?
-                        </Box>
-                    </Box>
-                </Box>
-                <Box>
-                    <Divider style={{width: modalWidth, height: 1}}/>
-                </Box>
-                <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center">
-                    <Box pl={10} onClick={removeConfirmBtnClickHandler} style={{
-                        color: "red"
-                        , width: "50%", fontWeight: "bold", cursor: "pointer"
-                    }}>
-                        REMOVE
-                    </Box>
-                    <Box>
-                        <Divider orientation="vertical" style={{height: 45}}/>
-                    </Box>
-                    <Box pl={10} onClick={closeModalClickHandler}
-                         style={{width: "50%", fontWeight: "bold", cursor: "pointer"}}>
-                        CANCEL
-                    </Box>
-                </Box>
-            </>
-        )
-    }
-
     const removeConfirmBtnClickHandler = () => {
         setItemRemovalModalState({active: false, productId: null})
         if (itemRemovalModalState.productId) {
@@ -177,20 +134,7 @@ function ShoppingBag(props) {
     } else {
         if (shoppingBagProducts.hasOwnProperty("data")) {
             if (Object.keys(shoppingBagProducts.data).length === 0) {
-                return (
-                    <Box display="flex" flexDirection="column">
-                        <Box>
-                            <EmptyShoppingBag/>
-                        </Box>
-                        <Box display="flex" py={2} justifyContent="center">
-                            <Button variant="contained" size="large" color="secondary"
-                                    onClick={wannaShopBtnClick}
-                                    style={{width: '20%'}}>
-                                Wanna Shop? Click Here
-                            </Button>
-                        </Box>
-                    </Box>
-                )
+                return <EmptyShoppingBag btnHandler={wannaShopBtnClick}/>
             }
         } else {
             if (shoppingBagProducts.hasOwnProperty('statusCode')) {
@@ -336,9 +280,11 @@ function ShoppingBag(props) {
                 </Grid>
             </Grid>
 
-            {itemRemovalModalState.active ? <Modal renderWarningComponent={renderItemRemoveConfirmation()}
-                                                   modalWidth={modalWidth}
-                                                   closeHandler={closeModalClickHandler}/> : null}
+            {itemRemovalModalState.active ? <ModalConfirmation
+                                                    title="Remove Item"
+                                                    question="Are you sure you want to remove this item?"
+                                                    removeConfirmedHandler={removeConfirmBtnClickHandler}
+                                                    closeModalHandler={closeModalClickHandler}/> : null}
         </>
     )
 }
diff --git a/client/src/components/ui/error/emptyShoppingBag.js b/client/src/components/ui/error/emptyShoppingBag.js
@@ -1,10 +1,22 @@
 import React from 'react';
 import emptyCheckoutCartImage from '../../../images/emptyCheckoutCart.png'
 import {RenderErrorImage} from "./renderErrorImage";
+import {Button, Grid} from "@material-ui/core";
 
-export const EmptyShoppingBag = () => {
+export const EmptyShoppingBag = (props) => {
 
     return (
-        <RenderErrorImage image={emptyCheckoutCartImage} name="empty-shopping-bag-image"/>
+        <>
+            <RenderErrorImage image={emptyCheckoutCartImage} name="empty-shopping-bag-image"/>
+            <Grid container justify="center">
+                <Grid item xs={8} md={2}>
+                    <Button variant="contained" size="large" color="secondary"
+                            onClick={props.btnHandler}
+                            style={{width: '100%'}}>
+                        Wanna Shop? Click Here
+                    </Button>
+                </Grid>
+            </Grid>
+        </>
     );
 };
diff --git a/client/src/index.js b/client/src/index.js
@@ -13,8 +13,8 @@ import '../src/styles/library/swiper/swiper.min.css';
 import log from 'loglevel';
 import ErrorBoundary from "./ErrorBoundary";
 
-log.disableAll(true)
-// log.setLevel("info")
+// log.disableAll(true)
+log.setLevel("info")
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose();
 const store = createStore(
diff --git a/client/src/styles/semanticUI/customStyles.js b/client/src/styles/semanticUI/customStyles.js
@@ -12,6 +12,10 @@ export const StyledDimmer = styled(Dimmer)({
     backgroundColor: 'rgba(0,0,0,0.2) !important',
 });
 
+export const StyledSearchBarDimmer = styled(Dimmer)({
+    height: '100vh !important',
+});
+
 export const StyledLargeDropdown = styled(Dropdown)({
     width: "225px"
 });
