Warn on invalid JSON file (#1159)

* add error dialog

* show error modal on file dnd

* add locales

* Update src/locales/en.json

Co-Authored-By: Lipis <lipiridis@gmail.com>

* Update src/data/blob.ts

* Update src/data/blob.ts

* fix titles, update snapshots

* make modal smaller

* fix dnd wrong file type

* reset errorMessage

Co-authored-by: Faustino Kialungila <faustino.kialungila@gmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>

src/components/App.tsx

@@ -247,9 +247,13 @@ export class App extends React.Component<any, AppState> {
                     }),
                   )
                   .catch((error) => {
-                    console.error(error);
-                    this.setState({ isLoading: false });
+                    this.setState({ isLoading: false, errorMessage: error });
                   });
+              } else {
+                this.setState({
+                  isLoading: false,
+                  errorMessage: t("alerts.couldNotLoadInvalidFile"),
+                });
               }
             }}
           >

src/components/ErrorDialog.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { t } from "../i18n";
+
+import { Dialog } from "./Dialog";
+
+export function ErrorDialog({
+  message,
+  onClose,
+}: {
+  message: string;
+  onClose?: () => void;
+}) {
+  const [modalIsShown, setModalIsShown] = useState(!!message);
+
+  const handleClose = React.useCallback(() => {
+    setModalIsShown(false);
+
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  return (
+    <>
+      {modalIsShown && (
+        <Dialog
+          maxWidth={500}
+          onCloseRequest={handleClose}
+          title={t("errorDialog.title")}
+        >
+          <div>{message}</div>
+        </Dialog>
+      )}
+    </>
+  );
+}

src/components/LayerUI.tsx

@@ -22,6 +22,7 @@ import { MobileMenu } from "./MobileMenu";
 import { ZoomActions, SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import { RoomDialog } from "./RoomDialog";
+import { ErrorDialog } from "./ErrorDialog";
 import { LoadingMessage } from "./LoadingMessage";
 
 interface LayerUIProps {
@@ -105,6 +106,12 @@ export const LayerUI = React.memo(
     ) : (
       <>
         {appState.isLoading && <LoadingMessage />}
+        {appState.errorMessage && (
+          <ErrorDialog
+            message={appState.errorMessage}
+            onClose={() => setAppState({ errorMessage: null })}
+          />
+        )}
         <FixedSideContainer side="top">
           <HintViewer appState={appState} elements={elements} />
           <div className="App-menu App-menu_top">