refactor(all): Fix console warnings

dataesr · Nov 21, 2024 · ee15160 · ee15160
1 parent e389c32
commit ee15160
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 57 deletions.
diff --git a/client/src/components/tag-input/index.jsx b/client/src/components/tag-input/index.jsx
@@ -102,6 +102,7 @@ export default function TagInput({
               <>
                 {label}
                 <Button
+                  aria-label="Remove all affiliations"
                   className="fr-ml-1w"
                   color="yellow-tournesol"
                   icon="delete-line"
@@ -131,16 +132,16 @@ export default function TagInput({
               <Col>
                 <Row>
                   <TagGroup>
-                    {currentTags.map((tag) => (
+                    {currentTags.map((currentTag) => (
                       <DismissibleTag
-                        className={`fr-mr-1w ${tag.isDisabled ? 'scratched' : ''}`}
-                        color={getTagColor(tag)}
-                        key={tag.label}
-                        onClick={() => handleDeleteClick(tag)}
+                        className={`fr-mr-1w ${currentTag.isDisabled ? 'scratched' : ''}`}
+                        color={getTagColor(currentTag)}
+                        key={currentTag.label}
+                        onClick={() => handleDeleteClick(currentTag)}
                         size="sm"
-                        title={`${tag.label}${tag.isDisabled ? ' (not searched)' : ''}`}
+                        title={`${currentTag.label}${currentTag.isDisabled ? ' (not searched)' : ''}`}
                       >
-                        {tag.label}
+                        {currentTag.label}
                       </DismissibleTag>
 
                     ))}

diff --git a/client/src/pages/openalex-ror/components/works-list.jsx b/client/src/pages/openalex-ror/components/works-list.jsx
@@ -1,30 +1,37 @@
 import { Button, Link, Text } from '@dataesr/dsfr-plus';
+import PropTypes from 'prop-types';
 import { useState } from 'react';
 
+const WORKS_LENGTH = 5;
+
 export default function WorksList({ works }) {
   const [showMore, setShowMore] = useState(false);
 
-  const _works = showMore ? works : works.slice(0, 5);
+  const displayedWorks = showMore ? works : works.slice(0, WORKS_LENGTH);
+
   return (
-    <Text size="sm" className="fr-my-1w fr-pl-1w" style={{ borderLeft: '5px solid #aaa' }}>
+    <Text className="fr-my-1w fr-pl-1w" size="sm" style={{ borderLeft: '5px solid #aaa' }}>
       <i>
         <span className="fr-mr-1w">
-          works:
+          Works:
         </span>
-        {_works.map((work) => (
-          <Link className="fr-mr-1w" href={`https://openalex.org/${work}`} target="_blank">
+        {displayedWorks.map((work) => (
+          <Link className="fr-mr-1w" href={`https://openalex.org/${work}`} key={`works-list-${work}`} target="_blank">
             {work}
           </Link>
         ))}
         {
           works.length > 5 && (
-            <Button variant="text" onClick={() => setShowMore(!showMore)}>
-              {showMore ? 'show less works' : `show more works (${works.length - 5})`}
+            <Button onClick={() => setShowMore(!showMore)} variant="text">
+              {showMore ? 'show less works' : `show more works (${works.length - WORKS_LENGTH})`}
             </Button>
           )
         }
       </i>
     </Text>
-
   );
 }
+
+WorksList.propTypes = {
+  works: PropTypes.array.isRequired,
+};
diff --git a/client/src/pages/openalex-ror/results/index.jsx b/client/src/pages/openalex-ror/results/index.jsx
@@ -300,18 +300,16 @@ export default function Affiliations() {
                     <Tag
                       className="fr-mr-1w"
                       color="blue-cumulus"
-                      key="tag-year-start"
+                      key="openalex-ror-tag-year-start"
                     >
                       {`Start: ${body.startYear}`}
                     </Tag>
-
-                    <Tag color="blue-cumulus" key="tag-year-end">
+                    <Tag color="blue-cumulus" key="openalex-ror-tag-year-end">
                       {`End: ${body.endYear}`}
                     </Tag>
                   </div>
                 </Col>
               </Row>
-
               <Row>
                 <Col>
                   <div className="wm-title">
@@ -323,12 +321,12 @@ export default function Affiliations() {
                   </div>
                   <div className="wm-content">
                     {body.affiliations.map((affiliation) => (
-                      <Row key={`row-${affiliation.label}`}>
+                      <Row key={`openalex-ror-search-${affiliation.label}`}>
                         <Tag
                           className={`fr-mr-1w ${affiliation.isDisabled ? 'scratched' : ''
                             }`}
                           color={getTagColor(affiliation)}
-                          key={`tag-${affiliation.label}`}
+                          key={`openalex-ror-tag-${affiliation.label}`}
                         >
                           {affiliation.label}
                         </Tag>
@@ -337,7 +335,7 @@ export default function Affiliations() {
                             className={`fr-mr-1w fr-mt-1w ${child.isDisabled ? 'scratched' : ''
                               }`}
                             color={getTagColor(child)}
-                            key={`tag-${child.label}`}
+                            key={`openalex-ror-tag-${child.label}`}
                           >
                             {child.label}
                           </Tag>
@@ -385,7 +383,7 @@ export default function Affiliations() {
                                   <tbody>
                                     {Object.values(uniqueRors).map(
                                       (uniqueRor) => (
-                                        <tr>
+                                        <tr key={`openalex-ror-modale-${uniqueRor.rorId}`}>
                                           <td>
                                             <Link
                                               className="fr-mr-1w"

diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -56,7 +56,6 @@ export default function ListView({
                     }
                   </div>
                   <div style={{ display: 'inline-block', maxWidth: '95%' }}>
-
                     <Text as="label" htmlFor={`affiliation-${affiliation.key}`}>
                       <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml }} />
                     </Text>
@@ -66,35 +65,37 @@ export default function ListView({
               </Col>
               <Col md={4}>
                 <table className="wm-table">
-                  {affiliation.rors.map((ror) => (
-                    <tr>
-                      <td>
-                        <RorBadge
-                          isRemoved={
-                            (allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                            && allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                              ?.correctedRors.split(';')
-                              .find((_ror) => _ror === ror.rorId) === undefined
-                            ) || false
-                          }
-                          ror={ror}
-                          rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'}
-                          setFilteredAffiliationName={setFilteredAffiliationName}
-                        />
-                        <br />
-                        <RorName
-                          isRemoved={
-                            (allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                            && allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
-                              ?.correctedRors.split(';')
-                              .find((_ror) => _ror === ror.rorId) === undefined
-                            ) || false
-                          }
-                          ror={ror}
-                        />
-                      </td>
-                    </tr>
-                  ))}
+                  <tbody>
+                    {affiliation.rors.map((ror) => (
+                      <tr key={`openalex-ror-affiliations-${ror.rorId}`}>
+                        <td>
+                          <RorBadge
+                            isRemoved={
+                              (allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
+                              && allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
+                                ?.correctedRors.split(';')
+                                .find((_ror) => _ror === ror.rorId) === undefined
+                              ) || false
+                            }
+                            ror={ror}
+                            rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'beige-gris-galet'}
+                            setFilteredAffiliationName={setFilteredAffiliationName}
+                          />
+                          <br />
+                          <RorName
+                            isRemoved={
+                              (allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
+                              && allOpenalexCorrections.find((correctedAffiliation) => correctedAffiliation.id === affiliation.id)
+                                ?.correctedRors.split(';')
+                                .find((_ror) => _ror === ror.rorId) === undefined
+                              ) || false
+                            }
+                            ror={ror}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
                 </table>
               </Col>
             </Row>

diff --git a/client/src/pages/openalex-ror/results/views-selector.jsx b/client/src/pages/openalex-ror/results/views-selector.jsx
@@ -77,10 +77,7 @@ export default function OpenalexView({
             />
           </Col>
           <Col xs="8">
-            <span className="fr-icon-search-line" />
-            <i className="fr-mx-1w">
-              Filter results
-            </i>
+            <span className="fr-icon-search-line fr-mx-1w" />
             <input
               onChange={(e) => setFilteredAffiliationName(e.target.value)}
               style={{