Fix modal showing up bug, issue #99

components/EditorNavigation.tsx

@@ -59,6 +59,8 @@ import {
 } from "./AlertDialog";
 import { styled } from "../stitches.config";
 
+const DEFAULT_EXTENSION = ".c";
+
 const ErrorText = styled(Text, {
   color: "$error",
   mt: "$1",
@@ -89,38 +91,33 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
   const validateFilename = useCallback(
     (filename: string): { error: string | null } => {
       // check if filename already exists
-      if (!filename) {
-        return { error: "You need to add filename" };
-      }
-      if (snap.files.find((file) => file.name === filename)) {
+      if (snap.files.find(file => file.name === filename)) {
         return { error: "Filename already exists." };
       }
 
-      if (!filename.includes(".") || filename[filename.length - 1] === ".") {
-        return { error: "Filename should include file extension" };
-      }
-
       // check for illegal characters
-      const ALPHA_NUMERICAL_REGEX = /^[A-Za-z0-9_-]+[.][A-Za-z0-9]{1,4}$/g;
-      if (!filename.match(ALPHA_NUMERICAL_REGEX)) {
-        return {
-          error: `Filename can contain only characters from a-z, A-Z, 0-9, "_" and "-" and it needs to have file extension (e.g. ".c")`,
-        };
+      const ILLEGAL_REGEX = /[/]/gi;
+      if (filename.match(ILLEGAL_REGEX)) {
+        return { error: "Filename contains illegal characters" };
       }
+      // More checks in future
       return { error: null };
     },
     [snap.files]
   );
   const handleConfirm = useCallback(() => {
     // add default extension in case omitted
-    const chk = validateFilename(filename);
-    if (chk && chk.error) {
+    let _filename = filename.includes(".")
+      ? filename
+      : filename + DEFAULT_EXTENSION;
+    const chk = validateFilename(_filename);
+    if (chk.error) {
       setNewfileError(`Error: ${chk.error}`);
       return;
     }
 
     setIsNewfileDialogOpen(false);
-    createNewFile(filename);
+    createNewFile(_filename);
     setFilename("");
   }, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
 

pages/_app.tsx

@@ -15,6 +15,7 @@ import state from "../state";
 
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en.json";
+import { useSnapshot } from "valtio";
 TimeAgo.addDefaultLocale(en);
 
 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
@@ -25,15 +26,29 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const origin = "https://xrpl-hooks-ide.vercel.app"; // TODO: Change when site is deployed
   const shareImg = "/share-image.png";
 
+  const snap = useSnapshot(state);
   useEffect(() => {
     if (gistId && router.isReady) {
       fetchFiles(gistId);
     } else {
-      if (!gistId && router.isReady && !router.pathname.includes("/sign-in")) {
+      if (
+        !gistId &&
+        router.isReady &&
+        !router.pathname.includes("/sign-in") &&
+        !snap.files.length &&
+        !snap.mainModalShowed
+      ) {
         state.mainModalOpen = true;
+        state.mainModalShowed = true;
       }
     }
-  }, [gistId, router.isReady, router.pathname]);
+  }, [
+    gistId,
+    router.isReady,
+    router.pathname,
+    snap.files,
+    snap.mainModalShowed,
+  ]);
 
   return (
     <>

state/index.ts

@@ -65,6 +65,7 @@ export interface IState {
   client: XrplClient | null;
   clientStatus: "offline" | "online";
   mainModalOpen: boolean;
+  mainModalShowed: boolean;
   accounts: IAccount[];
 }
 
@@ -93,6 +94,7 @@ let initialState: IState = {
   client: null,
   clientStatus: "offline" as "offline",
   mainModalOpen: false,
+  mainModalShowed: false,
   accounts: [],
 };