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 ( -
  • - - - - - - - -
  • + + + Nouveautés + + ); } 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 = ({ ) : null}
    + = ({
      - +
    • + +
    • { + 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) {