Updated regex

components/EditorNavigation.tsx

@@ -59,8 +59,6 @@ import {
 } from "./AlertDialog";
 import { styled } from "../stitches.config";
 
-const DEFAULT_EXTENSION = ".c";
-
 const ErrorText = styled(Text, {
   color: "$error",
   mt: "$1",
@@ -91,33 +89,38 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
   const validateFilename = useCallback(
     (filename: string): { error: string | null } => {
       // check if filename already exists
-      if (snap.files.find(file => file.name === filename)) {
+      if (!filename) {
+        return { error: "You need to add filename" };
+      }
+      if (snap.files.find((file) => file.name === filename)) {
         return { error: "Filename already exists." };
       }
 
-      // check for illegal characters
-      const ILLEGAL_REGEX = /[/]/gi;
-      if (filename.match(ILLEGAL_REGEX)) {
-        return { error: "Filename contains illegal characters" };
+      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")`,
+        };
       }
-      // More checks in future
       return { error: null };
     },
     [snap.files]
   );
   const handleConfirm = useCallback(() => {
     // add default extension in case omitted
-    let _filename = filename.includes(".")
-      ? filename
-      : filename + DEFAULT_EXTENSION;
-    const chk = validateFilename(_filename);
-    if (chk.error) {
+    const chk = validateFilename(filename);
+    if (chk && chk.error) {
       setNewfileError(`Error: ${chk.error}`);
       return;
     }
 
     setIsNewfileDialogOpen(false);
-    createNewFile(_filename);
+    createNewFile(filename);
     setFilename("");
   }, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
 

pages/_app.tsx

@@ -15,7 +15,6 @@ 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) {
@@ -26,29 +25,15 @@ 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") &&
-        !snap.files.length &&
-        !snap.mainModalShowed
-      ) {
+      if (!gistId && router.isReady && !router.pathname.includes("/sign-in")) {
         state.mainModalOpen = true;
-        state.mainModalShowed = true;
       }
     }
-  }, [
-    gistId,
-    router.isReady,
-    router.pathname,
-    snap.files,
-    snap.mainModalShowed,
-  ]);
+  }, [gistId, router.isReady, router.pathname]);
 
   return (
     <>

state/index.ts

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