From b3c2530ee71d20157dd58648a8f6b916ebfcb9d2 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 21 Jun 2021 13:21:12 -0300
Subject: [PATCH] fixing search page
---
.../SearchEPCompCurriculum.js | 118 ++++-------
.../SearchExpansionPanel/SearchEPIdiomas.js | 104 ++++------
.../SearchExpansionPanel/SearchEPTiposRec.js | 109 ++++------
.../SearchExpansionPanel.js | 24 ++-
.../SearchExpansionPanel/SesrchEPEtapasEns.js | 99 ++++-----
.../SearchPageComponents/FilterSummary.js | 28 +--
.../SearchPageComponents/filters.js | 74 +++++++
src/Pages/Search.js | 194 +++++++++++++++---
8 files changed, 429 insertions(+), 321 deletions(-)
create mode 100644 src/Components/SearchPageComponents/filters.js
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
index 8d5e2312..43941d03 100644
--- a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -17,89 +17,45 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPCompCurriculum(props) {
+export default function SearchEPCompCurriculum({ onChange, curriculumComponents, setCurriculum }) {
const classes = useStyles();
- const [checked, setChecked] = React.useState([]);
- const [checkedWithLabel, setCheckedWithLabel] = React.useState([]);
- const handleToggle = (value, label) => () => {
- const currentIndex = checked.indexOf(value);
- const newChecked = [...checked];
- const newCheckedWithLabel = [...checkedWithLabel];
-
- if (currentIndex === -1) {
- newChecked.push(value);
- newCheckedWithLabel.push({
- label: label,
- value: value,
- });
- } else {
- newChecked.splice(currentIndex, 1);
- newCheckedWithLabel.splice(currentIndex, 1);
- }
-
- setChecked(newChecked);
- setCheckedWithLabel(newCheckedWithLabel)
-
- props.onChange("curriculum", newCheckedWithLabel)
+ const handleToggle = (index) => () => {
+ const newCurriculumComponents = [...curriculumComponents];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setCurriculum(newCurriculumComponents);
};
- const filtrosComponente = [
- { exemplo: "Arte", value: "3" },
- { exemplo: "Biologia", value: "5" },
- { exemplo: "Ciências da Natureza", value: "6" },
- { exemplo: "Direitos Humanos", value: "20" },
- { exemplo: "Educação Ambiental", value: "21" },
- { exemplo: "Educação do Campo", value: "22" },
- { exemplo: "Educação Especial", value: "23" },
- { exemplo: "Educação FÃsica", value: "7" },
- { exemplo: "Educação IndÃgena", value: "24" },
- { exemplo: "Educação Quilombola", value: "25" },
- { exemplo: "Educação Sexual", value: "26" },
- { exemplo: "Ensino Religioso", value: "16" },
- { exemplo: "Filosofia", value: "8" },
- { exemplo: "FÃsica", value: "9" },
- { exemplo: "Geografia", value: "10" },
- { exemplo: "História", value: "11" },
- { exemplo: "Informática", value: "18" },
- { exemplo: "LÃngua Espanhola", value: "1" },
- { exemplo: "LÃngua Inglesa", value: "2" },
- { exemplo: "LÃngua Portuguesa", value: "4" },
- { exemplo: "Matemática", value: "12" },
- { exemplo: "Outras LÃnguas", value: "15" },
- { exemplo: "Outros", value: "17" },
- { exemplo: "QuÃmica", value: "13" },
- { exemplo: "Sociologia", value: "14" }
- ];
-
- return (
- <List className={classes.root}>
- {filtrosComponente.map(item => {
- const labelId = `checkbox-list-label-${item.value}`;
- return (
- <ListItem
- key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(item.value, item.exemplo)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={checked.indexOf(item.value) !== -1}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ if (curriculumComponents)
+ return (
+ <List className={classes.root}>
+ {curriculumComponents.map((item, index) => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(index)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={item.isChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
index 94b36f12..06715e46 100644
--- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -17,75 +17,45 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPIdiomas(props) {
+export default function SearchEPIdiomas({ languages, setLanguages }) {
const classes = useStyles();
- const [checked, setChecked] = React.useState([]);
- const [checkedWithLabel, setCheckedWithLabel] = React.useState([]);
- const handleToggle = (value, label) => () => {
- const currentIndex = checked.indexOf(value);
- const newChecked = [...checked];
- const newCheckedWithLabel = [...checkedWithLabel];
-
- if (currentIndex === -1) {
- newChecked.push(value);
- newCheckedWithLabel.push({
- label: label,
- value: value,
- });
- } else {
- newChecked.splice(currentIndex, 1);
- newCheckedWithLabel.splice(currentIndex, 1);
- }
-
- setChecked(newChecked);
- setCheckedWithLabel(newCheckedWithLabel)
-
- props.onChange("languages", newCheckedWithLabel)
+ const handleToggle = (index) => () => {
+ const newLanguages = [...languages];
+ newLanguages[index].isChecked = !newLanguages[index].isChecked
+ setLanguages(newLanguages);
};
- const filtrosIdiomas = [
- { value: "5", exemplo: "Alemão" },
- { value: "3", exemplo: "Espanhol" },
- { value: "4", exemplo: "Francês" },
- { value: "2", exemplo: "Inglês" },
- { value: "6", exemplo: "Italiano" },
- { value: "9", exemplo: "Japonês" },
- { value: "19", exemplo: "LIBRAS" },
- { value: "7", exemplo: "Mandarim" },
- { value: "10", exemplo: "Outro" },
- { value: "1", exemplo: "Português" },
- { value: "8", exemplo: "Russo" }
- ];
-
- return (
- <List className={classes.root}>
- {filtrosIdiomas.map(item => {
- const labelId = `checkbox-list-label-${item.value}`;
- return (
- <ListItem
- key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(item.value, item.exemplo)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={checked.indexOf(item.value) !== -1}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ if (languages)
+ return (
+ <List className={classes.root}>
+ {languages.map((item, index) => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(index)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={item.isChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
index 85c4a0bc..41b77adf 100644
--- a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -17,80 +17,45 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPTiposRec(props) {
+export default function SearchEPCompCurriculum({ onChange, typeOfResources, setTypeRes }) {
const classes = useStyles();
- const [checked, setChecked] = React.useState([]);
- const [checkedWithLabel, setCheckedWithLabel] = React.useState([]);
- const handleToggle = (value, label) => () => {
- const currentIndex = checked.indexOf(value);
- const newChecked = [...checked];
- const newCheckedWithLabel = [...checkedWithLabel];
-
- if (currentIndex === -1) {
- newChecked.push(value);
- newCheckedWithLabel.push({
- label: label,
- value: value,
- });
- } else {
- newChecked.splice(currentIndex, 1);
- newCheckedWithLabel.splice(currentIndex, 1);
- }
-
- setChecked(newChecked);
- setCheckedWithLabel(newCheckedWithLabel)
-
- props.onChange("types", newCheckedWithLabel)
+ const handleToggle = (index) => () => {
+ const newTypeOfRes = [...typeOfResources];
+ newTypeOfRes[index].isChecked = !newTypeOfRes[index].isChecked
+ setTypeRes(newTypeOfRes);
};
- const filtrosTipos = [
- { value: "5", exemplo: "Animação" },
- { value: "20", exemplo: "Aplicativo móvel" },
- { value: "17", exemplo: "Apresentação" },
- { value: "7", exemplo: "Ãudio" },
- { value: "4", exemplo: "Experimento prático" },
- { value: "1", exemplo: "Imagem" },
- { value: "18", exemplo: "Infográfico" },
- { value: "19", exemplo: "Jogo" },
- { value: "21", exemplo: "Livro digital" },
- { value: "2", exemplo: "Mapa" },
- { value: "15", exemplo: "Outros" },
- { value: "3", exemplo: "Software Educacional" },
- { value: "6", exemplo: "Texto" },
- { value: "8", exemplo: "VÃdeo" },
- { value: "13", exemplo: "Website externo" },
- { value: "22", exemplo: "Plano de Aula" },
- ];
-
- return (
- <List className={classes.root}>
- {filtrosTipos.map(item => {
- const labelId = `checkbox-list-label-${item.value}`;
- return (
- <ListItem
- key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(item.value, item.exemplo)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={checked.indexOf(item.value) !== -1}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ if (typeOfResources)
+ return (
+ <List className={classes.root}>
+ {typeOfResources.map((item, index) => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(index)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={item.isChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
}
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index 7d8e07d1..677d24d4 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -147,7 +147,11 @@ export default function SearchExpansionPanel(props) {
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<div>
- <SearchEPCompCurriculum onChange={props.onChange} />
+ <SearchEPCompCurriculum
+ onChange={props.onChange}
+ curriculumComponents={props.curriculumComponents}
+ setCurriculum={props.setCurriculum}
+ />
</div>
</ExpansionPanelDetails>
</ExpansionPanel>
@@ -161,7 +165,11 @@ export default function SearchExpansionPanel(props) {
<Typography>Tipos de Recurso</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPTiposRec onChange={props.onChange} />
+ <SearchEPTiposRec
+ onChange={props.onChange}
+ typeOfResources={props.typeOfResources}
+ setTypeRes={props.setTypeRes}
+ />
</ExpansionPanelDetails>
</ExpansionPanel>
@@ -174,7 +182,11 @@ export default function SearchExpansionPanel(props) {
<Typography>Etapas de Ensino</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPEtapasEns onChange={props.onChange} />
+ <SearchEPEtapasEns
+ onChange={props.onChange}
+ teachingStage={props.teachingStage}
+ setTeachingStage={props.setTeachingStage}
+ />
</ExpansionPanelDetails>
</ExpansionPanel>
@@ -187,7 +199,11 @@ export default function SearchExpansionPanel(props) {
<Typography>Idiomas</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <SearchEPIdiomas onChange={props.onChange} />
+ <SearchEPIdiomas
+ onChange={props.onChange}
+ languages={props.languages}
+ setLanguages={props.setLanguages}
+ />
</ExpansionPanelDetails>
</ExpansionPanel>
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
index 5848efe7..632009ae 100644
--- a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -17,70 +17,45 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function SearchEPEtapasEns(props) {
+export default function SearchEPEtapasEns({ teachingStage, setTeachingStage }) {
const classes = useStyles();
- const [checked, setChecked] = React.useState([]);
- const [checkedWithLabel, setCheckedWithLabel] = React.useState([]);
- const handleToggle = (value, label) => () => {
- const currentIndex = checked.indexOf(value);
- const newChecked = [...checked];
- const newCheckedWithLabel = [...checkedWithLabel];
-
- if (currentIndex === -1) {
- newChecked.push(value);
- newCheckedWithLabel.push({
- label: label,
- value: value,
- });
- } else {
- newChecked.splice(currentIndex, 1);
- newCheckedWithLabel.splice(currentIndex, 1);
- }
-
- setChecked(newChecked);
- setCheckedWithLabel(newCheckedWithLabel)
-
- props.onChange("stages", newCheckedWithLabel)
+ const handleToggle = (index) => () => {
+ const newTypeTeachingStage = [...teachingStage];
+ newTypeTeachingStage[index].isChecked = !newTypeTeachingStage[index].isChecked
+ setTeachingStage(newTypeTeachingStage);
};
- const filtrosEtapas = [
- { value: "1", exemplo: "Educação Infantil" },
- { value: "2", exemplo: "Ensino Fundamental I (1º até o 5º ano )" },
- { value: "3", exemplo: "Ensino Fundamental II (do 6º até o 9º ano)" },
- { value: "4", exemplo: "Ensino Médio" },
- { value: "5", exemplo: "Ensino Superior" },
- { value: "6", exemplo: "Outros" }
- ];
-
- return (
- <List className={classes.root}>
- {filtrosEtapas.map(item => {
- const labelId = `checkbox-list-label-${item.value}`;
- return (
- <ListItem
- key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(item.value, item.exemplo)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={checked.indexOf(item.value) !== -1}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ if (teachingStage)
+ return (
+ <List className={classes.root}>
+ {teachingStage.map((item, index) => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(index)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={item.isChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
}
diff --git a/src/Components/SearchPageComponents/FilterSummary.js b/src/Components/SearchPageComponents/FilterSummary.js
index 3b67e58f..51578277 100644
--- a/src/Components/SearchPageComponents/FilterSummary.js
+++ b/src/Components/SearchPageComponents/FilterSummary.js
@@ -23,9 +23,10 @@ export default function FilterSummary
<Grid item>
{
curriculumComponents.map((item) => {
- return (
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.label} />
- )
+ if (item.isChecked)
+ return (
+ <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
})
}
</Grid>
@@ -53,9 +54,10 @@ export default function FilterSummary
<Grid item>
{
typeOfResources.map((item) => {
- return (
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.label} />
- )
+ if (item.isChecked)
+ return (
+ <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ )
})
}
</Grid>
@@ -83,9 +85,10 @@ export default function FilterSummary
<Grid item>
{
teachingStage.map((item) => {
- return (
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.label} />
- )
+ if (item.isChecked)
+ return (
+ <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ )
})
}
</Grid>
@@ -113,9 +116,10 @@ export default function FilterSummary
<Grid item>
{
languages.map((item) => {
- return (
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.label} />
- )
+ if (item.isChecked)
+ return (
+ <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ )
})
}
</Grid>
diff --git a/src/Components/SearchPageComponents/filters.js b/src/Components/SearchPageComponents/filters.js
new file mode 100644
index 00000000..822ea5cd
--- /dev/null
+++ b/src/Components/SearchPageComponents/filters.js
@@ -0,0 +1,74 @@
+const filtersCurriculum = [
+ { exemplo: "Arte", value: "3", isChecked: false },
+ { exemplo: "Biologia", value: "5", isChecked: false },
+ { exemplo: "Ciências da Natureza", value: "6", isChecked: false },
+ { exemplo: "Direitos Humanos", value: "20", isChecked: false },
+ { exemplo: "Educação Ambiental", value: "21", isChecked: false },
+ { exemplo: "Educação do Campo", value: "22", isChecked: false },
+ { exemplo: "Educação Especial", value: "23", isChecked: false },
+ { exemplo: "Educação FÃsica", value: "7", isChecked: false },
+ { exemplo: "Educação IndÃgena", value: "24", isChecked: false },
+ { exemplo: "Educação Quilombola", value: "25", isChecked: false },
+ { exemplo: "Educação Sexual", value: "26", isChecked: false },
+ { exemplo: "Ensino Religioso", value: "16", isChecked: false },
+ { exemplo: "Filosofia", value: "8", isChecked: false },
+ { exemplo: "FÃsica", value: "9", isChecked: false },
+ { exemplo: "Geografia", value: "10", isChecked: false },
+ { exemplo: "História", value: "11", isChecked: false },
+ { exemplo: "Informática", value: "18", isChecked: false },
+ { exemplo: "LÃngua Espanhola", value: "1", isChecked: false },
+ { exemplo: "LÃngua Inglesa", value: "2", isChecked: false },
+ { exemplo: "LÃngua Portuguesa", value: "4", isChecked: false },
+ { exemplo: "Matemática", value: "12", isChecked: false },
+ { exemplo: "Outras LÃnguas", value: "15", isChecked: false },
+ { exemplo: "Outros", value: "17", isChecked: false },
+ { exemplo: "QuÃmica", value: "13", isChecked: false },
+ { exemplo: "Sociologia", value: "14", isChecked: false }
+];
+
+const filtersTypes = [
+ { value: "5", exemplo: "Animação", isChecked: false },
+ { value: "20", exemplo: "Aplicativo móvel", isChecked: false },
+ { value: "17", exemplo: "Apresentação", isChecked: false },
+ { value: "7", exemplo: "Ãudio", isChecked: false },
+ { value: "4", exemplo: "Experimento prático", isChecked: false },
+ { value: "1", exemplo: "Imagem", isChecked: false },
+ { value: "18", exemplo: "Infográfico", isChecked: false },
+ { value: "19", exemplo: "Jogo", isChecked: false },
+ { value: "21", exemplo: "Livro digital", isChecked: false },
+ { value: "2", exemplo: "Mapa", isChecked: false },
+ { value: "15", exemplo: "Outros", isChecked: false },
+ { value: "3", exemplo: "Software Educacional", isChecked: false },
+ { value: "6", exemplo: "Texto", isChecked: false },
+ { value: "8", exemplo: "VÃdeo", isChecked: false },
+ { value: "13", exemplo: "Website externo", isChecked: false },
+ { value: "22", exemplo: "Plano de Aula", isChecked: false },
+];
+
+const filtersStages = [
+ { value: "1", exemplo: "Educação Infantil", isChecked: false },
+ { value: "2", exemplo: "Ensino Fundamental I (1º até o 5º ano )", isChecked: false },
+ { value: "3", exemplo: "Ensino Fundamental II (do 6º até o 9º ano)", isChecked: false },
+ { value: "4", exemplo: "Ensino Médio", isChecked: false },
+ { value: "5", exemplo: "Ensino Superior", isChecked: false },
+ { value: "6", exemplo: "Outros", isChecked: false }
+];
+
+const filtersLanguages = [
+ { value: "5", exemplo: "Alemão", isChecked: false },
+ { value: "3", exemplo: "Espanhol", isChecked: false },
+ { value: "4", exemplo: "Francês", isChecked: false },
+ { value: "2", exemplo: "Inglês", isChecked: false },
+ { value: "6", exemplo: "Italiano", isChecked: false },
+ { value: "9", exemplo: "Japonês", isChecked: false },
+ { value: "19", exemplo: "LIBRAS", isChecked: false },
+ { value: "7", exemplo: "Mandarim", isChecked: false },
+ { value: "10", exemplo: "Outro", isChecked: false },
+ { value: "1", exemplo: "Português", isChecked: false },
+ { value: "8", exemplo: "Russo", isChecked: false }
+];
+
+export { filtersCurriculum };
+export { filtersTypes };
+export { filtersStages };
+export { filtersLanguages };
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index d58b73a7..f6f49d2c 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -29,6 +29,7 @@ import { getRequest } from '../Components/HelperFunctions/getAxiosConfig';
import { useHistory } from 'react-router-dom';
import SearchExpansionPanel from '../Components/SearchExpansionPanel/SearchExpansionPanel';
import FilterSummary from '../Components/SearchPageComponents/FilterSummary';
+import { filtersCurriculum, filtersTypes, filtersStages, filtersLanguages } from '../Components/SearchPageComponents/filters';
export default function Search() {
const history = useHistory();
@@ -37,8 +38,14 @@ export default function Search() {
const [currOrder, serCurrOrder] = useState('review_average');
const [currQuery, setCurrQuery] = useState('');
const [currPage, setCurrPage] = useState(0);
+ const [currCurriculumValues, setCurrCurriculumValues] = useState('');
+ const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
+ const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
+ const [currLanguagesValues, setCurrLanguagesValues] = useState('');
+ const [currTag, setCurrTag] = useState('');
const [isLoading, setIsLoading] = useState(false);
+
const [curriculumComponents, setCurriculumComponents] = useState([]);
const [typeOfResources, setTypeOfResources] = useState([]);
const [teachingStage, setTeachingStage] = useState([]);
@@ -59,6 +66,7 @@ export default function Search() {
{ value: 'Coleções', name: 'Collection', color: '#673ab7' },
{ value: 'Usuários', name: 'User', color: '#00bcd4' },
];
+
const orders = [
{ value: 'Mais Estrelas', name: 'review_average' },
{ value: 'Mais Relevante', name: 'score' },
@@ -77,26 +85,31 @@ export default function Search() {
for (let index = 0; index < curriculumComponents.length; index++) {
const element = curriculumComponents[index];
- curriculumValues.push(element.value);
+ if (element.isChecked)
+ curriculumValues.push(element.value);
}
for (let index = 0; index < typeOfResources.length; index++) {
const element = typeOfResources[index];
- typeOfResourcesValues.push(element.value);
+ if (element.isChecked)
+ typeOfResourcesValues.push(element.value);
}
for (let index = 0; index < teachingStage.length; index++) {
const element = teachingStage[index];
- teachingStageValues.push(element.value);
+ if (element.isChecked)
+ teachingStageValues.push(element.value);
}
for (let index = 0; index < languages.length; index++) {
const element = languages[index];
- languagesValues.push(element.value);
+ if (element.isChecked)
+ languagesValues.push(element.value);
}
+
tagsValue.push(tag)
- const url = `/busca?page=0&results_per_page=12&order=${currOrder}&query=${currQuery}&search_class=${currOption}&subjects=${curriculumValues}&object_types=${typeOfResourcesValues}&educational_stages=${teachingStageValues}&languages=${languagesValues}&tags=${tagsValue}`
+ const url = `/busca?page=0&results_per_page=12&order=${currOrder}&query=${currQuery}&search_class=${currOption}&subjects=${curriculumValues}&object_types=${typeOfResourcesValues}&educational_stages=${teachingStageValues}&languages=${languagesValues}&tags=${tagsValue}`
history.push(url)
}
@@ -124,7 +137,6 @@ export default function Search() {
function handleChangeOption(e) {
const value = e.target.value;
- setCurrOption(value);
let url;
if (value !== 'User')
@@ -137,27 +149,80 @@ export default function Search() {
function handleChangeOrder(e) {
const value = e.target.value;
- serCurrOrder(value);
-
- let url;
-
- if (currOption !== 'User')
- url = `/busca?page=0&results_per_page=12&order=${value}&query=${currQuery}&search_class=${currOption}`
- else
- url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${value}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
+ }
history.push(url);
}
function handleNextPage() {
const nextPage = currPage + 1;
- const url = `/busca?page=${nextPage}&results_per_page=12&order=${currOrder}&query=${currQuery}&search_class=${currOption}`
+ let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
+ }
history.push(url);
}
function handlePreviousPage() {
const previousPage = currPage - 1;
- const url = `/busca?page=${previousPage}&results_per_page=12&order=${currOrder}&query=${currQuery}&search_class=${currOption}`
+ let url = `/search?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
+ }
history.push(url);
}
@@ -187,6 +252,66 @@ export default function Search() {
setIsLoading(false);
}
+ function handleSubjects(subjectsString) {
+ if (subjectsString) {
+ const selectedSubjects = subjectsString.split(',');
+
+ for (let i = 0; i < selectedSubjects.length; i++) {
+ const elementOfSelectedSubs = selectedSubjects[i];
+ for (let j = 0; j < filtersCurriculum.length; j++) {
+ if (elementOfSelectedSubs === filtersCurriculum[j].value)
+ filtersCurriculum[j].isChecked = true;
+ }
+ }
+ }
+ setCurriculumComponents(filtersCurriculum);
+ }
+
+ function handleObjectTypes(objectTypesString) {
+ if (objectTypesString) {
+ const selectedObjectTypes = objectTypesString.split(',');
+
+ for (let i = 0; i < selectedObjectTypes.length; i++) {
+ const elementOfSelectedObjectTypes = selectedObjectTypes[i];
+ for (let j = 0; j < filtersTypes.length; j++) {
+ if (elementOfSelectedObjectTypes === filtersTypes[j].value)
+ filtersTypes[j].isChecked = true;
+ }
+ }
+ }
+ setTypeOfResources(filtersTypes);
+ }
+
+ function handleLanguages(languagesString) {
+ if (languagesString) {
+ const selectedLanguages = languagesString.split(',');
+
+ for (let i = 0; i < selectedLanguages.length; i++) {
+ const elementOfSelectedLanguages = selectedLanguages[i];
+ for (let j = 0; j < filtersLanguages.length; j++) {
+ if (elementOfSelectedLanguages === filtersLanguages[j].value)
+ filtersLanguages[j].isChecked = true;
+ }
+ }
+ }
+ setLanguages(filtersLanguages);
+ }
+
+ function handleStages(stagesString) {
+ if (stagesString) {
+ const selectedStages = stagesString.split(',');
+
+ for (let i = 0; i < selectedStages.length; i++) {
+ const elementOfSelectedStages = selectedStages[i];
+ for (let j = 0; j < filtersStages.length; j++) {
+ if (elementOfSelectedStages === filtersStages[j].value)
+ filtersStages[j].isChecked = true;
+ }
+ }
+ }
+ setTeachingStage(filtersStages);
+ }
+
useEffect(() => {
setIsLoading(true)
@@ -201,26 +326,38 @@ export default function Search() {
const languages = urlParams.get("languages");
const tags = urlParams.get("tags");
- console.log(subjects)
-
setCurrOption(searchClass);
setCurrQuery(query);
setCurrPage(page);
serCurrOrder(order);
+ setCurrCurriculumValues(subjects);
+ setCurrLanguagesValues(languages);
+ setCurrTeachingStageValues(educationalStages);
+ setCurrTypeOfResValues(objectTypes);
+ setCurrTag(tags);
+
+ handleSubjects(subjects);
+ handleObjectTypes(objectTypes);
+ handleStages(educationalStages);
+ handleLanguages(languages);
let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
if (searchClass !== 'User') {
url = url + `&order=${order}`
if (searchClass === 'LearningObject') {
- if (subjects)
+ if (subjects) {
url = url + `&subjects[]=${subjects}`
- if (objectTypes)
+ }
+ if (objectTypes) {
url = url + `&object_types[]=${objectTypes}`
- if (educationalStages)
+ }
+ if (educationalStages) {
url = url + `&educational_stages[]=${educationalStages}`
- if (languages)
+ }
+ if (languages) {
url = url + `&languages[]=${languages}`
+ }
if (tags)
url = url + `&tags[]=${tags}`
}
@@ -231,6 +368,7 @@ export default function Search() {
(data, headers) => { handleSuccess(data, headers, searchClass) },
handleFail,
);
+
}, [window.history.state === null ? true : window.history.state.key])
return (
@@ -250,7 +388,17 @@ export default function Search() {
{
currOption === 'LearningObject' &&
<Fragment>
- <SearchExpansionPanel onChange={onChangeFilter} />
+ <SearchExpansionPanel
+ onChange={onChangeFilter}
+ curriculumComponents={curriculumComponents}
+ setCurriculum={(array) => { setCurriculumComponents(array) }}
+ typeOfResources={typeOfResources}
+ setTypeRes={(array) => { setTypeOfResources(array) }}
+ teachingStage={teachingStage}
+ setTeachingStage={(array) => { setTeachingStage(array) }}
+ languages={languages}
+ setLanguages={(array) => { setLanguages(array) }}
+ />
{
<FilterSummary
curriculumComponents={curriculumComponents}
--
GitLab