diff --git a/client/src/components/tag-input/index.jsx b/client/src/components/tag-input/index.jsx index 60a9e52e..edc7db97 100644 --- a/client/src/components/tag-input/index.jsx +++ b/client/src/components/tag-input/index.jsx @@ -22,7 +22,7 @@ export default function TagInput({ setInput(''); return; } - const newValues = [...values, { color: 'brown-cafe-creme', label: input.trim() }]; + const newValues = [...values, { label: input.trim(), source: 'user' }]; setValues(newValues); setInput(''); onTagsChange(newValues); @@ -69,8 +69,7 @@ export default function TagInput({ {values.map((tag) => ( handleDeleteClick(tag)} > diff --git a/client/src/pages/filters.jsx b/client/src/pages/filters.jsx index 7ffa947a..612d5e72 100644 --- a/client/src/pages/filters.jsx +++ b/client/src/pages/filters.jsx @@ -25,30 +25,38 @@ export default function Filters({ sendQuery }) { const [tags, setTags] = useState([]); useEffect(() => { - if (searchParams.size === 0) { - setSearchParams({ - affiliations: [], - datasets: false, - endYear: '2021', - startYear: '2021', - }); - } else { - setCurrentSearchParams({ - affiliations: searchParams.getAll('affiliations'), - datasets: searchParams.get('datasets') === 'true', - endYear: searchParams.get('endYear'), - startYear: searchParams.get('startYear'), - }); - setTags(searchParams.getAll('affiliations').map((affiliation) => ({ color: 'brown-cafe-creme', label: affiliation }))); - } + const getData = async () => { + if (searchParams.size === 0) { + setSearchParams({ + affiliations: [], + datasets: false, + endYear: '2021', + startYear: '2021', + }); + setTags([]); + } else { + setCurrentSearchParams({ + affiliations: searchParams.getAll('affiliations'), + datasets: searchParams.get('datasets') === 'true', + endYear: searchParams.get('endYear'), + startYear: searchParams.get('startYear'), + }); + const affiliations = searchParams.getAll('affiliations'); + const queries = affiliations.map((affiliation) => getRorNames(affiliation)); + const rorNames = await Promise.all(queries); + let allTags = [ + ...affiliations.map((affiliation) => ({ label: affiliation, source: 'user' })), + ...rorNames.flat().map((name) => ({ label: name, source: 'ror' })), + ]; + allTags = [...new Map(allTags.map((v) => [v.label.toLowerCase(), v])).values()]; + setTags(allTags); + } + }; + getData(); }, [searchParams, setSearchParams]); const onTagsChange = async (affiliations) => { - const queries = affiliations.map((affiliation) => getRorNames(affiliation.label)); - let allNames = await Promise.all(queries); - allNames = [...affiliations.map((affiliation) => affiliation.label), ...allNames.flat()]; - allNames = [...new Set(allNames.map((name) => name.toLowerCase()))]; - setSearchParams({ ...currentSearchParams, affiliations: allNames }); + setSearchParams({ ...currentSearchParams, affiliations: affiliations.filter((affiliation) => affiliation.source === 'user').map((affiliation) => affiliation.label) }); }; const checkAndSendQuery = () => {