fix refresh bug (#16)

- Fixed bug with client-side error on refresh
komlan-kodoh-project · Jan 27, 2024 · 200be92 · 200be92
1 parent a903d7c
commit 200be92
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 41 deletions.
diff --git a/wasm-lib/src/lib.rs b/wasm-lib/src/lib.rs
@@ -14,11 +14,6 @@ extern "C" {
 #[wasm_bindgen]
 pub fn initialize_web_assembly() {
     set_panic_hook();
-    log!("hello world {}", 45);
-    alert("Hello, wasm-lib!");
+    log!("Rust wasm has been initialized {}", 45);
 }
 
-#[wasm_bindgen]
-pub fn current_state() -> String {
-    return "Dead".into();
-}
diff --git a/website/GraphUniverse/Graph/SimpleGraph/SimpleGraph.ts b/website/GraphUniverse/Graph/SimpleGraph/SimpleGraph.ts
@@ -1,4 +1,4 @@
-import { GraphWrapper, initialize_web_assembly } from "wasm-lib";
+import { GraphWrapper } from "wasm-lib";
 import { GraphOperationMode } from './../Graph';
 import { Edge, Graph, Vertex } from "@/GraphUniverse/Graph/Graph";
 import { AnyValue } from "@/utils/types";
@@ -10,9 +10,7 @@ export default class SimpleGraph<V = AnyValue, E = AnyValue> {
 
     private graph: GraphWrapper = new GraphWrapper();
 
-    constructor(){
-        initialize_web_assembly();
-    }
+    constructor() { }
 
     public getWasmGraph(): GraphWrapper {
         return this.graph;
@@ -29,9 +27,9 @@ export default class SimpleGraph<V = AnyValue, E = AnyValue> {
     }
 
     getVertex(vertexIndex: number): Vertex<V> {
-        const vertexData =  this.vertexData.get(vertexIndex);
+        const vertexData = this.vertexData.get(vertexIndex);
 
-        if (vertexData === undefined){
+        if (vertexData === undefined) {
             throw Error("Vertex data does not exists");
         }
 

diff --git a/website/app/editor/page.tsx b/website/app/editor/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useWebAssembly } from "@/utils/hooks";
 import dynamic from "next/dynamic";
 
 const GraphContainer = dynamic(() => import("@/components/GraphContainer"), {

diff --git a/website/app/layout.tsx b/website/app/layout.tsx
@@ -11,7 +11,6 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   useWebAssembly();
-
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>

diff --git a/website/components/Algorithms/GraphAlgorithmSelection.tsx b/website/components/Algorithms/GraphAlgorithmSelection.tsx
@@ -1,6 +1,9 @@
 import GraphUniverse from "@/GraphUniverse/GraphUniverse";
 import { DijkstraAlgorithmForm } from "./DijkstraAlgorithm/DijkstraAlgorithmForm";
-import { AlgorithmDopdownValue as AlgorithmDropdownValue } from "./AlgorithmDropdown";
+import {
+  AlgorithmDopdownValue as AlgorithmDropdownValue,
+  GraphAlgorithms,
+} from "./AlgorithmDropdown";
 import { BreathFirstSearch } from "./BreathFirstAlgorithm/BreathFirstSearchAlgorithmForm";
 import { BruteForceMinimumNodeColoringForm } from "./BruteForceMinimumNodecoloring/BruteForceMinimumNodeColoringForm";
 import { AnimatePresence, motion } from "framer-motion";
@@ -26,30 +29,42 @@ function AnimationStuff({ children }: { children: ReactNode }) {
   );
 }
 
+const componentMap = {
+  None: (universe: GraphUniverse) => {
+    return <></>;
+  },
+
+  "breath-first-traversal": (universe: GraphUniverse) => {
+    return (
+      <AnimationStuff key={1}>
+        <BreathFirstSearch universe={universe}></BreathFirstSearch>
+      </AnimationStuff>
+    );
+  },
+
+  dijkstra: (universe: GraphUniverse) => {
+    return (
+      <AnimationStuff key={2}>
+        <DijkstraAlgorithmForm universe={universe}></DijkstraAlgorithmForm>;
+      </AnimationStuff>
+    );
+  },
+
+  "minimum-node-coloring-brute": (universe: GraphUniverse) => {
+    return (
+      <AnimationStuff key={3}>
+        <BruteForceMinimumNodeColoringForm universe={universe}></BruteForceMinimumNodeColoringForm>
+      </AnimationStuff>
+    );
+  },
+} as const;
+
 export function GraphAlgorithmSelection({ name, universe }: GraphAlgorithmSelectionProps) {
   return (
-      <div className="relative">
-    <AnimatePresence>
-        {name === "None" ? (
-          <></>
-        ) : name === "breath-first-traversal" ? (
-          <AnimationStuff key={1}>
-            <BreathFirstSearch universe={universe}></BreathFirstSearch>
-          </AnimationStuff>
-        ) : name === "dijkstra" ? (
-          <AnimationStuff key={2}>
-            <DijkstraAlgorithmForm universe={universe}></DijkstraAlgorithmForm>;
-          </AnimationStuff>
-        ) : name === "minimum-node-coloring-brute" ? (
-          <AnimationStuff key={3}>
-            <BruteForceMinimumNodeColoringForm
-              universe={universe}
-            ></BruteForceMinimumNodeColoringForm>
-          </AnimationStuff>
-        ) : (
-          <></>
-        )}
-    </AnimatePresence>
-      </div>
+    <div className="relative">
+      <AnimatePresence>
+        {name != null? componentMap[name](universe): <></>}
+      </AnimatePresence>
+    </div>
   );
 }
diff --git a/website/components/GraphContainer.tsx b/website/components/GraphContainer.tsx
@@ -9,16 +9,20 @@ import { Edge } from "@/GraphUniverse/Graph/Graph";
 import { AlgorithmDopdownValue, AlgorithmDropdown } from "./Algorithms/AlgorithmDropdown";
 import { GraphAlgorithmSelection } from "./Algorithms/GraphAlgorithmSelection";
 import { AnimatePresence, motion } from "framer-motion";
+import { useWebAssembly } from "@/utils/hooks";
 
 export type GraphUniverseVertexData = {};
 
 // Maximum independent set
 // Node excentricity
 export type GraphUniverseEdgeData = {};
 
-function GraphContainer() {
+export type GraphContainerProps = {}
+
+function GraphContainerInner(props: GraphContainerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const graphUniverse = useRef<GraphUniverse<any, any> | null>(null);
+
   const [selectedEdge, setSelectedEdge] = useState<Edge<any, any> | null>(null);
   const [editorState, setEditorState] = useState<WellKnownGraphUniverseState>();
 
@@ -144,4 +148,9 @@ function GraphContainer() {
   );
 }
 
+function GraphContainer(props: GraphContainerProps){
+  var hasInit = useWebAssembly();
+
+  return hasInit ?  <GraphContainerInner {...props}></GraphContainerInner>: <></>;
+}
 export default GraphContainer;
diff --git a/website/components/forms/VertexInputButton.tsx b/website/components/forms/VertexInputButton.tsx
@@ -53,7 +53,7 @@ export function VertexInputButton<T, K extends keyof T>({
       cleanupVertexSelected();
       cleanupStateUpdate();
     };
-  }, [universe, active]);
+  }, [universe, active, updateFormInput, updateFormInputMode]);
 
   return (
     <Button

diff --git a/website/package.json b/website/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next  -p 8080 start",
     "lint": "next lint"
   },
   "dependencies": {

diff --git a/website/utils/hooks.ts b/website/utils/hooks.ts
@@ -49,7 +49,20 @@ export function userReactiveRef<T>(initialValue: T): [MutableRefObject<T>, Dispa
 }
 
 export function useWebAssembly() {
+    const [hasInitialized, setHasInitialized] = useState<boolean>(false)
+
     useEffect(() => {
-        rust_wasm_init();
+        new Promise<void>(async (resolve, reject) => {
+            await rust_wasm_init();
+            await initialize_web_assembly();
+
+            setHasInitialized(true);
+
+            resolve()
+        });
+
     }, []);
+
+
+    return hasInitialized;
 }