Fix PR comments

- Handle nagbar visibility inside the component itself
the-deep · Nov 2, 2023 · 8b9903e · 8b9903e
1 parent 0bfd3c9
commit 8b9903e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 37 deletions.
diff --git a/app/Base/components/Navbar/index.tsx b/app/Base/components/Navbar/index.tsx
@@ -2,12 +2,10 @@ import React, {
     useCallback,
     useContext,
     useEffect,
-    useMemo,
     useRef,
 } from 'react';
 import {
     _cs,
-    isNotDefined,
 } from '@togglecorp/fujs';
 import { Link } from 'react-router-dom';
 import { useQuery, useMutation } from '@apollo/client';
@@ -50,7 +48,6 @@ import { LOGOUT, USER_NOTIFICATIONS_COUNT } from './queries';
 import styles from './styles.css';
 
 const NOTIFICATION_POLL_INTERVAL = 60000;
-const releaseTime = process.env.REACT_APP_RELEASE_TIME;
 
 interface Props {
     className?: string;
@@ -119,24 +116,6 @@ function Navbar(props: Props) {
         message: 'Are you sure you want to logout?',
     });
 
-    const today = new Date().getTime();
-    const releaseDate = new Date(releaseTime ?? '').getTime();
-
-    const showNagbar = useMemo(() => {
-        if (isNotDefined(releaseTime)) {
-            return false;
-        }
-        const diff = Math.round((today - releaseDate) / (60 * 60 * 24 * 1000));
-        if (diff < 0 || diff > 30) {
-            return false;
-        }
-
-        return true;
-    }, [
-        today,
-        releaseDate,
-    ]);
-
     const handleCloseNotificationClick = useCallback(() => {
         notificationRef?.current?.setShowPopup(false);
     }, []);
@@ -155,9 +134,7 @@ function Navbar(props: Props) {
 
     return (
         <div className={styles.navbarContainer}>
-            {showNagbar && (
-                <Nagbar />
-            )}
+            <Nagbar />
             <nav className={_cs(className, styles.navbar)}>
                 <Link
                     to={route.home.path}

diff --git a/app/components/Nagbar/index.tsx b/app/components/Nagbar/index.tsx
@@ -1,18 +1,24 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import {
     IoCloseOutline,
 } from 'react-icons/io5';
 import {
     QuickActionButton,
     Link,
 } from '@the-deep/deep-ui';
+import {
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import useLocalStorage from '#hooks/useLocalStorage';
 
 import styles from './styles.css';
 
 const releaseVersion = process.env.REACT_APP_RELEASE_VERSION;
-const wikiLink = `https://github.com/the-deep/deeper/wiki/${releaseVersion}`;
+const wikiLink = `https://github.com/the-deep/deeper/wiki/DEEP-${releaseVersion}`;
+const today = new Date().getTime();
+const releaseTime = process.env.REACT_APP_RELEASE_TIME;
+const releaseDate = new Date(releaseTime ?? '').getTime();
 
 function Nagbar() {
     const [
@@ -21,36 +27,50 @@ function Nagbar() {
     ] = useState<boolean>(true);
 
     const [
-        releaseNoteSeen,
-        setReleaseNoteSeen,
-    ] = useLocalStorage<boolean>('release-note-seen', false);
+        seenReleaseNote,
+        setSeenReleaseNote,
+    ] = useLocalStorage<string | undefined>('release-note-seen', undefined);
+
+    const showNagbar = useMemo(() => {
+        if (isNotDefined(releaseTime) || !nagbarShown) {
+            return false;
+        }
+        const diff = Math.round((today - releaseDate) / (60 * 60 * 24 * 1000));
+        if (diff < 0 || diff > 30) {
+            return false;
+        }
+
+        return true;
+    }, [
+        nagbarShown,
+    ]);
 
     const handleClose = useCallback(() => {
         setNagbarShown(false);
-        setReleaseNoteSeen(true);
+        setSeenReleaseNote(releaseVersion);
     }, [
-        setReleaseNoteSeen,
+        setSeenReleaseNote,
     ]);
 
-    if (!nagbarShown || releaseNoteSeen) {
+    if ((seenReleaseNote === releaseVersion) || !showNagbar) {
         return null;
     }
 
     return (
         <div className={styles.nagbar}>
             <div className={styles.content}>
                 DEEP has been updated to
-                &nbsp;
+                &#8204;
                 {releaseVersion}
                 .
-                &nbsp;
-                Read
-                &nbsp;
+                &#8204;
+                Find the release notes
+                &#8204;
                 <Link
                     to={wikiLink}
                     actionsContainerClassName={styles.linkIcon}
                 >
-                    release notes
+                    here
                 </Link>
                 .
             </div>
@@ -59,6 +79,7 @@ function Nagbar() {
                 name={undefined}
                 onClick={handleClose}
                 variant="transparent"
+                title="Dismiss"
             >
                 <IoCloseOutline />
             </QuickActionButton>