feat(ui): separate components

Author: goshatch

src/main/parts/frontend/components/auth_status.cljs

@@ -0,0 +1,28 @@
+(ns parts.frontend.components.auth-status
+  (:require
+   [uix.core :refer [defui $ use-state]]
+   [parts.frontend.context :as ctx]
+   [parts.frontend.components.login-modal :refer [login-modal]]))
+
+(defui auth-status
+  "Displays a logged/in out status, and a button to login and log out"
+  []
+  (let [[show-login-modal set-show-login-modal] (use-state false)
+        {:keys [user loading logout]} (ctx/use-auth)]
+    ($ :div
+       ($ login-modal
+          {:show show-login-modal
+           :on-close #(set-show-login-modal false)})
+       (when loading
+         ($ :span {:class "loading loading-spinner loading-sm"}))
+       (if user
+         ($ :span
+            ($ :span {:class "status status-success mr-1" :aria-label "Status: logged-in"})
+            ($ :span (:username user))
+            ($ :button {:class "btn btn-xs ml-1" :on-click (fn [] (logout))}
+               "Log out"))
+         ($ :span
+            ($ :span {:class "status status-error mr-1" :aria-label "Status: logged-out"})
+            ($ :span "Signed out")
+            ($ :button {:class "btn btn-xs ml-1" :on-click #(set-show-login-modal true)}
+               "Log in"))))))

src/main/parts/frontend/components/sidebar.cljs

@@ -0,0 +1,10 @@
+(ns parts.frontend.components.sidebar
+  (:require
+   [uix.core :refer [defui $]]
+   [parts.frontend.components.auth-status :refer [auth-status]]))
+
+(defui sidebar
+  "Display the main sidebar"
+  []
+  ($ :div {:class "sidebar p-4"}
+     ($ auth-status)))

src/main/parts/frontend/components/system.cljs

@@ -12,7 +12,7 @@
    [clojure.string :as str]
    [parts.frontend.components.nodes :refer [node-types]]
    [parts.frontend.components.toolbar :refer [parts-toolbar]]
-   [parts.frontend.components.login-modal :refer [login-modal]]
+   [parts.frontend.components.sidebar :refer [sidebar]]
    [parts.frontend.utils.node-utils :refer [build-updated-part]]
    [parts.frontend.context :as ctx]))
 
@@ -52,25 +52,6 @@
 (defn- on-connect-callback [setEdges params]
   (setEdges #(addEdge params %)))
 
-(defui auth-status-bar []
-  (let [[show-login-modal set-show-login-modal] (use-state false)
-        {:keys [user loading logout]} (ctx/use-auth)]
-    ($ :div
-       ($ login-modal
-          {:show show-login-modal
-           :on-close #(set-show-login-modal false)})
-       (when loading
-         ($ :span "(...) "))
-       (if user
-         ($ :span
-            ($ :span {:class "user-email"} (str "🟢 " (:username user) " "))
-            ($ :button {:class "btn btn-xs" :on-click (fn [] (logout))}
-               "Log out"))
-         ($ :span
-            ($ :span "🔴")
-            ($ :button {:class "btn btn-xs" :on-click #(set-show-login-modal true)}
-               "Log in"))))))
-
 (defui system [{:keys [nodes edges]}]
   (let [node-types (uix.core/use-memo (fn [] (clj->js node-types)) [node-types])
         [nodes setNodes onNodesChange] (useNodesState (clj->js nodes))
@@ -117,5 +98,4 @@
                 ($ Background {:variant "dots"
                                :gap 12
                                :size 1}))))
-       ($ :div {:class "sidebar p-4"}
-          ($ auth-status-bar)))))
+       ($ sidebar))))