fix(mentions): Fix undo button for multiples corrections, see #79 /2

dataesr · Nov 4, 2024 · 35225da · 35225da
1 parent 6b2c6cf
commit 35225da
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 57 deletions.
diff --git a/client/src/pages/index.jsx b/client/src/pages/index.jsx
@@ -86,14 +86,13 @@ export default function Home({ isSticky, setIsSticky }) {
     setSelectedAffiliations([]);
   };
 
-  const undo = (_affiliations, _affiliation) => {
-    const newAffiliations = _affiliations.map((affiliation) => {
-      if (affiliation.id === _affiliation.id) {
-        return {
-          ...affiliation,
-          hasCorrection: false,
-          rorsToCorrect: affiliation.rors.map((r) => r.rorId).join(';'),
-        };
+  const undo = (id) => {
+    const newAffiliations = affiliations.map((affiliation) => {
+      if (affiliation.id === id) {
+        // eslint-disable-next-line no-param-reassign
+        affiliation.hasCorrection = false;
+        // eslint-disable-next-line no-param-reassign
+        affiliation.rorsToCorrect = affiliation.rors.map((r) => r.rorId).join(';');
       }
       return affiliation;
     });
@@ -102,13 +101,7 @@ export default function Home({ isSticky, setIsSticky }) {
   };
 
   useEffect(() => {
-    setAffiliations(
-      (data?.affiliations ?? []).map((affiliation) => {
-        // eslint-disable-next-line no-param-reassign
-        affiliation.undo = () => undo(data?.affiliations ?? [], affiliation);
-        return affiliation;
-      }),
-    );
+    setAffiliations(data?.affiliations ?? []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
@@ -170,6 +163,7 @@ export default function Home({ isSticky, setIsSticky }) {
             allOpenalexCorrections={allOpenalexCorrections}
             options={options}
             setAllOpenalexCorrections={setAllOpenalexCorrections}
+            undo={undo}
           />
         )}
 

diff --git a/client/src/pages/mentions.jsx b/client/src/pages/mentions.jsx
@@ -1,6 +1,5 @@
 /* eslint-disable no-param-reassign */
 import {
-  Badge,
   Button,
   Col,
   Container,
@@ -22,13 +21,13 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import useWebSocket from 'react-use-websocket';
 
-import { correction } from '../config';
 import useToast from '../hooks/useToast';
 import { getMentionsCorrections } from '../utils/curations';
 import {
   affiliations2Template,
   authorsTemplate,
   doiTemplate,
+  hasCorrectionTemplate,
 } from '../utils/templates';
 import { capitalize, getMentions } from '../utils/works';
 
@@ -238,22 +237,6 @@ export default function Mentions() {
       style={{ color: rowData.mention_context.used ? '#8dc572' : '#be6464' }}
     />
   );
-  const hasCorrectionTemplate = (rowData) => (rowData?.hasCorrection ? (
-    <>
-      <Badge variant={correction.corrected.badgeType}>
-        {correction.corrected.label}
-      </Badge>
-      <Button
-        icon="arrow-go-back-line"
-        onClick={() => undo(rowData.id)}
-        size="sm"
-        title="Undo changes"
-        variant="info"
-      />
-    </>
-  ) : (
-    ''
-  ));
 
   // Events
   const onPage = (event) => {
@@ -315,13 +298,7 @@ export default function Mentions() {
       setTotalRecords(0);
       if (urlSearchParams?.search?.length > 0) {
         const data = await getMentions(urlSearchParams);
-        const mentionsTmp = data?.mentions ?? [];
-        setMentions(
-          mentionsTmp.map((mention) => {
-            mention.undo = () => undo(mentionsTmp, mention);
-            return mention;
-          }),
-        );
+        setMentions(data?.mentions ?? []);
         setTotalRecords(data?.count ?? 0);
       }
       setLoading(false);
@@ -634,7 +611,7 @@ export default function Mentions() {
                 sortable
               />
               <Column
-                body={hasCorrectionTemplate}
+                body={(rowData) => hasCorrectionTemplate(rowData, undo)}
                 field="hasCorrection"
                 header="Modified by user?"
                 sortable

diff --git a/client/src/pages/openalexTab.jsx b/client/src/pages/openalexTab.jsx
@@ -22,6 +22,7 @@ import OpenalexView from './openalexView';
 export default function OpenalexTab({
   affiliations,
   setAllOpenalexCorrections,
+  undo,
 }) {
   const [action, setAction] = useState();
   const [filteredAffiliations, setFilteredAffiliations] = useState([]);
@@ -179,6 +180,7 @@ export default function OpenalexTab({
             setAllOpenalexCorrections={setAllOpenalexCorrections}
             setFilteredAffiliationName={setFilteredAffiliationName}
             setSelectedOpenAlex={setSelectedOpenAlex}
+            undo={undo}
           />
         </Col>
       </Row>
@@ -197,4 +199,5 @@ OpenalexTab.propTypes = {
     }),
   ).isRequired,
   setAllOpenalexCorrections: PropTypes.func.isRequired,
+  undo: PropTypes.func.isRequired,
 };
diff --git a/client/src/pages/openalexView.jsx b/client/src/pages/openalexView.jsx
@@ -23,6 +23,7 @@ export default function OpenalexView({
   setAllOpenalexCorrections,
   setFilteredAffiliationName,
   setSelectedOpenAlex,
+  undo,
 }) {
   const [selectionPageOnly, setSelectionPageOnly] = useState(true);
 
@@ -147,7 +148,7 @@ export default function OpenalexView({
         style={{ maxWidth: '80px' }}
       />
       <Column
-        body={hasCorrectionTemplate}
+        body={(rowData) => hasCorrectionTemplate(rowData, undo)}
         field="hasCorrection"
         header="Modified by user?"
         sortable
@@ -190,4 +191,5 @@ OpenalexView.propTypes = {
     }),
   ).isRequired,
   setSelectedOpenAlex: PropTypes.func.isRequired,
+  undo: PropTypes.func.isRequired,
 };
diff --git a/client/src/pages/views/openalex.jsx b/client/src/pages/views/openalex.jsx
@@ -10,6 +10,7 @@ export default function Openalex({
   allOpenalexCorrections,
   options,
   setAllOpenalexCorrections,
+  undo,
 }) {
   if (!allAffiliations || allAffiliations?.length === 0) {
     return <div>No affiliations detected</div>;
@@ -54,6 +55,7 @@ export default function Openalex({
           (affiliation) => affiliation.source === 'OpenAlex',
         )}
         setAllOpenalexCorrections={setAllOpenalexCorrections}
+        undo={undo}
       />
     </>
   );
@@ -80,4 +82,5 @@ Openalex.propTypes = {
   ).isRequired,
   options: PropTypes.object.isRequired,
   setAllOpenalexCorrections: PropTypes.func.isRequired,
+  undo: PropTypes.func.isRequired,
 };
diff --git a/client/src/utils/templates.jsx b/client/src/utils/templates.jsx
@@ -4,7 +4,6 @@ import { Badge, Button } from '@dataesr/dsfr-plus';
 import { MultiSelect } from 'primereact/multiselect';
 import { Tooltip } from 'react-tooltip';
 
-import { correction, status } from '../config';
 import { getIdLink } from './works';
 
 const affiliationsTemplate = (rowData) => (
@@ -25,7 +24,9 @@ const affiliations2Template = (rowData) => {
     )
     .join('');
   if (rowData.affiliations.length > 3) {
-    affiliationsHtml += `<li class="ellipsis">and others (${rowData.affiliations.length - 3})</li>`;
+    affiliationsHtml += `<li class="ellipsis">and others (${
+      rowData.affiliations.length - 3
+    })</li>`;
   }
   affiliationsHtml += '</ul>';
   let affiliationsTooltip = '<ul>';
@@ -219,19 +220,14 @@ const statusTemplate = (rowData) => (
   </Badge>
 );
 
-const hasCorrectionTemplate = (rowData) => (rowData?.hasCorrection ? (
-  <>
-    <Badge variant={correction.corrected.badgeType}>
-      {correction.corrected.label}
-    </Badge>
-    <Button
-      icon="arrow-go-back-line"
-      onClick={() => rowData.undo()}
-      size="sm"
-      title="Undo changes"
-      variant="info"
-    />
-  </>
+const hasCorrectionTemplate = (rowData, undo) => (rowData?.hasCorrection ? (
+  <Button
+    icon="arrow-go-back-line"
+    onClick={() => undo(rowData.id)}
+    size="sm"
+    title="Undo changes"
+    variant="info"
+  />
 ) : (
   ''
 ));