continue

client/src/components/File/index.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+// import '@gouvfr/dsfr/dist/component/link/link.css';
+
+const getAll = (props) => {
+  const newProps = {};
+
+  Object.keys(props).forEach((key) => {
+    if (key.startsWith('data-') || key === 'id') {
+      newProps[key] = props[key];
+    }
+  });
+
+  return newProps;
+};
+
+function File({
+  className,
+  label,
+  errorMessage,
+  hint,
+  onChange,
+  multiple,
+  accept,
+  ...remainingProps
+}) {
+  const _className = classNames(
+    'fr-upload-group',
+    className,
+    {
+      [`ds-fr--${label}`]: label,
+    },
+  );
+
+  return (
+    <div {...getAll(remainingProps)} className={_className}>
+      <label className="fr-label" htmlFor="file-upload">
+        {label}
+        {hint && <p className="fr-hint-text">{hint}</p>}
+      </label>
+      <input
+        onChange={onChange}
+        className="fr-upload"
+        type="file"
+        aria-describedby={hint || undefined}
+        multiple={multiple}
+        accept={accept}
+      />
+      {errorMessage && (
+        <p id="file-upload-with-error-desc-error" className="fr-error-text">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}
+
+File.defaultProps = {
+  className: '',
+  hint: '',
+  errorMessage: '',
+  accept: undefined,
+  multiple: false,
+  onChange: () => { },
+};
+
+File.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  multiple: PropTypes.bool,
+  onChange: PropTypes.func,
+  errorMessage: PropTypes.string,
+  hint: PropTypes.string,
+  accept: PropTypes.string,
+};
+
+export default File;

client/src/components/spinner/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useId } from 'react';
 
-import { Row } from '@dataesr/react-dsfr';
+import { Row } from '@dataesr/dsfr-plus';
 
 import './index.scss';
 

client/src/main.jsx

@@ -1,9 +1,9 @@
+import React, { useEffect } from 'react';
+import { HashRouter, useLocation } from 'react-router-dom';
 import { createInstance, MatomoProvider, useMatomo } from '@m4tt72/matomo-tracker-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
-import { HashRouter, useLocation } from 'react-router-dom';
 
 import Router from './router';
 import { ToastContextProvider } from './hooks/useToast';

client/src/pages/actions/actionsAffiliations.jsx

@@ -1,13 +1,14 @@
-import { Col, File, Row } from '@dataesr/react-dsfr';
-import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Row, Col } from '@dataesr/react-dsfr';
 import { Tooltip } from 'react-tooltip';
 import useToast from '../../hooks/useToast';
 
 import Button from '../../components/button';
 import { status } from '../../config';
 import { export2json, importJson } from '../../utils/files';
