From e6c9ba9e9ac7de86b5a3ecd04c9773935edc1dd9 Mon Sep 17 00:00:00 2001
From: Xavier Jp <xavier.jouppe@beta.gouv.fr>
Date: Thu, 25 Jul 2024 10:41:45 +0200
Subject: [PATCH] feat: responsive and first date (#1170)

* feat: responsive and first date

* refactor: getStore
---
 .../header/changelog-notification.module.css  | 12 +++++-
 components/header/changelog-notification.tsx  | 38 ++++++++-----------
 components/header/header-core/index.tsx       |  5 ++-
 .../header/header-core/styles.module.css      |  2 +
 hooks/use-storage.ts                          | 35 ++++++++++++++---
 5 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/components/header/changelog-notification.module.css b/components/header/changelog-notification.module.css
index 32c210d8c..f30b9f3b9 100644
--- a/components/header/changelog-notification.module.css
+++ b/components/header/changelog-notification.module.css
@@ -2,7 +2,7 @@
   content: '';
   position: absolute;
   top: 5px;
-  right: 5px;
+  right: 2px;
   width: 10px;
   height: 10px;
   background-color: #ff0000;
@@ -11,6 +11,14 @@
 }
 
 .changelogNotification {
-  top: -2px;
   position: relative;
 }
+
+@media only screen and (min-width: 1px) and (max-width: 992px) {
+  .notificationText {
+    display: none;
+  }
+  .changelogNotification::before {
+    top: 0;
+  }
+}
diff --git a/components/header/changelog-notification.tsx b/components/header/changelog-notification.tsx
index feddeeb04..6d88c15a2 100644
--- a/components/header/changelog-notification.tsx
+++ b/components/header/changelog-notification.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import { useEffect } from 'react';
-import FadeIn from '#components-ui/animation/fade-in';
 import { Icon } from '#components-ui/icon/wrapper';
-import InformationTooltip from '#components-ui/information-tooltip';
 import { changelogData } from '#models/historique-modifications';
 import { EScope, hasRights } from '#models/user/rights';
+import { formatDate } from '#utils/helpers';
 import { useStorage } from 'hooks';
 import useSession from 'hooks/use-session';
 import style from './changelog-notification.module.css';
@@ -31,7 +30,7 @@ export default function ChangelogNotification() {
   const [previousDateOfLastNews, saveDateOfLastNews] = useStorage(
     'local',
     NEW_SINCE_LAST_VISIT_ID,
-    dateOfLastNews
+    null
   );
 
   useEffect(() => {
@@ -40,32 +39,27 @@ export default function ChangelogNotification() {
     }
   }, []);
 
+  if (!previousDateOfLastNews) {
+    saveDateOfLastNews(formatDate(new Date()));
+  }
+
   if (
-    !dateOfLastNews ||
     !previousDateOfLastNews ||
+    !dateOfLastNews ||
     convertToISO(previousDateOfLastNews) >= convertToISO(dateOfLastNews)
   ) {
     return null;
   }
 
   return (
-    <li>
-      <FadeIn>
-        <InformationTooltip
-          verticalOrientation="bottom"
-          label="Découvrir les nouveautés"
-          width={200}
-          tabIndex={undefined}
-          ariaRelation="labelledby"
-        >
-          <a
-            href="/historique-des-modifications"
-            className={style.changelogNotification + ' fr-btn  fr-btn--sm'}
-          >
-            <Icon slug="present" />
-          </a>
-        </InformationTooltip>
-      </FadeIn>
-    </li>
+    <a
+      href="/historique-des-modifications"
+      className={style.changelogNotification + ' fr-link'}
+      title="Découvrir les dernières évolutions de l’Annuaire des Entreprises"
+    >
+      <Icon slug="present">
+        <span className={style.notificationText}>Nouveautés</span>
+      </Icon>
+    </a>
   );
 }
diff --git a/components/header/header-core/index.tsx b/components/header/header-core/index.tsx
index a27b026f3..4b4dcf312 100644
--- a/components/header/header-core/index.tsx
+++ b/components/header/header-core/index.tsx
@@ -97,6 +97,7 @@ export const HeaderCore: React.FC<IProps> = ({
                         </div>
                       ) : null}
                       <div className={styles.menuMobile}>
+                        <ChangelogNotificationWithoutSSR />
                         <Menu
                           session={session}
                           useAgentCTA={useAgentCTA}
@@ -113,7 +114,9 @@ export const HeaderCore: React.FC<IProps> = ({
                   <div className="fr-header__tools">
                     <div className="fr-header__tools-links">
                       <ul className="fr-links-group">
-                        <ChangelogNotificationWithoutSSR />
+                        <li>
+                          <ChangelogNotificationWithoutSSR />
+                        </li>
                         <li>
                           <Menu
                             session={session}
diff --git a/components/header/header-core/styles.module.css b/components/header/header-core/styles.module.css
index ab449d972..8883f15fd 100644
--- a/components/header/header-core/styles.module.css
+++ b/components/header/header-core/styles.module.css
@@ -18,6 +18,8 @@
   order: 3;
   padding: 1rem;
   margin-left: auto;
+  gap: 1rem;
+  display: flex;
 }
 
 @media screen and (min-width: 993px) {
diff --git a/hooks/use-storage.ts b/hooks/use-storage.ts
index 9479da80e..7b546e43d 100644
--- a/hooks/use-storage.ts
+++ b/hooks/use-storage.ts
@@ -1,20 +1,42 @@
 import { useState } from 'react';
 
+function isStorageAvailable(type: 'session' | 'local') {
+  const test = 'test';
+
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  const store = getStore(type);
+  try {
+    store.setItem(test, test);
+    store.removeItem(test);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+const getStore = (type: 'session' | 'local') => {
+  return type === 'session' ? window.sessionStorage : window.localStorage;
+};
+
 export const useStorage = (
   type: 'session' | 'local',
   key: string,
   initialValue: any
 ) => {
+  const storageAvailable = isStorageAvailable(type);
+
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
   const [storedValue, setStoredValue] = useState(() => {
-    if (typeof window === 'undefined') {
+    if (!storageAvailable) {
       return initialValue;
     }
 
     try {
-      const store =
-        type === 'session' ? window.sessionStorage : window.localStorage;
+      const store = getStore(type);
       // Get from local storage by key
       const item = store.getItem(key);
       // Parse stored json or if none return initialValue
@@ -25,6 +47,10 @@ export const useStorage = (
     }
   });
 
+  if (!storageAvailable) {
+    return [storedValue, () => {}];
+  }
+
   // Return a wrapped version of useState's setter function that ...
   // ... persists the new value to localStorage.
   const setValue = (value: any) => {
@@ -36,8 +62,7 @@ export const useStorage = (
       setStoredValue(valueToStore);
       // Save to local storage
       if (typeof window !== 'undefined') {
-        const store =
-          type === 'session' ? window.sessionStorage : window.localStorage;
+        const store = getStore(type);
         store.setItem(key, JSON.stringify(valueToStore));
       }
     } catch (error) {