[front/chore] split files

This commit is contained in:
SouthFox 2023-08-24 22:27:42 +08:00
parent ef6690c285
commit 7442e7f9b2
5 changed files with 123 additions and 101 deletions

View file

@ -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")

View 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])}]))

View 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))

View file

@ -0,0 +1,8 @@
(ns frontend.subs
(:require [re-frame.core :refer [reg-sub]]))
(reg-sub
:current-route
(fn [db]
(:current-route db)))

View 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)]])]]))