feat(frontend): extract system UI to component

apossiblespace · Feb 1, 2025 · 9c16604 · 9c16604
1 parent 473731c
commit 9c16604
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 39 deletions.
diff --git a/src/main/parts/frontend/app.cljs b/src/main/parts/frontend/app.cljs
@@ -1,49 +1,12 @@
 (ns parts.frontend.app
-  ;; TODO: We probably need to split the nodes UI into a separate component and
-  ;; only load this when the user is signed in. It doesn't make sense to always
-  ;; be loading this.
   (:require
    ["htmx.org" :default htmx]
-   ["reactflow" :refer [ReactFlow
-                        MiniMap
-                        Controls
-                        Background
-                        useNodesState
-                        useEdgesState
-                        addEdge]]
+   [parts.frontend.components.system :refer [system]]
    [uix.core :refer [defui $]]
    [uix.dom]))
 
-;; NOTE: Layouting
-;; https://reactflow.dev/learn/layouting/layouting
-;; https://d3js.org/d3-force
-;; https://marvl.infotech.monash.edu/webcola/
-
-(def initial-nodes
-  [{:id "1" :position {:x 0 :y 0} :data {:label "1"}}
-   {:id "2" :position {:x 0 :y 100} :data {:label "2"}}])
-
-(def initial-edges
-  [{:id "e1-2" :source "1" :target "2"}])
-
 (defui app []
-  (let [[nodes setNodes onNodesChange] (useNodesState (clj->js initial-nodes))
-        [edges setEdges onEdgesChange] (useEdgesState (clj->js initial-edges))
-        on-connect (uix.core/use-callback
-                    (fn [params]
-                      (setEdges (fn [eds] (addEdge params eds))))
-                    [setEdges])]
-    ($ :div {:style {:width "100vw" :height "100vh"}}
-       ($ ReactFlow {:nodes nodes
-                     :edges edges
-                     :onNodesChange onNodesChange
-                     :onEdgesChange onEdgesChange
-                     :onConnect on-connect}
-          ($ MiniMap)
-          ($ Controls)
-          ($ Background {:variant "dots"
-                         :gap 12
-                         :size 1})))))
+  ($ system))
 
 (defonce root
   (uix.dom/create-root (js/document.getElementById "root")))

diff --git a/src/main/parts/frontend/components/system.cljs b/src/main/parts/frontend/components/system.cljs
@@ -0,0 +1,41 @@
+(ns parts.frontend.components.system
+  (:require
+   ["reactflow" :refer [ReactFlow
+                        MiniMap
+                        Controls
+                        Background
+                        useNodesState
+                        useEdgesState
+                        addEdge]]
+   [uix.core :refer [defui $]]))
+
+(def initial-nodes
+  [{:id "1" :position {:x 0 :y 0} :data {:label "1"}}
+   {:id "2" :position {:x 0 :y 100} :data {:label "2"}}])
+
+(def initial-edges
+  [{:id "e1-2" :source "1" :target "2"}])
+
+;; NOTE: Layouting
+;; https://reactflow.dev/learn/layouting/layouting
+;; https://d3js.org/d3-force
+;; https://marvl.infotech.monash.edu/webcola/
+
+(defui system []
+  (let [[nodes setNodes onNodesChange] (useNodesState (clj->js initial-nodes))
+        [edges setEdges onEdgesChange] (useEdgesState (clj->js initial-edges))
+        on-connect (uix.core/use-callback
+                   (fn [params]
+                     (setEdges (fn [eds] (addEdge params eds))))
+                   [setEdges])]
+    ($ :div {:style {:width "100vw" :height "100vh"}}
+       ($ ReactFlow {:nodes nodes
+                     :edges edges
+                     :onNodesChange onNodesChange
+                     :onEdgesChange onEdgesChange
+                     :onConnect on-connect}
+          ($ MiniMap)
+          ($ Controls)
+          ($ Background {:variant "dots"
+                        :gap 12
+                        :size 1})))))