Add gift list navigation.

codonnell · May 24, 2020 · bf0be73 · bf0be73
1 parent bcb7639
commit bf0be73
Show file tree

Hide file tree

Showing 10 changed files with 1,733 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 resources/public/js
+resources/public/css
 node_modules
 .cpcache
 .shadow-cljs

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,12 +4,18 @@
     "description": "",
     "private": true,
     "devDependencies": {
-        "@auth0/auth0-spa-js": "^1.6.5",
+        "@auth0/auth0-spa-js": "^1.8.1",
+        "node-sass": "^4.14.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "semantic-ui-react": "^0.88.2",
-        "shadow-cljs": "^2.8.94"
+        "shadow-cljs": "^2.9.8"
+    },
+    "scripts": {
+        "css-build": "node-sass --omit-source-map-url sass/style.scss resources/public/css/style.css",
+        "css-watch": "node-sass --omit-source-map-url sass/style.scss resources/public/css/style.css --watch"
     },
     "author": "Chris O'Donnell",
-    "license": "MIT"
+    "license": "MIT",
+    "dependencies": {}
 }
diff --git a/resources/public/index.html b/resources/public/index.html
@@ -4,6 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
+        <link rel="stylesheet" href="/css/style.css" />
     </head>
     <body>
         <div id="app"></div>

diff --git a/sass/style.scss b/sass/style.scss
@@ -0,0 +1,4 @@
+.mgl_flex-container {
+    display: flex;
+    align-items: flex-start;
+}
diff --git a/src/rocks/mygiftlist/client.cljs b/src/rocks/mygiftlist/client.cljs
@@ -5,11 +5,13 @@
    [rocks.mygiftlist.routing :as routing]
    [rocks.mygiftlist.model.user :as m.user]
    [rocks.mygiftlist.type.user :as user]
+   [rocks.mygiftlist.ui.navigation :as ui.nav]
    [rocks.mygiftlist.ui.root :as ui.root]
    [com.fulcrologic.fulcro.algorithms.normalized-state :refer [swap!->]]
    [com.fulcrologic.fulcro.algorithms.tempid :as tempid]
    [com.fulcrologic.fulcro.application :as app]
    [com.fulcrologic.fulcro.components :as comp]
+   [com.fulcrologic.fulcro.data-fetch :as df]
    [com.fulcrologic.fulcro.routing.dynamic-routing :as dr]
    [com.fulcrologic.fulcro.mutations :refer [defmutation]]
    [clojure.core.async :as async :refer [go <!]]
@@ -45,9 +47,7 @@
                              {:authenticated authenticated})])
       (routing/start!)
       (if authenticated
-        (do (comp/transact! SPA
-              [(routing/route-to
-                 {:path (routing/url->path js/window.location.pathname)})])
+        (do (df/load! SPA [:component/id :left-nav] ui.nav/LeftNav)
             (let [{:keys [sub email]} (<! (auth/get-user-info))]
               (comp/transact! SPA [(m.user/set-current-user
                                      #::user{:id (tempid/tempid)

diff --git a/src/rocks/mygiftlist/model/gift_list.cljs b/src/rocks/mygiftlist/model/gift_list.cljs
@@ -8,6 +8,6 @@
   (action [{:keys [state]}]
     (swap!-> state
       (assoc-in [::gift-list/id id] gift-list)
-      (update-in [:component/id :created-gift-lists :created-gift-lists]
+      (update-in [:component/id :left-nav :created-gift-lists]
         conj gift-list)))
   (remote [_] true))
diff --git a/src/rocks/mygiftlist/ui/gift_list.cljs b/src/rocks/mygiftlist/ui/gift_list.cljs
@@ -11,7 +11,8 @@
    [com.fulcrologic.semantic-ui.collections.form.ui-form-input :refer [ui-form-input]]
 
    [rocks.mygiftlist.type.gift-list :as gift-list]
-   [rocks.mygiftlist.model.gift-list :as m.gift-list]))
+   [rocks.mygiftlist.model.gift-list :as m.gift-list]
+   [com.fulcrologic.fulcro.routing.dynamic-routing :as dr]))
 
 (declare GiftListForm)
 
@@ -71,19 +72,13 @@
 
 (def ui-gift-list-form-panel (comp/factory GiftListFormPanel))
 
-(defsc CreatedGiftList [_this {::gift-list/keys [name]}]
-  {:ident ::gift-list/id
-   :query [::gift-list/id ::gift-list/name]}
-  (dom/li {} name))
-
-(def ui-created-gift-list
-  (comp/factory CreatedGiftList {:keyfn ::gift-list/id}))
-
-(defsc CreatedGiftLists [_this {:keys [created-gift-lists]}]
-  {:ident (fn [] [:component/id :created-gift-lists])
-   :query [{:created-gift-lists (comp/get-query CreatedGiftList)}]
-   :initial-state {:created-gift-lists []}}
-  (dom/ul {}
-    (mapv ui-created-gift-list created-gift-lists)))
+(defsc GiftList [_this {::gift-list/keys [name]}]
+  {:query [::gift-list/id ::gift-list/name]
+   :ident ::gift-list/id
+   :route-segment ["gift-list" ::gift-list/id]
+   :will-enter (fn [_ {::gift-list/keys [id]}]
+                 (dr/route-immediate [::gift-list/id (uuid id)]))}
+  (dom/div
+    (dom/h3 name)))
 
-(def ui-created-gift-lists (comp/factory CreatedGiftLists))
+(def ui-gift-list (comp/factory GiftList))
diff --git a/src/rocks/mygiftlist/ui/navigation.cljs b/src/rocks/mygiftlist/ui/navigation.cljs
@@ -2,9 +2,9 @@
   (:require
    [rocks.mygiftlist.authentication :as auth]
    [rocks.mygiftlist.routing :as routing]
+   [rocks.mygiftlist.type.gift-list :as gift-list]
    [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
-   [com.fulcrologic.fulcro.dom :as dom]
-   ))
+   [com.fulcrologic.fulcro.dom :as dom]))
 
 (defsc LoginLogoutItem [_this {:ui/keys [authenticated]}]
   {:query [:ui/authenticated]
@@ -37,3 +37,23 @@
         (ui-login-logout-item login-logout)))))
 
 (def ui-navbar (comp/factory Navbar))
