fix:updated filter logic to match multi-filter implementation in backend
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele
parent
c6d4d28367
commit
c7db11158f
@ -4,7 +4,7 @@ import React from 'react';
|
||||
import filterConstants from 'utilities/filterConstants';
|
||||
|
||||
const StateFilterCardWrapper = () => {
|
||||
return <FilterCard title="Products" filters={filterConstants.osFilters} updateFilters={() => {}} />;
|
||||
return <FilterCard title="Products" filters={filterConstants.osFilters} updateFilters={() => {}} filterValue={[]} />;
|
||||
};
|
||||
|
||||
describe('Filters components', () => {
|
||||
|
||||
48
src/api.js
48
src/api.js
@ -26,36 +26,36 @@ const api = {
|
||||
};
|
||||
},
|
||||
|
||||
get(urli, abortSignal, cfg) {
|
||||
let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
|
||||
if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
|
||||
config = { ...config, signal: abortSignal };
|
||||
get(urli, cfg) {
|
||||
if (isEmpty(cfg)) {
|
||||
return axios.get(urli, this.getRequestCfg());
|
||||
} else {
|
||||
return axios.get(urli, cfg);
|
||||
}
|
||||
return axios.get(urli, config);
|
||||
},
|
||||
|
||||
post(urli, payload, abortSignal, cfg) {
|
||||
let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
|
||||
if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
|
||||
config = { ...config, signal: abortSignal };
|
||||
// This method creates the POST request with axios
|
||||
// If caller specifies the request configuration to be sent (@param cfg), it adds it to the request
|
||||
// If caller doesn't specfiy the request configuration, it adds the default config to the request
|
||||
// This allows caller to pass in any desired request configuration, based on the specifc need
|
||||
post(urli, payload, cfg) {
|
||||
// generic post - generate config for request
|
||||
if (isEmpty(cfg)) {
|
||||
return axios.post(urli, payload, this.getRequestCfg());
|
||||
// custom post - use passed in config
|
||||
// TODO:: validate config object before sending request
|
||||
} else {
|
||||
return axios.post(urli, payload, cfg);
|
||||
}
|
||||
return axios.post(urli, payload, config);
|
||||
},
|
||||
|
||||
put(urli, payload, abortSignal, cfg) {
|
||||
let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
|
||||
if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
|
||||
config = { ...config, signal: abortSignal };
|
||||
}
|
||||
return axios.put(urli, payload, config);
|
||||
put(urli, payload) {
|
||||
return axios.put(urli, payload, this.getRequestCfg());
|
||||
},
|
||||
|
||||
delete(urli, abortSignal, cfg) {
|
||||
let config = isEmpty(cfg) ? this.getRequestCfg() : cfg;
|
||||
if (!isEmpty(abortSignal) && isEmpty(config.signal)) {
|
||||
config = { ...config, signal: abortSignal };
|
||||
}
|
||||
return axios.delete(urli, config);
|
||||
delete(urli, cfg) {
|
||||
let requestCfg = isEmpty(cfg) ? this.getRequestCfg() : cfg;
|
||||
return axios.delete(urli, requestCfg);
|
||||
}
|
||||
};
|
||||
|
||||
@ -78,8 +78,8 @@ const endpoints = {
|
||||
const searchParam = searchQuery !== '' ? `query:"${searchQuery}"` : `query:""`;
|
||||
const paginationParam = `requestedPage: {limit:${pageSize} offset:${(pageNumber - 1) * pageSize}}`;
|
||||
let filterParam = `,filter: {`;
|
||||
if (filter.Os) filterParam += ` Os:${!isEmpty(filter.Os) ? `"${filter.Os}"` : '""'}`;
|
||||
if (filter.Arch) filterParam += ` Arch:${!isEmpty(filter.Arch) ? `"${filter.Arch}"` : '""'}`;
|
||||
if (filter.Os) filterParam += ` Os:${!isEmpty(filter.Os) ? `${JSON.stringify(filter.Os)}` : '""'}`;
|
||||
if (filter.Arch) filterParam += ` Arch:${!isEmpty(filter.Arch) ? `${JSON.stringify(filter.Arch)}` : '""'}`;
|
||||
if (filter.HasToBeSigned) filterParam += ` HasToBeSigned: ${filter.HasToBeSigned}`;
|
||||
filterParam += '}';
|
||||
if (Object.keys(filter).length === 0) filterParam = '';
|
||||
|
||||
@ -26,7 +26,9 @@ const useStyles = makeStyles(() => ({
|
||||
},
|
||||
nodataWrapper: {
|
||||
backgroundColor: '#fff',
|
||||
height: '100vh'
|
||||
height: '100vh',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
exploreText: {
|
||||
color: '#C0C0C0',
|
||||
@ -56,16 +58,16 @@ function Explore() {
|
||||
const search = queryParams.get('search');
|
||||
// filtercard filters
|
||||
const [imageFilters, setImageFilters] = useState(false);
|
||||
const [osFilters, setOSFilters] = useState('');
|
||||
const [archFilters, setArchFilters] = useState('');
|
||||
const [osFilters, setOSFilters] = useState([]);
|
||||
const [archFilters, setArchFilters] = useState([]);
|
||||
const abortController = useMemo(() => new AbortController(), []);
|
||||
const classes = useStyles();
|
||||
|
||||
const buildFilterQuery = () => {
|
||||
let filter = {};
|
||||
// workaround until backend bugfix
|
||||
filter = !isEmpty(osFilters) ? { ...filter, Os: osFilters.toLocaleLowerCase() } : filter;
|
||||
filter = !isEmpty(archFilters) ? { ...filter, Arch: archFilters.toLocaleLowerCase() } : filter;
|
||||
filter = !isEmpty(osFilters) ? { ...filter, Os: osFilters } : filter;
|
||||
filter = !isEmpty(archFilters) ? { ...filter, Arch: archFilters } : filter;
|
||||
if (imageFilters) {
|
||||
filter = { ...filter, HasToBeSigned: imageFilters };
|
||||
}
|
||||
@ -152,50 +154,44 @@ function Explore() {
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg">
|
||||
{isLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<Grid container className={classes.gridWrapper}>
|
||||
<Grid container item xs={12}>
|
||||
<Grid item xs={0}></Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" className={classes.resultsRow}>
|
||||
<Typography variant="body2" className={classes.results}>
|
||||
Results {exploreData.length}
|
||||
</Typography>
|
||||
{/* <FormControl sx={{m:'1', minWidth:"4.6875rem"}} className={classes.sortForm} size="small">
|
||||
<Grid container className={classes.gridWrapper}>
|
||||
<Grid container item xs={12}>
|
||||
<Grid item xs={0}></Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" className={classes.resultsRow}>
|
||||
<Typography variant="body2" className={classes.results}>
|
||||
Results {exploreData.length}
|
||||
</Typography>
|
||||
{/* <FormControl sx={{m:'1', minWidth:"4.6875rem"}} className={classes.sortForm} size="small">
|
||||
<InputLabel>Sort</InputLabel>
|
||||
<Select label="Sort" value={sortFilter} onChange={handleSortChange} MenuProps={{disableScrollLock: true}}>
|
||||
<MenuItem value='relevance'>Relevance</MenuItem>
|
||||
</Select>
|
||||
</FormControl> */}
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container item xs={12} spacing={5} pt={1}>
|
||||
<Grid item xs={3}>
|
||||
{renderFilterCards()}
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
{!(exploreData && exploreData.length) ? (
|
||||
<Grid container className={classes.nodataWrapper}>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<div style={{}}>
|
||||
<Alert style={{ marginTop: 10, width: '100%' }} variant="outlined" severity="warning">
|
||||
Looks like we don't have anything matching that search. Try searching something else.
|
||||
</Alert>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
) : (
|
||||
<Stack direction="column" spacing={2}>
|
||||
{renderRepoCards()}
|
||||
</Stack>
|
||||
)}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid container item xs={12} spacing={5} pt={1}>
|
||||
<Grid item xs={3}>
|
||||
{renderFilterCards()}
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
{!(exploreData && exploreData.length) && !isLoading ? (
|
||||
<Grid container className={classes.nodataWrapper}>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<Alert style={{ marginTop: 10, width: '100%' }} variant="outlined" severity="warning">
|
||||
Looks like we don't have anything matching that search. Try searching something else.
|
||||
</Alert>
|
||||
</div>
|
||||
</Grid>
|
||||
) : (
|
||||
<Stack direction="column" spacing={2}>
|
||||
{isLoading ? <Loading /> : renderRepoCards()}
|
||||
</Stack>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Card, CardContent, Checkbox, FormControlLabel, Stack, Typography } from '@mui/material';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
card: {
|
||||
@ -17,28 +17,26 @@ const useStyles = makeStyles(() => ({
|
||||
|
||||
function FilterCard(props) {
|
||||
const classes = useStyles();
|
||||
const { title, filters, updateFilters } = props;
|
||||
const [selectedFilter, setSelectedFilter] = useState(null);
|
||||
const { title, filters, updateFilters, filterValue } = props;
|
||||
// const [selectedFilter, setSelectedFilter] = useState(null);
|
||||
|
||||
const handleFilterClicked = (event, changedFilterLabel, changedFilterValue) => {
|
||||
const { checked } = event.target;
|
||||
|
||||
if (checked) {
|
||||
// updateFilters([...filterValue, changedFilterValue]);
|
||||
if (filters[0]?.type === 'boolean') {
|
||||
updateFilters(checked);
|
||||
} else {
|
||||
updateFilters(changedFilterValue);
|
||||
updateFilters([...filterValue, changedFilterValue]);
|
||||
}
|
||||
setSelectedFilter(changedFilterLabel);
|
||||
// setSelectedFilter(changedFilterLabel);
|
||||
} else {
|
||||
// updateFilters(filterValue.filter((e) => e !== changedFilterValue));
|
||||
if (filters[0]?.type === 'boolean') {
|
||||
updateFilters(checked);
|
||||
} else {
|
||||
updateFilters('');
|
||||
updateFilters(filterValue.filter((e) => e !== changedFilterValue));
|
||||
}
|
||||
setSelectedFilter(null);
|
||||
// setSelectedFilter(null);
|
||||
}
|
||||
};
|
||||
|
||||
@ -52,7 +50,7 @@ function FilterCard(props) {
|
||||
control={<Checkbox />}
|
||||
label={filter.label}
|
||||
id={title}
|
||||
checked={filter.label === selectedFilter}
|
||||
// checked={filter.label === selectedFilter}
|
||||
onChange={() => handleFilterClicked(event, filter.label, filter.value)}
|
||||
/>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user