migrate to react

1 files changed, 793 insertions, 622 deletions

diff --git a/lisp/webapps/bogenherr/clojurescript/bogenherr/src/bogenherr/core.cljs b/lisp/webapps/bogenherr/clojurescript/bogenherr/src/bogenherr/core.cljs
index d18a067..9ffa3d2 100644
--- a/lisp/webapps/bogenherr/clojurescript/bogenherr/src/bogenherr/core.cljs
+++ b/lisp/webapps/bogenherr/clojurescript/bogenherr/src/bogenherr/core.cljs
@@ -1,8 +1,6 @@
 (ns bogenherr.core
-  (:require-macros [hiccups.core :as hiccups :refer [html]])
   (:require [ajax.core :refer [GET POST PUT DELETE raw-response-format]]
             [dommy.core :as dommy]
-            [hiccups.runtime :as hiccupsrt]
             [cljsjs.showdown :as showdown]
             [clojure.string :as str]
             [cljs-time.format :as time-format]
@@ -14,14 +12,34 @@
 
 ;; declarations
 
+(declare reset-login-state)
+(declare reset-profile-state)
+(declare reset-profile-view-state)
+(declare reset-profile-modify-state)
+(declare reset-about-us-category-state)
+(declare reset-about-us-state)
+(declare reset-about-us-view-state)
+(declare reset-about-us-modify-state)
+(declare reset-gallery-state)
+(declare reset-gallery-view-state)
+(declare comp-gallery-image-fullscreen)
+(declare reset-gallery-add-state)
+(declare reset-gallery-modify-state)
+(declare reset-contact-us-state)
+(declare reset-contact-us-view-state)
+(declare reset-messages-state)
+(declare reset-messages-results-state)
+(declare reset-users-state)
+(declare reset-users-view-state)
+(declare reset-users-add-state)
+(declare reset-users-register-state)
+(declare reset-users-register-form-state)
+(declare reset-users-modify-state)
 (declare date-sql-to-pretty)
 (declare markdown-to-html)
 (declare reduce-checkboxes)
-(declare comp-app)
-(declare start-render)
-(declare start-location)
-(declare reset-location)
-(declare start)
+(declare form-fields-to-map)
+(declare highlight-row)
 (declare notifications)
 (declare auth-notifications)
 (declare comp-menu-main)
@@ -32,7 +50,7 @@
 (declare comp-home)
 (declare handler-home)
 (declare render-home)
-(declare template-login)
+(declare comp-login)
 (declare handler-login)
 (declare render-login)
 (declare on-login-submit-clicked)
@@ -40,53 +58,55 @@
 (declare render-login-authenticate)
 (declare handler-logout)
 (declare render-logout)
-(declare template-profile)
+(declare comp-profile)
 (declare handler-profile)
 (declare render-profile)
-(declare template-profile-view)
+(declare comp-profile-view)
 (declare handler-profile-view)
 (declare render-profile-view)
 (declare on-profile-modify-clicked)
-(declare template-profile-modify)
+(declare comp-profile-modify)
 (declare handler-profile-modify)
 (declare render-profile-modify)
 (declare on-profile-modify-submit-clicked)
 (declare handler-profile-modify-submit)
 (declare render-profile-modify-submit)
-(declare template-password)
+(declare comp-password)
 (declare handler-password)
 (declare render-password)
 (declare on-password-submit-clicked)
 (declare handler-password-submit)
 (declare render-password-submit)
-(declare template-about-us)
+(declare comp-about-us)
 (declare handler-about-us)
 (declare render-lessons)
-(declare template-about-us-view)
+(declare comp-about-us-view)
 (declare handler-about-us-view)
 (declare render-about-us-view)
 (declare on-about-us-modify-clicked)
-(declare template-about-us-modify)
+(declare comp-about-us-modify)
 (declare handler-about-us-modify)
 (declare render-about-us-modify)
 (declare on-about-us-modify-submit-clicked)
 (declare handler-about-us-modify-submit)
 (declare render-about-us-modify-submit)
+(declare comp-gallery)
+(declare handler-gallery)
 (declare render-gallery)
-(declare template-gallery-view)
+(declare comp-gallery-view)
 (declare template-gallery-image-fullscreen)
 (declare on-gallery-image-clicked )
 (declare handler-gallery-view)
 (declare render-gallery-view)
 (declare on-gallery-add-clicked)
-(declare template-gallery-add)
+(declare comp-gallery-add)
 (declare handler-gallery-add)
 (declare render-gallery-add)
 (declare on-gallery-add-submit-clicked)
 (declare handler-gallery-add-submit)
 (declare render-gallery-add-submit)
 (declare on-gallery-modify-clicked)
-(declare template-gallery-modify)
+(declare comp-gallery-modify)
 (declare handler-gallery-modify)
 (declare render-gallery-modify)
 (declare on-gallery-modify-submit-clicked)
@@ -95,64 +115,63 @@
 (declare on-gallery-delete-clicked)
 (declare handler-gallery-delete)
 (declare render-gallery-delete)
-(declare template-testimonials)
-(declare handler-testimonials)
-(declare render-testimonials)
-(declare template-testimonials-view)
-(declare handler-testimonials-view)
-(declare render-testimonials-view)
-(declare on-testimonials-modify-clicked)
-(declare template-testimonials-modify)
-(declare handler-testimonials-modify)
-(declare render-testimonials-modify)
-(declare on-testimonials-modify-submit-clicked)
-(declare handler-testimonials-modify-submit)
-(declare render-testimonials-modify-submit)
-(declare template-contact-us)
+;; (declare comp-testimonials)
+;; (declare handler-testimonials)
+;; (declare render-testimonials)
+;; (declare comp-testimonials-view)
+;; (declare handler-testimonials-view)
+;; (declare render-testimonials-view)
+;; (declare on-testimonials-modify-clicked)
+;; (declare comp-testimonials-modify)
+;; (declare handler-testimonials-modify)
+;; (declare render-testimonials-modify)
+;; (declare on-testimonials-modify-submit-clicked)
+;; (declare handler-testimonials-modify-submit)
+;; (declare render-testimonials-modify-submit)
+(declare comp-contact-us)
 (declare handler-contact-us)
 (declare render-contact-us)
-(declare template-contact-us-view)
+(declare comp-contact-us-view)
 (declare handler-contact-us-view)
 (declare render-contact-us-view)
 (declare on-contact-us-email-submit-clicked)
 (declare handler-contact-us-email-submit)
 (declare render-contact-us-email-submit)
-(declare template-messages)
+(declare comp-messages)
 (declare handler-messages)
 (declare render-messages)
 (declare on-messages-mode-clicked)
-(declare template-messages-results)
+(declare comp-messages-results)
 (declare handler-messages-results)
 (declare render-messages-results)
 (declare on-messages-mark)
 (declare handler-messages-mark)
 (declare render-messages-mark)
-(declare template-users)
+(declare comp-users)
 (declare handler-users)
 (declare render-users)
-(declare template-users-view)
+(declare comp-users-view)
 (declare handler-users-view)
 (declare render-users-view)
 (declare on-users-add-clicked)
-(declare template-users-add)
+(declare comp-users-add)
 (declare handler-users-add)
 (declare render-users-add)
 (declare on-users-add-submit-clicked)
 (declare handler-users-add-submit)
 (declare render-users-add-submit)
-(declare template-users-register)
+(declare comp-users-register)
 (declare handler-users-register)
 (declare render-users-register)
-(declare template-users-register-form)
+(declare comp-users-register-form)
 (declare handler-users-register-form)
 (declare handler-users-register-form-impl)
 (declare render-users-register-form)
 (declare on-users-register-submit-clicked)
-(declare template-users-register-submit)
 (declare handler-users-register-submit)
 (declare render-users-register-submit)
 (declare on-users-modify-clicked)
-(declare template-users-modify)
+(declare comp-users-modify)
 (declare handler-users-modify)
 (declare render-users-modify)
 (declare on-users-modify-submit-clicked)
@@ -164,23 +183,131 @@
 (declare on-users-delete-clicked)
 (declare handler-users-delete)
 (declare render-users-delete)
+(declare push-menu-hook)
 (declare on-menu-clicked)
 (declare handler-location)
 (declare goto-location)
 (declare goto-register)
 (declare reset-app)
-(declare reset-about-us-category)
+(declare start-location)
+(declare reset-location)
+(declare comp-app)
+(declare start-render)
+(declare start)
 
 (enable-console-print!)
 
-(defonce jquery (js* "$"))
-(defonce sql-formatter (time-format/formatter "yyyy-MM-dd HH:mm:ss"))
-(defonce pretty-formatter (time-format/formatters :rfc822))
-(defonce location-state (r/atom "/home"))
-(defonce about-us-category-state (r/atom nil))
-(defonce menu-main-state (r/atom []))
-(defonce menu-user-state (r/atom []))
-(defonce menu-user-label (r/atom nil))
+(def jquery (js* "$"))
+(def sql-formatter (time-format/formatter "yyyy-MM-dd HH:mm:ss"))
+(def pretty-formatter (time-format/formatters :rfc822))
+(def location-state (r/atom "/home"))
+(def about-us-category-state (r/atom nil))
+(def menu-main-state (r/atom []))
+(def menu-user-state (r/atom []))
+(def menu-user-label (r/atom "Guest User"))
+(def login-state (r/atom {}))
+(def profile-state (r/atom {}))
+(def profile-view-state (r/atom {}))
+(def profile-modify-state (r/atom {}))
+(def password-state (r/atom {}))
+(def about-us-state (r/atom {}))
+(def about-us-view-state (r/atom {}))
+(def about-us-modify-state (r/atom {}))
+(def gallery-state (r/atom {}))
+(def gallery-view-state (r/atom {}))
+(def gallery-add-state (r/atom {}))
+(def gallery-modify-state (r/atom {}))
+(def gallery-image-state (r/atom nil))
+(def contact-us-state (r/atom {}))
+(def contact-us-view-state (r/atom {}))
+(def messages-state (r/atom {}))
+(def messages-results-state (r/atom {}))
+(def users-state (r/atom {}))
+(def users-view-state (r/atom {}))
+(def users-add-state (r/atom {}))
+(def users-register-state (r/atom {}))
+(def users-register-form-state (r/atom {}))
+(def users-modify-state (r/atom {}))
+(def menu-hooks (atom {}))
+
+(defn push-menu-hook [hook]
+  "`hook' is a map of the form {:handler \"/some/url\" :func #(some-fn)}"
+  (swap! menu-hooks assoc (get hook :handler) hook))
+
+(defn reset-location [url]
+  (reset! location-state (first (str/split url "?"))))
+
+(defn reset-login-state [jsonobj]
+  (reset! login-state jsonobj))
+
+(defn reset-profile-state [jsonobj]
+  (reset! profile-state jsonobj))
+
+(defn reset-profile-view-state [jsonobj]
+  (reset! profile-view-state jsonobj))
+
+(defn reset-profile-modify-state [jsonobj]
+  (reset! profile-modify-state jsonobj))
+
+(defn reset-password-state [jsonobj]
+  (reset! password-state jsonobj))
+
+(defn reset-about-us-category-state [category]
+  (reset! about-us-category-state category))
+
+(defn reset-about-us-state [jsonobj]
+  (reset! about-us-state jsonobj))
+
+(defn reset-about-us-view-state [jsonobj]
+  (reset! about-us-view-state jsonobj))
+
+(defn reset-about-us-modify-state [jsonobj]
+  (reset! about-us-modify-state jsonobj))
+
+(defn reset-gallery-state [jsonobj]
+  (reset! gallery-state jsonobj))
+
+(defn reset-gallery-view-state [jsonobj]
+  (reset! gallery-view-state jsonobj))
+
+(defn reset-gallery-image-state [src]
+  (reset! gallery-image-state src))
+
+(defn reset-gallery-add-state [jsonobj]
+  (reset! gallery-add-state jsonobj))
+
+(defn reset-gallery-modify-state [jsonobj]
+  (reset! gallery-modify-state jsonobj))
+
+(defn reset-contact-us-state [jsonobj]
+  (reset! contact-us-state jsonobj))
+
+(defn reset-contact-us-view-state [jsonobj]
+  (reset! contact-us-view-state jsonobj))
+
+(defn reset-messages-state [jsonobj]
+  (reset! messages-state jsonobj))
+
+(defn reset-messages-results-state [jsonobj]
+  (reset! messages-results-state jsonobj))
+
+(defn reset-users-state [jsonobj]
+  (reset! users-state jsonobj))
+
+(defn reset-users-view-state [jsonobj]
+  (reset! users-view-state jsonobj))
+
+(defn reset-users-add-state [jsonobj]
+  (reset! users-add-state jsonobj))
+
+(defn reset-users-register-state [jsonobj]
+  (reset! users-register-state jsonobj))
+
+(defn reset-users-register-form-state [jsonobj]
+  (reset! users-register-form-state jsonobj))
+
+(defn reset-users-modify-state [jsonobj]
+  (reset! users-modify-state jsonobj))
 
 ;; helper functions
 
@@ -198,66 +325,21 @@
   separating the throwaway prefix and the remaining useful
   bit. `selector' will likely be something like: [id^='chk_']"
   (reduce (fn [x y]
-            (cond (and x y) (str x "|" y)
-                  (and x (not y)) x
-                  (and (not x) y) y
+            (cond (and (not (empty? x)) (not (empty? y))) (str x "|" y)
+                  (and (not (empty? x)) (empty? y)) x
+                  (and (empty? x) (not (empty? y))) y
                   :else ""))
           (map (fn [elem]
                  (let [this (jquery (str "#" (dommy/attr elem :id)))]
                    (when (-> this (.prop "checked"))
-                     (second (str/split (-> this (.prop "id")) "_")))))
+                     (last (str/split (-> this (.prop "id")) "_")))))
                (.toArray (jquery selector)))))
 
-;; body
-
-(defn comp-app []
-  [:div {:class "container-fluid"}
-   [:div {:class "banner"}
-    [:table {:width "100%" :height "100%"}
-     [:tbody
-      [:tr
-       [:td {:class "banner-menu"}
-        [comp-menu-user]]
-       [:td {:class "banner-title"} "Bogen-" [:i "Herr"]]
-       [:td {:class "banner-menu"} " "]]]]]
-   [comp-menu-main]
-   [ck-notifications/comp-errormsg]
-   [ck-notifications/comp-message]
-   [:div {:id "body"}]
-   [:div {:id "footer"}
-    [:hr]
-    "Carlos Konstanski (970) 294-9708"
-    [:br]
-    [:a {:href "https://git.ckons.org/bogenherr.git/tree"
-         :target "_blank"}
-     "Source code in Git"]]])
-
-;; start the react app
-
-(defn start-render []
-  (let [app-root (rdc/create-root (js/document.getElementById "app"))]
-    (rdc/render app-root [comp-app])))
-
-(defn start-location []
-  (cond (str/starts-with? @location-state "/register/")
-        (goto-register (str/replace-first @location-state "/register/" ""))
-        :else
-        (goto-location @location-state)))
-
-(defn reset-location [url]
-  (reset! location-state url))
-
-(defn reset-about-us-category [category]
-  (reset! about-us-category-state category))
-
-(defn ^:dev/after-load start
-  ([]
-   (start-render)
-   (start-location))
-  ([url]
-   (reset-location url)
-   (start-render)
-   (start-location)))
+(defn form-fields-to-map [selector]
+  (let [form-name (str/replace (str/replace-first (first (str/split selector " ")) "#" "") "-" "_")]
+    (apply merge (for [x (jquery selector)
+                       :when (not (empty? (.-name x)))]
+                   {(str/replace (.-name x) (str form-name "-") "") (.-value x)}))))
 
 ;; notifications
 
@@ -300,7 +382,7 @@
              :aria-expanded "false"}
     @menu-user-label]
    [:div {:class "dropdown-menu" :aria-labelledby "button-menu-user"}
-    (for [menuitem @menu-user-state]
+    (for [menuitem (doall @menu-user-state)]
       [:a {:key (get menuitem "id")
            :class "dropdown-item"
            :on-click #(on-menu-clicked (get menuitem "handler"))}
@@ -321,20 +403,19 @@
 
 ;; home
 
-(hiccups/defhtml template-home [jsonobj]
-  [:div
-   [:h2 {:style "text-align: center"} "Welcome To Carlos Konstanski's Music Studio"]
-   [:h3 {:style "text-align: center"}
+(defn comp-home []
+  [:div {:style {:display (cond (or (= @location-state "/home")) "block" :else "none")}}
+   [:h2 {:style {:text-align "center"}} "Welcome To Carlos Konstanski's Music Studio"]
+   [:h3 {:style {:text-align "center"}}
     [:i "a.k.a. der Bogenherr" [:br] "a.k.a. Dr. Divertimento"]]
-   [:h2 {:style "text-align: center"} "Study the Violin, Viola and Viola d'Amore With Me!"]
-   [:div {:style "text-align: center"}
-    [:img {:style "width: 100%"
+   [:h2 {:style {:text-align "center"}} "Study the Violin, Viola and Viola d'Amore With Me!"]
+   [:div {:style {:text-align "center"}}
+    [:img {:style {:width "100%"}
            :src "/static/images/instrument-cabinet.jpg"}]]])
 
 (defn handler-home [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
-    (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-home jsonobj))))
+    (notifications jsonobj)))
 
 (defn render-home
   ([]
@@ -348,16 +429,17 @@
 
 ;; login
 
-(hiccups/defhtml template-login [jsonobj]
-  [:h3 {:style "text-align: center"} (get jsonobj "title")]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x))
-  [:div {:style "text-align: center"}
-   [:a {:href ""} "Forgot password?"]])
+(defn comp-login []
+  [:div {:style {:display (cond (or (= @location-state "/login")) "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}} (get @login-state "title")]
+   [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @login-state "form") (namespace ::x)))}]
+   [:div {:style {:text-align "center"}}
+    [:a {:href ""} "Forgot password?"]]])
 
 (defn handler-login [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
-    (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-login jsonobj))))
+    (reset-login-state jsonobj)
+    (notifications jsonobj)))
 
 (defn render-login []
   (GET "/login" {:handler handler-login}))
@@ -383,52 +465,51 @@
 (defn render-login-authenticate []
   (POST "/login/authenticate"
         {:format :raw
-         :params {:username (dommy/value (dommy/sel1 :#username))
-                  :pwd (dommy/value (dommy/sel1 :#pwd))}
+         :params (form-fields-to-map "#login-form :input")
          :handler handler-login-authenticate}))
 
 ;; logout
 
 (defn handler-logout [response]
-  (let [jsonobj (js->clj (js/JSON.parse response))]
-    (render-home "You are now logged out" "")
-    (reset-location "/home")
-    (render-menu)))
+  (render-home "You are now logged out" "")
+  (reset-location "/home")
+  (render-menu))
 
 (defn render-logout []
   (GET "/logout" {:handler handler-logout}))
 
 ;; profile
 
-(hiccups/defhtml template-profile [jsonobj]
-  [:h3 {:style "text-align: center"} (get jsonobj "title")]
-  [:div {:id "content"}]
-  [:div {:id "modify"
-         :class "modal fade"
-         :role "dialog"
-         :tabindex "-1"}
-   [:div {:class "modal-dialog modal-lg"}
-    [:div {:class "modal-content"}
-     [:div {:class "modal-header"}
-      [:h5 {:class "modal-title"} "Profile - Modify"]
-      [:button {:type "button"
-                :class "close"
-                :data-dismiss "modal"}
-       "×"]]
-     [:div {:id "modify-body"
-            :class "modal-body"
-            :style "height: 460px;"}]
-     [:div {:class "modal-footer"}
-      [:button {:type "submit"
-                :class "btn btn-danger btn-default"
-                :data-dismiss "modal"}
-       [:span {:class "glyphicon glyphicon-remove"}]
-       "Cancel"]]]]])
+(defn comp-profile []
+  [:div {:style {:display (cond (or (= @location-state "/profile")) "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}} (get @profile-state "title")]
+   [comp-profile-view]
+   [:div {:id "modify-profile"
+          :class "modal fade"
+          :role "dialog"
+          :tab-index "-1"}
+    [:div {:class "modal-dialog modal-lg"}
+     [:div {:class "modal-content"}
+      [:div {:class "modal-header"}
+       [:h5 {:class "modal-title"} "Profile - Modify"]
+       [:button {:type "button"
+                 :class "close"
+                 :data-dismiss "modal"}
+        "X"]]
+      [:div {:class "modal-body"
+             :style {:height "460px"}}
+       [comp-profile-modify]]
+      [:div {:class "modal-footer"}
+       [:button {:type "submit"
+                 :class "btn btn-danger btn-default"
+                 :data-dismiss "modal"}
+        [:span {:class "glyphicon glyphicon-remove"}]
+        "Cancel"]]]]]])
 
 (defn handler-profile [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
+    (reset-profile-state jsonobj)
     (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-profile jsonobj))
     (render-profile-view)))
 
 (defn render-profile []
@@ -436,31 +517,43 @@
 
 ;; profile-view
 
-(hiccups/defhtml template-profile-view [jsonobj]
-  [:div {:style "text-align: right"}
-   [:img {:src "/static/images/edit.png"
-          :style "cursor:pointer; cursor:hand"
-          :onclick (str (namespace ::x) ".on_profile_modify_clicked()")}]]
-  [:div {:class "container"}
-   [:div {:class "row"}
-    [:div {:class "col" :style "text-align: right"} "Username:"]
-    [:div {:class "col-10"} (get jsonobj "username")]]
-   [:div {:class "row"}
-    [:div {:class "col" :style "text-align: right"} "First Name:"]
-    [:div {:class "col-10"} (get jsonobj "first_name")]]
-   [:div {:class "row"}
-    [:div {:class "col" :style "text-align: right"} "Last Name:"]
-    [:div {:class "col-10"} (get jsonobj "last_name")]]
-   [:div {:class "row"}
-    [:div {:class "col" :style "text-align: right"} "Email:"]
-    [:div {:class "col-10"} (get jsonobj "email")]]
-   [:div {:class "row"}
-    [:div {:class "col" :style "text-align: right"} "Phone:"]
-    [:div {:class "col-10"} (get jsonobj "phone")]]])
+(defn comp-profile-view []
+  [:div
+   [:div {:style {:text-align "right"}}
+    [:img {:src "/static/images/edit.png"
+           :on-click #(on-profile-modify-clicked)}]]
+   (for [item (get @profile-view-state "items")]
+     [:div {:class "container"}
+      [:div {:class "row"}
+       [:div {:class "col" :style {:text-align "right"}} "Username:"]
+       [:div {:class "col-10"
+              :key (str "profile-view-username-" (get item "id"))}
+        (get item "username")]]
+      [:div {:class "row"}
+       [:div {:class "col" :style {:text-align "right"}} "First Name:"]
+       [:div {:class "col-10"
+              :key (str "profile-view-first_name-" (get item "id"))}
+        (get item "first_name")]]
+     [:div {:class "row"}
+      [:div {:class "col" :style {:text-align "right"}} "Last Name:"]
+       [:div {:class "col-10"
+              :key (str "profile-view-last_name-" (get item "id"))}
+        (get item "last_name")]]
+      [:div {:class "row"}
+       [:div {:class "col" :style {:text-align "right"}} "Email:"]
+       [:div {:class "col-10"
+              :key (str "profile-view-email-" (get item "id"))}
+        (get item "email")]]
+      [:div {:class "row"}
+       [:div {:class "col" :style {:text-align "right"}} "Phone:"]
+       [:div {:class "col-10"
+              :key (str "profile-view-phone-" (get item "id"))}
+        (get item "phone")]]])])
 
 (defn handler-profile-view [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
-    (dommy/set-html! (dommy/sel1 :#content) (template-profile-view jsonobj))))
+    (reset-profile-view-state jsonobj)
+    (auth-notifications jsonobj)))
 
 (defn render-profile-view []
   (GET "/profile/view" {:handler handler-profile-view}))
@@ -470,14 +563,14 @@
 (defn on-profile-modify-clicked []
   (render-profile-modify))
 
-(hiccups/defhtml template-profile-modify [jsonobj]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+(defn comp-profile-modify []
+  [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @profile-modify-state "form") (namespace ::x)))}])
 
 (defn handler-profile-modify [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#modify-body) (template-profile-modify jsonobj))
-    (.modal (jquery "#modify"))))
+    (reset-profile-modify-state jsonobj)
+    (.modal (jquery "#modify-profile"))))
 
 (defn render-profile-modify []
   (POST "/profile/modify" {:handler handler-profile-modify}))
@@ -488,7 +581,7 @@
   (when (-> (jquery "#profile-modify-form")
             (.get "0")
             (.checkValidity))
-    (.modal (jquery "#modify") "hide")
+    (.modal (jquery "#modify-profile") "hide")
     (render-profile-modify-submit)))
 
 (defn handler-profile-modify-submit [response]
@@ -499,24 +592,20 @@
 (defn render-profile-modify-submit []
   (POST "/profile/modify/submit"
         {:format :raw
-         :params {:id (dommy/value (dommy/sel1 :#id))
-                  :username (dommy/value (dommy/sel1 :#username))
-                  :first_name (dommy/value (dommy/sel1 :#first_name))
-                  :last_name (dommy/value (dommy/sel1 :#last_name))
-                  :email (dommy/value (dommy/sel1 :#email))
-                  :phone (dommy/value (dommy/sel1 :#phone))}
+         :params (form-fields-to-map "#profile-modify-form :input")
          :handler handler-profile-modify-submit}))
 
 ;; password
 
-(hiccups/defhtml template-password [jsonobj]
-  [:h3 {:style "text-align: center"} (get jsonobj "title")]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+(defn comp-password [jsonobj]
+  [:div {:style {:display (cond (or (= @location-state "/password")) "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}} (get @password-state "title")]
+   [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @password-state "form") (namespace ::x)))}]])
 
 (defn handler-password [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-password jsonobj))))
+    (reset-password-state jsonobj)))
 
 (defn render-password []
   (GET "/password" {:handler handler-password}))
@@ -537,46 +626,51 @@
 (defn render-password-submit []
   (POST "/password/submit"
         {:format :raw
-         :params {:id (dommy/value (dommy/sel1 :#id))
-                  :pwd (dommy/value (dommy/sel1 :#pwd))
-                  :pwd2 (dommy/value (dommy/sel1 :#pwd2))}
+         :params (form-fields-to-map "#password-form :input")
          :handler handler-password-submit}))
 
-;; about-us (lessons, gigs, programming)
+;; about-us
 
-(hiccups/defhtml template-about-us [jsonobj]
-  [:h1 {:style "text-align: center"}
-   (cond (= @about-us-category-state "lessons") "About the Studio"
-         (= @about-us-category-state "gigs") "Hire Me to Play"
-         (= @about-us-category-state "programming") "Hire Me to Write Software")]
-  [:div {:id "content"}]
-  [:div {:id "modify"
-         :class "modal fade"
-         :role "dialog"
-         :tabindex "-1"}
-   [:div {:class "modal-dialog modal-lg"}
-    [:div {:class "modal-content"}
-     [:div {:class "modal-header"}
-      [:h5 [:span {:id "modify-title"}]]
-      [:button {:type "button"
-                :class "close"
-                :data-dismiss "modal"}
-       "×"]]
-     [:div {:id "modify-body"
-            :class "modal-body"
-            :style "height: 460px;"}]
-     [:div {:class "modal-footer"}
-      [:button {:type "submit"
-                :class "btn btn-danger btn-default"
-                :data-dismiss "modal"}
-       [:span {:class "glyphicon glyphicon-remove"}]
-       "Cancel"]]]]])
+(defn comp-about-us []
+  [:div {:style {:display (cond (or (= @location-state "/lessons")
+                                    (= @location-state "/gigs")
+                                    (= @location-state "/programming"))
+                                "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}}
+    (cond (= @about-us-category-state "lessons") "About the Studio"
+          (= @about-us-category-state "gigs") "Hire Me to Play"
+          (= @about-us-category-state "programming") "Hire Me to Write Software")]
+   [comp-about-us-view]
+   [:div {:id "modify-about-us"
+          :class "modal fade"
+          :role "dialog"
+          :tab-index "-1"}
+    [:div {:class "modal-dialog modal-lg"}
+     [:div {:class "modal-content"}
+      [:div {:class "modal-header"}
+       [:h5 (str (cond (= @about-us-category-state "lessons") "About the Studio"
+                       (= @about-us-category-state "gigs") "Hire Me to Play"
+                       (= @about-us-category-state "programming") "Hire Me to Write Software")
+                 " - Modify")]
+       [:button {:type "button"
+                 :class "close"
+                 :data-dismiss "modal"}
+        "X"]]
+      [:div {:class "modal-body"
+             :style {:height "460px"}}
+       [comp-about-us-modify]]
+      [:div {:class "modal-footer"}
+       [:button {:type "submit"
+                 :class "btn btn-danger btn-default"
+                 :data-dismiss "modal"}
+        [:span {:class "glyphicon glyphicon-remove"}]
+        "Cancel"]]]]]])
 
 (defn handler-about-us [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
-    (reset-about-us-category (get jsonobj "category"))
+    (reset-about-us-category-state (get jsonobj "category"))
+    (reset-about-us-state jsonobj)
     (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-about-us jsonobj))
     (render-about-us-view)))
 
 (defn render-lessons []
@@ -590,18 +684,17 @@
 
 ;; about-us-view
 
-(hiccups/defhtml template-about-us-view [jsonobj]
-  (when (get jsonobj "adminP")
-    [:div {:style "text-align: right;"}
-     [:img {:src "/static/images/edit.png"
-            :style "cursor:pointer; cursor:hand"
-            :onclick (str (namespace ::x) ".on_about_us_modify_clicked()")}]])
-  [:div {:id "markdown"}])
+(defn comp-about-us-view []
+  [:div
+   (when (get @about-us-view-state "adminP")
+     [:div {:style {:text-align "right"}}
+      [:img {:src "/static/images/edit.png"
+             :on-click #(on-about-us-modify-clicked)}]])
+   [:div {:dangerouslySetInnerHTML (r/unsafe-html (markdown-to-html (get @about-us-view-state "content")))}]])
 
 (defn handler-about-us-view [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
-    (dommy/set-html! (dommy/sel1 :#content) (template-about-us-view jsonobj))
-    (dommy/set-html! (dommy/sel1 :#markdown) (markdown-to-html (get jsonobj "content")))))
+    (reset-about-us-view-state jsonobj)))
 
 (defn render-about-us-view []
   (GET (str "/" @about-us-category-state "/view")
@@ -612,19 +705,14 @@
 (defn on-about-us-modify-clicked []
   (render-about-us-modify))
 
-(hiccups/defhtml template-about-us-modify [jsonobj]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+(defn comp-about-us-modify []
+  [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @about-us-modify-state "form") (namespace ::x)))}])
 
 (defn handler-about-us-modify [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#modify-title)
-                     (str (cond (= @about-us-category-state "lessons") "About the Studio"
-                                (= @about-us-category-state "gigs") "For Hire"
-                                (= @about-us-category-state "programming") "Software Consulting")
-                          " - Modify"))
-    (dommy/set-html! (dommy/sel1 :#modify-body) (template-about-us-modify jsonobj))
-    (.modal (jquery "#modify"))))
+    (reset-about-us-modify-state jsonobj)
+    (.modal (jquery "#modify-about-us"))))
 
 (defn render-about-us-modify []
   (POST (str "/" @about-us-category-state "/modify")
@@ -636,72 +724,93 @@
   (when (-> (jquery "#about-us-modify-form")
             (.get "0")
             (.checkValidity))
-    (.modal (jquery "#modify") "hide")
+    (.modal (jquery "#modify-about-us") "hide")
     (render-about-us-modify-submit)))
 
 (defn handler-about-us-modify-submit [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
-    (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#content) (template-about-us-view jsonobj))
-    (dommy/set-html! (dommy/sel1 :#markdown) (markdown-to-html (get jsonobj "content")))))
+    (reset-about-us-view-state jsonobj)
+    (auth-notifications jsonobj)))
 
 (defn render-about-us-modify-submit []
   (POST (str "/" @about-us-category-state "/modify/submit")
         {:format :raw
-         :params {:content (dommy/value (dommy/sel1 :#txt-content))}
+         :params (form-fields-to-map "#about-us-modify-form :input")
          :handler handler-about-us-modify-submit}))
 
 ;; gallery
 
-(hiccups/defhtml template-gallery [jsonobj]
-  [:h1 {:style "text-align: center"} "Gallery"]
-  [:div {:id "content"}]
-  [:div {:id "image"
-         :class "modal fade"
-         :role "dialog"
-         :tabindex "-1"}
-   [:div {:class "modal-dialog modal-lg mw-100 w-75"}
-    [:div {:class "modal-content"}
-     [:div {:class "modal-header"}
-      [:button {:type "button"
-                :class "close"
-                :data-dismiss "modal"}
-       "×"]]
-     [:div {:id "image-body"
-            :class "modal-body"
-            :style "width: 100%"}]
-     [:div {:class "modal-footer"}
-      [:button {:type "submit"
-                :class "btn btn-danger btn-default"
-                :data-dismiss "modal"}
-       [:span {:class "glyphicon glyphicon-remove"}]
-       "Close"]]]]]
-  [:div {:id "modify"
-         :class "modal fade"
-         :role "dialog"
-         :tabindex "-1"}
-   [:div {:class "modal-dialog modal-lg"}
-    [:div {:class "modal-content"}
-     [:div {:class "modal-header"}
-      [:h5 [:span {:id "modify-title"}]]
-      [:button {:type "button"
-                :class "close"
-                :data-dismiss "modal"}
-       "×"]]
-     [:div {:id "modify-body"
-            :class "modal-body"
-            :style "height: 425px;"}]
-     [:div {:class "modal-footer"}
-      [:button {:type "submit"
-                :class "btn btn-danger btn-default"
-                :data-dismiss "modal"}
-       [:span {:class "glyphicon glyphicon-remove"}]
-       "Cancel"]]]]])
+(defn comp-gallery []
+  [:div {:style {:display (cond (or (= @location-state "/gallery")) "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}} (get @gallery-state "title")]
+   [comp-gallery-view]
+   [:div {:id "modal-gallery-image"
+          :class "modal fade"
+          :role "dialog"
+          :tab-index "-1"}
+    [:div {:class "modal-dialog modal-lg mw-100 w-75"}
+     [:div {:class "modal-content"}
+      [:div {:class "modal-header"}
+       [:button {:type "button"
+                 :class "close"
+                 :data-dismiss "modal"}
+        "X"]]
+      [:div {:class "modal-body"
+             :style {:width "100%"}}
+       [comp-gallery-image-fullscreen]]
+      [:div {:class "modal-footer"}
+       [:button {:type "submit"
+                 :class "btn btn-danger btn-default"
+                 :data-dismiss "modal"}
+        [:span {:class "glyphicon glyphicon-remove"}]
+        "Close"]]]]]
+   [:div {:id "modal-gallery-add"
+          :class "modal fade"
+          :role "dialog"
+          :tab-index "-1"}
+    [:div {:class "modal-dialog modal-lg"}
+     [:div {:class "modal-content"}
+      [:div {:class "modal-header"}
+       [:h5 (get @gallery-state "title")]
+       [:button {:type "button"
+                 :class "close"
+                 :data-dismiss "modal"}
+        "X"]]
+      [:div {:class "modal-body"
+             :style {:height "460px"}}
+       [comp-gallery-add]]
+      [:div {:class "modal-footer"}
+       [:button {:type "submit"
+                 :class "btn btn-danger btn-default"
+                 :data-dismiss "modal"}
+        [:span {:class "glyphicon glyphicon-remove"}]
+        "Cancel"]]]]]
+   [:div {:id "modal-gallery-modify"
+          :class "modal fade"
+          :role "dialog"
+          :tab-index "-1"}
+    [:div {:class "modal-dialog modal-lg"}
+     [:div {:class "modal-content"}
+      [:div {:class "modal-header"}
+       [:h5 (get @gallery-state "title")]
+       [:button {:type "button"
+                 :class "close"
+                 :data-dismiss "modal"}
+        "X"]]
+      [:div {:class "modal-body"
+             :style {:height "460px"}}
+       [comp-gallery-modify]]
+      [:div {:class "modal-footer"}
+       [:button {:type "submit"
+                 :class "btn btn-danger btn-default"
+                 :data-dismiss "modal"}
+        [:span {:class "glyphicon glyphicon-remove"}]
+        "Cancel"]]]]]])
 
 (defn handler-gallery [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-gallery jsonobj))
+    (reset-gallery-state jsonobj)
     (render-gallery-view)))
 
 (defn render-gallery []
@@ -709,60 +818,62 @@
 
 ;; gallery-view
 
-(hiccups/defhtml template-gallery-view [jsonobj]
-  [:div {:style "text-align: right"}
-   (when (get jsonobj "adminP")
-     [:img {:src "/static/images/add.png"
-            :style "cursor:pointer; cursor:hand"
-            :onclick (str (namespace ::x) ".on_gallery_add_clicked()")}])]
-  (let [results (get jsonobj "results")]
-    (cond (empty? results)
-          [:h5 {:style "text-align: center"} "No results found."]
-          :else
-          (for [rec results]
-            [:span {:style "width:720px; height:425px"}
-             [:table
-              [:tr
-               [:td
-                (cond (not (= (get rec "video_embed_url") "null"))
-                      [:iframe {:width "720"
-                                :height "405"
-                                :src (get rec "video_embed_url")
-                                :frameborder "0"
-                                :allow "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                :referrerpolicy "strict-origin-when-cross-origin"
-                                :allowfullscreen "allowfullscreen"}]
-                      :else
-                      (let [img-src (str "/gallery/file/view/" (get rec "id"))]
-                        [:img {:style "height:405px; cursor:pointer; cursor:hand"
-                               :src img-src
-                               :onclick (str (namespace ::x) ".on_gallery_image_clicked('" img-src "')")}]))]
-               (when (get jsonobj "adminP")
-                 [:td {:style "text-align:right; vertical-align:top"}
-                  [:img {:src "/static/images/edit.png"
-                         :onclick (str (namespace ::x) ".on_gallery_modify_clicked(" (get rec "id") ")")}]
-                  [:br]
-                  [:img {:src "/static/images/delete.png"
-                         :onclick (str (namespace ::x) ".on_gallery_delete_clicked(" (get rec "id") ")")}]])]
-              [:tr
-               [:td (get rec "description")]]
-              [:tr
-               [:td " "]]
-              [:tr
-               [:td " "]]]]))))
+(defn comp-gallery-view []
+  [:div
+   (when (get @gallery-view-state "adminP")
+     [:div {:style {:text-align "right"}}
+      [:img {:src "/static/images/add.png"
+             :on-click #(on-gallery-add-clicked)}]])
+   (cond (empty? (get @gallery-view-state "results"))
+         [:h5 {:style {:text-align "center"}} "No results found."]
+         :else
+         (for [rec (get @gallery-view-state "results")]
+           [:span {:style {:width "720px"
+                           :height "425px"}}
+            [:table
+             [:tr
+              [:td
+               (cond (not (= (get rec "video_embed_url") "null"))
+                     [:iframe {:width "720"
+                               :height "405"
+                               :src (get rec "video_embed_url")
+                               :frameborder "0"
+                               :allow "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                               :referrerpolicy "strict-origin-when-cross-origin"
+                               :allowfullscreen "allowfullscreen"}]
+                     :else
+                     (let [img-src (str "/gallery/file/view/" (get rec "id"))]
+                       [:img {:style {:height "405px"}
+                              :src img-src
+                              :on-click #(on-gallery-image-clicked img-src)}]))]
+              (when (get @gallery-view-state "adminP")
+                [:td {:style {:text-align "right"
+                              :vertical-align "top"}}
+                 [:img {:src "/static/images/edit.png"
+                        :on-click #(on-gallery-modify-clicked (get rec "id"))}]
+                 [:br]
+                 [:img {:src "/static/images/delete.png"
+                        :on-click #(on-gallery-delete-clicked (get rec "id"))}]])]
+             [:tr
+              [:td (get rec "description")]]
+             [:tr
+              [:td " "]]
+             [:tr
+              [:td " "]]]]))])
 
-(hiccups/defhtml template-gallery-image-fullscreen [src]
-  [:img {:src src
-         :style "width: 100%"}])
+(defn comp-gallery-image-fullscreen []
+  [:div
+   [:img {:src @gallery-image-state
+          :style {:width "100%"}}]])
 
 (defn on-gallery-image-clicked [src]
-  (dommy/set-html! (dommy/sel1 :#image-body) (template-gallery-image-fullscreen src))
-  (.modal (jquery "#image")))
+  (reset-gallery-image-state src)
+  (.modal (jquery "#modal-gallery-image")))
 
 (defn handler-gallery-view [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#content) (template-gallery-view jsonobj))))
+    (reset-gallery-view-state jsonobj)))
 
 (defn render-gallery-view []
   (GET "/gallery/view" {:handler handler-gallery-view}))
@@ -772,15 +883,14 @@
 (defn on-gallery-add-clicked []
   (render-gallery-add))
 
-(hiccups/defhtml template-gallery-add [jsonobj]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+(defn comp-gallery-add []
+  [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @gallery-add-state "form") (namespace ::x)))}])
 
 (defn handler-gallery-add [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#modify-title) "Gallery - Add")
-    (dommy/set-html! (dommy/sel1 :#modify-body) (template-gallery-add jsonobj))
-    (.modal (jquery "#modify"))))
+    (reset-gallery-add-state jsonobj)
+    (.modal (jquery "#modal-gallery-add"))))
 
 (defn render-gallery-add []
   (POST "/gallery/add" {:handler handler-gallery-add}))
@@ -791,7 +901,7 @@
   (when (-> (jquery "#gallery-add-form")
             (.get "0")
             (.checkValidity))
-    (.modal (jquery "#modify") "hide")
+    (.modal (jquery "#modal-gallery-add") "hide")
     (render-gallery-add-submit)))
 
 (defn handler-gallery-add-submit [response]
@@ -811,15 +921,14 @@
 (defn on-gallery-modify-clicked [id]
   (render-gallery-modify id))
 
-(hiccups/defhtml template-gallery-modify [jsonobj]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+(defn comp-gallery-modify []
+  [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @gallery-modify-state "form") (namespace ::x)))}])
 
 (defn handler-gallery-modify [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#modify-title) "Gallery - Modify")
-    (dommy/set-html! (dommy/sel1 :#modify-body) (template-gallery-modify jsonobj))
-    (.modal (jquery "#modify"))))
+    (reset-gallery-modify-state jsonobj)
+    (.modal (jquery "#modal-gallery-modify"))))
 
 (defn render-gallery-modify [id]
   (POST "/gallery/modify"
@@ -833,7 +942,7 @@
   (when (-> (jquery "#gallery-modify-form")
             (.get "0")
             (.checkValidity))
-    (.modal (jquery "#modify") "hide")
+    (.modal (jquery "#modal-gallery-modify") "hide")
     (render-gallery-modify-submit)))
 
 (defn handler-gallery-modify-submit [response]
@@ -864,119 +973,125 @@
           {:format :raw
            :handler handler-gallery-delete}))
 
-;; testimonials
+;; ;; testimonials
 
-(hiccups/defhtml template-testimonials [jsonobj]
-  [:h3 {:style "text-align: center"} (get jsonobj "title")]
-  [:div {:id "content"}]
-  [:div {:id "modify"
-         :class "modal fade"
-         :role "dialog"
-         :tabindex "-1"}
-   [:div {:class "modal-dialog modal-lg"}
-    [:div {:class "modal-content"}
-     [:div {:class "modal-header"}
-      [:h5 [:span {:id "modify-title"}]]
-      [:button {:type "button"
-                :class "close"
-                :data-dismiss "modal"}
-       "×"]]
-     [:div {:id "modify-body"
-            :class "modal-body"
-            :style "height: 460px;"}]
-     [:div {:class "modal-footer"}
-      [:button {:type "submit"
-                :class "btn btn-danger btn-default"
-                :data-dismiss "modal"}
-       [:span {:class "glyphicon glyphicon-remove"}]
-       "Cancel"]]]]])
+;; (hiccups/defhtml template-testimonials [jsonobj]
+;;   [:h3 {:style "text-align: center"} (get jsonobj "title")]
+;;   [:div {:id "content"}]
+;;   [:div {:id "modify"
+;;          :class "modal fade"
+;;          :role "dialog"
+;;          :tabindex "-1"}
+;;    [:div {:class "modal-dialog modal-lg"}
+;;     [:div {:class "modal-content"}
+;;      [:div {:class "modal-header"}
+;;       [:h5 [:span {:id "modify-title"}]]
+;;       [:button {:type "button"
+;;                 :class "close"
+;;                 :data-dismiss "modal"}
+;;        "×"]]
+;;      [:div {:id "modify-body"
+;;             :class "modal-body"
+;;             :style "height: 460px;"}]
+;;      [:div {:class "modal-footer"}
+;;       [:button {:type "submit"
+;;                 :class "btn btn-danger btn-default"
+;;                 :data-dismiss "modal"}
+;;        [:span {:class "glyphicon glyphicon-remove"}]
+;;        "Cancel"]]]]])
 
-(defn handler-testimonials [response]
-  (let [jsonobj (js->clj (js/JSON.parse response))]
-    (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-testimonials jsonobj))
-    (render-testimonials-view)))
+;; (defn handler-testimonials [response]
+;;   (let [jsonobj (js->clj (js/JSON.parse response))]
+;;     (notifications jsonobj)
+;;     (dommy/set-html! (dommy/sel1 :#body) (template-testimonials jsonobj))
+;;     (render-testimonials-view)))
 
-(defn render-testimonials []
-  (GET "/testimonials" {:handler handler-testimonials}))
+;; (defn render-testimonials []
+;;   (GET "/testimonials" {:handler handler-testimonials}))
 
-;; testimonials-view
+;; ;; testimonials-view
 
-(hiccups/defhtml template-testimonials-view [jsonobj]
-  (when (get jsonobj "adminP")
-    [:div {:style "text-align: right;"}
-     [:img {:src "/static/images/edit.png"
-            :style "cursor:pointer; cursor:hand"
-            :onclick (str (namespace ::x) ".on_testimonials_modify_clicked()")}]])
-  [:div {:id "markdown"}])
+;; (hiccups/defhtml template-testimonials-view [jsonobj]
+;;   (when (get jsonobj "adminP")
+;;     [:div {:style "text-align: right;"}
+;;      [:img {:src "/static/images/edit.png"
+;;             :style "cursor:pointer; cursor:hand"
+;;             :onclick (str (namespace ::x) ".on_testimonials_modify_clicked()")}]])
+;;   [:div {:id "markdown"}])
 
-(defn handler-testimonials-view [response]
-  (let [jsonobj (js->clj (js/JSON.parse response))]
-    (dommy/set-html! (dommy/sel1 :#content) (template-testimonials-view jsonobj))
-    (dommy/set-html! (dommy/sel1 :#markdown) (markdown-to-html (get jsonobj "content")))))
+;; (defn handler-testimonials-view [response]
+;;   (let [jsonobj (js->clj (js/JSON.parse response))]
+;;     (dommy/set-html! (dommy/sel1 :#content) (template-testimonials-view jsonobj))
+;;     (dommy/set-html! (dommy/sel1 :#markdown) (markdown-to-html (get jsonobj "content")))))
 
-(defn render-testimonials-view []
-  (GET "/testimonials/view" {:handler handler-testimonials-view}))
+;; (defn render-testimonials-view []
+;;   (GET "/testimonials/view" {:handler handler-testimonials-view}))
 
-;; testimonials-modify
+;; ;; testimonials-modify
 
-(defn on-testimonials-modify-clicked []
-  (render-testimonials-modify))
+;; (defn on-testimonials-modify-clicked []
+;;   (render-testimonials-modify))
 
-(hiccups/defhtml template-testimonials-modify [jsonobj]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+;; (hiccups/defhtml template-testimonials-modify [jsonobj]
+;;   (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
 
-(defn handler-testimonials-modify [response]
-  (let [jsonobj (js->clj (js/JSON.parse response))]
-    (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#modify-title) (get jsonobj "title"))
-    (dommy/set-html! (dommy/sel1 :#modify-body) (template-testimonials-modify jsonobj))
-    (.modal (jquery "#modify"))))
+;; (defn handler-testimonials-modify [response]
+;;   (let [jsonobj (js->clj (js/JSON.parse response))]
+;;     (auth-notifications jsonobj)
+;;     (dommy/set-html! (dommy/sel1 :#modify-title) (get jsonobj "title"))
+;;     (dommy/set-html! (dommy/sel1 :#modify-body) (template-testimonials-modify jsonobj))
+;;     (.modal (jquery "#modify"))))
 
-(defn render-testimonials-modify []
-  (POST "/testimonials/modify" {:handler handler-testimonials-modify}))
+;; (defn render-testimonials-modify []
+;;   (POST "/testimonials/modify" {:handler handler-testimonials-modify}))
 
-;; testimonials-modify-submit
+;; ;; testimonials-modify-submit
 
-(defn on-testimonials-modify-submit-clicked []
-  (when (-> (jquery "#testimonials-modify-form")
-            (.get "0")
-            (.checkValidity))
-    (.modal (jquery "#modify") "hide")
-    (render-testimonials-modify-submit)))
+;; (defn on-testimonials-modify-submit-clicked []
+;;   (when (-> (jquery "#testimonials-modify-form")
+;;             (.get "0")
+;;             (.checkValidity))
+;;     (.modal (jquery "#modify") "hide")
+;;     (render-testimonials-modify-submit)))
 
-(defn handler-testimonials-modify-submit [response]
-  (let [jsonobj (js->clj (js/JSON.parse response))]
-    (auth-notifications jsonobj)
-    (on-menu-clicked "/testimonials")))
+;; (defn handler-testimonials-modify-submit [response]
+;;   (let [jsonobj (js->clj (js/JSON.parse response))]
+;;     (auth-notifications jsonobj)
+;;     (on-menu-clicked "/testimonials")))
 
-(defn render-testimonials-modify-submit []
-  (POST "/testimonials/modify/submit"
-        {:format :raw
-         :params {:content (dommy/value (dommy/sel1 :#txt-content))}
-         :handler handler-testimonials-modify-submit}))
+;; (defn render-testimonials-modify-submit []
+;;   (POST "/testimonials/modify/submit"
+;;         {:format :raw
+;;          :params {:content (dommy/value (dommy/sel1 :#txt-content))}
+;;          :handler handler-testimonials-modify-submit}))
 
 ;; contact-us
 
-(hiccups/defhtml template-contact-us [jsonobj]
-  [:h1 {:style "text-align: center"} "Reach out to me by filling out the form."]
-  [:div {:id "content"}]
-  [:table {:width "100%"}
-   [:tr
-    [:td {:style "width: 100%; text-align: center;"}
-     [:h3 "Located on the edge of the ISU campus!"]]]
-   [:tr
-    [:td {:style "width: 100%; text-align: center;"}
-     [:iframe {:src "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3225.263770603599!2d-112.4266916!3d42.8635091!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53554f343c440407%3A0xf13bf897ecb4f7e0!2sBogenherr%20Violin%20and%20Viola%20Studio!5e1!3m2!1sen!2sus!4v1783097048097!5m2!1sen!2sus"
-               :style "width: 600px; height: 450px; border: 0px;"
-               :allowfullscreen ""
-               :loading "lazy"
-               :referrerpolicy "strict-origin-when-cross-origin"}]]]])
+(defn comp-contact-us []
+  [:div {:style {:display (cond (or (= @location-state "/contact-us")) "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}} "Reach out to me by filling out the form."]
+   [comp-contact-us-view]
+   [:table {:width "100%"}
+    [:tbody
+     [:tr
+      [:td {:style {:width "100%"
+                    :text-align "center"}}
+       [:h3 "Located on the edge of the ISU campus!"]]]
+     [:tr
+      [:td {:style {:width "100%"
+                    :text-align "center"}}
+       [:iframe {:src "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3225.263770603599!2d-112.4266916!3d42.8635091!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53554f343c440407%3A0xf13bf897ecb4f7e0!2sBogenherr%20Violin%20and%20Viola%20Studio!5e1!3m2!1sen!2sus!4v1783097048097!5m2!1sen!2sus"
+                 :style {:width "600px"
+                         :height "450px"
+                         :border "0px"}
+                 :allowfullscreen ""
+                 :loading "lazy"
+                 :referrerpolicy "strict-origin-when-cross-origin"}]]]]]])
 
 (defn handler-contact-us [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-contact-us jsonobj))
+    (reset-contact-us-state jsonobj)
     (render-contact-us-view)))
 
 (defn render-contact-us []
@@ -984,13 +1099,13 @@
 
 ;; contact-us-view
 
-(hiccups/defhtml template-contact-us-view [jsonobj]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+(defn comp-contact-us-view []
+  [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @contact-us-view-state "form") (namespace ::x)))}])
 
 (defn handler-contact-us-view [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#content) (template-contact-us-view jsonobj))))
+    (reset-contact-us-view-state jsonobj)))
 
 (defn render-contact-us-view []
   (GET "/contact-us/view" {:handler handler-contact-us-view}))
@@ -1009,26 +1124,21 @@
 (defn render-contact-us-email-submit []
   (POST "/contact-us/email"
         {:format :raw
-         :params {:first_name (dommy/value (dommy/sel1 :#first_name))
-                  :last_name (dommy/value (dommy/sel1 :#last_name))
-                  :email (dommy/value (dommy/sel1 :#email))
-                  :phone (dommy/value (dommy/sel1 :#phone))
-                  :comments (dommy/value (dommy/sel1 :#comments))}
+         :params (form-fields-to-map "#contact-us-form :input")
          :handler handler-contact-us-email-submit}))
 
 ;; messages
 
-(hiccups/defhtml template-messages [jsonobj]
-  [:h3 {:style "text-align: center"} (get jsonobj "title")]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x))
-  [:div {:id "results"}])
+(defn comp-messages []
+  [:div {:style {:display (cond (or (= @location-state "/messages")) "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}} (get @messages-state "title")]
+   [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @messages-state "form") (namespace ::x)))}]
+   [comp-messages-results]])
 
 (defn handler-messages [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-messages jsonobj))
-    (when (not (empty? (dommy/value (dommy/sel1 :#read))))
-      (render-messages-results))))
+    (reset-messages-state jsonobj)))
 
 (defn render-messages []
   (GET "/messages" {:handler handler-messages}))
@@ -1036,56 +1146,54 @@
 ;; messages-results
 
 (defn on-messages-mode-clicked [read]
-  (dommy/set-value! (dommy/sel1 :#read) read)
+  (dommy/set-value! (dommy/sel1 :#messages_select_mode_form-read) read)
   (render-messages-results))
 
-(hiccups/defhtml template-messages-results [jsonobj]
-  (let [results (get jsonobj "results")
+(defn comp-messages-results []
+  (let [results (get @messages-results-state "results")
         keys (remove (fn [x]
                        (not (get (first results) x)))
                      (keys (first results)))]
-    (cond (empty? results)
-          [:h5 {:style "text-align: center"} "No results found."]
-          :else
-          [:table {:class "table table-hover"}
-           [:thead
-            [:tr
-             (for [key keys]
-               [:th key])
-             [:th
-              (str "Mark " (cond (= (dommy/value (dommy/sel1 :#read)) "read")
-                                    "unread"
-                                    :else
-                                    "read"))]]]
-           [:tbody
-            (for [rec results]
-              (let [onclick "void()"]
-                [:tr
-                 (for [key keys]
-                   [:td {:onclick onclick} (get rec key)])
-                 [:td [:img {:src (str "/static/images/"
-                                       (cond (= (dommy/value (dommy/sel1 :#read)) "read")
-                                             "edit-undo.png"
-                                             :else
-                                             "edit-redo.png"))
-                             :style "cursor: pointer; cursor: hand"
-                             :onclick (str (namespace ::x)
-                                           ".on_messages_mark("
-                                           (cond (= (dommy/value (dommy/sel1 :#read)) "read")
-                                                 "'unread'"
-                                                 :else
-                                                 "'read'")
-                                           "," (get rec "id") ")")}]]]))]])))
+    [:div
+     (cond (empty? results)
+           [:h5 {:style {:text-align "center"}} "No results found."]
+           :else
+           [:table {:class "table table-hover"}
+            [:thead
+             [:tr
+              (for [key keys]
+                [:th key])
+              [:th
+               (str "Mark " (cond (= (dommy/value (dommy/sel1 :#messages_select_mode_form-read)) "read")
+                                  "unread"
+                                  :else
+                                  "read"))]]]
+            [:tbody
+             (for [rec results]
+               (let [onclick "void()"]
+                 [:tr
+                  (for [key keys]
+                    [:td {:onclick onclick} (get rec key)])
+                  [:td [:img {:src (str "/static/images/"
+                                        (cond (= (dommy/value (dommy/sel1 :#messages_select_mode_form-read)) "read")
+                                              "edit-undo.png"
+                                              :else
+                                              "edit-redo.png"))
+                              :on-click #(on-messages-mark (cond (= (dommy/value (dommy/sel1 :#messages_select_mode_form-read)) "read")
+                                                                 "'unread'"
+                                                                 :else
+                                                                 "'read'")
+                                                           (get rec "id"))}]]]))]])]))
 
 (defn handler-messages-results [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#results) (template-messages-results jsonobj))))
+    (reset-messages-results-state jsonobj)))
 
 (defn render-messages-results []
   (POST "/messages/results"
         {:format :raw
-         :params {:read (dommy/value (dommy/sel1 :#read))}
+         :params (form-fields-to-map "#messages-select-mode-form :input")
          :handler handler-messages-results}))
 
 ;; messages-mark
@@ -1101,41 +1209,62 @@
 (defn render-messages-mark [read id]
   (POST "/messages/mark"
         {:format :raw
-         :params {:read read
-                  :id id}
+         :params (merge (form-fields-to-map "#messages-select-mode-form :input") {"id" (str id)})
          :handler handler-messages-mark}))
 
 ;; users
 
-(hiccups/defhtml template-users [jsonobj]
-  [:h3 {:style "text-align: center"} (get jsonobj "title")]
-  [:div {:id "content"}]
-  [:div {:id "modify"
-         :class "modal fade"
-         :role "dialog"
-         :tabindex "-1"}
-   [:div {:class "modal-dialog modal-lg"}
-    [:div {:class "modal-content"}
-     [:div {:class "modal-header"}
-      [:h5 [:span {:id "modify-title"}]]
-      [:button {:type "button"
-                :class "close"
-                :data-dismiss "modal"}
-       "×"]]
-     [:div {:id "modify-body"
-            :class "modal-body"
-            :style "height: 450px;"}]
-     [:div {:class "modal-footer"}
-      [:button {:type "submit"
-                :class "btn btn-danger btn-default"
-                :data-dismiss "modal"}
-       [:span {:class "glyphicon glyphicon-remove"}]
-       "Cancel"]]]]])
+(defn comp-users []
+  [:div {:style {:display (cond (or (= @location-state "/users")) "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}} (get @users-state "title")]
+   [comp-users-view]
+   [:div {:id "modal-users-add"
+          :class "modal fade"
+          :role "dialog"
+          :tab-index "-1"}
+    [:div {:class "modal-dialog modal-lg"}
+     [:div {:class "modal-content"}
+      [:div {:class "modal-header"}
+       [:h5 (get @users-state "title")]
+       [:button {:type "button"
+                 :class "close"
+                 :data-dismiss "modal"}
+        "X"]]
+      [:div {:class "modal-body"
+             :style {:height "460px"}}
+       [comp-users-add]]
+      [:div {:class "modal-footer"}
+       [:button {:type "submit"
+                 :class "btn btn-danger btn-default"
+                 :data-dismiss "modal"}
+        [:span {:class "glyphicon glyphicon-remove"}]
+        "Cancel"]]]]]
+   [:div {:id "modal-users-modify"
+          :class "modal fade"
+          :role "dialog"
+          :tab-index "-1"}
+    [:div {:class "modal-dialog modal-lg"}
+     [:div {:class "modal-content"}
+      [:div {:class "modal-header"}
+       [:h5 (get @users-state "title")]
+       [:button {:type "button"
+                 :class "close"
+                 :data-dismiss "modal"}
+        "X"]]
+      [:div {:class "modal-body"
+             :style {:height "460px"}}
+       [comp-users-modify]]
+      [:div {:class "modal-footer"}
+       [:button {:type "submit"
+                 :class "btn btn-danger btn-default"
+                 :data-dismiss "modal"}
+        [:span {:class "glyphicon glyphicon-remove"}]
+        "Cancel"]]]]]])
 
 (defn handler-users [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#body) (template-users jsonobj))
+    (reset-users-state jsonobj)
     (render-users-view)))
 
 (defn render-users []
@@ -1143,42 +1272,46 @@
 
 ;; users-view
 
-(hiccups/defhtml template-users-view [jsonobj]
-  [:div {:style "text-align: right"}
-   [:img {:src "/static/images/add.png"
-          :style "cursor:pointer; cursor:hand"
-          :onclick (str (namespace ::x) ".on_users_add_clicked()")}]]
-  [:table {:class "table table-striped table-hover table-sm"}
-   [:thead
-    [:tr
-     [:th {:scope "col"} "Active?"]
-     [:th {:scope "col"} "Last Name"]
-     [:th {:scope "col"} "First Name"]
-     [:th {:scope "col"} "Username"]
-     [:th {:scope "col"} "Email"]
-     [:th {:scope "col"} "Phone"]
-     [:th {:scope "col"} "Del"]]]
-   [:tbody
-    (for [user (get jsonobj "users")]
-      (let [onclick (str (namespace ::x) ".on_users_modify_clicked(" (get user "id") ")")
-            toggle-active (str (namespace ::x) ".on_users_toggle_active_clicked(" (get user "id") ")")]
-        [:tr
-         [:td [:img {:src (cond (get user "active")
-                                "/static/images/yes.png"
-                                :else
-                                "/static/images/no.png")
-                     :onclick toggle-active}]]
-         [:td {:onclick onclick} (get user "last_name")]
-         [:td {:onclick onclick} (get user "first_name")]
-         [:td {:onclick onclick} (get user "username")]
-         [:td {:onclick onclick} (get user "email")]
-         [:td {:onclick onclick} (get user "phone")]
-         [:td [:img {:src "/static/images/delete.png"
-                     :onclick (str (namespace ::x) ".on_users_delete_clicked(" (get user "id") ", '" (get user "first_name") "', '" (get user "last_name") "')")}]]]))]])
-  
+(defn comp-users-view []
+  [:div
+   [:div {:style {:text-align "right"}}
+    [:img {:src "/static/images/add.png"
+           :on-click #(on-users-add-clicked)}]]
+   [:table {:class "table table-striped table-hover table-sm"}
+    [:thead
+     [:tr
+      [:th {:scope "col"} "Active?"]
+      [:th {:scope "col"} "Last Name"]
+      [:th {:scope "col"} "First Name"]
+      [:th {:scope "col"} "Username"]
+      [:th {:scope "col"} "Email"]
+      [:th {:scope "col"} "Phone"]
+      [:th {:scope "col"} "Mod"]
+      [:th {:scope "col"} "Del"]]]
+    [:tbody
+     (for [user (get @users-view-state "users")]
+       [:tr
+        [:td [:img {:src (cond (get user "active")
+                               "/static/images/yes.png"
+                               :else
+                               "/static/images/no.png")
+                    :on-click #(on-users-toggle-active-clicked (get user "id"))}]]
+        [:td (get user "last_name")]
+        [:td (get user "first_name")]
+        [:td (get user "username")]
+        [:td (get user "email")]
+        [:td (get user "phone")]
+        [:td {:width "30"}
+         [:img {:src "/static/images/edit.png"
+                :on-click #(on-users-modify-clicked (get user "id"))}]]
+        [:td {:width "30"}
+         [:img {:src "/static/images/delete.png"
+                :on-click #(on-users-delete-clicked (get user "id"))}]]])]]])
+
 (defn handler-users-view [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
-    (dommy/set-html! (dommy/sel1 :#content) (template-users-view jsonobj))))
+    (notifications jsonobj)
+    (reset-users-view-state jsonobj)))
 
 (defn render-users-view []
   (GET "/users/view" {:handler handler-users-view}))
@@ -1188,15 +1321,14 @@
 (defn on-users-add-clicked []
   (render-users-add))
 
-(hiccups/defhtml template-users-add [jsonobj]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+(defn comp-users-add []
+  [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @users-add-state "form") (namespace ::x)))}])
 
 (defn handler-users-add [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#modify-title) (get jsonobj "title"))
-    (dommy/set-html! (dommy/sel1 :#modify-body) (template-users-add jsonobj))
-    (.modal (jquery "#modify"))))
+    (reset-users-add-state jsonobj)
+    (.modal (jquery "#modal-users-add"))))
 
 (defn render-users-add []
   (POST "/users/add" {:handler handler-users-add}))
@@ -1207,7 +1339,7 @@
   (when (-> (jquery "#users-add-form")
             (.get "0")
             (.checkValidity))
-    (.modal (jquery "#modify") "hide")
+    (.modal (jquery "#modal-users-add") "hide")
     (render-users-add-submit)))
 
 (defn handler-users-add-submit [response]
@@ -1218,21 +1350,20 @@
 (defn render-users-add-submit []
   (POST "/users/add/submit"
         {:format :raw
-         :params {:role_groups (reduce-checkboxes "[id^='chk_']")
-                  :first_name (dommy/value (dommy/sel1 :#first_name))
-                  :last_name (dommy/value (dommy/sel1 :#last_name))
-                  :email (dommy/value (dommy/sel1 :#email))}
+         :params (merge (form-fields-to-map "#users-add-form :input")
+                        {:role_groups (reduce-checkboxes "[id^='users_add_form-chk_users_add_']")})
          :handler handler-users-add-submit}))
 
 ;; users-register
 
-(hiccups/defhtml template-users-register [jsonobj]
-  [:h3 {:style "text-align: center"} (get jsonobj "title")]
-  [:div {:id "content"}])
+(defn comp-users-register []
+  [:div {:style {:display (cond (or (= @location-state "/users/register")) "block" :else "none")}}
+   [:h3 {:style {:text-align "center"}} (get @users-register-state "title")]
+   [comp-users-register-form]])
 
 (defn handler-users-register [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
-    (dommy/set-html! (dommy/sel1 :#body) (template-users-register jsonobj))
+    (reset-users-register-state jsonobj)
     (render-users-register-form (get jsonobj "hash"))))
 
 (defn render-users-register [hash]
@@ -1243,22 +1374,23 @@
 
 ;; users-register-form
 
-(hiccups/defhtml template-users-register-form [jsonobj]
-  (cond (get jsonobj "errormsg")
-        [:a {:href (str "javascript:" (namespace ::x) ".reset_app()")}
-         "Click here to return to the home page."]
-        :else
-        (do
-          [:p (str "Welcome " (get jsonobj "firstName") " " (get jsonobj "lastName") " to the new user registration page. Please fill out the form below to complete your registration.")]
-          [:p "Create a new username and password for your login to the website. Phone number is optional."]
-          [:p (str "Your email address is recorded as " (get jsonobj "email") ". This is where notifications will be sent. If this is not the desired email address, you can change it later by visiting the Edit Profile page.")]
-          [:p (str "This registration will expire in " (get jsonobj "validFor") ". Please submit this form before that time.")]
-          (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))))
+(defn comp-users-register-form []
+  [:div
+   (cond (get @users-register-form-state "errormsg")
+         [:a {:href (str "javascript:" (namespace ::x) ".reset_app()")}
+          "Click here to return to the home page."]
+         :else
+         (do
+           [:p (str "Welcome " (get @users-register-form-state "firstName") " " (get @users-register-form-state "lastName") " to the new user registration page. Please fill out the form below to complete your registration.")]
+           [:p "Create a new username and password for your login to the website. Phone number is optional."]
+           [:p (str "Your email address is recorded as " (get @users-register-form-state "email") ". This is where notifications will be sent. If this is not the desired email address, you can change it later by visiting the Edit Profile page.")]
+           [:p (str "This registration will expire in " (get @users-register-form-state "validFor") ". Please submit this form before that time.")]
+           [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @users-register-form-state "form") (namespace ::x)))}]))])
 
 (defn handler-users-register-form [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#content) (template-users-register-form jsonobj))))
+    (reset-users-register-form-state jsonobj)))
 
 (defn render-users-register-form [hash]
   (POST "/users/register/form"
@@ -1274,28 +1406,15 @@
             (.checkValidity))
     (render-users-register-submit)))
 
-(hiccups/defhtml template-users-register-submit [jsonobj]
-  [:a {:href (str "javascript:" (namespace ::x) ".reset_app()")}
-   "Click here to start using the website!"])
-
 (defn handler-users-register-submit [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (notifications jsonobj)
-    (cond (get jsonobj "errormsg")
-          (do
-            (dommy/set-value! (dommy/sel1 :#pwd) "")
-            (dommy/set-value! (dommy/sel1 :#pwd2) ""))
-          :else
-          (dommy/set-html! (dommy/sel1 :#content) (template-users-register-submit jsonobj)))))
+    (reset-app)))
 
 (defn render-users-register-submit []
   (POST "/users/register/submit"
         {:format :raw
-         :params {:hash (dommy/value (dommy/sel1 :#hash))
-                  :username (dommy/value (dommy/sel1 :#username))
-                  :pwd (dommy/value (dommy/sel1 :#pwd))
-                  :pwd2 (dommy/value (dommy/sel1 :#pwd2))
-                  :phone (dommy/value (dommy/sel1 :#phone))}
+         :params (form-fields-to-map "#users-register-form :input")
          :handler handler-users-register-submit}))
 
 ;; users-modify
@@ -1303,15 +1422,14 @@
 (defn on-users-modify-clicked [id]
   (render-users-modify id))
 
-(hiccups/defhtml template-users-modify [jsonobj]
-  (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))
+(defn comp-users-modify []
+  [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get @users-modify-state "form") (namespace ::x)))}])
 
 (defn handler-users-modify [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (dommy/set-html! (dommy/sel1 :#modify-title) (get jsonobj "title"))
-    (dommy/set-html! (dommy/sel1 :#modify-body) (template-users-modify jsonobj))
-    (.modal (jquery "#modify"))))
+    (reset-users-modify-state jsonobj)
+    (.modal (jquery "#modal-users-modify"))))
 
 (defn render-users-modify [id]
   (POST "/users/modify"
@@ -1325,7 +1443,7 @@
   (when (-> (jquery "#users-modify-form")
             (.get "0")
             (.checkValidity))
-    (.modal (jquery "#modify") "hide")
+    (.modal (jquery "#modal-users-modify") "hide")
     (render-users-modify-submit)))
 
 (defn handler-users-modify-submit [response]
@@ -1336,13 +1454,8 @@
 (defn render-users-modify-submit []
   (POST "/users/modify/submit"
         {:format :raw
-         :params {:id (dommy/value (dommy/sel1 :#id))
-                  :role_groups (reduce-checkboxes "[id^='chk_']")
-                  :username (dommy/value (dommy/sel1 :#username))
-                  :first_name (dommy/value (dommy/sel1 :#first_name))
-                  :last_name (dommy/value (dommy/sel1 :#last_name))
-                  :email (dommy/value (dommy/sel1 :#email))
-                  :phone (dommy/value (dommy/sel1 :#phone))}
+         :params (merge (form-fields-to-map "#users-modify-form :input")
+                        {:role_groups (reduce-checkboxes "[id^='users_modify_form-chk_users_modify_']")})
          :handler handler-users-modify-submit}))
 
 ;; users-toggle-active
@@ -1363,8 +1476,8 @@
 
 ;; users-delete
 
-(defn on-users-delete-clicked [id first-name last-name]
-  (when (js/confirm (str "Are you sure you want to delete " first-name " " last-name "? This action cannot be undone."))
+(defn on-users-delete-clicked [id]
+  (when (js/confirm (str "Are you sure you want to delete " id "? This action cannot be undone."))
     (render-users-delete id)))
 
 (defn handler-users-delete [response]
@@ -1379,22 +1492,26 @@
 
 ;; location
 
+(push-menu-hook {:handler "/home" :func #(render-home)})
+(push-menu-hook {:handler "/login" :func #(render-login)})
+(push-menu-hook {:handler "/logout" :func #(render-logout)})
+(push-menu-hook {:handler "/profile" :func #(render-profile)})
+(push-menu-hook {:handler "/password" :func #(render-password)})
+(push-menu-hook {:handler "/lessons" :func #(render-lessons)})
+(push-menu-hook {:handler "/gigs" :func #(render-gigs)})
+(push-menu-hook {:handler "/programming" :func #(render-programming)})
+(push-menu-hook {:handler "/gallery" :func #(render-gallery)})
+(push-menu-hook {:handler "/contact-us" :func #(render-contact-us)})
+(push-menu-hook {:handler "/messages" :func #(render-messages)})
+(push-menu-hook {:handler "/users" :func #(render-users)})
+(push-menu-hook {:handler "/users/register" :func #(render-users)})
+
 (defn on-menu-clicked [handler]
   (reset-location handler)
   (render-menu)
-  (cond (= handler "/home") (render-home)
-        (= handler "/login") (render-login)
-        (= handler "/logout") (render-logout)
-        (= handler "/profile") (render-profile)
-        (= handler "/password") (render-password)
-        (= handler "/lessons") (render-lessons)
-        (= handler "/gigs") (render-gigs)
-        (= handler "/programming") (render-programming)
-        (= handler "/gallery") (render-gallery)
-        (= handler "/testimonials") (render-testimonials)
-        (= handler "/contact-us") (render-contact-us)
-        (= handler "/messages") (render-messages)
-        (= handler "/users") (render-users)))
+  (let [hook (get @menu-hooks handler)]
+    (when hook
+      (apply (get hook :func) '()))))
 
 (defn handler-location [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
@@ -1414,3 +1531,57 @@
   (reset-location "/users/register")
   (render-menu)
   (render-users-register hash))
+
+;; body
+
+(defn comp-app []
+  [:div {:class "container-fluid"}
+   [:div {:class "banner"}
+    [:table {:width "100%" :height "100%"}
+     [:tbody
+      [:tr
+       [:td {:class "banner-menu"}
+        [comp-menu-user]]
+       [:td {:class "banner-title"} "Bogen-" [:i "Herr"]]
+       [:td {:class "banner-menu"} " "]]]]]
+   [comp-menu-main]
+   [ck-notifications/comp-errormsg]
+   [ck-notifications/comp-message]
+   [comp-home]
+   [comp-login]
+   [comp-about-us]
+   [comp-profile]
+   [comp-password]
+   [comp-gallery]
+   [comp-contact-us]
+   [comp-messages]
+   [comp-users]
+   [comp-users-register]
+   [:div {:id "footer"}
+    [:hr]
+    "Carlos Konstanski (970) 294-9708"
+    [:br]
+    [:a {:href "https://git.ckons.org/bogenherr.git/tree"
+         :target "_blank"}
+     "Source code in Git"]]])
+
+;; start the react app
+
+(defn start-render []
+  (let [app-root (rdc/create-root (js/document.getElementById "app"))]
+    (rdc/render app-root [comp-app])))
+
+(defn start-location []
+  (cond (str/starts-with? @location-state "/register/")
+        (goto-register (str/replace-first @location-state "/register/" ""))
+        :else
+        (goto-location @location-state)))
+
+(defn ^:dev/after-load start
+  ([]
+   (start-render)
+   (start-location))
+  ([url]
+   (reset-location url)
+   (start-render)
+   (start-location)))