Merge branch 'staging' of https://github.com/dataesr/works-magnet int…

…o staging
dataesr · Dec 13, 2024 · 2739aa8 · 2739aa8
2 parents b04bd9b + b992b85
commit 2739aa8
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 156 deletions.
diff --git 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
           <span className="number">
             {selectedAffiliations.length}
           </span>
-          {`selected affiliation${selectedAffiliations.length === 1 ? '' : 's'}`}
+          {` selected affiliation${selectedAffiliations.length === 1 ? '' : 's'}`}
         </div>
         {renderButtons(selectedAffiliations, tagAffiliations)}
         <div className="text-right">

diff --git 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
@@ -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
@@ -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}`}
                         </Tag>
                         <Tag color="blue-cumulus" key="openalex-affiliations-tag-year-end">
-                          {`End: ${body.endYear}`}
+                          {`End: ${options.endYear}`}
                         </Tag>
                       </div>
                     </Col>
@@ -476,7 +479,7 @@ export default function Affiliations() {
                         Searched affiliations
                       </div>
                       <div className="wm-content">
-                        {body.affiliations.map((affiliation) => (
+                        {options.affiliations.map((affiliation) => (
                           <Row key={`openalex-affiliations-search-${affiliation.label}`}>
                             <Tag
                               className={`fr-mr-1w ${affiliation.isDisabled ? 'scratched' : ''
@@ -501,7 +504,7 @@ export default function Affiliations() {
                       </div>
                     </Col>
                   </Row>
-                  {(body.excludedRors.length > 0) && (
+                  {(options.excludedRors.length > 0) && (
                     <Row>
                       <Col>
                         <div className="wm-title">
@@ -511,7 +514,7 @@ export default function Affiliations() {
                           </span>
                         </div>
                         <div className="wm-content">
-                          {body.excludedRors.split(' ').map((excludedRor) => (
+                          {options.excludedRors.split(' ').map((excludedRor) => (
                             <Tag
                               className="fr-mr-1w"
                               color="green-archipel"
@@ -582,7 +585,7 @@ export default function Affiliations() {
                                   onChange={(e) => 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'
                                 />
                               </Col>
                               <Col md="3">
@@ -600,7 +603,7 @@ export default function Affiliations() {
                             </Row>
                             <Row>
                               <Col>
-                                {
+                                {isLoadingRor ? (<Spinner size={48} />) : (
                                   rorMessageType === 'valid' && cleanRor.rorName && cleanRor.rorCountry
                                   && (
                                     <>
@@ -616,15 +619,15 @@ 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"
                                       >
                                         Add this ROR to selected affiliations
                                       </Button>
                                     </>
                                   )
-                                }
+                                )}
                               </Col>
                             </Row>
                           </Container>
@@ -745,16 +748,20 @@ export default function Affiliations() {
                       />
                     </div>
                   </div>
-                  <ListView
-                    affiliationsCount={affiliations.length}
-                    filteredAffiliations={filteredAffiliations}
-                    removeRorFromAddList={removeRorFromAddList}
-                    setFilteredAffiliationName={setFilteredAffiliationName}
-                    setSelectAffiliations={setSelectAffiliations}
-                    setStepsEnabledList={setStepsEnabledList}
-                    stepsEnabledList={stepsEnabledList}
-                    toggleRemovedRor={toggleRemovedRor}
-                  />
+                  {filteredAffiliations.length === 0 ? (
+                    <Spinner size={48} /> // TODO replace spinner by skeleton
+                  ) : (
+                    <ListView
+                      affiliationsCount={affiliations.length}
+                      filteredAffiliations={filteredAffiliations}
+                      removeRorFromAddList={removeRorFromAddList}
+                      setFilteredAffiliationName={setFilteredAffiliationName}
+                      setSelectAffiliations={setSelectAffiliations}
+                      setStepsEnabledList={setStepsEnabledList}
+                      stepsEnabledList={stepsEnabledList}
+                      toggleRemovedRor={toggleRemovedRor}
+                    />
+                  )}
                 </div>
               </Col>
             </Row>