feat: move news modal check to cookie

package.json

@@ -41,6 +41,7 @@
     "react-zoom-pan-pinch": "^3.0.2",
     "reaflow": "^5.1.2",
     "styled-components": "^5.3.8",
+    "universal-cookie": "^4.0.4",
     "zustand": "^4.3.6"
   },
   "devDependencies": {

src/containers/Modals/HerowandModal/index.tsx

@@ -1,51 +1,43 @@
 import React from "react";
-import { Modal, Group, Button, MantineProvider, Image, Text, Paper } from "@mantine/core";
-import { useDebouncedState, useSessionStorage } from "@mantine/hooks";
-
-export const HerowandModal = () => {
-  const [opened, setOpened] = useDebouncedState(false, 300);
-  const [isNewsVisible, setNewsVisible] = useSessionStorage<boolean>({
-    key: "news",
-    defaultValue: true,
-    getInitialValueInEffect: true,
-  });
-
-  React.useEffect(() => {
-    if (isNewsVisible) setOpened(true);
-    else setOpened(false);
-  }, [isNewsVisible, setOpened]);
-
-  const onClose = () => {
-    setNewsVisible(false);
-    setOpened(false);
-  };
+import {
+  Modal,
+  Group,
+  Button,
+  MantineProvider,
+  Image,
+  Text,
+  Paper,
+  ModalProps,
+  Anchor,
+} from "@mantine/core";
 
+export const HerowandModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   return (
     <MantineProvider theme={{ colorScheme: "dark" }}>
       <Modal title="What's New?" opened={opened} onClose={onClose} centered>
         <Group>
-          <Paper withBorder>
-            <Image
-              radius="md"
-              mx="auto"
-              src="assets/herowand_banner.webp"
-              width={400}
-              alt="herowand"
-            />
-          </Paper>
+          <Anchor href="https://editor.herowand.com">
+            <Paper withBorder>
+              <Image
+                radius="md"
+                mx="auto"
+                src="assets/herowand_banner.webp"
+                width={400}
+                alt="herowand"
+              />
+            </Paper>
+          </Anchor>
         </Group>
         <Text pt="lg">
           Introducing you something new...
           <hr />
-          Herowand Editor - the ultimate tool for visualizing, editing, and sharing data in graph
-          format. Import JSON, YAML, TOML, XML and manipulate data on the graph. Save to cloud,
-          share, download as image, search through graph, accessibility features. Try it now!
+          Now, you can visualize not only JSON but also other data formats. Explore Herowand Editor.
         </Text>
         <Group pt="lg" position="right">
           <Button color="red" onClick={onClose}>
             Dismiss
           </Button>
-          <Button component="a" href="https://editor.herowand.com/?ref=jsoncrack">
+          <Button onClick={onClose} component="a" href="https://editor.herowand.com/?ref=jsoncrack">
             Show me!
           </Button>
         </Group>

src/pages/_app.tsx

@@ -6,6 +6,7 @@ import { MantineProvider } from "@mantine/core";
 import { init } from "@sentry/nextjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "react-hot-toast";
+import Cookie from "universal-cookie";
 import { GoogleAnalytics } from "src/components/GoogleAnalytics";
 import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme, lightTheme } from "src/constants/theme";
@@ -21,6 +22,9 @@ if (process.env.NODE_ENV !== "development") {
   });
 }
 
+const cookie = new Cookie();
+const newsCookie = cookie.get("news_seen");
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -39,10 +43,20 @@ const monaSans = localFont({
 
 function JsonCrack({ Component, pageProps }: AppProps) {
   const [isReady, setReady] = React.useState(false);
+  const [showNews, setShowNews] = React.useState(false);
   const lightmode = useStored(state => state.lightmode);
 
   React.useEffect(() => {
     setReady(true);
+
+    if (typeof newsCookie === "undefined") {
+      setShowNews(true);
+    } else setShowNews(false);
+  }, []);
+
+  const closeNews = React.useCallback(() => {
+    setShowNews(false);
+    cookie.set("news_seen", true, { path: "/", maxAge: 43200 });
   }, []);
 
   if (isReady)
@@ -51,7 +65,8 @@ function JsonCrack({ Component, pageProps }: AppProps) {
         <GoogleAnalytics />
         <ThemeProvider theme={lightmode ? lightTheme : darkTheme}>
           <GlobalStyle />
-          <HerowandModal />
+          {}
+          <HerowandModal opened={showNews} onClose={closeNews} />
           <MantineProvider
             withGlobalStyles
             withNormalizeCSS

yarn.lock

@@ -979,6 +979,11 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
   integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/estree@*", "@types/estree@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
@@ -1516,7 +1521,7 @@ convert-source-map@^1.5.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
-cookie@^0.4.1:
+cookie@^0.4.0, cookie@^0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
@@ -4261,6 +4266,14 @@ undoo@^0.5.0:
     defaulty "^2.1.0"
     fast-deep-equal "^1.0.0"
 
+universal-cookie@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
+  integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie "^0.4.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"