Fixed warnings for the products page

Author: ujjavaldesai07

client/src/components/routes/navbar/searchBar.js

@@ -9,55 +9,57 @@ export default function SearchBar(props) {
     const classes = useNavBarStyles();
 
     const handleClose = () => {
-        props.handleClose();
+        if (props.handleClose) {
+            props.handleClose();
+        }
     }
 
     return (
-            <Autocomplete
-                value={value}
-                autoHighlight
-                onChange={(event, newValue) => {
-                    if (typeof newValue === 'string') {
-                        setValue({
-                            title: newValue,
-                        });
-                    } else if (newValue && newValue.inputValue) {
-                        // Create a new value from the user input
-                        setValue({
-                            title: newValue.inputValue,
-                        });
-                    } else {
-                        setValue(newValue);
-                    }
-                }}
-                selectOnFocus
-                clearOnBlur
-                handleHomeEndKeys
-                closeIcon={<CloseIcon/>}
-                id="free-solo-with-text-demo"
-                options={top100Films}
-                getOptionLabel={(option) => {
-                    // Value selected with enter, right from the input
-                    if (typeof option === 'string') {
-                        return option;
-                    }
-                    // Add "xxx" option created dynamically
-                    if (option.inputValue) {
-                        return option.inputValue;
-                    }
-                    // Regular option
-                    return option.title;
-                }}
-                renderOption={(option) => option.title}
-                freeSolo
-                fullWidth
-                onClose={handleClose}
-                size={props.size}
-                classes={{root: classes.autoCompleteSearchBarRoot}}
-                renderInput={(params) => (
-                    <TextField {...params} label="Search for products, brands and more" variant="outlined"/>
-                )}
-            />
+        <Autocomplete
+            value={value}
+            autoHighlight
+            onChange={(event, newValue) => {
+                if (typeof newValue === 'string') {
+                    setValue({
+                        title: newValue,
+                    });
+                } else if (newValue && newValue.inputValue) {
+                    // Create a new value from the user input
+                    setValue({
+                        title: newValue.inputValue,
+                    });
+                } else {
+                    setValue(newValue);
+                }
+            }}
+            selectOnFocus
+            clearOnBlur
+            handleHomeEndKeys
+            closeIcon={<CloseIcon/>}
+            id="free-solo-with-text-demo"
+            options={top100Films}
+            getOptionLabel={(option) => {
+                // Value selected with enter, right from the input
+                if (typeof option === 'string') {
+                    return option;
+                }
+                // Add "xxx" option created dynamically
+                if (option.inputValue) {
+                    return option.inputValue;
+                }
+                // Regular option
+                return option.title;
+            }}
+            renderOption={(option) => option.title}
+            freeSolo
+            fullWidth
+            onClose={handleClose}
+            size={props.size}
+            classes={{root: classes.autoCompleteSearchBarRoot}}
+            renderInput={(params) => (
+                <TextField {...params} label="Search for products, brands and more" variant="outlined"/>
+            )}
+        />
     );
 }
 

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

@@ -3,10 +3,7 @@ import {useDispatch, useSelector} from "react-redux";
 import Chip from "@material-ui/core/Chip";
 import Box from '@material-ui/core/Box';
 import log from "loglevel";
