set banner cooldown for hiding

Author: raclim

client/modules/IDE/pages/IDEView.jsx

@@ -29,6 +29,13 @@ import useIsMobile from '../hooks/useIsMobile';
 import Banner from '../components/Banner';
 import { P5VersionProvider } from '../hooks/useP5Version';
 
+const BANNER_DISMISS_KEY = 'bannerLastDismissedAt';
+const BANNER_COOLDOWN_MINUTES = 30;
+
+function minutesSince(timestamp) {
+  return (Date.now() - timestamp) / (1000 * 60);
+}
+
 function getTitle(project) {
   const { id } = project;
   return id ? `p5.js Web Editor | ${project.name}` : 'p5.js Web Editor';
@@ -106,7 +113,7 @@ const IDEView = () => {
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const [MaxSize, setMaxSize] = useState(window.innerWidth);
-  const [displayBanner, setDisplayBanner] = useState(false);
+  const [displayBanner, setDisplayBanner] = useState(true);
 
   const cmRef = useRef({});
 
@@ -151,6 +158,7 @@ const IDEView = () => {
       }
     };
   }, [shouldAutosave, dispatch]);
+
   useEffect(() => {
     const updateInnerWidth = (e) => {
       setMaxSize(e.target.innerWidth);
@@ -163,6 +171,29 @@ const IDEView = () => {
     };
   }, [setMaxSize]);
 
+  // checks how long banner has been closed for to hide banner
+  useEffect(() => {
+    const stored = window.localStorage.getItem(BANNER_DISMISS_KEY);
+    const lastClosedAt = stored ? Number(stored) : null;
+
+    if (!lastClosedAt) {
+      setDisplayBanner(true);
+      return;
+    }
+
+    if (minutesSince(lastClosedAt) >= BANNER_COOLDOWN_MINUTES) {
+      setDisplayBanner(true);
+    } else {
+      setDisplayBanner(false);
+    }
+  }, []);
+
+  const handleBannerClose = () => {
+    setDisplayBanner(false);
+
+    window.localStorage.setItem(BANNER_DISMISS_KEY, String(Date.now()));
+  };
+
   const consoleCollapsedSize = 29;
   const currentConsoleSize = ide.consoleIsExpanded
     ? consoleSize
@@ -173,7 +204,7 @@ const IDEView = () => {
       <Helmet>
         <title>{getTitle(project)}</title>
       </Helmet>
-      {displayBanner && <Banner onClose={() => setDisplayBanner(false)} />}
+      {displayBanner && <Banner onClose={handleBannerClose} />}
       <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
       <WarnIfUnsavedChanges />
       <Toast />