Clean up modal logic

Author: PeterTYLiu

src/App.tsx

@@ -8,7 +8,7 @@ import { GameStateContext, type GameState } from "./hooks/useGameStateContext";
 import { defaultSettings, SettingsContext, type Settings } from "./hooks/useSettingsContext";
 import generateTiles from "./utils/generateTiles";
 
-const version = "1.0.9";
+const version = "1.0.10";
 
 function App() {
   const settingsOnLoad: Settings = { ...defaultSettings };

src/components/aboutModal/AboutModal.tsx

@@ -1,18 +1,14 @@
-import { useEffect, useRef, type Dispatch } from "react";
+import { RefObject } from "react";
 import styles from "./AboutModal.module.css";
 
-export default function AboutModal({ shown, setShown }: { shown: boolean; setShown: Dispatch<boolean> }) {
-  const dialogRef = useRef<HTMLDialogElement | null>(null);
-
-  useEffect(() => {
-    if (shown) {
-      dialogRef.current?.removeAttribute("open");
-      dialogRef.current?.showModal();
-    } else dialogRef.current?.close();
-  }, [shown]);
+export default function AboutModal({ aboutModalRef }: { aboutModalRef: RefObject<HTMLDialogElement | null> }) {
+  const indicateAboutModalHasBeenSeen = () => {
+    localStorage.setItem("showAboutModal", "false");
+  };
 
   return (
-    <dialog ref={dialogRef} className={styles.dialog}>
+    // @ts-ignore since closedby is not recognized by TS yet
+    <dialog ref={aboutModalRef} className={styles.dialog} closedby="any" onClose={indicateAboutModalHasBeenSeen}>
       <header>
         <p>Welcome to</p>
         <h1>RuneSweeper</h1>
@@ -37,8 +33,8 @@ export default function AboutModal({ shown, setShown }: { shown: boolean; setSho
       <button
         className={styles.start}
         onClick={() => {
-          localStorage.setItem("showAboutModal", "false");
-          setShown(false);
+          indicateAboutModalHasBeenSeen();
+          aboutModalRef.current?.close();
         }}
       >
         Play

src/components/header/Header.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef } from "react";
 import { useGameStateContext } from "../../hooks/useGameStateContext";
 import { useSettingsContext } from "../../hooks/useSettingsContext";
 import generateTiles from "../../utils/generateTiles";
@@ -9,13 +9,19 @@ import Timer from "../timer/Timer";
 import styles from "./Header.module.css";
 
 export default function Header() {
-  const [settingsModalShown, setSettingsModalShown] = useState(false);
-  const [aboutModalShown, setAboutModalShown] = useState(localStorage.getItem("showAboutModal") ? false : true);
+  const aboutModalRef = useRef<HTMLDialogElement>(null);
+  const settingsModalRef = useRef<HTMLDialogElement>(null);
+
   const { gameState, setGameState } = useGameStateContext();
   const { settings } = useSettingsContext();
 
   const { status } = gameState;
 
+  useEffect(() => {
+    const hasSeenAbout = localStorage.getItem("showAboutModal");
+    if (!hasSeenAbout) aboutModalRef.current?.showModal();
+  }, []);
+
   // Reset to pre-game state
   function reset() {
     setGameState({
@@ -39,17 +45,17 @@ export default function Header() {
           <MineCounter />
         ) : (
           <>
-            <button onClick={() => setAboutModalShown(true)}>
+            <button onClick={() => aboutModalRef.current?.showModal()}>
               <img src="./images/info.png" />
             </button>
-            <button onClick={() => setSettingsModalShown(true)}>
+            <button onClick={() => settingsModalRef.current?.showModal()}>
               <img src="./images/settings.png" />
             </button>
           </>
         )}
       </div>
-      <SettingsModal shown={settingsModalShown} setShown={setSettingsModalShown} />
-      <AboutModal shown={aboutModalShown} setShown={setAboutModalShown} />
+      <SettingsModal settingsModalRef={settingsModalRef} />
+      <AboutModal aboutModalRef={aboutModalRef} />
     </header>
   );
 }

src/components/settingsModal/SettingsModal.tsx

@@ -1,20 +1,14 @@
-import { useRef, useEffect, type Dispatch } from "react";
+import { RefObject } from "react";
 import { type Settings, useSettingsContext } from "../../hooks/useSettingsContext";
+import { controlsDict, difficultiesDict, sizesDict } from "../../utils/settings";
 import styles from "./SettingsModal.module.css";
-import { sizesDict, difficultiesDict, controlsDict } from "../../utils/settings";
 
-export default function SettingsModal({ shown, setShown }: { shown: boolean; setShown: Dispatch<boolean> }) {
-  const dialogRef = useRef<HTMLDialogElement | null>(null);
+export default function SettingsModal({ settingsModalRef }: { settingsModalRef: RefObject<HTMLDialogElement | null> }) {
   const { settings, setSettings } = useSettingsContext();
 
   const { numOfColumns, numOfRows } = settings;
   const numOfTiles = numOfColumns * numOfRows;
 
-  useEffect(() => {
-    if (shown) dialogRef.current?.showModal();
-    else dialogRef.current?.close();
-  }, [shown]);
-
   function handleChangeSize(w: number, h: number) {
     localStorage.setItem("numOfColumns", `${w}`);
     localStorage.setItem("numOfRows", `${h}`);
@@ -32,10 +26,11 @@ export default function SettingsModal({ shown, setShown }: { shown: boolean; set
   }
 
   return (
-    <dialog ref={dialogRef} className={styles.dialog}>
+    // @ts-ignore since closedby is not recognized by TS yet
+    <dialog ref={settingsModalRef} className={styles.dialog} closedBy="any">
       <header>
         <h1>Settings</h1>
-        <button onClick={() => setShown(false)} className="icon">
+        <button onClick={() => settingsModalRef.current?.close()} className="icon">
           <img src="./images/close.png" />
         </button>
       </header>