feat(openalex): Add toggle functionality for removing RORs and update…

… affiliation selection handling. Manage state in affiliation object
dataesr · Nov 27, 2024 · 3adeecc · 3adeecc
1 parent 004a844
commit 3adeecc
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 35 deletions.
diff --git a/client/src/pages/openalex-ror/components/ror-badge_old.jsx b/client/src/pages/openalex-ror/components/ror-badge_old.jsx
@@ -1,7 +1,7 @@
 import { Link } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';
 
-export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, rorColor }) {
+export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, rorColor, toggleRemovedRor }) {
   return (
     <div className="wm-ror-badge">
       <span style={{ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`) }} />
@@ -31,6 +31,25 @@ export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, r
         title="Filter on this ROR"
         type="button"
       />
+      {
+        isRemoved ? (
+          <button
+            aria-label="Filter on this ROR"
+            className="fr-icon fr-fi-arrow-go-back-line fr-icon--sm"
+            onClick={() => { toggleRemovedRor(); }}
+            title="Undo remove"
+            type="button"
+          />
+        ) : (
+          <button
+            aria-label="Filter on this ROR"
+            className="fr-icon fr-fi-delete-line fr-icon--sm"
+            onClick={() => { toggleRemovedRor(); }}
+            title="Remove this ROR"
+            type="button"
+          />
+        )
+      }
     </div>
   );
 }
@@ -45,5 +64,5 @@ RorBadge.propTypes = {
     rorId: PropTypes.string.isRequired,
   }).isRequired,
   rorColor: PropTypes.string.isRequired,
-  setFilteredAffiliationName: PropTypes.func.isRequired,
+  toggleRemovedRor: PropTypes.func.isRequired,
 };
diff --git a/client/src/pages/openalex-ror/results/index.jsx b/client/src/pages/openalex-ror/results/index.jsx
@@ -149,8 +149,6 @@ export default function Affiliations() {
 
   useEffect(() => {
     const get = async () => {
-      console.log('before get');
-
       setIsLoadingRorData(true);
       const addedRors = await Promise.all(
         addList.map((add) => getRorData(add)),
@@ -232,7 +230,12 @@ export default function Affiliations() {
   useEffect(() => {
     setAffiliations(data?.affiliations?.filter(
       (affiliation) => affiliation.source === 'OpenAlex',
-    ) ?? []);
+    ).map((affiliation) => ({
+      ...affiliation,
+      addList: [],
+      removeList: [],
+      selected: false,
+    })) ?? []);
   }, [data]);
 
   useEffect(() => {
@@ -269,9 +272,30 @@ export default function Affiliations() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ror]);
 
-  console.log('uniqueRors', uniqueRors);
-  console.log('selectedOpenAlex', selectedOpenAlex);
-  console.log('addList', addList);
+  const toggleRemovedRor = (affiliationId, rorId) => {
+    const updatedAffiliations = affiliations.map((affiliation) => {
+      if (affiliation.id === affiliationId) {
+        return { ...affiliation, removeList: affiliation.removeList.includes(rorId) ? affiliation.removeList.filter((item) => item !== rorId) : [...affiliation.removeList, rorId] };
+      }
+      return affiliation;
+    });
+    setAffiliations(updatedAffiliations);
+  };
+
+  const addRor = (affiliationId, rorObject) => {
+    console.log('addRor', affiliationId, rorObject);
+  };
+
+  // toggle the selection of an affiliation
+  const setSelectAffiliations = (affiliationIds) => {
+    const updatedAffiliations = affiliations.map((affiliation) => {
+      if (affiliationIds.includes(affiliation.id)) {
+        return { ...affiliation, selected: !affiliation.selected };
+      }
+      return affiliation;
+    });
+    setAffiliations(updatedAffiliations);
+  };
 
   return (
     <>
@@ -651,6 +675,8 @@ export default function Affiliations() {
                   setFilteredAffiliationName={setFilteredAffiliationName}
                   setSelectedOpenAlex={setSelectedOpenAlex}
                   undo={undo}
+                  toggleRemovedRor={toggleRemovedRor}
+                  setSelectAffiliations={setSelectAffiliations}
                 />
               </div>
             </Col>

diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -10,6 +10,10 @@ export default function ListView({
   selectedOpenAlex,
   setFilteredAffiliationName,
   setSelectedOpenAlex,
+  // removeList,
+  // setRemoveList,
+  toggleRemovedRor,
+  setSelectAffiliations,
 }) {
   const defineRorColor = [];
   const dsColors = ['green-archipel', 'purple-glycine', 'pink-tuile', 'green-menthe', 'brown-cafe-creme'];
@@ -26,28 +30,24 @@ export default function ListView({
   const sortedRor = Object.keys(rorCount).sort((a, b) => rorCount[b] - rorCount[a]);
   defineRorColor.push(...sortedRor.slice(0, 5).map((ror, index) => ({ ror, color: dsColors[index % dsColors.length] })));
 
+  // console.log('ListView', allAffiliations[0]);
+
   return (
     <ul className="wm-list">
       {
         allAffiliations.map((affiliation) => (
           <li
-            className={selectedOpenAlex.some((a) => a.key === affiliation.key) ? 'selected' : ''}
+            className={affiliation.selected ? 'selected' : ''}
             key={affiliation.key}
           >
             <Row>
               <Col>
                 <div style={{ display: 'inline-flex' }}>
                   <div style={{ display: 'inline-block', width: '20px' }}>
                     <Checkbox
-                      checked={selectedOpenAlex.some((a) => a.key === affiliation.key)}
+                      checked={affiliation.selected}
                       name="affiliations"
-                      onChange={(e) => {
-                        if (e.target.checked) {
-                          setSelectedOpenAlex([...selectedOpenAlex, affiliation]);
-                        } else {
-                          setSelectedOpenAlex(selectedOpenAlex.filter((a) => a.key !== affiliation.key));
-                        }
-                      }}
+                      onChange={() => setSelectAffiliations([affiliation.id])}
                     />
                     <br />
                     {
@@ -59,13 +59,7 @@ export default function ListView({
                   <div className="fr-ml-1w" style={{ display: 'inline-block', maxWidth: '95%' }}>
                     <Text
                       as="span"
-                      onClick={() => {
-                        if (selectedOpenAlex.some((a) => a.key === affiliation.key)) {
-                          setSelectedOpenAlex(selectedOpenAlex.filter((a) => a.key !== affiliation.key));
-                        } else {
-                          setSelectedOpenAlex([...selectedOpenAlex, affiliation]);
-                        }
-                      }}
+                      onClick={() => setSelectAffiliations([affiliation.id])}
                       style={{ cursor: 'pointer' }}
                     >
                       <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml.replace(' [ source: OpenAlex ]', '') }} />
@@ -81,14 +75,15 @@ export default function ListView({
                       <tr key={`openalex-ror-affiliations-${rorToCorrect.rorId}`}>
                         <td>
                           <RorBadge
-                            isRemoved={rorToCorrect?.action === 'remove' ?? false}
+                            isRemoved={affiliation.removeList.includes(rorToCorrect.rorId)}
                             ror={rorToCorrect}
                             rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'}
                             setFilteredAffiliationName={setFilteredAffiliationName}
+                            toggleRemovedRor={() => toggleRemovedRor(affiliation.id, rorToCorrect.rorId)}
                           />
                           <br />
                           <RorName
-                            isRemoved={rorToCorrect?.action === 'remove' ?? false}
+                            isRemoved={affiliation.removeList.includes(rorToCorrect.rorId)}
                             ror={rorToCorrect}
                           />
                         </td>
@@ -129,4 +124,5 @@ ListView.propTypes = {
   setSelectedOpenAlex: PropTypes.func.isRequired,
   selectedOpenAlex: PropTypes.array.isRequired,
   setFilteredAffiliationName: PropTypes.func.isRequired,
+  setSelectAffiliations: PropTypes.func.isRequired,
 };
diff --git a/client/src/pages/openalex-ror/results/views-selector.jsx b/client/src/pages/openalex-ror/results/views-selector.jsx
@@ -28,6 +28,9 @@ export default function ViewsSelector({
   setFilteredAffiliationName,
   setSelectedOpenAlex,
   undo,
+
+  toggleRemovedRor,
+  setSelectAffiliations,
 }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -125,21 +128,17 @@ export default function ViewsSelector({
         <Row>
           <Col xs="3">
             <Checkbox
-              checked={(selectedOpenAlex.length === filteredAffiliations.length) && (selectedOpenAlex.length > 0)}
+              checked={sortedOrFilteredAffiliations.find((affiliation) => !affiliation.selected) === undefined}
               onChange={() => {
-                if (selectedOpenAlex.length === 0) {
-                  setSelectedOpenAlex(filteredAffiliations);
-                } else {
-                  setSelectedOpenAlex([]);
-                }
+                setSelectAffiliations(sortedOrFilteredAffiliations.map((affiliation) => affiliation.id));
               }}
             />
             <span className="wm-text fr-mb-3w fr-ml-6w">
               <Badge color="brown-opera">
-                {selectedOpenAlex.length}
+                {sortedOrFilteredAffiliations.filter((affiliation) => affiliation.selected)?.length || 0}
               </Badge>
               <i>
-                {` selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'} / ${filteredAffiliations.length}`}
+                {` selected affiliation${sortedOrFilteredAffiliations.filter((affiliation) => affiliation.selected)?.length === 1 ? '' : 's'} / ${filteredAffiliations.length}`}
               </i>
             </span>
           </Col>
@@ -199,9 +198,11 @@ export default function ViewsSelector({
       ) : (
         <ListView
           allAffiliations={sortedOrFilteredAffiliations}
-          selectedOpenAlex={selectedOpenAlex}
           setFilteredAffiliationName={setFilteredAffiliationName}
           setSelectedOpenAlex={setSelectedOpenAlex}
+          toggleRemovedRor={toggleRemovedRor}
+          setSelectAffiliations={setSelectAffiliations}
+          selectedOpenAlex={selectedOpenAlex}
         />
       )}
       <Modal isOpen={isModalOpen} hide={() => setIsModalOpen((prev) => !prev)} size="md">
@@ -342,4 +343,6 @@ ViewsSelector.propTypes = {
   setFilteredAffiliationName: PropTypes.func.isRequired,
   setSelectedOpenAlex: PropTypes.func.isRequired,
   undo: PropTypes.func.isRequired,
+  toggleRemovedRor: PropTypes.func.isRequired,
+  setSelectAffiliations: PropTypes.func.isRequired,
 };