fix(openalex): Display searched tags in results page instead of header

dataesr · Nov 13, 2024 · d2cd33b · d2cd33b
1 parent ca52795
commit d2cd33b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 127 deletions.
diff --git a/client/src/components/mention-list/item.jsx b/client/src/components/mention-list/item.jsx
@@ -104,9 +104,7 @@ export default function MentionListItem({ mention, index, selected, toggleToSele
             </Badge>
           )}
         </Col>
-        <Col />
       </Row>
-
     </li>
   );
 }
diff --git a/client/src/layout/header.jsx b/client/src/layout/header.jsx
@@ -1,25 +1,14 @@
 import {
   Badge,
-  Col,
-  Container,
-  Modal,
-  ModalContent,
-  Row,
-  Tag,
-  TagGroup,
+  Container, Row, Col,
   Title,
 } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
 
 import Ribbon from '../components/ribbon';
-import { isRor } from '../utils/ror';
-import { normalize } from '../utils/strings';
 
 const {
   VITE_APP_NAME,
-  VITE_APP_TAG_LIMIT,
   VITE_DESCRIPTION,
   VITE_HEADER_TAG_COLOR,
   VITE_HEADER_TAG,
@@ -28,56 +17,11 @@ const {
 
 // TODO : all, Link from dsfr-plus
 export default function Header({ isSticky }) {
-  const [searchParams] = useSearchParams();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const queryParams = {
-      endYear: searchParams.get('endYear') ?? '2023',
-      startYear: searchParams.get('startYear') ?? '2023',
-    };
-    queryParams.affiliationStrings = [];
-    queryParams.deletedAffiliations = [];
-    queryParams.rors = [];
-    queryParams.rorExclusions = [];
-    searchParams.getAll('affiliations').forEach((item) => {
-      if (isRor(item)) {
-        queryParams.rors.push(item);
-      } else {
-        queryParams.affiliationStrings.push(normalize(item));
-      }
-    });
-    searchParams.getAll('deletedAffiliations').forEach((item) => {
-      if (isRor(item)) {
-        queryParams.rorExclusions.push(item);
-      } else {
-        queryParams.deletedAffiliations.push(normalize(item));
-      }
-    });
-    if (
-      queryParams.affiliationStrings.length === 0
-      && queryParams.rors.length === 0
-    ) {
-      console.error(
-        `You must provide at least one affiliation longer than ${VITE_APP_TAG_LIMIT} letters.`,
-      );
-      return;
-    }
-    setOptions(queryParams);
-  }, [searchParams]);
-
   return isSticky ? (
     <Container as="section" className="filters sticky" fluid>
-      <Modal hide={() => setIsModalOpen(!isModalOpen)} isOpen={isModalOpen}>
-        <ModalContent>
-          {/* TODO */}
-          <div>Search Modale</div>
-        </ModalContent>
-      </Modal>
       <Row className="fr-p-1w" verticalAlign="top">
         <Ribbon />
-        <Col className="cursor-pointer" offsetXs="1" xs="2">
+        <Col offsetXs="1" xs="2">
           <a
             href="/"
             title={`Accueil - ${VITE_MINISTER_NAME.replaceAll(
@@ -99,29 +43,6 @@ export default function Header({ isSticky }) {
             </Title>
           </a>
         </Col>
-        <Col>
-          <Row>
-            <Col
-              className="cursor-pointer"
-              onClick={() => setIsModalOpen(true)}
-            >
-              <TagGroup>
-                <Tag color="blue-ecume" key="tag-sticky-years" size="sm">
-                  {`${options.startYear} - ${options.endYear}`}
-                </Tag>
-                {options?.affiliationStrings?.map((tag) => (
-                  <Tag
-                    color="blue-ecume"
-                    key={`tag-sticky-${tag}`}
-                    size="sm"
-                  >
-                    {tag}
-                  </Tag>
-                ))}
-              </TagGroup>
-            </Col>
-          </Row>
-        </Col>
       </Row>
     </Container>
   ) : (

diff --git a/client/src/pages/openalex-ror/results.jsx b/client/src/pages/openalex-ror/results.jsx
@@ -2,32 +2,31 @@ import {
   Button,
   Container, Row, Col,
   Modal, ModalContent, ModalFooter, ModalTitle,
+  Tag, TagGroup,
   Text,
   TextInput,
 } from '@dataesr/dsfr-plus';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
+import { status } from '../../config';
 import useToast from '../../hooks/useToast';
 import Header from '../../layout/header';
 import { getAffiliationsCorrections } from '../../utils/curations';
-import { isRor } from '../../utils/ror';
-import { normalize, capitalize, removeDiacritics } from '../../utils/strings';
+import { getRorData, isRor } from '../../utils/ror';
+import { capitalize, normalize, removeDiacritics } from '../../utils/strings';
 import { getWorks } from '../../utils/works';
-
-import 'primereact/resources/primereact.min.css';
-import 'primereact/resources/themes/lara-light-indigo/theme.css';
-
-import { status } from '../../config';
-
 import ExportErrorsButton from './export-errors-button';
 import OpenalexView from './openalexView';
 import SendFeedbackButton from './send-feedback-button';
 
-const { VITE_APP_TAG_LIMIT } = import.meta.env;
+import 'primereact/resources/primereact.min.css';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
 
 export default function Affiliations() {
+  const { pathname, search } = useLocation();
+  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [affiliations, setAffiliations] = useState([]);
   const [allOpenalexCorrections, setAllOpenalexCorrections] = useState([]);
@@ -70,38 +69,39 @@ export default function Affiliations() {
   };
 
   useEffect(() => {
-    const queryParams = {
-      endYear: searchParams.get('endYear') ?? '2023',
-      startYear: searchParams.get('startYear') ?? '2023',
-    };
-    queryParams.affiliationStrings = [];
-    queryParams.deletedAffiliations = [];
-    queryParams.rors = [];
-    queryParams.rorExclusions = [];
-    searchParams.getAll('affiliations').forEach((item) => {
-      if (isRor(item)) {
-        queryParams.rors.push(item);
-      } else {
-        queryParams.affiliationStrings.push(normalize(item));
-      }
-    });
-    searchParams.getAll('deletedAffiliations').forEach((item) => {
-      if (isRor(item)) {
-        queryParams.rorExclusions.push(item);
-      } else {
-        queryParams.deletedAffiliations.push(normalize(item));
-      }
-    });
-    if (
-      queryParams.affiliationStrings.length === 0
-      && queryParams.rors.length === 0
-    ) {
-      console.error(
-        `You must provide at least one affiliation longer than ${VITE_APP_TAG_LIMIT} letters.`,
-      );
-      return;
+    const getData = async () => {
+      const queryParams = {
+        endYear: searchParams.get('endYear') ?? '2023',
+        startYear: searchParams.get('startYear') ?? '2023',
+      };
+      queryParams.affiliationStrings = [];
+      queryParams.deletedAffiliations = [];
+      queryParams.rors = [];
+      queryParams.rorExclusions = [];
+      searchParams.getAll('affiliations').forEach((item) => {
+        if (isRor(item)) {
+          queryParams.rors.push(item);
+        } else {
+          queryParams.affiliationStrings.push(normalize(item));
+        }
+      });
+
+      const queries = queryParams.rors.map((_ror) => getRorData(_ror));
+      const rorNames = await Promise.all(queries);
+      rorNames.forEach((level) => level.forEach((rorName) => rorName.names.forEach((name) => queryParams.affiliationStrings.push(name))));
+
+      searchParams.getAll('deletedAffiliations').forEach((item) => {
+        if (isRor(item)) {
+          queryParams.rorExclusions.push(item);
+        } else {
+          queryParams.deletedAffiliations.push(normalize(item));
+        }
+      });
+      searchParams.getAll('rors')
+      setOptions(queryParams);
     }
-    setOptions(queryParams);
+
+    getData();
   }, [searchParams]);
 
   useEffect(() => {
@@ -185,15 +185,39 @@ export default function Affiliations() {
         {!isFetching && isFetched && (
           <Row>
             <Col md={2}>
-              params:
+              <TagGroup className="cursor-pointer" onClick={() => navigate(`/${pathname.split('/')[1]}/search${search}`)}>
+                <Tag color="blue-ecume" key="tag-sticky-years" size="sm">
+                  {`${options.startYear} - ${options.endYear}`}
+                </Tag>
+                <br />
+                {options?.affiliationStrings?.map((tag) => (
+                  <Tag
+                    color="blue-ecume"
+                    key={`tag-sticky-${tag}`}
+                    size="sm"
+                  >
+                    {tag}
+                  </Tag>
+                ))}
+                <br />
+                {options?.rors?.map((tag) => (
+                  <Tag
+                    color="blue-ecume"
+                    key={`tag-sticky-${tag}`}
+                    size="sm"
+                  >
+                    {tag}
+                  </Tag>
+                ))}
+              </TagGroup>
             </Col>
             <Col md={10}>
               <div className="wm-bg wm-content">
                 <Modal isOpen={isModalOpen} hide={() => setIsModalOpen((prev) => !prev)}>
                   <ModalTitle>
                     {`${capitalize(action)} ROR to ${
-            selectedOpenAlex.length
-          } OpenAlex affiliation${selectedOpenAlex.length > 1 ? 's' : ''}`}
+                      selectedOpenAlex.length
+                    } OpenAlex affiliation${selectedOpenAlex.length > 1 ? 's' : ''}`}
                   </ModalTitle>
                   <ModalContent>
                     <TextInput
-Original file line number
+Diff line change
@@ Expand Up @@
                 </Badge>
               )}
             </Col>
-            <Col />
           </Row>
         </li>
       );
     }