+import File from '../../components/File';
 
 export default function ActionsAffiliations({
   allAffiliations,

client/src/pages/actions/actionsDatasets.jsx

@@ -1,7 +1,5 @@
-import { Col, Row } from '@dataesr/react-dsfr';
-import PropTypes from 'prop-types';
 import { useSearchParams } from 'react-router-dom';
-
+import PropTypes from 'prop-types';
 import ButtonDropdown from '../../components/button-dropdown';
 
 export default function ActionsDatasets({
@@ -10,11 +8,7 @@ export default function ActionsDatasets({
   const [searchParams] = useSearchParams();
 
   return (
-    <Row className="fr-mb-1w">
-      <Col className="text-right">
-        <ButtonDropdown data={allDatasets} label="datasets" searchParams={searchParams} />
-      </Col>
-    </Row>
+    <ButtonDropdown data={allDatasets} label="datasets" searchParams={searchParams} />
   );
 }
 

client/src/pages/actions/actionsOpenalex.jsx

@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import { useSearchParams } from 'react-router-dom';
-
+import PropTypes from 'prop-types';
 import ButtonDropdown from '../../components/button-dropdown';
 
 export default function ActionsOpenalex({

client/src/pages/actions/actionsOpenalexFeedback.jsx

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import {
   Button,
-  Row, Col,
   Modal, ModalContent, ModalFooter, ModalTitle,
   TextInput,
 } from '@dataesr/dsfr-plus';
@@ -44,41 +43,39 @@ export default function ActionsOpenalexFeedback({ allOpenalexCorrections }) {
   }, [userEmail]);
 
   return (
-    <Row className="fr-mb-1w">
-      <Col className="text-right">
-        <Modal isOpen={isModalOpen} hide={openModal}>
-          <ModalTitle>
-            Improve OpenAlex data
-          </ModalTitle>
-          <ModalContent>
-            {`You corrected RoR matching for ${allOpenalexCorrections.length} raw affiliations strings.`}
-            <TextInput
-              label="Please indicate your email"
-              onChange={(e) => setUserEmail(e.target.value)}
-              required
-              type="email"
-              withAutoValidation
-            />
-          </ModalContent>
-          <ModalFooter>
-            <Button
-              disabled={!allOpenalexCorrections.length > 0 || !validEmail}
-              onClick={feedback}
-              title="Send feedback to OpenAlex"
-            >
-              Send feedback to OpenAlex
-            </Button>
-          </ModalFooter>
-        </Modal>
-        <Button
-          disabled={!allOpenalexCorrections.length > 0}
-          onClick={openModal}
-          size="sm"
-        >
-          Send feedback to OpenAlex
-        </Button>
-      </Col>
-    </Row>
+    <>
+      <Button
+        disabled={!allOpenalexCorrections.length > 0}
+        onClick={openModal}
+        size="sm"
+      >
+        Send feedback to OpenAlex
+      </Button>
+      <Modal isOpen={isModalOpen} hide={openModal}>
+        <ModalTitle>
+          Improve OpenAlex data
+        </ModalTitle>
+        <ModalContent>
+          {`You corrected RoR matching for ${allOpenalexCorrections.length} raw affiliations strings.`}
+          <TextInput
+            label="Please indicate your email"
+            onChange={(e) => setUserEmail(e.target.value)}
+            required
+            type="email"
+            withAutoValidation
+          />
+        </ModalContent>
+        <ModalFooter>
+          <Button
+            disabled={!allOpenalexCorrections.length > 0 || !validEmail}
+            onClick={feedback}
+            title="Send feedback to OpenAlex"
+          >
+            Send feedback to OpenAlex
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
   );
 }
 

client/src/pages/actions/actionsPublications.jsx

@@ -1,18 +1,12 @@
-import { Col, Row } from '@dataesr/react-dsfr';
-import PropTypes from 'prop-types';
 import { useSearchParams } from 'react-router-dom';
-
+import PropTypes from 'prop-types';
 import ButtonDropdown from '../../components/button-dropdown';
 
 export default function ActionsPublications({ allPublications }) {
   const [searchParams] = useSearchParams();
 
   return (
-    <Row className="fr-mb-1w">
-      <Col className="text-right">
-        <ButtonDropdown data={allPublications} label="publications" searchParams={searchParams} />
-      </Col>
-    </Row>
+    <ButtonDropdown data={allPublications} label="publications" searchParams={searchParams} />
   );
 }
 

client/src/pages/affiliationsTab.jsx

@@ -1,9 +1,9 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import {
   Row, Col,
   TextInput,
 } from '@dataesr/dsfr-plus';
-import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
 
 import AffiliationsView from './affiliationsView';
 import Gauge from '../components/gauge';

client/src/pages/affiliationsView.jsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
 import { Column } from 'primereact/column';
 import { DataTable } from 'primereact/datatable';
 import { FilterMatchMode } from 'primereact/api';
-import PropTypes from 'prop-types';
-import { useState } from 'react';
 
 import { nameTemplate, rorTemplate, statusRowFilterTemplate, statusTemplate, worksExampleTemplate } from '../utils/templates';
 

client/src/pages/datasetsTab.jsx

@@ -1,9 +1,9 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import {
   Row, Col,
   TextInput,
 } from '@dataesr/dsfr-plus';
-import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
 
 import Gauge from '../components/gauge';
 import { datasources, status } from '../config';

client/src/pages/datasetsView.jsx

@@ -1,9 +1,9 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
 import { FilterMatchMode } from 'primereact/api';
 import { Column } from 'primereact/column';
 import { DataTable } from 'primereact/datatable';
 import { MultiSelect } from 'primereact/multiselect';
-import PropTypes from 'prop-types';
-import { useState } from 'react';
 
 import {
   affiliationsTemplate,

client/src/pages/datasetsYearlyDistribution.jsx

@@ -1,11 +1,10 @@
+import PropTypes from 'prop-types';
+import { useSearchParams } from 'react-router-dom';
 import {
   Row, Col,
 } from '@dataesr/dsfr-plus';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { useSearchParams } from 'react-router-dom';
 
 import { range } from '../utils/works';
 

client/src/pages/filters.jsx

@@ -1,19 +1,16 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useSearchParams } from 'react-router-dom';
 import {
-  Title,
   Badge,
   Button,
   Checkbox,
-  Col,
-  Row,
+  Row, Col,
+  SegmentedControl, SegmentedElement,
   Select, SelectOption,
   TagGroup, Tag,
-  SegmentedControl, SegmentedElement,
+  Title,
 } from '@dataesr/dsfr-plus';
-
-import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-
 import TagInput from '../components/tag-input';
 import useScroll from '../hooks/useScroll';
 import { getRorData, isRor } from '../utils/ror';
@@ -170,11 +167,12 @@ export default function Filters({ sendQuery }) {
               <Tag color="blue-ecume">
                 {`${currentSearchParams.startYear} - ${currentSearchParams.endYear}`}
               </Tag>
-              {tags.map((tag) => (
+              {tags.slice(0, 5).map((tag) => (
                 <Tag color="blue-ecume">
                   {tag.label}
                 </Tag>
               ))}
+              {(tags.length > 5) && <span>...</span>}
             </TagGroup>
           </Col>
           <Col xs="3">

client/src/pages/openalexTab.jsx

@@ -1,10 +1,9 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import {
   Container, Row, Col,
   TextInput,
 } from '@dataesr/dsfr-plus';
-import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
-
 import OpenalexView from './openalexView';
 import { status } from '../config';
 import { normalizeName } from '../utils/works';

client/src/pages/openalexView.jsx

@@ -1,8 +1,8 @@
+import PropTypes from 'prop-types';
+
 import { Column } from 'primereact/column';
 import { DataTable } from 'primereact/datatable';
 import { InputTextarea } from 'primereact/inputtextarea';
-import PropTypes from 'prop-types';
-
 import useToast from '../hooks/useToast';
 import { isRor } from '../utils/ror';
 import { correctionTemplate, hasCorrectionTemplate, nameTemplate, rorTemplate, worksExampleTemplate } from '../utils/templates';

client/src/pages/publicationsTab.jsx

@@ -1,11 +1,9 @@
-import {
-  Col,
-  Row,
-  TextInput,
-} from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
-
+import {
+  Row, Col,
+  TextInput,
+} from '@dataesr/dsfr-plus';
 import PublicationsView from './publicationsView';
 import Gauge from '../components/gauge';
 import { datasources, status } from '../config';