fix(ui): Adapt dsfr-plus

dataesr · Mar 29, 2024 · 0449b79 · 0449b79
1 parent 21f540a
commit 0449b79
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 183 deletions.
diff --git a/client/.env b/client/.env
@@ -5,6 +5,6 @@ VITE_APP_TAG_LIMIT=3
 VITE_DESCRIPTION="Retrieve the scholarly works of your institution"
 VITE_GIT_REPOSITORY_URL="https://github.com/dataesr/works-magnet"
 VITE_HEADER_TAG=dev
-VITE_HEADER_TAG_COLOR="green-emeraude"
-VITE_MINISTER_NAME="Minisère de l'enseignement supérieur et de la recherche"
+VITE_HEADER_TAG_COLOR="new"
+VITE_MINISTER_NAME="Minisère de<br>l'enseignement<br />supérieur<br />et de la recherche"
 VITE_VERSION=$npm_package_version
diff --git a/client/src/components/spinner/index.jsx b/client/src/components/spinner/index.jsx
diff --git a/client/src/components/spinner/index.scss b/client/src/components/spinner/index.scss
diff --git a/client/src/layout/Header.jsx b/client/src/layout/Header.jsx
@@ -1,3 +1,5 @@
+import { Badge } from '@dataesr/dsfr-plus';
+
 import Beta from '../components/beta';
 
 const {
@@ -11,60 +13,35 @@ const {
 // TODO : all, Link from dsfr-plus
 export default function Header() {
   return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    // <>
-    //   <HeaderWrapper className="header header-sticky">
-    //     <>
-    //       <Beta />
-    //       <HeaderBody>
-    //         <Logo
-    //           asLink={<NavLink to="./" />}
-    //           splitCharacter={9}
-    //         >
-    //           {VITE_MINISTER_NAME}
-    //         </Logo>
-    //         <Service
-    //           asLink={<NavLink to="./" />}
-    //           description={VITE_DESCRIPTION}
-    //           title={(
-    //             <>
-    //               {VITE_APP_NAME}
-    //               {VITE_HEADER_TAG && (
-    //                 <Badge
-    //                   color={(!VITE_HEADER_TAG_COLOR) ? 'info' : undefined}
-    //                   colorFamily={VITE_HEADER_TAG_COLOR}
-    //                   isSmall
-    //                   text={VITE_HEADER_TAG}
-    //                 />
-    //               )}
-    //             </>
-    //           )}
-    //         />
-    //       </HeaderBody>
-    //     </>
-    //   </HeaderWrapper>
-    // </>
     <header role="banner" className="fr-header">
+      <Beta />
       <div className="fr-header__body">
         <div className="fr-container">
           <div className="fr-header__body-row">
             <div className="fr-header__brand fr-enlarge-link">
               <div className="fr-header__brand-top">
                 <div className="fr-header__logo">
-                  <p className="fr-logo">
-                    Intitulé
-                    <br />
-                    officiel
-                  </p>
+                  <p className="fr-logo" style={{ whiteSpace: 'pre-wrap' }} dangerouslySetInnerHTML={{ __html: VITE_MINISTER_NAME }} />
                 </div>
               </div>
               <div className="fr-header__service">
-                <a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
+                <a href="/" title={`Accueil - ${VITE_MINISTER_NAME}`}>
                   <p className="fr-header__service-title">
-                    Nom du site / service
+                    {VITE_APP_NAME}
+                    {VITE_HEADER_TAG && (
+                      <Badge
+                        noIcon
+                        size="sm"
+                        variant={VITE_HEADER_TAG_COLOR}
+                      >
+                        {VITE_HEADER_TAG}
+                      </Badge>
+                    )}
                   </p>
                 </a>
-                <p className="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
+                <p className="fr-header__service-tagline">
+                  {VITE_DESCRIPTION}
+                </p>
               </div>
             </div>
           </div>

diff --git a/client/src/pages/actions/actionsOpenalexFeedback.jsx b/client/src/pages/actions/actionsOpenalexFeedback.jsx
@@ -31,13 +31,7 @@ export default function ActionsOpenalexFeedback({ allOpenalexCorrections }) {
 
   useEffect(() => {
     const emailRegex = new RegExp(/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
-    const testEmail = (email) => {
-      if (emailRegex.test(email)) {
-        setValidEmail(email);
-      } else {
-        setValidEmail(null);
-      }
-    };
+    const testEmail = (email) => setValidEmail(emailRegex.test(email) ? email : null);
     const timeOutId = setTimeout(() => testEmail(userEmail), 500);
     return () => clearTimeout(timeOutId);
   }, [userEmail]);

diff --git a/client/src/pages/filters.jsx b/client/src/pages/filters.jsx
@@ -27,6 +27,7 @@ const START_YEAR = 2010;
 const years = [...Array(new Date().getFullYear() - START_YEAR + 1).keys()].map((year) => (year + START_YEAR).toString()).map((year) => ({ label: year, value: year }));
 
 const normalizeStr = (x) => x.replaceAll(',', ' ').replaceAll('  ', ' ');
+
 export default function Filters({ sendQuery }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [currentSearchParams, setCurrentSearchParams] = useState({});

diff --git a/client/src/pages/index.jsx b/client/src/pages/index.jsx
@@ -1,9 +1,7 @@
-/* eslint-disable max-len */
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { Container } from '@dataesr/dsfr-plus';
+import { Container, Spinner } from '@dataesr/dsfr-plus';
 import { useQuery } from '@tanstack/react-query';
-import { PageSpinner } from '../components/spinner';
 import { status } from '../config';
 import Filters from './filters';
 import { getData } from '../utils/works';
@@ -95,7 +93,7 @@ export default function Home() {
       </Container>
       <Container fluid as="section">
         {(isFetching || (isFetched && (allAffiliations?.length ?? 0) === 0)) && (
-          <PageSpinner />
+          <Spinner size={48} />
         )}
         {!isFetching
           && (allAffiliations?.length > 0 || allDatasets?.length > 0 || allPublications?.length > 0)