Skip to content

Commit 07c27e2

Browse files
ujjavaldesai07ujjavaldesai07
committed
Added explore button functionality to apparels and brands
1 parent 8399d5e commit 07c27e2

File tree

9 files changed

+262
-185
lines changed

9 files changed

+262
-185
lines changed

‎client/src/actions/types.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const SAVE_FILTER_QUERY = "SAVE_FILTER_QUERY";
2424
export const DELETE_FILTER_QUERY = "DELETE_FILTER_QUERY";
2525
export const ADD_SELECTED_CATEGORY = "ADD_SELECTED_CATEGORY";
2626
export const REMOVE_SELECTED_CATEGORY = "REMOVE_SELECTED_CATEGORY";
27-
27+
export const SAVE_SORT_LIST = "SAVE_SORT_LIST";
2828

2929
// js cookie IDs
3030
export const HANDLE_TOKEN_ID = "HANDLE_TOKEN_ID";

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

Lines changed: 25 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,20 @@ import CheckboxList from "../../../ui/checkboxList";
33
import log from 'loglevel';
44
import {useDispatch, useSelector} from "react-redux";
55
import {ADD_SELECTED_CATEGORY} from "../../../../actions/types";
6-
import {NavBarHeader} from "../../../ui/headers";
7-
import {Box, Grid} from "@material-ui/core";
8-
import CollapsableSearch from "../../../ui/collapsableSearch";
9-
import Button from '@material-ui/core/Button';
10-
import Paper from '@material-ui/core/Paper';
11-
import CloseIcon from "@material-ui/icons/Close";
12-
import IconButton from "@material-ui/core/IconButton";
13-
import SortedCheckboxList from "../../../ui/sortedCheckboxList";
6+
import CheckboxMoreButton from "./checkboxMoreButton";
7+
import CheckboxSearchBar from "./checkboxSearchBar";
8+
import {useSortList} from "./sortListHook";
149

