feat improve error handling, typescript checks, rendering optimization

Signed-off-by: Ricardo Silva <rephyrus0877@protonmail.com>

Author: TejInaco

src/App.tsx

@@ -19,10 +19,8 @@ import "./App.css";
 import AppFooter from "./components/App/AppFooter";
 import AppHeader from "./components/App/AppHeader";
 import { Container, Section, Bar } from "@column-resizer/react";
-import { RefreshCw } from "react-feather";
 import { decompressSharedTd } from "./share";
 import { editor } from "monaco-editor";
-import BaseButton from "./components/TDViewer/base/BaseButton";
 import ErrorDialog from "./components/Dialogs/ErrorDialog";
 import DialogTemplate from "./components/Dialogs/DialogTemplate";
 
@@ -49,17 +47,12 @@ const BREAKPOINTS = {
   SMALL: 850,
 };
 
-// The useEffect hook for checking the URI was called twice somehow.
-// This variable prevents the callback from being executed twice.
-let checkedUrl = false;
+const APP_TMC_UI_ORIGIN = "http://localhost:5175";
 
-const APP_TMC_UI_ORIGIN = "http://localhost:5174";
-
-const App: React.FC = () => {
+const App = () => {
   const context = useContext(ediTDorContext);
 
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const [doShowJSON, setDoShowJSON] = useState(false);
   const [customBreakpointsState, setCustomBreakpointsState] = useState(0);
   const tdViewerRef = useRef<HTMLDivElement>(null);
   const [pendingTd, setPendingTd] = useState<string>("");
@@ -90,8 +83,18 @@ const App: React.FC = () => {
     }
   };
 
-  const handleToggleJSON = () => {
-    setDoShowJSON((prev) => !prev);
+  const isLoadTdMessage = (value: unknown): value is LoadTdMessage => {
+    if (typeof value !== "object" || value === null) {
+      return false;
+    }
+
+    const message = value as Record<string, unknown>;
+
+    return (
+      message.type === "LOAD_TD" &&
+      typeof message.description === "string" &&
+      typeof message.payload === "string"
+    );
   };
 
   useEffect(() => {
@@ -109,24 +112,28 @@ const App: React.FC = () => {
           processedValue = value + "/";
         }
 
-        localStorage.setItem(param, processedValue);
+        try {
+          localStorage.setItem(param, processedValue);
+        } catch {
+          showError("Failed to persist URL parameters to local storage.");
+        }
       }
     });
-  }, [window.location.search]);
+  }, []);
 
   useEffect(() => {
-    if (
-      checkedUrl ||
-      (window.location.search.indexOf("td") <= -1 &&
-        window.location.search.indexOf("proxyEndpoint") <= -1 &&
-        window.location.search.indexOf("localstorage") <= -1 &&
-        window.location.search.indexOf("southboundTdId") <= -1)
-    ) {
+    const url = new URL(window.location.href);
+
+    const hasRelevantParam =
+      url.searchParams.has("td") ||
+      url.searchParams.has("proxyEndpoint") ||
+      url.searchParams.has("localstorage") ||
+      url.searchParams.has("southboundTdId");
+
+    if (!hasRelevantParam) {
       return;
     }
-    checkedUrl = true;
 
-    const url = new URL(window.location.href);
     const compressedTd = url.searchParams.get("td");
     if (compressedTd !== null) {
       const td = decompressSharedTd(compressedTd);
@@ -141,23 +148,23 @@ const App: React.FC = () => {
     }
 
     if (url.searchParams.has("localstorage")) {
-      let td = localStorage.getItem("td");
-      if (!td) {
+      const storedTd = localStorage.getItem("td");
+      if (!storedTd) {
         showError("Request to read TD from local storage failed.");
         return;
       }
 
       try {
-        td = JSON.parse(td);
-        context.updateOfflineTD(JSON.stringify(td, null, 2));
-      } catch (e) {
-        context.updateOfflineTD(td ?? "");
+        const parsedTd: ThingDescription = JSON.parse(storedTd);
+        context.updateOfflineTD(JSON.stringify(parsedTd, null, 2));
+      } catch (error) {
+        context.updateOfflineTD(storedTd);
         showError(
-          `Tried to JSON parse the TD from local storage, but failed: ${e}`
+          `Tried to JSON parse the TD from local storage, but failed: ${error}`
         );
       }
     }
-  }, [context]);
+  }, []);
 
   useEffect(() => {
     if (!tdViewerRef.current) return;
@@ -189,18 +196,18 @@ const App: React.FC = () => {
         return;
       }
 
-      if ((event.data as LoadTdMessage).type !== "LOAD_TD") {
+      if (event.source !== window.opener) {
         return;
       }
 
-      if (typeof (event.data as LoadTdMessage).payload !== "string") {
+      if (!isLoadTdMessage(event.data)) {
         return;
       }
 
       try {
-        JSON.parse((event.data as LoadTdMessage).payload);
-        setPendingTitle((event.data as LoadTdMessage).description);
-        setPendingTd((event.data as LoadTdMessage).payload);
+        JSON.parse(event.data.payload);
+        setPendingTitle(event.data.description);
+        setPendingTd(event.data.payload);
         setIsOpen(true);
       } catch {
         showError("Received invalid JSON from the other application.");
@@ -253,15 +260,6 @@ const App: React.FC = () => {
           <Section className="w-full md:w-5/12">
             <JsonEditor editorRef={editorRef} />
           </Section>
-
-          <BaseButton
-            type="button"
-            className="fixed bottom-12 right-2 z-10 rounded-full bg-blue-500 p-4"
-            onClick={handleToggleJSON}
-            variant="empty"
-          >
-            <RefreshCw color="white" />
-          </BaseButton>
         </Container>
       </div>
       <div className="fixed bottom-0 w-screen">