From 7442e7f9b2c34a525c53fa4a4acdc3e4e20c2cf6 Mon Sep 17 00:00:00 2001 From: SouthFox Date: Thu, 24 Aug 2023 22:27:42 +0800 Subject: [PATCH] [front/chore] split files --- src/main/frontend/app.cljs | 109 +++------------------------------- src/main/frontend/events.cljs | 34 +++++++++++ src/main/frontend/router.cljs | 26 ++++++++ src/main/frontend/subs.cljs | 8 +++ src/main/frontend/views.cljs | 47 +++++++++++++++ 5 files changed, 123 insertions(+), 101 deletions(-) create mode 100644 src/main/frontend/events.cljs create mode 100644 src/main/frontend/router.cljs create mode 100644 src/main/frontend/subs.cljs create mode 100644 src/main/frontend/views.cljs diff --git a/src/main/frontend/app.cljs b/src/main/frontend/app.cljs index 4bffdf0..b7ae5fa 100644 --- a/src/main/frontend/app.cljs +++ b/src/main/frontend/app.cljs @@ -1,120 +1,27 @@ (ns frontend.app (:require [reagent.dom.client :as rdom] - [reitit.frontend :as rf] [reitit.frontend.easy :as rfe] - [reitit.frontend.controllers :as rfc] - [spec-tools.data-spec :as ds] - [re-frame.core :refer [dispatch dispatch-sync reg-event-db clear-subscription-cache! reg-event-fx reg-sub - subscribe ]])) + [re-frame.core :refer [dispatch dispatch-sync clear-subscription-cache!]] + [frontend.views] + [frontend.subs] + [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] (when 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)]])]])) - + (dispatch [:navigated new-match]))) (defonce root (rdom/create-root (js/document.getElementById "app"))) (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 [] (clear-subscription-cache!) (dispatch-sync [:initialize-db]) (rfe/start! - router + frontend.router/router on-navigate {:use-fragment true}) (js/console.log "init") diff --git a/src/main/frontend/events.cljs b/src/main/frontend/events.cljs new file mode 100644 index 0000000..4a348de --- /dev/null +++ b/src/main/frontend/events.cljs @@ -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])}])) diff --git a/src/main/frontend/router.cljs b/src/main/frontend/router.cljs new file mode 100644 index 0000000..0845464 --- /dev/null +++ b/src/main/frontend/router.cljs @@ -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)) diff --git a/src/main/frontend/subs.cljs b/src/main/frontend/subs.cljs new file mode 100644 index 0000000..b134f33 --- /dev/null +++ b/src/main/frontend/subs.cljs @@ -0,0 +1,8 @@ +(ns frontend.subs + (:require [re-frame.core :refer [reg-sub]])) + + +(reg-sub + :current-route + (fn [db] + (:current-route db))) diff --git a/src/main/frontend/views.cljs b/src/main/frontend/views.cljs new file mode 100644 index 0000000..f4a88fb --- /dev/null +++ b/src/main/frontend/views.cljs @@ -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)]])]]))