feat(openalex): Refactor ROR handling by renaming toggleRemovedRor to…

… removeRor. It's now possible to remove a just added ROR
dataesr · Nov 27, 2024 · f1d8162 · f1d8162
1 parent 3adeecc
commit f1d8162
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 24 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, toggleRemovedRor }) {
+export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, rorColor, removeRor }) {
   return (
     <div className="wm-ror-badge">
       <span style={{ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`) }} />
@@ -36,15 +36,15 @@ export default function RorBadge({ isRemoved, ror, setFilteredAffiliationName, r
           <button
             aria-label="Filter on this ROR"
             className="fr-icon fr-fi-arrow-go-back-line fr-icon--sm"
-            onClick={() => { toggleRemovedRor(); }}
+            onClick={() => { removeRor(); }}
             title="Undo remove"
             type="button"
           />
         ) : (
           <button
             aria-label="Filter on this ROR"
             className="fr-icon fr-fi-delete-line fr-icon--sm"
-            onClick={() => { toggleRemovedRor(); }}
+            onClick={() => { removeRor(); }}
             title="Remove this ROR"
             type="button"
           />
@@ -64,5 +64,6 @@ RorBadge.propTypes = {
     rorId: PropTypes.string.isRequired,
   }).isRequired,
   rorColor: PropTypes.string.isRequired,
-  toggleRemovedRor: PropTypes.func.isRequired,
+  removeRor: PropTypes.func.isRequired,
+  setFilteredAffiliationName: PropTypes.func.isRequired,
 };
diff --git a/client/src/pages/openalex-ror/results/index.jsx b/client/src/pages/openalex-ror/results/index.jsx
@@ -56,8 +56,10 @@ export default function Affiliations() {
   ]);
   const [isLoadingRorData, setIsLoadingRorData] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [removeList, setRemoveList] = useState([]);
   const [ror, setRor] = useState('');
+  const [cleanRor, setCleanRor] = useState('');
   const [rorMessage, setRorMessage] = useState('');
   const [rorMessageType, setRorMessageType] = useState('');
   const [selectedOpenAlex, setSelectedOpenAlex] = useState([]);
@@ -282,11 +284,46 @@ export default function Affiliations() {
     setAffiliations(updatedAffiliations);
   };
 
-  const addRor = (affiliationId, rorObject) => {
-    console.log('addRor', affiliationId, rorObject);
+  const removeRorFromAddList = (affiliationId, rorId) => {
+    const updatedAffiliations = affiliations.map((affiliation) => {
+      if (affiliation.id === affiliationId) {
+        if (affiliation.addList.find((item) => item.rorId === rorId)) {
+          return { ...affiliation, addList: affiliation.addList.filter((item) => item.rorId !== rorId) };
+        }
+      }
+      return affiliation;
+    });
+
+    setAffiliations(updatedAffiliations);
+  };
+
+  useEffect(() => {
+    if (rorMessageType !== 'valid') {
+      setCleanRor({});
+    }
+  }, [rorMessageType]);
+
+  const addRor = () => {
+    const updatedAffiliations = affiliations.map((affiliation) => {
+      if (affiliation.selected && !affiliation.addList.some((item) => item.rorId === cleanRor.rorId)) {
+        return {
+          ...affiliation,
+          addList: [...affiliation.addList, cleanRor],
+        };
+      }
+      return affiliation;
+    });
+    setAffiliations(updatedAffiliations);
+    setRor('');
+    setCleanRor({});
+    setIsAddModalOpen(false);
+  };
+
+  const getCleanRor = async () => {
+    const cleanRorData = await getRorData(ror);
+    setCleanRor(cleanRorData[0]);
   };
 
-  // toggle the selection of an affiliation
   const setSelectAffiliations = (affiliationIds) => {
     const updatedAffiliations = affiliations.map((affiliation) => {
       if (affiliationIds.includes(affiliation.id)) {
@@ -598,7 +635,7 @@ export default function Affiliations() {
                           //   setAddList([...addList, ror]);
                           //   setRor('');
                           // }}
-                          onClick={() => getRorData()}
+                          onClick={() => getCleanRor()}
                           title="Add ROR"
                         >
                           + Add
@@ -639,7 +676,7 @@ export default function Affiliations() {
                   }}
                 >
                   <div className="left-content">
-                    <Button
+                    {/* <Button
                       aria-label="Modify selected ROR"
                       className="fr-ml-5w fr-mr-1w"
                       color="blue-ecume"
@@ -651,7 +688,87 @@ export default function Affiliations() {
                       title="Modify selected ROR"
                     >
                       Modify selected ROR
+                    </Button> */}
+                    <Button
+                      aria-label="Add ROR to selected affiliations"
+                      className="fr-ml-5w fr-mr-1w"
+                      color="blue-ecume"
+                      disabled={filteredAffiliations.filter((affiliation) => affiliation.selected).length === 0}
+                      icon="add-circle-line"
+                      key="add-ror"
+                      onClick={() => setIsAddModalOpen((prev) => !prev)}
+                      size="sm"
+                      title="Add ROR to selected affiliations"
+                    >
+                      Add ROR to selected affiliations
                     </Button>
+                    <Modal
+                      isOpen={isAddModalOpen}
+                      hide={() => setIsAddModalOpen((prev) => !prev)}
+                      // size="xl"
+                    >
+                      <ModalTitle>
+                        {`Add ROR to ${filteredAffiliations.filter((affiliation) => affiliation.selected).length} OpenAlex selected affiliation${filteredAffiliations.filter((affiliation) => affiliation.selected).length > 1 ? 's' : ''}`}
+                      </ModalTitle>
+                      <ModalContent>
+                        <Container fluid>
+                          <Row verticalAlign="bottom">
+                            <Col>
+                              <TextInput
+                                messageType={rorMessageType}
+                                message={rorMessage}
+                                onChange={(e) => setRor(e.target.value)}
+                                value={ror}
+                                label="ROR"
+                                hint="Enter a valid ROR id and 'check' it with ROR API"
+                              />
+                            </Col>
+                            <Col md="3">
+                              <Button
+                                aria-label="Check ROR"
+                                color="blue-ecume"
+                                disabled={['', 'error'].includes(rorMessageType)}
+                                onClick={() => getCleanRor()}
+                                size="sm"
+                                variant="secondary"
+                              >
+                                Check it
+                              </Button>
+                            </Col>
+                          </Row>
+                          <Row>
+                            <Col>
+                              {
+                                rorMessageType === 'valid' && cleanRor.rorName && cleanRor.rorCountry
+                                  && (
+                                    <>
+                                      <div>
+                                        <span className="fr-icon-arrow-right-s-fill" aria-hidden="true" />
+                                        <span className="fr-mx-1w">
+                                          {cleanRor.rorName}
+                                        </span>
+                                        {getFlagEmoji(cleanRor.rorCountry)}
+                                      </div>
+                                      <Button
+                                        aria-label="Add ROR"
+                                        className="fr-mt-3w"
+                                        color="blue-ecume"
+                                        disabled={['', 'error'].includes(rorMessageType) || !cleanRor.rorName || !cleanRor.rorCountry}
+                                        onClick={() => { addRor(); }}
+                                        size="sm"
+                                        title="Add ROR"
+                                      >
+                                        Add this ROR to selected affiliations
+                                      </Button>
+                                    </>
+                                  )
+                              }
+                            </Col>
+                          </Row>
+                        </Container>
+                      </ModalContent>
+                    </Modal>
+
                   </div>
                   <div className="right-content fr-mr-1w">
                     <ExportErrorsButton
@@ -677,6 +794,7 @@ export default function Affiliations() {
                   undo={undo}
                   toggleRemovedRor={toggleRemovedRor}
                   setSelectAffiliations={setSelectAffiliations}
+                  removeRorFromAddList={removeRorFromAddList}
                 />
               </div>
             </Col>

diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -7,13 +7,10 @@ import RorName from '../components/ror-name';
 
 export default function ListView({
   allAffiliations,
-  selectedOpenAlex,
   setFilteredAffiliationName,
-  setSelectedOpenAlex,
-  // removeList,
-  // setRemoveList,
   toggleRemovedRor,
   setSelectAffiliations,
+  removeRorFromAddList,
 }) {
   const defineRorColor = [];
   const dsColors = ['green-archipel', 'purple-glycine', 'pink-tuile', 'green-menthe', 'brown-cafe-creme'];
@@ -30,8 +27,6 @@ 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">
       {
@@ -79,7 +74,7 @@ export default function ListView({
                             ror={rorToCorrect}
                             rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'}
                             setFilteredAffiliationName={setFilteredAffiliationName}
-                            toggleRemovedRor={() => toggleRemovedRor(affiliation.id, rorToCorrect.rorId)}
+                            removeRor={() => toggleRemovedRor(affiliation.id, rorToCorrect.rorId)}
                           />
                           <br />
                           <RorName
@@ -89,19 +84,20 @@ export default function ListView({
                         </td>
                       </tr>
                     ))}
-                    {affiliation.rorsToCorrect?.filter((_ror) => _ror.action === 'add').map((rorToCorrect) => (
-                      <tr key={`openalex-ror-affiliations-${rorToCorrect.rorId}`}>
+                    {affiliation.addList.map((ror) => (
+                      <tr key={`openalex-ror-affiliations-${ror.rorId}`}>
                         <td>
                           <RorBadge
-                            ror={rorToCorrect}
-                            rorColor={defineRorColor.find((item) => item.ror === rorToCorrect.rorId)?.color || 'beige-gris-galet'}
+                            ror={ror}
+                            rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'}
                             setFilteredAffiliationName={setFilteredAffiliationName}
+                            removeRor={() => removeRorFromAddList(affiliation.id, ror.rorId)}
                           />
                           <br />
-                          <RorName ror={rorToCorrect} />
+                          <RorName ror={ror} />
                           <Badge
                             className="fr-ml-1w"
-                            color="warning"
+                            color="blue-cumulus"
                           >
                             Added
                           </Badge>
@@ -121,8 +117,8 @@ export default function ListView({
 
 ListView.propTypes = {
   allAffiliations: PropTypes.array.isRequired,
-  setSelectedOpenAlex: PropTypes.func.isRequired,
-  selectedOpenAlex: PropTypes.array.isRequired,
   setFilteredAffiliationName: PropTypes.func.isRequired,
   setSelectAffiliations: PropTypes.func.isRequired,
+  toggleRemovedRor: PropTypes.func.isRequired,
+  removeRorFromAddList: 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
@@ -31,6 +31,7 @@ export default function ViewsSelector({
 
   toggleRemovedRor,
   setSelectAffiliations,
+  removeRorFromAddList,
 }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -203,6 +204,7 @@ export default function ViewsSelector({
           toggleRemovedRor={toggleRemovedRor}
           setSelectAffiliations={setSelectAffiliations}
           selectedOpenAlex={selectedOpenAlex}
+          removeRorFromAddList={removeRorFromAddList}
         />
       )}
       <Modal isOpen={isModalOpen} hide={() => setIsModalOpen((prev) => !prev)} size="md">
@@ -345,4 +347,5 @@ ViewsSelector.propTypes = {
   undo: PropTypes.func.isRequired,
   toggleRemovedRor: PropTypes.func.isRequired,
   setSelectAffiliations: PropTypes.func.isRequired,
+  removeRorFromAddList: PropTypes.func.isRequired,
 };