-import {
-    ADD_SELECTED_CATEGORY
-
-} from "../../../actions/types";
+import {ADD_SELECTED_CATEGORY} from "../../../actions/types";
 
 const FilterChips = () => {
     const selectedGenders = useSelector(state => state.selectedFilterAttributesReducer.genders)
@@ -15,12 +12,20 @@ const FilterChips = () => {
     const selectedPriceRanges = useSelector(state => state.selectedFilterAttributesReducer.prices)
     const dispatch = useDispatch()
 
+    // check if any filter is selected or not
     if ((selectedGenders.length + selectedApparels.length
         + selectedBrands.length + selectedPriceRanges.length) === 0) {
         log.debug(`[FilterChips] Filter are empty`)
         return null
     }
 
+    /**
+     * construct the chip from selected filter option and assign Id.
+     *
+     * @param selectedAttrList
+     * @param categoryId
+     * @returns {[]}
+     */
     const addChips = (selectedAttrList, categoryId) => {
         let chipBoxList = []
         log.debug(`[FilterChips] addBoxTagToList boxDataList = ${JSON.stringify(selectedAttrList)}`)
@@ -39,6 +44,10 @@ const FilterChips = () => {
         return chipBoxList
     }
 
+    /**
+     * Prepare chip list and render it.
+     * @returns {null|[]}
+     */
     const renderChipBoxes = () => {
         log.debug(`[FilterChips] renderChipBoxes is invoked`)
 
@@ -65,6 +74,13 @@ const FilterChips = () => {
         return null
     }
 
+    /**
+     * Dispatch the chip from selected option list
+     *
+     * @param id
+     * @param selectedAttrList
+     * @param attributeName
+     */
     const findValueAndDispatch = (id, selectedAttrList, attributeName) => {
         log.debug(`[FilterChips] findValueAndDispatch id = ${id}`+
             `, attributeName = ${attributeName}, selectedAttrList = ${JSON.stringify(selectedAttrList)}`)
@@ -86,6 +102,11 @@ const FilterChips = () => {
         }
     }
 
+    /**
+     * Delete the chip
+     * @param id
+     * @returns {function(...[*]=)}
+     */
     const handleDelete = id => () => {
         log.info(`[FilterChips] handleDelete for chip for id = ${id}`)
         const splitId = id.split("-")

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

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import Grid from "@material-ui/core/Grid";
 import log from 'loglevel';
 import {useDispatch, useSelector} from "react-redux";
@@ -23,11 +23,13 @@ export default function FilterPagination() {
         })
     }
 
+    // if we got data from the server side
     if(!filterProductsReducer || filterProductsReducer.hasOwnProperty("data") === false ||
         filterProductsReducer.data.hasOwnProperty("totalCount") === false) {
         log.info(`[FilterPagination] totalProducts = ${totalProducts}`)
         return null
     } else {
+        // set the total products used to calculate how many pages require
         totalProducts = filterProductsReducer.data.totalCount
     }
 

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

@@ -24,6 +24,7 @@ const FilterProductDisplay = props => {
             log.info(`[FilterProductDisplay] Component did mount`)
 
             try {
+                // if query is present then call the products API
                 if (queryStatus) {
                     log.info(`[FilterProductDisplay] Getting products from API.....`)
                     props.getDataViaAPI(LOAD_FILTER_PRODUCTS, PRODUCT_BY_CATEGORY_DATA_API + queryStatus)
@@ -32,12 +33,15 @@ const FilterProductDisplay = props => {
                 log.error(`[FilterProductDisplay] Bad URL found in history.location.search`)
             }
 
+            // scroll up after call the API
             window.scrollTo(0, 0)
 
             // eslint-disable-next-line
         }, [queryStatus]);
 
 
+        // initial state is loading and this will change
+        // when we retrieve data
         if (filterProductsReducer.isLoading) {
             log.info(`[FilterProductDisplay] filterProducts is null`)
             return (
@@ -47,6 +51,8 @@ const FilterProductDisplay = props => {
             )
         } else {
             if (filterProductsReducer.hasOwnProperty("data")) {
+                // if does not got anything from the server but we didn't got any
+                // error then we didn't find any matches
                 if (Object.entries(filterProductsReducer.data).length === 0) {
 
                     log.info(`[Home]: homeAPIData.data length =` +
@@ -58,9 +64,13 @@ const FilterProductDisplay = props => {
                         </Box>
                     )
                 }
+
+                // set the products here
                 filterProducts = filterProductsReducer.data.products
 
             } else {
+
+                // if there is any error then status code will be set in action creator.
                 if (filterProductsReducer.hasOwnProperty('statusCode')) {
                     log.info(`[Home]: homeAPIData.statusCode = ${filterProductsReducer.statusCode}`)
                     return <HTTPError statusCode={filterProductsReducer.statusCode}/>

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

@@ -15,11 +15,16 @@ export default function ApparelCheckBox() {
     const selectedApparels = useSelector(state => state.selectedFilterAttributesReducer.apparels)
     const [searchApparelList, setSearchApparelList] = useState(null)
 
+    // return if doesn't got anything from the server
     if (!apparelList) {
         log.debug(`[ApparelCheckBox] apparelList is null`)
         return null
     }
 
+    /**
+     * return the normal list or list based on search keyword
+     * @returns {any}
+     */
     const getActiveApparelList = () => {
         return searchApparelList ? searchApparelList : apparelList
     }
@@ -49,8 +54,7 @@ export default function ApparelCheckBox() {
             <CheckboxSearchBar title={TITLE}
                                placeholderText="Search for Apparels"
                                checkboxList={apparelList}
-                               searchListHandler={handleSearchListChange}
-            />
+                               searchListHandler={handleSearchListChange}/>
             <CheckboxList attrList={getActiveApparelList()}
                           title={TITLE}
                           maxItems={6}

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

@@ -15,11 +15,16 @@ export default function BrandCheckBox() {
     const selectedBrands = useSelector(state => state.selectedFilterAttributesReducer.brands)
     const [searchBrandList, setSearchBrandList] = useState(null)
 
+    // return if doesn't got anything from the server
     if (!brandList) {
         log.debug(`[BrandCheckBox] brandList is null`)
         return null
     }
 
+    /**
+     * return the normal list or list based on search keyword
+     * @returns {any}
+     */
     const getActiveBrandList = () => {
         return searchBrandList ? searchBrandList : brandList
     }
@@ -49,8 +54,7 @@ export default function BrandCheckBox() {
             <CheckboxSearchBar title={TITLE}
                                placeholderText="Search for Brands"
                                checkboxList={brandList}
-                               searchListHandler={handleSearchListChange}
-            />
+                               searchListHandler={handleSearchListChange}/>
             <CheckboxList attrList={getActiveBrandList()}
                           title="Brand"
                           maxItems={6}

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

@@ -7,9 +7,29 @@ import CloseIcon from "@material-ui/icons/Close";
 import IconButton from "@material-ui/core/IconButton";
 import SortedCheckboxList from "../../../ui/sortedCheckboxList";
 
+const paperStyles = {
+    backgroundColor: "inherit",
+    width: "200vh",
+    height: "70vh"
+}
+
+const gridStyles = {
+    height: '70vh',
+    zIndex: 1300,
+    overflow: "auto",
+    left: 0,
+    width: "inherit",
+    position: "fixed",
+    top: 150,
+    backgroundColor: "white",
+    border: "1px solid #eaeaec",
+    boxShadow: "0 1px 8px rgba(0,0,0,.1)"
+}
+
 export default function CheckboxMoreButton(props) {
     const [moreButtonState, setMoreButtonState] = useState({active: false, topPosition: 0})
 
+    // No need to render this component if the list is not present
     if (!props.checkboxList) {
         log.debug(`[CheckboxMoreButton] apparelList is null`)
         return null
@@ -31,12 +51,8 @@ export default function CheckboxMoreButton(props) {
     const renderMoreButtonList = () => {
         return (
             <Paper elevation={3} variant="outlined" square
-                   style={{backgroundColor: "inherit", width: "200vh", height: "70vh"}}>
-                <Grid item container xs={props.size} direction="row" style={{
-                    height: '70vh', zIndex: 1300, overflow: "auto", left: 0, width: "inherit",
-                    position: "fixed", top: 150, backgroundColor: "white", border: "1px solid #eaeaec",
-                    boxShadow: "0 1px 8px rgba(0,0,0,.1)"
-                }}>
+                   style={paperStyles}>
+                <Grid item container xs={props.size} direction="row" style={gridStyles}>
                     <Grid item sm={11}>
                     <SortedCheckboxList attrList={props.checkboxList}
                                         title={props.title}
@@ -48,8 +64,7 @@ export default function CheckboxMoreButton(props) {
                         <IconButton size="medium"
                                     color="primary"
                                     onClick={handleMoreListCloseButton}
-                                    style={{position: "fixed"}}
-                        >
+                                    style={{position: "fixed"}}>
                             <CloseIcon/>
                         </IconButton>
                     </Grid>
@@ -58,6 +73,10 @@ export default function CheckboxMoreButton(props) {
         )
     }
 
+    /**
+     * render more button if items are more then six
+     * @returns {null|*}
+     */
     const renderMoreButton = () => {
         if (props.checkboxList.length > 6) {
             return (

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

@@ -8,12 +8,16 @@ function ClearAllButton() {
     const dispatch = useDispatch()
     const selectedFilterAttribute = useSelector(state => state.selectedFilterAttributesReducer)
 
+    // check if any filter is selected or not
     if((selectedFilterAttribute.genders.length + selectedFilterAttribute.apparels.length
         + selectedFilterAttribute.brands.length + selectedFilterAttribute.prices.length) === 0) {
         log.info(`[ClearAllButton] selected attribute are null`)
         return null
     }
 
+    /**
+     * remove all selected filters
+     */
     const handleClearAllClick = () => {
         log.info(`[ClearAllButton] handleClearAllClick(value)`)
         dispatch({type: REMOVE_SELECTED_CATEGORY, payload: history.location.search.slice(3)})