Fix news modal

renderer/atoms/newsAtom.ts

@@ -1,6 +1,4 @@
 import { atomWithStorage } from "jotai/utils";
 
-export const newsAtom = atomWithStorage("news", {
+export const newsSeenAtom = atomWithStorage("newsSeen", false);
-  seen: false,
+export const newsAtom = atomWithStorage("news", []);
-  version: null,
-});

renderer/components/NewsModal.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 
-export const NewsModal = ({ show, setShow }) => {
+export const NewsModal = ({ show, setShow, news }) => {
+  console.log("🚀 => file: NewsModal.tsx:4 => news:", news);
+
   return (
     <dialog className={`modal ${show && "modal-open"}`}>
       <div className="modal-box flex flex-col text-center items-center gap-4">
+        <button onClick={() => setShow(false)}>Don't show again</button>
         <button
           className="absolute top-2 right-4 btn btn-circle"
           onClick={() => setShow(false)}>
@@ -29,6 +32,10 @@ export const NewsModal = ({ show, setShow }) => {
             />
           </svg>
         </button>
+
+        <div className="h-80">
+          <h2 className="text-2xl font-bold text-center">{news.title}</h2>
+        </div>
       </div>
 
       <form method="dialog" className="modal-backdrop">

renderer/pages/index.tsx

@@ -30,7 +30,8 @@ import {
   DoubleUpscaylPayload,
   ImageUpscaylPayload,
 } from "@common/types/types";
-import { newsAtom } from "@/atoms/newsAtom";
+import { NewsModal } from "@/components/NewsModal";
+import { newsAtom, newsSeenAtom } from "@/atoms/newsAtom";
 
 const Home = () => {
   const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
@@ -57,6 +58,7 @@ const Home = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [showCloudModal, setShowCloudModal] = useState(false);
+  const [showNewsModal, setShowNewsModal] = useState(false);
 
   // ATOMIC STATES
   const [outputPath, setOutputPath] = useAtom(outputPathAtom);
@@ -70,6 +72,7 @@ const Home = () => {
     dontShowCloudModalAtom
   );
   const noImageProcessing = useAtomValue(noImageProcessingAtom);
+  const [newsSeen, setNewsSeen] = useAtom(newsSeenAtom);
   const [news, setNews] = useAtom(newsAtom);
 
   const { logit } = useLog();
@@ -82,12 +85,9 @@ const Home = () => {
       /Upscayl\/([\d\.]+\d+)/
     )[1];
     setVersion(upscaylVersion);
-    // NEWS
-    if (news.seen === false) {
-    }
   }, []);
 
-  // EVENT LISTENERS
+  // ELECTRON EVENT LISTENERS
   useEffect(() => {
     const handleErrors = (data: string) => {
       if (data.includes("invalid gpu")) {
@@ -221,19 +221,19 @@ const Home = () => {
   useEffect(() => {
     fetch("/news.json")
       .then((res) => {
-        console.log("🚀 => file: index.tsx:237 => res:", res);
         return res.blob();
       })
       .then(async (data) => {
-        const version = navigator?.userAgent?.match(/Upscayl\/([\d\.]+\d+)/)[1];
+        const currentVersion = navigator?.userAgent?.match(
+          /Upscayl\/([\d\.]+\d+)/
+        )[1];
         const newsData = JSON.parse(await data.text());
-        if (newsData[version]) {
+        if (newsSeen === true) {
-          console.log(
+          setShowNewsModal(false);
-            "🚀 => file: index.tsx:244 => newsData[version]:",
+          return;
-            newsData[version]
-          );
-          setNews(newsData[version]);
         }
+        setNews(newsData);
+        setShowNewsModal(true);
       });
   }, []);
 
@@ -270,17 +270,13 @@ const Home = () => {
   // * HANDLERS
   const resetImagePaths = () => {
     logit("🔄 Resetting image paths");
-
     setDimensions({
       width: null,
       height: null,
     });
-
     setProgress("");
-
     setImagePath("");
     setUpscaledImagePath("");
-
     setBatchFolderPath("");
     setUpscaledBatchFolderPath("");
   };
@@ -525,6 +521,15 @@ const Home = () => {
           </button>
         )}
 
+        <NewsModal
+          show={showNewsModal}
+          setShow={(val: boolean) => {
+            setShowNewsModal(val);
+            setNews((prev) => ({ ...prev, seen: true }));
+          }}
+          news={news}
+        />
+
         <Tabs selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
 
         {selectedTab === 0 && (

renderer/public/news.json

@@ -1,5 +1 @@
-{
+{}
-  "2.9.3": {
-    "version": "2.9.3"
-  }
-}