feat(openAlex): create component for list of works

dataesr · Nov 15, 2024 · 547bb60 · 547bb60
1 parent 8359508
commit 547bb60
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 38 deletions.
diff --git a/client/src/pages/openalex-ror/components/works-list.jsx b/client/src/pages/openalex-ror/components/works-list.jsx
@@ -0,0 +1,28 @@
+import { Button, Link, Text } from '@dataesr/dsfr-plus';
+import { useState } from 'react';
+
+export default function WorksList({ works }) {
+  const [showMore, setShowMore] = useState(false);
+
+  const _works = showMore ? works : works.slice(0, 5);
+  return (
+    <div>
+      <span className="fr-mr-1w">
+        openAlex works:
+      </span>
+      {_works.map((work) => (
+        <Link className="fr-mr-1w" href="http://toto.com" target="_blank">
+          {work}
+        </Link>
+      ))}
+      {
+        works.length > 5 && (
+          <Button variant="text" onClick={() => setShowMore(!showMore)}>
+            {showMore ? 'show less works' : `show more works (${works.length - 5})`}
+          </Button>
+        )
+      }
+    </div>
+
+  );
+}
diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -1,4 +1,5 @@
-import { Badge, Col, Link, Row, Tag, TagGroup, Text } from '@dataesr/dsfr-plus';
+import { Col, Link, Row, Tag, Text } from '@dataesr/dsfr-plus';
+import WorksList from '../components/works-list';
 
 export default function ListView({
   onRowEditComplete,
@@ -14,48 +15,40 @@ export default function ListView({
         allAffiliations.map((affiliation) => (
           <li key={affiliation.key}>
             <Row>
-              <Col>
+              <Col md={1}>
                 <input type="checkbox" id={`affiliation-${affiliation.key}`} />
               </Col>
-              <Col md={11}>
+              <Col md={9}>
                 <Text as="label" htmlFor={`affiliation-${affiliation.key}`}>
                   <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml }} />
                 </Text>
-                <div>
-                  ror list:
-                  {affiliation.rors.map((ror) => (
-                    <>
-                      <Tag
-                        color="blue-cumulus"
-                        size="sm"
-                        className="fr-mr-1w"
-                        aria-describedby={`tooltip-${affiliation.key}-ror-${ror.rorId}`}
-                      >
-                        <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
-                          {ror.rorId}
-                        </Link>
-                      </Tag>
-                      <div
-                        className="fr-tooltip fr-placement text-center"
-                        id={`tooltip-${affiliation.key}-ror-${ror.rorId}`}
-                        role="tooltip"
-                        aria-hidden="true"
-                      >
-                        <img src={`https://flagsapi.com/${ror.rorCountry}/flat/48.png`} alt={`${ror.rorCountry} flag`} />
-                        <br />
-                        {ror.rorName}
-                      </div>
-                    </>
-                  ))}
-                </div>
-                <div>
-                  openAlex works:
-                  {affiliation.works.slice(0, 5).map((work) => (
-                    <Link className="fr-mr-1w" href="http://toto.com" target="_blank">
-                      {work}
-                    </Link>
-                  ))}
-                </div>
+                <WorksList works={affiliation.works} />
+              </Col>
+              <Col>
+                {affiliation.rors.map((ror) => (
+                  <>
+                    <Tag
+                      color="blue-cumulus"
+                      size="sm"
+                      className="fr-mr-1w"
+                      aria-describedby={`tooltip-${affiliation.key}-ror-${ror.rorId}`}
+                    >
+                      <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
+                        {ror.rorId}
+                      </Link>
+                    </Tag>
+                    <div
+                      className="fr-tooltip fr-placement text-center"
+                      id={`tooltip-${affiliation.key}-ror-${ror.rorId}`}
+                      role="tooltip"
+                      aria-hidden="true"
+                    >
+                      <img src={`https://flagsapi.com/${ror.rorCountry}/flat/48.png`} alt={`${ror.rorCountry} flag`} />
+                      <br />
+                      {ror.rorName}
+                    </div>
+                  </>
+                ))}
               </Col>
             </Row>
           </li>