FinalProject/src/pages/SearchPage.jsx

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