diff --git a/client/src/pages/affiliationsTab.jsx b/client/src/pages/affiliationsTab.jsx index 484e9cc..69cc606 100644 --- a/client/src/pages/affiliationsTab.jsx +++ b/client/src/pages/affiliationsTab.jsx @@ -6,11 +6,11 @@ import { import PropTypes from 'prop-types'; import { useEffect, useState } from 'react'; -import AffiliationsView from './affiliationsView'; import Gauge from '../components/gauge'; import { status } from '../config'; import { removeDiacritics } from '../utils/strings'; import { renderButtons } from '../utils/works'; +import AffiliationsView from './affiliationsView'; export default function AffiliationsTab({ affiliations, selectedAffiliations, setSelectedAffiliations, tagAffiliations }) { const [filteredAffiliations, setFilteredAffiliations] = useState([]); @@ -43,7 +43,7 @@ export default function AffiliationsTab({ affiliations, selectedAffiliations, se {selectedAffiliations.length} - {`selected affiliation${selectedAffiliations.length === 1 ? '' : 's'}`} + {` selected affiliation${selectedAffiliations.length === 1 ? '' : 's'}`} {renderButtons(selectedAffiliations, tagAffiliations)}
diff --git a/client/src/pages/affiliationsView.jsx b/client/src/pages/affiliationsView.jsx index db27500..e90569e 100644 --- a/client/src/pages/affiliationsView.jsx +++ b/client/src/pages/affiliationsView.jsx @@ -20,9 +20,7 @@ export default function AffiliationsView({ setFilteredAffiliationName, setSelectedAffiliations, }) { - const [filters] = useState({ - status: { value: null, matchMode: FilterMatchMode.IN }, - }); + const [filters] = useState({ status: { matchMode: FilterMatchMode.IN, value: null } }); const [selectionPageOnly, setSelectionPageOnly] = useState(true); const paginatorLeft = () => ( diff --git a/client/src/pages/datasets/results.jsx b/client/src/pages/datasets/results.jsx index 965cebd..b2b26a8 100644 --- a/client/src/pages/datasets/results.jsx +++ b/client/src/pages/datasets/results.jsx @@ -26,7 +26,7 @@ export default function Affiliations() { const { toast } = useToast(); const { data, error, isFetched, isFetching, refetch } = useQuery({ - queryKey: ['datasets', JSON.stringify(options)], + queryKey: ['works', JSON.stringify(options)], queryFn: () => getWorks(options, toast), enabled: false, }); @@ -44,18 +44,22 @@ export default function Affiliations() { const worksIds = _affiliations .map((affiliation) => affiliation.works) .flat(); - data?.publications?.results - ?.filter((publication) => worksIds.includes(publication.id)) - .map((publication) => (publication.status = action)); data?.datasets?.results ?.filter((dataset) => worksIds.includes(dataset.id)) .map((dataset) => (dataset.status = action)); } const affiliationIds = _affiliations.map((affiliation) => affiliation.id); setAffiliations( - _affiliations - ?.filter((affiliation) => affiliationIds.includes(affiliation.id)) - .map((affiliation) => (affiliation.status = action)), + affiliations + .map((affiliation) => { + if (affiliationIds.includes(affiliation.id)) { + return ({ + ...affiliation, + status: action, + }); + } + return affiliation; + }), ); setSelectedAffiliations([]); }; diff --git a/client/src/pages/openalex-affiliations/results/index.jsx b/client/src/pages/openalex-affiliations/results/index.jsx index 98eb128..ec8a397 100644 --- a/client/src/pages/openalex-affiliations/results/index.jsx +++ b/client/src/pages/openalex-affiliations/results/index.jsx @@ -41,15 +41,16 @@ export default function Affiliations() { const [searchParams] = useSearchParams(); const { toast } = useToast(); - const [addList, setAddList] = useState([]); + const [addList, setAddList] = useState([]); // TODO: still used ? const [affiliations, setAffiliations] = useState([]); - const [body, setBody] = useState({}); const [cleanRor, setCleanRor] = useState(''); const [filteredAffiliationName, setFilteredAffiliationName] = useState(''); const [filteredAffiliations, setFilteredAffiliations] = useState([]); const [isLoading, setIsLoading] = useState(false); + const [isLoadingRor, setIsLoadingRor] = useState(false); const [isAddModalOpen, setIsAddModalOpen] = useState(false); const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false); + const [options, setOptions] = useState({}); const [ror, setRor] = useState(''); const [rorMessage, setRorMessage] = useState(''); const [rorMessageType, setRorMessageType] = useState(''); @@ -82,15 +83,15 @@ export default function Affiliations() { ]; const { data, error, isFetched, isFetching, refetch } = useQuery({ - queryKey: ['openalex-affiliations', JSON.stringify(body)], + queryKey: ['works', JSON.stringify(options)], // Search for works from affiliations for each affiliation strictly longer than 2 letters queryFn: () => getWorks( { - ...body, - affiliationStrings: body.affiliations + ...options, + affiliationStrings: options.affiliations .filter((affiliation) => !affiliation.isDisabled) .map((affiliation) => affiliation.label), - rors: body.affiliations + rors: options.affiliations .filter((affiliation) => affiliation.isRor) .map((affiliation) => affiliation.label), }, @@ -174,14 +175,14 @@ export default function Affiliations() { queryParams.deletedAffiliations.push(normalize(item)); } }); - setBody(queryParams); + setOptions(queryParams); }; getData(); }, [searchParams]); useEffect(() => { - if (Object.keys(body).length > 0) refetch(); - }, [body, refetch]); + if (Object.keys(options).length > 0) refetch(); + }, [options, refetch]); useEffect(() => { setAffiliations(data?.affiliations?.filter( @@ -299,8 +300,10 @@ export default function Affiliations() { }; const getCleanRor = async () => { + setIsLoadingRor(true); const cleanRorData = await getRorData(ror); setCleanRor(cleanRorData[0]); + setIsLoadingRor(false); }; const setSelectAffiliations = (affiliationIds) => { @@ -460,10 +463,10 @@ export default function Affiliations() { color="blue-cumulus" key="openalex-affiliations-tag-year-start" > - {`Start: ${body.startYear}`} + {`Start: ${options.startYear}`} - {`End: ${body.endYear}`} + {`End: ${options.endYear}`}
@@ -476,7 +479,7 @@ export default function Affiliations() { Searched affiliations
- {body.affiliations.map((affiliation) => ( + {options.affiliations.map((affiliation) => ( - {(body.excludedRors.length > 0) && ( + {(options.excludedRors.length > 0) && (
@@ -511,7 +514,7 @@ export default function Affiliations() {
- {body.excludedRors.split(' ').map((excludedRor) => ( + {options.excludedRors.split(' ').map((excludedRor) => ( setRor(e.target.value)} value={ror} label="ROR" - hint="Enter a valid ROR id and 'check' it with ROR API" + hint='Enter a valid ROR id and "check" it with ROR API' /> @@ -600,7 +603,7 @@ export default function Affiliations() { - { + {isLoadingRor ? () : ( rorMessageType === 'valid' && cleanRor.rorName && cleanRor.rorCountry && ( <> @@ -616,7 +619,7 @@ export default function Affiliations() { className="fr-mt-3w" color="blue-ecume" disabled={['', 'error'].includes(rorMessageType) || !cleanRor.rorName || !cleanRor.rorCountry} - onClick={() => { addRor(); }} + onClick={() => addRor()} size="sm" title="Add ROR" > @@ -624,7 +627,7 @@ export default function Affiliations() { ) - } + )} @@ -745,16 +748,20 @@ export default function Affiliations() { />
- + {filteredAffiliations.length === 0 ? ( + // TODO replace spinner by skeleton + ) : ( + + )} diff --git a/client/src/pages/openalex-affiliations/results/list-view.jsx b/client/src/pages/openalex-affiliations/results/list-view.jsx index bb24424..10d76de 100644 --- a/client/src/pages/openalex-affiliations/results/list-view.jsx +++ b/client/src/pages/openalex-affiliations/results/list-view.jsx @@ -5,7 +5,6 @@ import { Col, Modal, ModalContent, ModalFooter, ModalTitle, Row, - Spinner, Text, } from '@dataesr/dsfr-plus'; import { Steps } from 'intro.js-react'; @@ -36,9 +35,9 @@ export default function ListView({ const [selectShowAffiliations, setSelectShowAffiliations] = useState('all'); const [selectRorCountry, setSelectRorCountry] = useState('all'); const [sortsAndFilters, setSortsAndFilters] = useState({ - sortOnNumberOfRors: 'default', - showAffiliations: 'all', rorCountry: 'all', + showAffiliations: 'all', + sortOnNumberOfRors: 'default', }); const [sortedOrFilteredAffiliations, setSortedOrFilteredAffiliations] = useState(filteredAffiliations); @@ -113,17 +112,14 @@ export default function ListView({ } else if (sortsAndFilters.sortOnNumberOfRors === 'empty') { initialAffiliations = initialAffiliations.filter((affiliation) => affiliation.rors.length === 0); } - if (sortsAndFilters.showAffiliations === 'onlyWithCorrections') { initialAffiliations = initialAffiliations.filter((affiliation) => affiliation.addList.length > 0 || affiliation.removeList.length > 0); } else if (sortsAndFilters.showAffiliations === 'onlyWithNoCorrection') { initialAffiliations = initialAffiliations.filter((affiliation) => affiliation.addList.length === 0 && affiliation.removeList.length === 0); } - if (sortsAndFilters.rorCountry !== 'all') { initialAffiliations = initialAffiliations.filter((affiliation) => affiliation.rors.some((ror) => ror.rorCountry === sortsAndFilters.rorCountry)); } - setSortedOrFilteredAffiliations(initialAffiliations); setIsLoading(false); }, [filteredAffiliations, sortsAndFilters]); @@ -145,9 +141,7 @@ export default function ListView({ !affiliation.selected) === undefined} - onChange={() => { - setSelectAffiliations(sortedOrFilteredAffiliations.map((affiliation) => affiliation.id)); - }} + onChange={() => setSelectAffiliations(sortedOrFilteredAffiliations.map((affiliation) => affiliation.id))} /> @@ -221,9 +215,9 @@ export default function ListView({ aria-label="Open colors info modal" className="step-affiliations-colors" color="beige-gris-galet" + icon="palette-fill" onClick={() => setIsColorInfoModalOpen((prev) => !prev)} size="sm" - icon="palette-fill" /> setIsColorInfoModalOpen((prev) => !prev)} size="md"> @@ -283,98 +277,94 @@ export default function ListView({ - {isLoading ? ( - - ) : ( -
-
    - { - sortedOrFilteredAffiliations.map((affiliation, index) => ( -
  • - - -
    -
    - setSelectAffiliations([affiliation.id])} - /> -
    - { - (affiliation.hasCorrection) && ( - - ) - } -
    -
    - setSelectAffiliations([affiliation.id])} - style={{ cursor: 'pointer' }} - > -
    - - -
    +
    +
      + { + sortedOrFilteredAffiliations.map((affiliation, index) => ( +
    • + + +
      +
      + setSelectAffiliations([affiliation.id])} + /> +
      + { + (affiliation.hasCorrection) && ( + + ) + }
      - - - - - {affiliation.rorsToCorrect.map((rorToCorrect) => ( - - - - ))} - {affiliation.addList.map((ror) => ( - - - - ))} - -
      - toggleRemovedRor(affiliation.id, rorToCorrect.rorId)} - ror={rorToCorrect} - rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'} - setFilteredAffiliationName={setFilteredAffiliationName} - /> -
      - -
      - removeRorFromAddList(affiliation.id, ror.rorId)} - ror={ror} - rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'} - setFilteredAffiliationName={setFilteredAffiliationName} - /> -
      - - - Added - -
      - - -
      • - )) - } -
    -
    - )} +
    + setSelectAffiliations([affiliation.id])} + style={{ cursor: 'pointer' }} + > +
    + + +
    +
    + + + + + {affiliation.rorsToCorrect.map((rorToCorrect) => ( + + + + ))} + {affiliation.addList.map((ror) => ( + + + + ))} + +
    + toggleRemovedRor(affiliation.id, rorToCorrect.rorId)} + ror={rorToCorrect} + rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'} + setFilteredAffiliationName={setFilteredAffiliationName} + /> +
    + +
    + removeRorFromAddList(affiliation.id, ror.rorId)} + ror={ror} + rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'} + setFilteredAffiliationName={setFilteredAffiliationName} + /> +
    + + + Added + +
    + + +
    • + )) + } +
+
setIsModalOpen((prev) => !prev)} size="md"> Sorts & filters @@ -447,9 +437,9 @@ export default function ListView({