[front/chore] split files
This commit is contained in:
parent
ef6690c285
commit
7442e7f9b2
5 changed files with 123 additions and 101 deletions
|
@ -1,120 +1,27 @@
|
||||||
(ns frontend.app
|
(ns frontend.app
|
||||||
(:require [reagent.dom.client :as rdom]
|
(:require [reagent.dom.client :as rdom]
|
||||||
[reitit.frontend :as rf]
|
|
||||||
[reitit.frontend.easy :as rfe]
|
[reitit.frontend.easy :as rfe]
|
||||||
[reitit.frontend.controllers :as rfc]
|
[re-frame.core :refer [dispatch dispatch-sync clear-subscription-cache!]]
|
||||||
[spec-tools.data-spec :as ds]
|
[frontend.views]
|
||||||
[re-frame.core :refer [dispatch dispatch-sync reg-event-db clear-subscription-cache! reg-event-fx reg-sub
|
[frontend.subs]
|
||||||
subscribe ]]))
|
[frontend.events]
|
||||||
|
[frontend.router]))
|
||||||
|
|
||||||
(defn home-page []
|
|
||||||
[:div
|
|
||||||
:h2 "Home"]
|
|
||||||
[:button
|
|
||||||
{:type "button"
|
|
||||||
:on-click #(rfe/push-state :item {:id 431038004})}
|
|
||||||
"Item 431038004"])
|
|
||||||
|
|
||||||
(defn about-page []
|
|
||||||
[:div
|
|
||||||
[:h2 "About"]
|
|
||||||
[:ul
|
|
||||||
[:li [:a {:href "stub"} "Source code"]]]])
|
|
||||||
|
|
||||||
(defn item-page []
|
|
||||||
(let [current-route @(subscribe [::current-route])
|
|
||||||
id (get-in current-route [:path-params :id])]
|
|
||||||
[:div
|
|
||||||
[:h2 "Selected item " id]]))
|
|
||||||
|
|
||||||
|
|
||||||
(def routes
|
|
||||||
[["/"
|
|
||||||
[""
|
|
||||||
{:name :frontpage
|
|
||||||
:view home-page
|
|
||||||
:link-text "Home"}]
|
|
||||||
["about"
|
|
||||||
{:name :about
|
|
||||||
:view about-page
|
|
||||||
:link-text "About"}]
|
|
||||||
["item/:id"
|
|
||||||
{:name :item
|
|
||||||
:view item-page
|
|
||||||
:link-text "Item"
|
|
||||||
:parameters {:path {:id int?}
|
|
||||||
:query {(ds/opt :foo) keyword?}}}]]])
|
|
||||||
|
|
||||||
(def router
|
|
||||||
(rf/router
|
|
||||||
routes
|
|
||||||
))
|
|
||||||
|
|
||||||
(reg-event-db :initialize-db
|
|
||||||
(fn [_ _]
|
|
||||||
{:set-active-page nil}))
|
|
||||||
|
|
||||||
(reg-event-fx
|
|
||||||
:set-active-page
|
|
||||||
(fn [{:keys [db]} [_ {:keys [page id]}]]
|
|
||||||
(let [set-page (assoc db :active-page page)]
|
|
||||||
(case page
|
|
||||||
;; -- URL @ "/" --------------------------------------------------------
|
|
||||||
"/" {:db set-page}))))
|
|
||||||
|
|
||||||
(reg-sub ::current-route
|
|
||||||
(fn [db]
|
|
||||||
(:current-route db)))
|
|
||||||
|
|
||||||
(reg-event-db ::navigated
|
|
||||||
(fn [db [_ new-match]]
|
|
||||||
(let [old-match (:current-route db)
|
|
||||||
controllers (rfc/apply-controllers (:controllers old-match) new-match)]
|
|
||||||
(assoc db :current-route (assoc new-match :controllers controllers)))))
|
|
||||||
|
|
||||||
|
|
||||||
(def history
|
|
||||||
#(dispatch [:set-active-page {:page (:path %)
|
|
||||||
:id (get-in % [:path-params :id])}]))
|
|
||||||
|
|
||||||
(defn on-navigate [new-match]
|
(defn on-navigate [new-match]
|
||||||
(when new-match
|
(when new-match
|
||||||
(dispatch [::navigated new-match])))
|
(dispatch [:navigated new-match])))
|
||||||
|
|
||||||
(defn nav [{:keys [current-route]}]
|
|
||||||
(js/console.log current-route)
|
|
||||||
(let [active #(when (= % (-> current-route :data :name)) "> ")]
|
|
||||||
[:ul {:class "nav flex flex-col overflow-hidden"}
|
|
||||||
[:li
|
|
||||||
[:a {:href (rfe/href :frontpage)} (active :frontpage) "Home"]]
|
|
||||||
[:li
|
|
||||||
[:a {:href (rfe/href :about)} (active :about) "About"]]
|
|
||||||
[:li
|
|
||||||
[:a {:href (rfe/href :item {:id 233})} (active :item) "Item 233"]]]))
|
|
||||||
|
|
||||||
|
|
||||||
(defn current-page []
|
|
||||||
(let [current-route @(subscribe [::current-route])]
|
|
||||||
[:div {:class "container p-2 mx-auto"}
|
|
||||||
[:div {:class "flex flex-row flex-wrap py-4"}
|
|
||||||
[:div {:class "w-full sm:w-1/3 md:w-1/4 px-2"}
|
|
||||||
[:div {:class "sticky top-0 p-4 bg-slate-300 rounded-xl w-full"}
|
|
||||||
[nav {:current-route current-route}]]]
|
|
||||||
(when current-route
|
|
||||||
[:div {:class "w-full sm:w-2/3 md:w-3/4 pt-1 px-2"}
|
|
||||||
[(-> current-route :data :view)]])]]))
|
|
||||||
|
|
||||||
|
|
||||||
(defonce root (rdom/create-root (js/document.getElementById "app")))
|
(defonce root (rdom/create-root (js/document.getElementById "app")))
|
||||||
|
|
||||||
(defn ^:dev/after-load start []
|
(defn ^:dev/after-load start []
|
||||||
(rdom/render root [current-page {:router router}] ))
|
(rdom/render root [frontend.views/current-page {:router frontend.router/router}] ))
|
||||||
|
|
||||||
(defn init []
|
(defn init []
|
||||||
(clear-subscription-cache!)
|
(clear-subscription-cache!)
|
||||||
(dispatch-sync [:initialize-db])
|
(dispatch-sync [:initialize-db])
|
||||||
(rfe/start!
|
(rfe/start!
|
||||||
router
|
frontend.router/router
|
||||||
on-navigate
|
on-navigate
|
||||||
{:use-fragment true})
|
{:use-fragment true})
|
||||||
(js/console.log "init")
|
(js/console.log "init")
|
||||||
|
|
34
src/main/frontend/events.cljs
Normal file
34
src/main/frontend/events.cljs
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
(ns frontend.events
|
||||||
|
(:require [re-frame.core :refer [reg-event-db reg-event-fx dispatch]]
|
||||||
|
[clojure.string :as str]))
|
||||||
|
|
||||||
|
|
||||||
|
(def api-url "http://localhost:3000/hp")
|
||||||
|
|
||||||
|
(defn endpoint
|
||||||
|
"Concat params to api-uri by /"
|
||||||
|
[& params]
|
||||||
|
(str/join "/" (cons api-url params)))
|
||||||
|
|
||||||
|
(reg-event-fx
|
||||||
|
:set-active-page
|
||||||
|
(fn [{:keys [db]} [_ {:keys [page id]}]]
|
||||||
|
(let [set-page (assoc db :active-page page)]
|
||||||
|
(case page
|
||||||
|
;; -- URL @ "/" --------------------------------------------------------
|
||||||
|
"/" {:db set-page}))))
|
||||||
|
|
||||||
|
|
||||||
|
(reg-event-db :initialize-db
|
||||||
|
(fn [_ _]
|
||||||
|
{:set-active-page nil}))
|
||||||
|
|
||||||
|
(reg-event-db
|
||||||
|
:navigated
|
||||||
|
(fn [db [_ new-match]]
|
||||||
|
(let [old-match (:current-route db)]
|
||||||
|
(assoc db :current-route new-match))))
|
||||||
|
|
||||||
|
(def history
|
||||||
|
#(dispatch [:set-active-page {:page (:path %)
|
||||||
|
:id (get-in % [:path-params :id])}]))
|
26
src/main/frontend/router.cljs
Normal file
26
src/main/frontend/router.cljs
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
(ns frontend.router
|
||||||
|
(:require [reitit.frontend :as rf]
|
||||||
|
[spec-tools.data-spec :as ds]
|
||||||
|
[frontend.views]))
|
||||||
|
|
||||||
|
|
||||||
|
(def routes
|
||||||
|
[["/"
|
||||||
|
[""
|
||||||
|
{:name :frontpage
|
||||||
|
:view frontend.views/home-page
|
||||||
|
:link-text "Home"}]
|
||||||
|
["about"
|
||||||
|
{:name :about
|
||||||
|
:view frontend.views/about-page
|
||||||
|
:link-text "About"}]
|
||||||
|
["item/:id"
|
||||||
|
{:name :item
|
||||||
|
:view frontend.views/item-page
|
||||||
|
:link-text "Item"
|
||||||
|
:parameters {:path {:id int?}
|
||||||
|
:query {(ds/opt :foo) keyword?}}}]]])
|
||||||
|
|
||||||
|
(def router
|
||||||
|
(rf/router
|
||||||
|
routes))
|
8
src/main/frontend/subs.cljs
Normal file
8
src/main/frontend/subs.cljs
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
(ns frontend.subs
|
||||||
|
(:require [re-frame.core :refer [reg-sub]]))
|
||||||
|
|
||||||
|
|
||||||
|
(reg-sub
|
||||||
|
:current-route
|
||||||
|
(fn [db]
|
||||||
|
(:current-route db)))
|
47
src/main/frontend/views.cljs
Normal file
47
src/main/frontend/views.cljs
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
(ns frontend.views
|
||||||
|
(:require [reitit.frontend.easy :as rfe]
|
||||||
|
[re-frame.core :refer [subscribe]]))
|
||||||
|
|
||||||
|
|
||||||
|
(defn home-page []
|
||||||
|
[:div
|
||||||
|
:h2 "Home"]
|
||||||
|
[:button
|
||||||
|
{:type "button"
|
||||||
|
:on-click #(rfe/push-state :item {:id 431038004})}
|
||||||
|
"Item 431038004"])
|
||||||
|
|
||||||
|
(defn about-page []
|
||||||
|
[:div
|
||||||
|
[:h2 "About"]
|
||||||
|
[:ul
|
||||||
|
[:li [:a {:href "stub"} "Source code"]]]])
|
||||||
|
|
||||||
|
(defn item-page []
|
||||||
|
(let [current-route @(subscribe [:current-route])
|
||||||
|
id (get-in current-route [:path-params :id])]
|
||||||
|
[:div
|
||||||
|
[:h2 "Selected item " id]]))
|
||||||
|
|
||||||
|
(defn nav [{:keys [current-route]}]
|
||||||
|
(js/console.log current-route)
|
||||||
|
(let [active #(when (= % (-> current-route :data :name)) "> ")]
|
||||||
|
[:ul {:class "nav flex flex-col overflow-hidden"}
|
||||||
|
[:li
|
||||||
|
[:a {:href (rfe/href :frontpage)} (active :frontpage) "Home"]]
|
||||||
|
[:li
|
||||||
|
[:a {:href (rfe/href :about)} (active :about) "About"]]
|
||||||
|
[:li
|
||||||
|
[:a {:href (rfe/href :item {:id 233})} (active :item) "Item 233"]]]))
|
||||||
|
|
||||||
|
|
||||||
|
(defn current-page []
|
||||||
|
(let [current-route @(subscribe [:current-route])]
|
||||||
|
[:div {:class "container p-2 mx-auto"}
|
||||||
|
[:div {:class "flex flex-row flex-wrap py-4"}
|
||||||
|
[:div {:class "w-full sm:w-1/3 md:w-1/4 px-2"}
|
||||||
|
[:div {:class "sticky top-0 p-4 bg-slate-300 rounded-xl w-full"}
|
||||||
|
[nav {:current-route current-route}]]]
|
||||||
|
(when current-route
|
||||||
|
[:div {:class "w-full sm:w-2/3 md:w-3/4 pt-1 px-2"}
|
||||||
|
[(-> current-route :data :view)]])]]))
|
Loading…
Reference in a new issue