Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add gift list navigation.
  • Loading branch information
codonnell committed May 24, 2020
1 parent bcb7639 commit bf0be73
Show file tree
Hide file tree
Showing 10 changed files with 1,733 additions and 82 deletions.
1 change: 1 addition & 0 deletions .gitignore
@@ -1,4 +1,5 @@
resources/public/js
resources/public/css
node_modules
.cpcache
.shadow-cljs
Expand Down
1,691 changes: 1,655 additions & 36 deletions package-lock.json

Large diffs are not rendered by default.

12 changes: 9 additions & 3 deletions package.json
Expand Up @@ -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": {}
}
1 change: 1 addition & 0 deletions resources/public/index.html
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions sass/style.scss
@@ -0,0 +1,4 @@
.mgl_flex-container {
display: flex;
align-items: flex-start;
}
6 changes: 3 additions & 3 deletions src/rocks/mygiftlist/client.cljs
Expand Up @@ -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 <!]]
Expand Down Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion src/rocks/mygiftlist/model/gift_list.cljs
Expand Up @@ -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))
27 changes: 11 additions & 16 deletions src/rocks/mygiftlist/ui/gift_list.cljs
Expand Up @@ -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)

Expand Down Expand Up @@ -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))
24 changes: 22 additions & 2 deletions src/rocks/mygiftlist/ui/navigation.cljs
Expand Up @@ -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]
Expand Down Expand Up @@ -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))
47 changes: 26 additions & 21 deletions src/rocks/mygiftlist/ui/root.cljs
Expand Up @@ -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 []
Expand All @@ -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 []
Expand All @@ -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)))))))

0 comments on commit bf0be73

Please sign in to comment.