+
+(defsc CreatedGiftListItem [this {::gift-list/keys [id name]}]
+  {:query [::gift-list/id ::gift-list/name]
+   :ident ::gift-list/id}
+  (dom/a :.item {:onClick #(comp/transact! this [(routing/route-to
+                                                   {:path ["gift-list" id]})])}
+    (dom/div {} name)))
+
+(def ui-created-gift-list-item (comp/factory CreatedGiftListItem {:keyfn ::gift-list/id}))
+
+(defsc LeftNav [_this {:keys [created-gift-lists]}]
+  {:query [{:created-gift-lists (comp/get-query CreatedGiftListItem)}]
+   :ident (fn [] [:component/id :left-nav])
+   :initial-state {:created-gift-lists []}}
+  (dom/div :.ui.vertical.menu
+    (dom/div :.item
+      (dom/div :.header "Created Gift Lists")
+      (mapv ui-created-gift-list-item created-gift-lists))))
+
+(def ui-left-nav (comp/factory LeftNav))
diff --git a/src/rocks/mygiftlist/ui/root.cljs b/src/rocks/mygiftlist/ui/root.cljs
@@ -4,9 +4,9 @@
    [rocks.mygiftlist.ui.navigation :as ui.nav]
    [rocks.mygiftlist.ui.gift-list :as ui.gift-list]
    [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
-   [com.fulcrologic.fulcro.data-fetch :as df]
    [com.fulcrologic.fulcro.dom :as dom]
-   [com.fulcrologic.fulcro.routing.dynamic-routing :as dr :refer [defrouter]]))
+   [com.fulcrologic.fulcro.routing.dynamic-routing :as dr :refer [defrouter]]
+   [rocks.mygiftlist.type.user :as user]))
 
 (defsc LoginForm [_this _]
   {:query []
@@ -19,22 +19,17 @@
                {:onClick #(auth/login)}
                "Log in or sign up"))))
 
-(defsc Home [_this {:ui/keys [gift-list-form-panel created-gift-lists]}]
-  {:query [{:ui/gift-list-form-panel (comp/get-query ui.gift-list/GiftListFormPanel)}
-           {:ui/created-gift-lists (comp/get-query ui.gift-list/CreatedGiftLists)}]
+(defsc Home [_this {:ui/keys [gift-list-form-panel]}]
+  {:query [{:ui/gift-list-form-panel (comp/get-query ui.gift-list/GiftListFormPanel)}]
    :ident (fn [] [:component/id :home])
-   :initial-state {:ui/gift-list-form-panel {}
-                   :ui/created-gift-lists {}}
+   :initial-state {:ui/gift-list-form-panel {}}
    :route-segment ["home"]
-   :will-enter (fn [app _]
-                 (df/load! app [:component/id :created-gift-lists]
-                   ui.gift-list/CreatedGiftLists)
+   :will-enter (fn [_ _]
                  (dr/route-immediate [:component/id :home]))}
   (dom/div {}
     (dom/h3 {} "Home Screen")
     (dom/div {} "Just getting started? Create a new gift list!")
-    (ui.gift-list/ui-gift-list-form-panel gift-list-form-panel)
-    (ui.gift-list/ui-created-gift-lists created-gift-lists)))
+    (ui.gift-list/ui-gift-list-form-panel gift-list-form-panel)))
 
 (defsc About [_this _]
   {:query []
@@ -57,21 +52,31 @@
   (loading-spinner))
 
 (defrouter MainRouter [_ _]
-  {:router-targets [Loading LoginForm Home About]}
+  {:router-targets [Loading LoginForm Home About ui.gift-list/GiftList]}
   (loading-spinner))
 
 (def ui-main-router (comp/factory MainRouter))
 
-(defsc Root [_this {:root/keys [router navbar loading]}]
+(defsc Root [_this {:root/keys [router navbar left-nav loading] :as props}]
   {:query [{:root/router (comp/get-query MainRouter)}
            {:root/navbar (comp/get-query ui.nav/Navbar)}
-           :root/loading]
+           {:root/left-nav (comp/get-query ui.nav/LeftNav)}
+           :root/loading
+           {[:component/id :login-logout]
+            [:ui/authenticated]}]
    :initial-state {:root/router {}
                    :root/navbar {}
+                   :root/left-nav {}
                    :root/loading true}}
-  (if loading
-    (loading-spinner)
-    (dom/div {}
-      (ui.nav/ui-navbar navbar)
-      (dom/div :.ui.container
-        (ui-main-router router)))))
+  (let [authenticated (-> props
+                        (get [:component/id :login-logout])
+                        :ui/authenticated)]
+    (if loading
+      (loading-spinner)
+      (dom/div {}
+        (ui.nav/ui-navbar navbar)
+        (dom/div :.mgl_flex-container
+          (when authenticated
+            (ui.nav/ui-left-nav left-nav))
+          (dom/div :.ui.container
+            (ui-main-router router)))))))