123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- import {
- Box,
- CircularProgress,
- Container,
- IconButton,
- InputAdornment,
- TextField,
- Typography,
- useMediaQuery
- } from "@mui/material";
- import SearchIcon from "@material-ui/icons/Search";
- import {connect} from "react-redux";
- import {actionFullGoodFind} from "../actions/ActionGoodFind";
- import {useState} from "react";
- import {backURL} from "../actions/PathDB";
- import imgNotFound from "../img/catalog/imgNotFound.png";
- import Link from "react-router-dom/es/Link";
- import {actionSearchRemove} from "../reducers/SearchReducer";
- const NotFound = () => {
- return (
- <Typography
- textAlign='center'
- color='#000'
- letterSpacing='1px'
- variant='body1'
- >
- No results found
- </Typography>
- )
- }
- const ItemFound = ({item:{_id, name, price, images, description}}) => {
- return (
- <Link style={{textDecoration: 'none', display: 'flex', alignItems: 'center', marginBottom: '30px'}} to={`/good/${_id}`}>
- <Box width='60px' height='60px' borderRadius='10px' overflow='hidden' marginRight='60px' position='relative'>
- <img style={{position: 'absolute',top: '0', left: '0', width: '100%', height: '100%', objectFit: 'cover'}} src={images[0]?.url ? backURL + '/' + images[0]?.url : imgNotFound} alt={name}/>
- </Box>
- <Box sx={{display: 'flex', flexDirection:'column', justifyContent: 'space-between', alignItems:'flex-start'}}>
- <Typography
- color='#000'
- letterSpacing='1px'
- fontFamily='sarif'
- fontWeight='600'
- variant='h6'
- >
- {name}
- </Typography>
- <Typography
- letterSpacing='1px'
- variant='body1'
- fontWeight='300'
- color='#616161'
- margin='10px 0'
- >
- {description.length > 60 ? 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.' : description}
- </Typography>
- <Typography
- color='#000'
- letterSpacing='1px'
- variant='body1'
- fontWeight='600'
- >
- ${parseFloat(price).toFixed(2)}
- </Typography>
- </Box>
- </Link>
- )
- }
- const SearchPage = ({searchResult, onSearch, onSearchRemove}) => {
- const matches = useMediaQuery('(max-width:899px)')
- const [value, setValue] = useState('')
- const [click, setClick] = useState(false)
- return(
- <>
- <main style={{backgroundColor: "#f3f3f3", marginTop: '85px', padding: matches ? "20px 0" : "50px 0", minHeight: 'calc(100vh - (185px + 290px))'}}>
- <Container maxWidth="sm">
- <Typography
- variant='h5'
- fontFamily='sarif'
- letterSpacing='3px'
- marginBottom='30px'
- >
- WHAT YOU ARE LOOKING FOR?
- </Typography>
- <TextField
- color={'primary'}
- fullWidth
- variant="standard"
- value={value}
- placeholder="Start typing..."
- onChange={(event) => {setClick(false); setValue(event.target.value); onSearchRemove()}}
- InputProps={{
- sx: {padding: '10px', outline:'none', color: '#616161', fontWeight: '300', letterSpacing: '1px', marginBottom: '50px'},
- endAdornment: (
- <InputAdornment position="end">
- <IconButton onClick={() => {setClick(true); onSearchRemove(); onSearch(value)}}>
- <SearchIcon />
- </IconButton>
- </InputAdornment>
- )
- }}
- />
- {(value !== '' && click) && (searchResult?.searchResult ?
- Object.values(searchResult.searchResult).length > 0 ?
- Object.values(searchResult.searchResult).map(item => <ItemFound item={item}/>) : <NotFound/> :
- <CircularProgress color="inherit"/>
- )}
- </Container>
- </main>
- </>
- )
- }
- const CSearchPage = connect(state=>({searchResult: state.search}), {onSearch: actionFullGoodFind, onSearchRemove: actionSearchRemove})(SearchPage)
- export default CSearchPage
- // TODO MOBILE VERSION
|