feat(router): Refactor navigation logic

client/src/components/tiles/datasets.jsx

@@ -4,7 +4,7 @@ export default function DatasetsTile() {
       <div className="fr-tile__body">
         <div className="fr-tile__content">
           <h3 className="fr-tile__title">
-            <a href="./datasets/search">
+            <a href="./datasets/search?view=datasets">
               🗃 Find the datasets affiliated to your institution
             </a>
           </h3>

client/src/components/tiles/openalex.jsx

@@ -4,7 +4,7 @@ export default function OpenalexTile() {
       <div className="fr-tile__body">
         <div className="fr-tile__content">
           <h3 className="fr-tile__title">
-            <a href="./openalex-ror/search">
+            <a href="./openalex-ror/search?view=openalex">
               ✏️ Improve ROR matching in OpenAlex - Provide your feedback!
             </a>
           </h3>

client/src/components/tiles/publications.jsx

@@ -4,7 +4,7 @@ export default function PublicationsTile() {
       <div className="fr-tile__body">
         <div className="fr-tile__content">
           <h3 className="fr-tile__title">
-            <a href="./publications/search">
+            <a href="./publications/search?view=publications">
               📑 Find the publications affiliated to your institution
             </a>
           </h3>

client/src/pages/affiliations.jsx

@@ -1,25 +1,44 @@
-import { Col, Container, Row, Spinner } from '@dataesr/dsfr-plus';
+import {
+  Badge,
+  Col,
+  Container,
+  Row,
+  SegmentedControl,
+  SegmentedElement,
+  Spinner,
+  Tag,
+  TagGroup,
+  Title,
+} from '@dataesr/dsfr-plus';
 import { useQuery } from '@tanstack/react-query';
-import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import Ribbon from '../components/ribbon';
 import DatasetsTile from '../components/tiles/datasets';
 import OpenalexTile from '../components/tiles/openalex';
 import PublicationsTile from '../components/tiles/publications';
 import { status } from '../config';
 import useToast from '../hooks/useToast';
 import { getAffiliationsCorrections } from '../utils/curations';
+import { normalize } from '../utils/strings';
+import { isRor } from '../utils/ror';
 import { getWorks } from '../utils/works';
-import Filters from './filters';
 import Datasets from './views/datasets';
 import Openalex from './ror-openalex/openalex';
 import Publications from './views/publications';
 
 import 'primereact/resources/primereact.min.css';
 import 'primereact/resources/themes/lara-light-indigo/theme.css';
 
-export default function Affiliations({ isSticky, setIsSticky }) {
+const {
+  VITE_APP_NAME,
+  VITE_APP_TAG_LIMIT,
+  VITE_HEADER_TAG,
+  VITE_HEADER_TAG_COLOR,
+} = import.meta.env;
+
+export default function Affiliations() {
   const [searchParams] = useSearchParams();
 
   const [affiliations, setAffiliations] = useState([]);
@@ -37,11 +56,6 @@ export default function Affiliations({ isSticky, setIsSticky }) {
     cacheTime: 60 * (60 * 1000), // 1h
   });
 
-  const sendQuery = async (_options) => {
-    await setOptions(_options);
-    refetch();
-  };
-
   const tagPublications = (publications, action) => {
     const publicationsIds = publications.map((publication) => publication.id);
     data?.publications?.results
@@ -58,9 +72,9 @@ export default function Affiliations({ isSticky, setIsSticky }) {
     setSelectedDatasets([]);
   };
 
-  const tagAffiliations = (affiliations, action) => {
+  const tagAffiliations = (_affiliations, action) => {
     if (action !== status.excluded.id) {
-      const worksIds = affiliations
+      const worksIds = _affiliations
         .map((affiliation) => affiliation.works)
         .flat();
       data?.publications?.results
@@ -70,9 +84,9 @@ export default function Affiliations({ isSticky, setIsSticky }) {
         ?.filter((dataset) => worksIds.includes(dataset.id))
         .map((dataset) => (dataset.status = action));
     }
-    const affiliationIds = affiliations.map((affiliation) => affiliation.id);
+    const affiliationIds = _affiliations.map((affiliation) => affiliation.id);
     setAffiliations(
-      affiliations
+      _affiliations
         ?.filter((affiliation) => affiliationIds.includes(affiliation.id))
         .map((affiliation) => (affiliation.status = action)),
     );
@@ -95,6 +109,47 @@ export default function Affiliations({ isSticky, setIsSticky }) {
     setAllOpenalexCorrections(getAffiliationsCorrections(newAffiliations));
   };
 
+  useEffect(() => {
+    const queryParams = {
+      datasets: searchParams.get('datasets') === 'true',
+      endYear: searchParams.get('endYear', '2023'),
+      startYear: searchParams.get('startYear', '2023'),
+      view: searchParams.get('view', ''),
+    };
+    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]);
+
+  useEffect(() => {
+    if (Object.keys(options).length > 0) refetch();
+  }, [options, refetch]);
+
   useEffect(() => {
     setAffiliations(data?.affiliations ?? []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -103,12 +158,74 @@ export default function Affiliations({ isSticky, setIsSticky }) {
   return (
     // TODO: Find a cleaner way to display the spinner and views
     <>
-      <Filters
-        isFetched
-        isSticky={isSticky}
-        sendQuery={sendQuery}
-        setIsSticky={setIsSticky}
-      />
+      <Container fluid as="section" className="filters sticky">
+        <Row verticalAlign="top" className="fr-p-1w">
+          <Ribbon />
+          <Col xs="2" className="cursor-pointer" offsetXs="1">
+            <Title as="h1" look="h6" className="fr-m-0">
+              {VITE_APP_NAME}
+              {VITE_HEADER_TAG && (
+                <Badge
+                  className="fr-ml-1w"
+                  color={VITE_HEADER_TAG_COLOR}
+                  size="sm"
+                >
+                  {VITE_HEADER_TAG}
+                </Badge>
+              )}
+            </Title>
+          </Col>
+          <Col>
+            <Row>
+              <Col
+                className="cursor-pointer"
+                onClick={(e) => {
+                  // setIsOpen(true);
+                  e.preventDefault();
+                }}
+              >
+                <TagGroup>
+                  <Tag color="blue-ecume" key="tag-sticky-years" size="sm">
+                    {`${options.startYear} - ${options.endYear}`}
+                  </Tag>
+                  {/* {tagsDisplayed.map((tag) => (
+                    <Tag
+                      color="blue-ecume"
+                      key={`tag-sticky-${tag.label}`}
+                      size="sm"
+                    >
+                      {tag.label}
+                    </Tag>
+                  ))} */}
+                </TagGroup>
+              </Col>
+              <Col className="text-right">
+                <SegmentedControl
+                  id="segSelector"
+                  name="segSelector"
+                  // onChangeValue={(view) => setSearchParams({ ...options, view })}
+                >
+                  <SegmentedElement
+                    checked={options.view === 'openalex'}
+                    label="Improve OpenAlex (RORs)"
+                    value="openalex"
+                  />
+                  <SegmentedElement
+                    checked={options.view === 'publications'}
+                    label="Publications corpus"
+                    value="publications"
+                  />
+                  <SegmentedElement
+                    checked={options.view === 'datasets'}
+                    label="Datasets corpus"
+                    value="datasets"
+                  />
+                </SegmentedControl>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </Container>
       <Container as="section" className="fr-mt-4w">
         {isFetching && (
           <Row>
@@ -152,7 +269,9 @@ export default function Affiliations({ isSticky, setIsSticky }) {
           </Row>
         )}
 
-        {!isFetching && isFetched && searchParams.get('view') === 'openalex' && (
+        {!isFetching
+          && isFetched
+          && searchParams.get('view') === 'openalex' && (
           <Openalex
             allAffiliations={affiliations}
             allOpenalexCorrections={allOpenalexCorrections}
@@ -162,7 +281,9 @@ export default function Affiliations({ isSticky, setIsSticky }) {
           />
         )}
 
-        {!isFetching && isFetched && searchParams.get('view') === 'publications' && (
+        {!isFetching
+          && isFetched
+          && searchParams.get('view') === 'publications' && (
           <Publications
             allAffiliations={affiliations}
             allPublications={data?.publications?.results ?? []}
@@ -177,7 +298,9 @@ export default function Affiliations({ isSticky, setIsSticky }) {
           />
         )}
 
-        {!isFetching && isFetched && searchParams.get('view') === 'datasets' && (
+        {!isFetching
+          && isFetched
+          && searchParams.get('view') === 'datasets' && (
           <Datasets
             allAffiliations={affiliations}
             allDatasets={data?.datasets?.results ?? []}
@@ -195,8 +318,3 @@ export default function Affiliations({ isSticky, setIsSticky }) {
     </>
   );
 }
-
-Affiliations.propTypes = {
-  isSticky: PropTypes.bool.isRequired,
-  setIsSticky: PropTypes.func.isRequired,
-};