aswi2022code-of-duty-gitlab/frontend/src/features/Catalog/CatalogFilter.tsx @ 2d82649d

import {
    Button,
    Collapse,
    Divider,
    Grid,
    Stack,
    TextField,
} from '@mui/material'
import { Fragment } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { setFilter, setFilterOpen } from './catalogSlice'
import { fetchItems } from './catalogThunks'
import FilterListIcon from '@mui/icons-material/FilterList'
import FilterListOffIcon from '@mui/icons-material/FilterListOff'
import ManageSearchIcon from '@mui/icons-material/ManageSearch'
import { RootState } from '../redux/store'

const CatalogFilter = () => {
    const dispatch = useDispatch()

    const filterOpen = useSelector((state: RootState) => state.catalog.filterOpen)
    const toggleFilter = () => {
        dispatch(setFilterOpen(!filterOpen))
    }

    // current filter object
    const filter = useSelector((state: RootState) => state.catalog.filter)
    const applyFilter = () => {
        dispatch(fetchItems())
    }

    return (
        <Fragment>
            <Button
                startIcon={
                    filterOpen ? <FilterListOffIcon /> : <FilterListIcon />
                }
                // variant="outlined"
                color="primary"
                onClick={toggleFilter}
            >
                Filter
            </Button>
            <Collapse in={filterOpen} timeout="auto" unmountOnExit>
                <Grid container spacing={1} alignItems="stretch">
                    <Grid item xs={6}>
                        <Stack direction="column" spacing={1} sx={{ mt: 2 }}>
                            <Stack direction="row" spacing={2}>
                                <TextField
                                    size="small"
                                    id="name"
                                    label="Name"
                                    onChange={(e: any) => {
                                        dispatch(setFilter({
                                            ...filter,
                                            name: e.target.value
                                        }))
                                    }}
                                    value={filter.name}
                                />
                                <TextField
                                    size="small"
                                    id="type"
                                    label="Type"
                                    onChange={(e: any) => {
                                        dispatch(setFilter({
                                            ...filter,
                                            type: e.target.value
                                        }))
                                    }}
                                    value={filter.type}
                                />
                            </Stack>
                            <Stack direction="row" spacing={2}>
                                <TextField
                                    size="small"
                                    id="writtenForm"
                                    label="Written form"
                                />
                                <TextField
                                    size="small"
                                    id="stateOrTerritory"
                                    label="State or territory"
                                    onChange={(e: any) => {
                                        dispatch(setFilter({
                                            ...filter,
                                            country: e.target.value
                                        }))
                                    }}
                                    value={filter.country}
                                />
                                <TextField
                                    size="small"
                                    id="groupBy"
                                    label="Group by"
                                />
                            </Stack>
                        </Stack>
                    </Grid>
                    <Grid item xs sx={{ mt: 'auto', ml: 1, mb: 1 }}>
                        <Stack
                            direction="row"
                            justifyContent="flex-start"
                            alignItems="flex-end"
                        >
                            <Button startIcon={<ManageSearchIcon/>} variant="contained" onClick={applyFilter}>
                                Search
                            </Button>
                        </Stack>
                    </Grid>
                </Grid>
            </Collapse>
            {filterOpen ? <Divider sx={{ mb: 5, mt: 1 }} /> : null}
        </Fragment>
    )
}

export default CatalogFilter