Skip to content

Commit d447955

Browse files
ujjavaldesai07ujjavaldesai07
committed
Refactored the error pages for mobile devices
1 parent 2c58417 commit d447955

File tree

17 files changed

+148
-94
lines changed

17 files changed

+148
-94
lines changed

‎client/Dockerfile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@ COPY . .
1919
#RUN yarn install
2020

2121
# Initiate npm start
22-
CMD [ "npm", "start" ]
22+
CMD [ "npm", "run-script", "start_docker_dev" ]

‎client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"scripts": {
4040
"start": "node server.js",
4141
"build": "react-scripts build",
42+
"start_docker_dev": "react-scripts start",
4243
"start_dev": "./node_modules/.bin/env-cmd -f .env react-scripts start",
4344
"build_dev": "./node_modules/.bin/env-cmd -f .env react-scripts build",
4445
"test": "react-scripts test",

‎client/src/actions/index.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -291,15 +291,6 @@ export const loadFilterAttributes = filterQuery => async dispatch => {
291291
log.info(`[ACTION]: loadFilterAttributes Calling Filter API filterQuery = ${filterQuery}`)
292292

293293
if (filterQuery) {
294-
try {
295-
if(filterQuery.split("=")[1].localeCompare("productname") === 0 ) {
296-
// currently we do not support productname parameter for filter API.
297-
filterQuery="?q=category=all"
298-
}
299-
} catch (e) {
300-
log.info('Unable to find productname parameter')
301-
}
302-
303294
let uri = `/filter${filterQuery}`
304295
const response = await commonServiceAPI.get(uri);
305296
if (response != null) {

‎client/src/components/routes/navbar/navBar.js

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -213,10 +213,29 @@ const NavBar = props => {
213213

214214
const renderMobileSearchInputField = () => {
215215
if (mobileSearchState) {
216-
return (
217-
<SearchBar size="medium" device="mobile" handleClose={handleMobileSearchClose}/>
218-
)
216+
return <SearchBar size="medium" device="mobile" handleClose={handleMobileSearchClose}/>
219217
}
218+
return (
219+
<>
220+
<Grid item>
221+
<IconButton onClick={handleMobileSearchOpen}
222+
edge="end">
223+
<SearchIcon fontSize="large"/>
224+
</IconButton>
225+
</Grid>
226+
<Grid item>
227+
<IconButton
228+
aria-label="show more"
229+
aria-controls={mobileMenuId}
230+
aria-haspopup="true"
231+
onClick={handleMobileMenuOpen}
232+
color="inherit"
233+
edge="end">
234+
<MoreIcon fontSize="large"/>
235+
</IconButton>
236+
</Grid>
237+
</>
238+
)
220239
}
221240

222241
const handleSidebarOpen = () => {
@@ -293,12 +312,8 @@ const NavBar = props => {
293312
</Hidden>
294313

295314
<Hidden smUp>
296-
{!mobileSearchState ? <Grid item container justify="flex-end" xs={5}>
297-
<IconButton onClick={handleMobileSearchOpen}
298-
edge="end">
299-
<SearchIcon fontSize="large"/>
300-
</IconButton>
301-
</Grid> : null}
315+
<div className={classes.growHalf}/>
316+
<div className={classes.growHalf}/>
302317
{renderMobileSearchInputField()}
303318
</Hidden>
304319

@@ -314,20 +329,6 @@ const NavBar = props => {
314329
"Bag", 0)}
315330
</Hidden>
316331

317-
318-
<Hidden smUp>
319-
{!mobileSearchState ? <Grid item>
320-
<IconButton
321-
aria-label="show more"
322-
aria-controls={mobileMenuId}
323-
aria-haspopup="true"
324-
onClick={handleMobileMenuOpen}
325-
color="inherit"
326-
edge="end">
327-
<MoreIcon fontSize="large"/>
328-
</IconButton>
329-
</Grid> : null}
330-
</Hidden>
331332
</Grid>
332333
</Toolbar>
333334
</AppBar>
@@ -346,5 +347,7 @@ const NavBar = props => {
346347
);
347348
};
348349

349-
export default connect(null, {setAuthDetailsFromCookie, signOut,
350-
signOutUsingOAuth, getDataViaAPI, setDefaultSearchSuggestions})(NavBar);
350+
export default connect(null, {
351+
setAuthDetailsFromCookie, signOut,
352+
signOutUsingOAuth, getDataViaAPI, setDefaultSearchSuggestions
353+
})(NavBar);

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

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,28 +25,55 @@ function SearchBar(props) {
2525
const [value, setValue] = useState(null);
2626
const searchSuggestions = useSelector(state => state.searchKeywordReducer)
2727
const classes = useSearchBarStyles()
28-
let selectedValue = null
2928

30-
const handleClose = (event, reason) => {
31-
if (props.handleClose) {
32-
props.handleClose();
29+
const getSelectedValue = () => {
30+
return document.querySelector('input[id="free-solo"]').value
31+
}
32+
33+
const searchKeyword = () => {
34+
const selectedValue = getSelectedValue()
35+
if(selectedValue && !selectedValue.isEmpty) {
36+
let queryLink = null
37+
for (let index = 0; index < searchSuggestions.data.length; ++index) {
38+
if (searchSuggestions.data[index].keyword.length === selectedValue.length
39+
&& searchSuggestions.data[index].keyword.localeCompare(selectedValue) === 0) {
40+
41+
// complete match
42+
queryLink = searchSuggestions.data[index].link
43+
break;
44+
}
45+
if(searchSuggestions.data[index].keyword.length > selectedValue.length) {
46+
// just stop finding if length exceeds.
47+
if(!queryLink) {
48+
// then match whatever we have.
49+
queryLink = searchSuggestions.data[index].link
50+
}
51+
break;
52+
} else {
53+
// closest match
54+
log.info(``)
55+
queryLink = searchSuggestions.data[index].link
56+
}
57+
}
58+
props.getDataViaAPI(LOAD_FILTER_PRODUCTS,
59+
PRODUCT_BY_CATEGORY_DATA_API + queryLink)
3360
}
61+
}
3462

63+
const handleClose = (event, reason) => {
3564
setValue('')
3665

3766
// search is selected
38-
if(reason === "select-option" && selectedValue != null) {
39-
for(let index = 0; index < searchSuggestions.data.length; ++index) {
40-
if(searchSuggestions.data[index].keyword.length === selectedValue.length
41-
&& searchSuggestions.data[index].keyword.localeCompare(selectedValue) === 0) {
42-
props.getDataViaAPI(LOAD_FILTER_PRODUCTS,
43-
PRODUCT_BY_CATEGORY_DATA_API + searchSuggestions.data[index].link)
44-
return
45-
}
46-
}
67+
if (reason === "select-option") {
68+
searchKeyword()
4769
}
4870
}
4971

72+
const onSearchBtnClick = () => {
73+
searchKeyword()
74+
props.handleClose()
75+
}
76+
5077
const renderDesktopTextField = (params) => {
5178
return <TextField {...params} label="Search for products, brands and more" variant="outlined"/>
5279
}
@@ -61,14 +88,13 @@ function SearchBar(props) {
6188
InputProps={{
6289
...params.InputProps,
6390
startAdornment: <ArrowBackIcon onClick={props.handleClose} fontSize="large"/>,
64-
endAdornment: <SearchIcon fontSize="large"/>
91+
endAdornment: <SearchIcon onClick={onSearchBtnClick} fontSize="large"/>
6592
}}
6693
/>
6794
)
6895
}
6996

7097
const handleInputChange = (event, newValue) => {
71-
selectedValue = newValue
7298
props.getSearchSuggestions(newValue)
7399
}
74100

‎client/src/components/ui/error/badRequest.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react';
2-
import {Grid} from "@material-ui/core";
32
import badRequestImage from '../../../images/badRequest400.png'
3+
import {RenderErrorImage} from "./renderErrorImage";
44

55
export const BadRequest = () => {
66

77
return (
8-
<Grid container justify={"center"} style={{alignContent: "center", height: "-webkit-fill-available"}}>
9-
<img src={badRequestImage} alt="badRequestImage"/>
10-
</Grid>
8+
<RenderErrorImage image={badRequestImage} name="bad-request-image"/>
119
);
1210
};

‎client/src/components/ui/error/emptyShoppingBag.js

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
import React from 'react';
2-
import {Box} from "@material-ui/core";
32
import emptyCheckoutCartImage from '../../../images/emptyCheckoutCart.png'
3+
import {RenderErrorImage} from "./renderErrorImage";
44

55
export const EmptyShoppingBag = () => {
66

77
return (
8-
<Box display="flex"
9-
justifyContent="center"
10-
flexDirection="column"
11-
alignItems="center">
12-
<Box alignSelf="center">
13-
<img src={emptyCheckoutCartImage} alt="emptyCheckoutCartImage" height={400} width={1000}/>
14-
</Box>
15-
</Box>
8+
<RenderErrorImage image={emptyCheckoutCartImage} name="empty-shopping-bag-image"/>
169
);
1710
};

‎client/src/components/ui/error/internalServerError.js

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
import React from 'react';
2-
import {Box} from "@material-ui/core";
32
import internalServerErrorImage from '../../../images/internalServer500.png'
3+
import {RenderErrorImage} from "./renderErrorImage";
44

55
export const InternalServerError = () => {
66

77
return (
8-
<Box display="flex"
9-
justifyContent="center"
10-
flexDirection="column"
11-
alignItems="center">
12-
<Box alignSelf="center">
13-
<img src={internalServerErrorImage} alt="internalServerErrorImage"/>
14-
</Box>
15-
</Box>
8+
<RenderErrorImage image={internalServerErrorImage} name="internal-server-error-image"/>
169
);
1710
};

‎client/src/components/ui/error/pageNotFound.js

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
11
import React from 'react';
2-
import {Box, Button} from "@material-ui/core";
2+
import {Grid, Button} from "@material-ui/core";
33
import pageNotFoundImage from '../../../images/pageNotFound404.png'
44
import history from "../../../history";
5+
import {RenderErrorImage} from "./renderErrorImage";
56

67
export const PageNotFound = () => {
78
const onHomeBtnClick = () => {
89
history.push(`/`);
910
}
1011

1112
return (
12-
<Box display="flex"
13-
justifyContent="center"
14-
flexDirection="column">
15-
<Box pt={6}>
16-
<img src={pageNotFoundImage} alt="pageNotFoundImage" width="30%"
17-
style={{display: 'block', margin: 'auto'}}/>
18-
</Box>
19-
<Box display="flex" py={2} justifyContent="center">
20-
<Button variant="contained" size="large" color="secondary"
21-
onClick={onHomeBtnClick}
22-
style={{width: '20%'}}>
23-
Go Home
24-
</Button>
25-
</Box>
26-
</Box>
27-
);
13+
<>
14+
<RenderErrorImage image={pageNotFoundImage} name="page-not-found-image"/>
15+
<Grid container justify="center">
16+
<Grid item xs={5} sm={3}>
17+
<Button variant="contained" size="large" color="secondary"
18+
onClick={onHomeBtnClick}
19+
style={{width: '100%'}}>
20+
Go Home
21+
</Button>
22+
</Grid>
23+
</Grid>
24+
</>
25+
)
26+
;
2827
};

‎client/src/components/ui/error/renderErrorImage.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import {Grid} from "@material-ui/core";
3+
4+
export const RenderErrorImage = (props) => {
5+
6+
return (
7+
<Grid container justify={"center"} alignItems={"center"}
8+
style={{alignContent: "center", minHeight: "60vh"}}>
9+
<Grid item xs={12} sm={9} lg={5}>
10+
<img src={props.image} alt={props.name} style={{height: "50vh", width: "100%"}}/>
11+
</Grid>
12+
</Grid>
13+
);
14+
};

0 commit comments

Comments
 (0)