update render on error

src/components/MonacoEditor/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Editor, { loader, Monaco, useMonaco } from "@monaco-editor/react";
+import Editor, { loader, useMonaco } from "@monaco-editor/react";
 import { Loading } from "src/layout/Loading";
 import useFile from "src/store/useFile";
 import useStored from "src/store/useStored";
@@ -37,31 +37,19 @@ export const MonacoEditor = () => {
   const theme = useStored(state => (state.lightmode ? "light" : "vs-dark"));
 
   React.useEffect(() => {
-    if (monaco) {
-      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-        validate: true,
-        allowComments: true,
-        ...(jsonSchema && {
-          schemas: [
-            {
-              fileMatch: ["*"],
-              schema: jsonSchema,
-            },
-          ],
-        }),
-      });
-    }
-  }, [jsonSchema, monaco]);
-
-  const handleEditorWillMount = React.useCallback(
-    (monaco: Monaco) => {
-      monaco.editor.onDidChangeMarkers(([uri]) => {
-        const markers = monaco.editor.getModelMarkers({ resource: uri });
-        setError(markers.length);
-      });
-    },
-    [setError]
-  );
+    monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      allowComments: true,
+      ...(jsonSchema && {
+        schemas: [
+          {
+            fileMatch: ["*"],
+            schema: jsonSchema,
+          },
+        ],
+      }),
+    });
+  }, [jsonSchema, monaco?.languages.json.jsonDefaults]);
 
   React.useEffect(() => {
     const beforeunload = (e: BeforeUnloadEvent) => {
@@ -84,14 +72,14 @@ export const MonacoEditor = () => {
   return (
     <StyledWrapper>
       <Editor
-        value={contents}
-        theme={theme}
-        options={editorOptions}
-        onChange={contents => setContents({ contents, skipUpdate: true })}
-        loading={<Loading message="Loading Editor..." />}
-        beforeMount={handleEditorWillMount}
         language="json"
         height="100%"
+        theme={theme}
+        value={contents}
+        options={editorOptions}
+        onValidate={errors => setError(!!errors.length)}
+        onChange={contents => setContents({ contents, skipUpdate: true })}
+        loading={<Loading message="Loading Editor..." />}
       />
       <CarbonAds />
     </StyledWrapper>

src/containers/Editor/BottomBar.tsx

@@ -83,11 +83,11 @@ const StyledImg = styled.img<{ light: boolean }>`
 export const BottomBar = () => {
   const { query } = useRouter();
   const data = useFile(state => state.fileData);
-  const error = useFile(state => state.error);
   const user = useUser(state => state.user);
   const premium = useUser(state => state.isPremium());
   const lightmode = useStored(state => state.lightmode);
   const hasChanges = useFile(state => state.hasChanges);
+  const hasErrors = useFile(state => state.hasError);
   const getContents = useFile(state => state.getContents);
 
   const setVisible = useModal(state => state.setVisible);
@@ -163,8 +163,8 @@ export const BottomBar = () => {
             Upgrade to Premium
           </StyledBottomBarItem>
         )}
-        <StyledBottomBarItem error={!!error}>
-          {error ? (
+        <StyledBottomBarItem error={hasErrors}>
+          {hasErrors ? (
             <Flex align="center" gap={2}>
               <MdReportGmailerrorred color="red" size={16} />
               <Text fw="bold">Invalid Format</Text>

src/store/useFile.ts

@@ -42,7 +42,7 @@ export type File = {
 const initialStates = {
   fileData: null as File | null,
   contents: defaultJson,
-  error: false,
+  hasError: false,
   hasChanges: false,
   jsonSchema: null as object | null,
 };
@@ -56,7 +56,7 @@ const isURL = (value: string) => {
 };
 
 const debouncedUpdateJson = debounce(
-  (value: unknown) => useJson.getState().setJson(JSON.stringify(value, null, 2)),
+  (value: string) => useJson.getState().setJson(JSON.stringify(parse(value as string), null, 2)),
   800
 );
 
@@ -90,10 +90,11 @@ const useFile = create<FileStates & JsonActions>()((set, get) => ({
   getContents: () => get().contents,
   getHasChanges: () => get().hasChanges,
   setContents: ({ contents, hasChanges = true }) => {
+    if (!contents || get().hasError) return;
     set({ ...(contents && { contents }), hasChanges });
-    debouncedUpdateJson(parse(contents as string));
+    debouncedUpdateJson(contents);
   },
-  setError: error => set({ error }),
+  setError: hasError => set({ hasError }),
   setHasChanges: hasChanges => set({ hasChanges }),
   fetchUrl: async url => {
     try {