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

Author: ujjavaldesai07

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

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,

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

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

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(

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