1510
export default function ApparelCheckBox() {
1611
const TITLE = "Apparel"
12+
const propName = "apparels"
1713
const dispatch = useDispatch()
1814
const apparelList = useSelector(state => state.filterAttributesReducer ?
1915
state.filterAttributesReducer.apparels : null)
2016
const selectedApparels = useSelector(state => state.selectedFilterAttributesReducer.apparels)
2117
const [searchApparelList, setSearchApparelList] = useState(null)
22-
const [moreButtonState, setMoreButtonState] = useState({active: false, topPosition: 0})
18+
19+
useSortList(apparelList, propName)
2320

2421
if (!apparelList) {
2522
log.debug(`[ApparelCheckBox] apparelList is null`)
@@ -30,14 +27,8 @@ export default function ApparelCheckBox() {
3027
return searchApparelList ? searchApparelList : apparelList
3128
}
3229

33-
const handleSearchBarChange = value => {
34-
log.info(`[ApparelCheckBox] handleSearchClick value = ${value}`)
35-
let filterApparelList = apparelList.filter(info => info.value.toUpperCase().search(value.toUpperCase()) !== -1)
36-
setSearchApparelList(filterApparelList)
37-
}
38-
39-
const handleSearchBarCancel = () => {
40-
setSearchApparelList(null)
30+
const handleSearchListChange = (searchList) => {
31+
setSearchApparelList(searchList)
4132
}
4233

4334
const handleCheckBoxChange = (id, value) => {
@@ -52,93 +43,29 @@ export default function ApparelCheckBox() {
5243
})
5344
}
5445

55-
const handleMoreButton = (event) => {
56-
log.info(`[Apparel Checkbox] clientX = ${event.clientX}, clientY = ${event.clientY}, moreButtonState = ${JSON.stringify(moreButtonState)}`)
57-
setMoreButtonState({active: true, topPosition: parseInt(event.clientY)})
58-
log.info(`[Apparel Checkbox] moreButtonState = ${JSON.stringify(moreButtonState)}`)
59-
}
60-
61-
const handleMoreListCloseButton = () => {
62-
setMoreButtonState({active: false, topPosition: 0})
63-
}
64-
65-
const renderMoreButtonList = () => {
66-
return (
67-
<Paper elevation={3} variant="outlined" square
68-
style={{backgroundColor: "inherit", width: "100%", height: "70vh"}}>
69-
<Grid item container direction="row" sm={8} style={{
70-
height: '70vh', zIndex: 1300, overflow: "auto",
71-
position: "fixed", top: 180, backgroundColor: "rgb(230, 230, 230)",
72-
}}>
73-
<SortedCheckboxList attrList={getActiveApparelList()}
74-
fontSize="0.9rem"
75-
title={TITLE}
76-
selectedAttrList={selectedApparels}
77-
onChangeHandler={handleCheckBoxChange}/>
78-
<Grid item sm={1} container justify="flex-end" style={{height: "5%", paddingRight: "0.5rem"}}>
79-
<IconButton size="medium"
80-
color="primary"
81-
onClick={handleMoreListCloseButton}
82-
>
83-
<CloseIcon/>
84-
</IconButton>
85-
</Grid>
86-
</Grid>
87-
</Paper>
88-
)
89-
}
90-
91-
const renderCheckboxList = () => {
92-
return (
93-
<>
94-
<Box display="flex" alignItems="center" pt={2}>
95-
<Box width="50%">
96-
<NavBarHeader title={TITLE}/>
97-
</Box>
98-
<Box width="50%">
99-
<CollapsableSearch
100-
handleOnSearchChange={handleSearchBarChange}
101-
handleCancelButton={handleSearchBarCancel}
102-
placeholder="Search for Apparels"
103-
/>
104-
</Box>
105-
</Box>
106-
<CheckboxList attrList={getActiveApparelList()}
107-
fontSize="0.9rem"
108-
title={TITLE}
109-
maxItems={6}
110-
selectedAttrList={selectedApparels}
111-
onChangeHandler={handleCheckBoxChange}/>
112-
{renderMoreButton()}
113-
{moreButtonState.active ? renderMoreButtonList() : null}
114-
</>
115-
)
116-
}
117-
118-
const renderMoreButton = () => {
119-
if (getActiveApparelList().length > 6) {
120-
return (
121-
<Box pl={1.5} pb={1}>
122-
<Button color="secondary" onClick={handleMoreButton}>
123-
{`+ ${getActiveApparelList().length - 6} more`}
124-
</Button>
125-
</Box>
126-
)
127-
}
128-
return null
129-
}
130-
131-
13246
log.debug(`[ApparelCheckBox] selectedApparels = ${JSON.stringify(selectedApparels)}`)
13347

13448
log.info(`[ApparelCheckBox] Rendering ApparelCheckBox Component`)
13549

13650
return (
13751
<>
138-
{/*{moreButtonState ? <ModalSection*/}
139-
{/* handleCloseButton={handleMoreListCloseButton}*/}
140-
{/* content={renderMoreButtonList}/> : renderCheckboxList()}*/}
141-
{renderCheckboxList()}
52+
<CheckboxSearchBar title={TITLE}
53+
placeholderText="Search for Apparels"
54+
checkboxList={apparelList}
55+
searchListHandler={handleSearchListChange}
56+
/>
57+
<CheckboxList attrList={getActiveApparelList()}
58+
fontSize="0.9rem"
59+
title={TITLE}
60+
maxItems={6}
61+
selectedAttrList={selectedApparels}
62+
onChangeHandler={handleCheckBoxChange}/>
63+
<CheckboxMoreButton title={TITLE}
64+
checkboxList={apparelList}
65+
propName={propName}
66+
selectedCheckboxList={selectedApparels}
67+
checkboxChangeHandler={handleCheckBoxChange}/>
68+
14269
</>
14370
);
14471
}

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

Lines changed: 25 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,70 @@
11
import React, {useState} from 'react';
2-
import {NavBarHeader} from "../../../ui/headers";
3-
import CollapsableSearch from "../../../ui/collapsableSearch";
42
import CheckboxList from "../../../ui/checkboxList";
53
import log from 'loglevel';
64
import {useDispatch, useSelector} from "react-redux";
75
import {ADD_SELECTED_CATEGORY} from "../../../../actions/types";
8-
import {Box} from "@material-ui/core";
9-
import Button from "@material-ui/core/Button";
6+
import CheckboxMoreButton from "./checkboxMoreButton";
7+
import CheckboxSearchBar from "./checkboxSearchBar";
8+
import {useSortList} from "./sortListHook";
109

1110
export default function BrandCheckBox() {
1211
const TITLE = "Brand"
12+
const propName = "brands"
1313
const dispatch = useDispatch()
1414
const brandList = useSelector(state => state.filterAttributesReducer ?
1515
state.filterAttributesReducer.brands : null)
1616
const selectedBrands = useSelector(state => state.selectedFilterAttributesReducer.brands)
1717
const [searchBrandList, setSearchBrandList] = useState(null)
1818

19+
useSortList(brandList, propName)
20+
1921
if (!brandList) {
2022
log.debug(`[BrandCheckBox] brandList is null`)
2123
return null
2224
}
2325

24-
const handleSearchBarChange = value => {
25-
log.info(`[BrandCheckBox] handleSearchClick value = ${value}`)
26-
let filterBrandList = brandList.filter(info => info.value.toUpperCase().search(value.toUpperCase()) !== -1)
27-
setSearchBrandList(filterBrandList)
26+
const getActiveBrandList = () => {
27+
return searchBrandList ? searchBrandList : brandList
2828
}
2929

30-
const handleSearchBarCancel = () => {
31-
setSearchBrandList(null)
30+
const handleSearchListChange = (searchList) => {
31+
setSearchBrandList(searchList)
3232
}
3333

3434
const handleCheckBoxChange = (id, value) => {
35-
log.info(`[BrandCheckBox] handleCheckBoxChange(id) = ${id}`)
36-
35+
log.info(`[BrandCheckBox] handleCheckBoxChange(id) = ${id}, value = ${value}`)
3736
dispatch({
3837
type: ADD_SELECTED_CATEGORY,
3938
payload: {
40-
brands: {id, value}
39+
brands: {
40+
id, value
41+
}
4142
}
4243
})
4344
}
4445

45-
const renderMoreButton = () => {
46-
if (brandList.length > 6) {
47-
return (
48-
<Box pl={1.5} pb={1}>
49-
<Button color="secondary" onClick={handleMoreButton}>
50-
{`+ ${brandList.length - 6} more`}
51-
</Button>
52-
</Box>
53-
)
54-
}
55-
return null
56-
}
57-
58-
const handleMoreButton = () => {
59-
60-
}
61-
6246
log.debug(`[BrandCheckBox] selectedBrands = ${JSON.stringify(selectedBrands)}`)
6347

6448
log.info(`[BrandCheckBox] Rendering BrandCheckBox Component`)
6549

6650
return (
6751
<>
68-
<Box display="flex" alignItems="center" pt={2}>
69-
<Box width="50%">
70-
<NavBarHeader title={TITLE}/>
71-
</Box>
72-
<Box width="50%">
73-
<CollapsableSearch
74-
handleOnSearchChange={handleSearchBarChange}
75-
handleCancelButton={handleSearchBarCancel}
76-
placeholder="Search for Brands"
77-
/>
78-
</Box>
79-
</Box>
80-
<CheckboxList attrList={searchBrandList ? searchBrandList : brandList}
52+
<CheckboxSearchBar title={TITLE}
53+
placeholderText="Search for Brands"
54+
checkboxList={brandList}
55+
searchListHandler={handleSearchListChange}
56+
/>
57+
<CheckboxList attrList={getActiveBrandList()}
8158
fontSize="0.9rem"
8259
title="Brand"
8360
maxItems={6}
8461
selectedAttrList={selectedBrands}
8562
onChangeHandler={handleCheckBoxChange}/>
86-
{renderMoreButton()}
63+
<CheckboxMoreButton title={TITLE}
64+
propName="brands"
65+
checkboxList={brandList}
66+
selectedCheckboxList={selectedBrands}
67+
checkboxChangeHandler={handleCheckBoxChange}/>
8768
</>
8869
);
8970
}

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, {useState} from 'react';
2+
import log from 'loglevel';
3+
import {Box, Grid} from "@material-ui/core";
4+
import Button from '@material-ui/core/Button';
5+
import Paper from '@material-ui/core/Paper';
6+
import CloseIcon from "@material-ui/icons/Close";
7+
import IconButton from "@material-ui/core/IconButton";
8+
import SortedCheckboxList from "../../../ui/sortedCheckboxList";
9+
10+
export default function CheckboxMoreButton(props) {
11+
const [moreButtonState, setMoreButtonState] = useState({active: false, topPosition: 0})
12+
13+
if (!props.checkboxList) {
14+
log.debug(`[CheckboxMoreButton] apparelList is null`)
15+
return null
16+
}
17+
18+
const handleCheckBoxChange = (id, value) => {
19+
log.info(`[CheckboxMoreButton] handleCheckBoxChange(id) = ${id}, value = ${value}`)
20+
props.checkboxChangeHandler(id, value)
21+
}
22+
23+
const handleMoreButton = (event) => {
24+
setMoreButtonState({active: true, topPosition: parseInt(event.clientY)})
25+
}
26+
27+
const handleMoreListCloseButton = () => {
28+
setMoreButtonState({active: false, topPosition: 0})
29+
}
30+
31+
const renderMoreButtonList = () => {
32+
return (
33+
<Paper elevation={3} variant="outlined" square
34+
style={{backgroundColor: "inherit", width: "100%", height: "70vh"}}>
35+
<Grid item container direction="row" sm={11} style={{
36+
height: '70vh', zIndex: 1300, overflow: "auto", left: 0,
37+
position: "fixed", top: 180, backgroundColor: "rgb(230, 230, 230)",
38+
}}>
39+
<SortedCheckboxList attrList={props.checkboxList}
40+
fontSize="0.9rem"
41+
title={props.title}
42+
propName={props.propName}
43+
selectedAttrList={props.selectedCheckboxList}
44+
onChangeHandler={handleCheckBoxChange}/>
45+
<Grid item sm={1} container justify="flex-end" style={{height: "5%", paddingRight: "0.5rem"}}>
46+
<IconButton size="medium"
47+
color="primary"
48+
onClick={handleMoreListCloseButton}
49+
style={{position: "fixed"}}
50+
>
51+
<CloseIcon/>
52+
</IconButton>
53+
</Grid>
54+
</Grid>
55+
</Paper>
56+
)
57+
}
58+
59+
const renderMoreButton = () => {
60+
if (props.checkboxList.length > 6) {
61+
return (
62+
<Box pl={1.5} pb={1}>
63+
<Button color="secondary" onClick={handleMoreButton}>
64+
{`+ ${props.checkboxList.length - 6} more`}
65+
</Button>
66+
</Box>
67+
)
68+
}
69+
return null
70+
}
71+
72+
73+
log.debug(`[CheckboxMoreButton] selectedApparels = ${JSON.stringify(props.selectedCheckboxList)}`)
74+
75+
log.info(`[CheckboxMoreButton] Rendering CheckboxMoreButton Component`)
76+
77+
return (
78+
<>
79+
{renderMoreButton()}
80+
{moreButtonState.active ? renderMoreButtonList() : null}
81+
</>
82+
);
83+
}

0 commit comments

Comments
 (0)