macro plus react now works

3 files changed, 242 insertions, 188 deletions

diff --git a/lisp/service/resume-service.lisp b/lisp/service/resume-service.lisp
index 66b0e7b..46badc6 100644
--- a/lisp/service/resume-service.lisp
+++ b/lisp/service/resume-service.lisp
@@ -21,20 +21,20 @@
               `(:label ,level :value ,level))
             '("A1" "A2" "B1" "B2" "C1" "C2")))
 
-  (defclass resume-service (auth-service)
+  (defclass resume/resume-service (auth-service)
     ((title :initarg :title
             :initform nil
             :accessor title))
     (:documentation ""))
 
-  (defclass resume-component/view-service (resume-service)
+  (defclass resume/resume-component/view-service (resume/resume-service)
     ((components :initarg components
                  :initform nil
                  :accessor components)
      (location-p :initform nil))
     (:documentation ""))
 
-  (defclass resume-component/modify-service (resume-component/view-service)
+  (defclass resume/resume-component/modify-service (resume/resume-component/view-service)
     ((form :initarg :form
            :initform nil
            :accessor form))
@@ -71,11 +71,11 @@ needs to JOIN with other data."
          (form-modify (format nil "~a-modify-form" component-lcase)))
     `(progn
        (defun ,func-root-s ()
-         (with-auth (instance resume-service "resume-view")
+         (with-auth (instance resume/resume-service "resume-view")
            (setf (title instance) ,component)))
 
        (defun ,func-view-s ()
-         (with-auth (instance resume-component/view-service "resume-view")
+         (with-auth (instance resume/resume-component/view-service "resume-view")
            (with-resume-database
              (let ((resume-pkg (make-instance 'resume-pkg))
                    (user (get-user)))
@@ -89,7 +89,7 @@ needs to JOIN with other data."
                  do (sanitize-json component))))
        
        (defun ,func-add-s ()
-         (with-auth (instance resume-component/modify-service "resume-modify")
+         (with-auth (instance resume/resume-component/modify-service "resume-modify")
            (with-resume-database
              (let ((resume-pkg (make-instance 'resume-pkg)))
                (setf (title instance) (format nil "~a - Add" ,component))
@@ -100,7 +100,7 @@ needs to JOIN with other data."
 
        (defun ,func-add-submit-s (,@arg-names)
          (declare (special ,@arg-names))
-         (with-auth (instance resume-component/modify-service "resume-modify")
+         (with-auth (instance resume/resume-component/modify-service "resume-modify")
            (with-resume-database
              (handler-case
                  (let* ((resume-pkg (make-instance 'resume-pkg))
@@ -116,7 +116,7 @@ needs to JOIN with other data."
                  (setf (session-value :errormsg) (format nil "Error creating ~a. ~a" ,component e)))))))
 
        (defun ,func-modify-s (id)
-         (with-auth (instance resume-component/modify-service "resume-modify")
+         (with-auth (instance resume/resume-component/modify-service "resume-modify")
            (setf (title instance) (format nil "~a - Modify" ,component))
            (with-resume-database
              (let* ((resume-pkg (make-instance 'resume-pkg))
@@ -134,7 +134,7 @@ needs to JOIN with other data."
 
        (defun ,func-modify-submit-s (,@(append '(id) arg-names))
          (declare (special ,@(append '(id) arg-names)))
-         (with-auth (instance resume-component/modify-service "resume-modify")
+         (with-auth (instance resume/resume-component/modify-service "resume-modify")
            (setf (title instance) (format nil "~a - Modify" ,component))
            (with-resume-database
              (handler-case
@@ -156,7 +156,7 @@ needs to JOIN with other data."
                  (setf (session-value :errormsg) (format nil "Error modifying ~a. ~a" ,component e)))))))
 
        (defun ,func-delete-s (id)
-         (with-auth (instance resume-component/modify-service "resume-modify")
+         (with-auth (instance resume/resume-component/modify-service "resume-modify")
            (with-resume-database
              (let* ((resume-pkg (make-instance 'resume-pkg))
                     (user (get-user))
diff --git a/lisp/webapps/resume/clojurescript/resume/src/resume/core.clj b/lisp/webapps/resume/clojurescript/resume/src/resume/core.clj
index 907021e..c02b686 100644
--- a/lisp/webapps/resume/clojurescript/resume/src/resume/core.clj
+++ b/lisp/webapps/resume/clojurescript/resume/src/resume/core.clj
@@ -3,70 +3,181 @@
 
 (defmacro define-resume-component [component]
   `(do
+     (declare ~(symbol (str "reset-" component "-state")))
+     (declare ~(symbol (str "reset-" component "-view-state")))
+     (declare ~(symbol (str "reset-" component "-add-state")))
+     (declare ~(symbol (str "reset-" component "-modify-state")))
+     (declare ~(symbol (str "comp-" component)))
      (declare ~(symbol (str "handler-" component)))
      (declare ~(symbol (str "render-" component)))
-     (declare ~(symbol (str "template-" component "-view")))
+     (declare ~(symbol (str "comp-" component "-view")))
      (declare ~(symbol (str "handler-" component "-view")))
      (declare ~(symbol (str "render-" component "-view")))
      (declare ~(symbol (str "on-" component "-add-clicked")))
+     (declare ~(symbol (str "comp-" component "-add")))
      (declare ~(symbol (str "handler-" component "-add")))
      (declare ~(symbol (str "render-" component "-add")))
      (declare ~(symbol (str "on-" component "-add-submit-clicked")))
      (declare ~(symbol (str "handler-" component "-add-submit")))
      (declare ~(symbol (str "render-" component "-add-submit")))
      (declare ~(symbol (str "on-" component "-modify-clicked")))
+     (declare ~(symbol (str "comp-" component "-modify")))
      (declare ~(symbol (str "handler-" component "-modify")))
      (declare ~(symbol (str "render-" component "-modify")))
      (declare ~(symbol (str "on-" component "-modify-submit-clicked")))
      (declare ~(symbol (str "handler-" component "-modify-submit")))
      (declare ~(symbol (str "render-" component "-modify-submit")))
-     (declare ~(symbol (str "on-" component" -delete-clicked")))
+     (declare ~(symbol (str "on-" component "-delete-clicked")))
      (declare ~(symbol (str "handler-" component "-delete")))
      (declare ~(symbol (str "render-" component "-delete")))
 
+     (def ~(symbol (str component "-state")) (r/atom {}))
+     (def ~(symbol (str component "-view-state")) (r/atom {}))
+     (def ~(symbol (str component "-add-state")) (r/atom {}))
+     (def ~(symbol (str component "-modify-state")) (r/atom {}))
+
+     (defn ~(symbol (str "reset-" component "-state")) [jsonobj#]
+       (reset! ~(symbol (str component "-state")) jsonobj#))
+
+     (defn ~(symbol (str "reset-" component "-view-state")) [jsonobj#]
+       (reset! ~(symbol (str component "-view-state")) jsonobj#))
+
+     (defn ~(symbol (str "reset-" component "-add-state")) [jsonobj#]
+       (reset! ~(symbol (str component "-add-state")) jsonobj#))
+
+     (defn ~(symbol (str "reset-" component "-modify-state")) [jsonobj#]
+       (reset! ~(symbol (str component "-modify-state")) jsonobj#))
+
+     (defn ~(symbol (str "comp-" component)) []
+       [:div {:style {:display (cond (or (= @location-state ~(str "/resume/" component))) "block" :else "none")}}
+        [:h3 {:style {:text-align "center"}} (get (deref ~(symbol (str component "-state"))) "title")]
+        [~(symbol (str "comp-" component "-view"))]
+        [:div {:id (str "modal-" ~component "-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 (deref ~(symbol (str component "-state"))) "title")]
+            [:button {:type "button"
+                      :class "close"
+                      :data-dismiss "modal"}
+             "X"]]
+           [:div {:class "modal-body"
+                  :style {:height "460px;"}}
+            [~(symbol (str "comp-" component "-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 (str "modal-" ~component "-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 (deref ~(symbol (str component "-state"))) "title")]
+            [:button {:type "button"
+                      :class "close"
+                      :data-dismiss "modal"}
+             "X"]]
+           [:div {:class "modal-body"
+                  :style {:height "460px;"}}
+            [~(symbol (str "comp-" component "-modify"))]]
+           [:div {:class "modal-footer"}
+            [:button {:type "submit"
+                      :class "btn btn-danger btn-default"
+                      :data-dismiss "modal"}
+             [:span {:class "glyphicon glyphicon-remove"}]
+             "Cancel"]]]]]])
+
      (defn ~(symbol (str "handler-" component)) [response#]
        (let [jsonobj# (cljs.core/js->clj (js/JSON.parse response#))]
          (notifications jsonobj#)
-         (dommy/set-html! (dommy/sel1 :#body) (template-resume jsonobj#))
+         (~(symbol (str "reset-" component "-state")) jsonobj#)
          (~(symbol (str "render-" component "-view")))))
 
      (defn ~(symbol (str "render-" component)) []
-       (ajax.core/GET ~(str "/resume/" component) {:handler ~(symbol (str "handler-" component))}))
+       (ajax.core/GET (str "/resume/" ~component) {:handler ~(symbol (str "handler-" component))}))
 
-     (defn ~(symbol (str "template-" component "-view")) [jsonobj#]
+     (defn ~(symbol (str "comp-" component "-view")) []
        [:div
         [:div {:style {:text-align "right"}}
          [:img {:src "/static/images/add.png"
-                :onclick ~(str (namespace ::x) ".on_" component "_add_clicked()")}]]
-        (component-results-table ~component jsonobj#)])
+                :on-click #(~(symbol (str "on-" component "-add-clicked")))}]]
+        (let [results# (get (deref ~(symbol (str component "-view-state"))) "components")
+              keys# (remove (fn [x#]
+                              (not (get (first results#) x#)))
+                            (sort #(compare %1 %2) (keys (first results#))))]
+          (cond (empty? results#)
+                [:h5 {:style {:text-align "center"}} (str "No " ~component "s found.")]
+                :else
+                [:div
+                 [:p (str (count results#) " " ~component "s.")]
+                 [:table {:class "table table-striped table-hover table-sm"}
+                  [:thead
+                   [:tr
+                    (for [key# (filter #(not (str/includes? % "_id")) keys#)]
+                      [:th {:id (str "th-" ~component "-" key#)
+                            :key (str "th-" ~component "-" key#)
+                            :scope "col"}
+                       key#])
+                    [:th {:scope "col"} "Mod"]
+                    [:th {:scope "col"} "Del"]]]
+                  [:tbody {:id (str "tbody-" ~component)}
+                   (for [rec# results#]
+                     (let [tr-attributes# (atom {:id (str "tr-" ~component "-" (get rec# "id"))
+                                                 :key (str "tr-" ~component "-" (get rec# "id"))})
+                           selected-p# (= (str (get rec# "id"))
+                                          (str (get (get (deref ~(symbol (str component "-view-state")))
+                                                         (keyword ~component))
+                                                     "id")))]
+                       (when selected-p#
+                         (swap! tr-attributes# assoc :class "selected"))
+                       [:tr @tr-attributes#
+                        (for [key# (filter #(not (str/includes? % "_id")) keys#)]
+                          [:td (str (get rec# key#))])
+                        [:td {:width "30"}
+                         [:img {:src "/static/images/edit.png"
+                                :on-click #(~(symbol (str "on-" component "-modify-clicked")) (get rec# "id"))}]]
+                        [:td {:width "30"}
+                         [:img {:src "/static/images/delete.png"
+                                :on-click #(~(symbol (str "on-" component "-delete-clicked")) (get rec# "id"))}]]]))]]]))])
 
      (defn ~(symbol (str "handler-" component "-view")) [response#]
        (let [jsonobj# (cljs.core/js->clj (js/JSON.parse response#))]
-         (-> (jquery "#content") (.html (~(symbol (str "template-" component "-view")) jsonobj#)))))
+         (notifications jsonobj#)
+         (~(symbol (str "reset-" component "-view-state")) jsonobj#)))
 
      (defn ~(symbol (str "render-" component "-view")) []
-       (ajax.core/GET ~(str "/resume/" component "/view")
-            {:handler ~(symbol (str "handler-" component "-view"))}))
+       (ajax.core/GET (str "/resume/" ~component "/view")
+                      {:handler ~(symbol (str "handler-" component "-view"))}))
 
      (defn ~(symbol (str "on-" component "-add-clicked")) []
        (~(symbol (str "render-" component "-add"))))
 
+     (defn ~(symbol (str "comp-" component "-add")) []
+       [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get (deref ~(symbol (str component "-add-state"))) "form") (namespace ::x)))}])
+
      (defn ~(symbol (str "handler-" component "-add")) [response#]
        (let [jsonobj# (cljs.core/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) (generic-component-add-modify jsonobj#))
-         (.modal (jquery "#modify"))))
+         (~(symbol (str "reset-" component "-add-state")) jsonobj#)
+         (.modal (jquery (str "#modal-" ~component "-add")))))
 
      (defn ~(symbol (str "render-" component "-add")) []
-       (ajax.core/POST ~(str "/resume/" component "/add")
-             {:handler ~(symbol (str "handler-" component "-add"))}))
+       (ajax.core/POST (str "/resume/" ~component "/add")
+                       {:handler ~(symbol (str "handler-" component "-add"))}))
 
      (defn ~(symbol (str "on-" component "-add-submit-clicked")) []
        (when (-> (jquery ~(str "#" component "-add-form"))
                  (.get "0")
                  (.checkValidity))
-         (.modal (jquery "#modify") "hide")
+         (.modal (jquery (str "#modal-" ~component "-add")) "hide")
          (~(symbol (str "render-" component "-add-submit")))))
 
      (defn ~(symbol (str "handler-" component "-add-submit")) [response#]
@@ -76,43 +187,45 @@
 
      (defn ~(symbol (str "render-" component "-add-submit")) []
        (ajax.core/POST ~(str "/resume/" component "/add/submit")
-             {:format :raw
-              :params (form-fields-to-map ~(str "#" component "-add-form :input"))
-              :handler ~(symbol (str "handler-" component "-add-submit"))}))
+                       {:format :raw
+                        :params (form-fields-to-map (str "#" ~component "-add-form :input"))
+                        :handler ~(symbol (str "handler-" component "-add-submit"))}))
 
      (defn ~(symbol (str "on-" component "-modify-clicked")) [id#]
        (~(symbol (str "render-" component "-modify")) id#))
 
+     (defn ~(symbol (str "comp-" component "-modify")) []
+       [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get (deref ~(symbol (str component "-modify-state"))) "form") (namespace ::x)))}])
+
      (defn ~(symbol (str "handler-" component "-modify")) [response#]
        (let [jsonobj# (cljs.core/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) (generic-component-add-modify jsonobj#))
-         (.modal (jquery "#modify"))))
+         (~(symbol (str "reset-" component "-modify-state")) jsonobj#)
+         (.modal (jquery (str "#modal-" ~component "-modify")))))
 
      (defn ~(symbol (str "render-" component "-modify")) [id#]
        (ajax.core/POST ~(str "/resume/" component "/modify")
-             {:format :raw
-              :params {:id id#}
-              :handler ~(symbol (str "handler-" component "-modify"))}))
+                       {:format :raw
+                        :params {:id id#}
+                        :handler ~(symbol (str "handler-" component "-modify"))}))
 
      (defn ~(symbol (str "on-" component "-modify-submit-clicked")) []
        (when (-> (jquery ~(str "#" component "-modify-form"))
                  (.get "0")
                  (.checkValidity))
-         (.modal (jquery "#modify") "hide")
+         (.modal (jquery (str "#modal-" ~component "-modify")) "hide")
          (~(symbol (str "render-" component "-modify-submit")))))
 
      (defn ~(symbol (str "handler-" component "-modify-submit")) [response#]
        (let [jsonobj# (cljs.core/js->clj (js/JSON.parse response#))]
          (auth-notifications jsonobj#)
-         (on-menu-clicked ~(str "/resume/" component))))
+         (on-menu-clicked (str "/resume/" ~component))))
 
      (defn ~(symbol (str "render-" component "-modify-submit")) []
-       (ajax.core/POST ~(str "/resume/" component "/modify/submit")
-             {:format :raw
-              :params (form-fields-to-map ~(str "#" component "-modify-form :input"))
-              :handler ~(symbol (str "handler-" component "-modify-submit"))}))
+       (ajax.core/POST (str "/resume/" ~component "/modify/submit")
+                       {:format :raw
+                        :params (form-fields-to-map (str "#" ~component "-modify-form :input"))
+                        :handler ~(symbol (str "handler-" component "-modify-submit"))}))
 
      (defn ~(symbol (str "on-" component "-delete-clicked")) [id#]
        (when (js/confirm (str "Are you sure you want to delete " id# "? This action cannot be undone."))
@@ -125,5 +238,5 @@
 
      (defn ~(symbol (str "render-" component "-delete")) [id#]
        (ajax.core/DELETE (str "/resume/" ~component "/delete/" id#)
-               {:format :raw
-                :handler ~(symbol (str "handler-" component "-delete"))}))))
+                         {:format :raw
+                          :handler ~(symbol (str "handler-" component "-delete"))}))))
diff --git a/lisp/webapps/resume/clojurescript/resume/src/resume/core.cljs b/lisp/webapps/resume/clojurescript/resume/src/resume/core.cljs
index 33d03c5..bbc54cc 100644
--- a/lisp/webapps/resume/clojurescript/resume/src/resume/core.cljs
+++ b/lisp/webapps/resume/clojurescript/resume/src/resume/core.cljs
@@ -36,14 +36,12 @@
 (declare reset-users-register-form-state)
 (declare reset-users-register-submit-state)
 (declare reset-users-modify-state)
-(declare reset-resume-state)
 (declare date-sql-to-pretty)
 (declare markdown-to-html)
 (declare reduce-checkboxes)
 (declare form-fields-to-map)
 (declare generic-component-add-modify)
 (declare highlight-row)
-(declare component-results-table)
 (declare comp-app)
 (declare start-render)
 (declare start)
@@ -151,6 +149,7 @@
 (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)
@@ -187,7 +186,11 @@
 (def users-register-form-state (r/atom {}))
 (def users-register-submit-state (r/atom {}))
 (def users-modify-state (r/atom {}))
-(def resume-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 "?"))))
@@ -252,9 +255,6 @@
 (defn reset-users-modify-state [jsonobj]
   (reset! users-modify-state jsonobj))
 
-(defn reset-resume-state [component rec]
-  (swap! resume-state assoc (keyword component) rec))
-
 ;; helper functions
 
 (defn date-sql-to-pretty [sql-date]
@@ -290,101 +290,6 @@
 (hiccups/defhtml generic-component-add-modify [jsonobj]
   [:div {:dangerouslySetInnerHTML (r/unsafe-html (ck-form/template-generic-form (get jsonobj "form") (namespace ::x)))}])
 
-(defn component-results-table [component jsonobj & [reverse-p]]
-  (let [results (get jsonobj "components")
-        keys (remove (fn [x]
-                       (not (get (first results) x)))
-                     (sort #(if reverse-p (compare %2 %1) (compare %1 %2)) (keys (first results))))]
-    (cond (empty? results)
-          [:h5 {:style {:text-align "center"}} (str "No " component "s found.")]
-          :else
-          [:div
-           [:p (str (count results) " " component "s.")]
-           [:table {:class "table table-striped table-hover table-sm"}
-            [:thead
-             [:tr
-              (for [key (filter #(not (str/includes? % "_id")) keys)]
-                [:th {:id (str "th-" component "-" key)
-                      :key (str "th-" component "-" key)
-                      :scope "col"}
-                 key])
-              [:th {:scope "col"} "Mod"]
-              [:th {:scope "col"} "Del"]]]
-            [:tbody {:id (str "tbody-" component)}
-             (for [rec results]
-               (let [tr-attributes (atom {:id (str "tr-" component "-" (get rec "id"))
-                                          :key (str "tr-" component "-" (get rec "id"))
-                                          :on-click #(reset-resume-state component rec)})
-                     selected-p (= (str (get rec "id"))
-                                   (str (get (get @resume-state (keyword component)) "id")))]
-                 (when selected-p
-                   (swap! tr-attributes assoc :class "selected"))
-                 [:tr @tr-attributes
-                  (for [key (filter #(not (str/includes? % "_id")) keys)]
-                    [:td (str (get rec key))])
-                  [:td {:width "30"}
-                   [:img {:src "/static/images/edit.png"
-                          :onclick (str (namespace ::x) ".on_" component "_modify_clicked(" (get rec "id") ")")}]]
-                  [:td {:width "30"}
-                   [:img {:src "/static/images/delete.png"
-                          :onclick (str (namespace ::x) ".on_" component "_delete_clicked(" (get rec "id") ")")}]]]))]]])))
-
-;; 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"} "Resume Builder"]
-       [:td {:class "banner-menu"} " "]]]]]
-   [comp-menu-main]
-   [ck-notifications/comp-errormsg]
-   [ck-notifications/comp-message]
-   [comp-login]
-   [comp-about-us]
-   [comp-profile]
-   [comp-password]
-   ;; [comp-contactinfo]
-   ;; [comp-education]
-   ;; [comp-language]
-   ;; [comp-skills]
-   ;; [comp-jobs]
-   [comp-contact-us]
-   [comp-messages]
-   [comp-users]
-   [:div {:id "footer"}
-    [:hr]
-    "Carlos Konstanski (970) 294-9708"
-    [:br]
-    [:a {:href "https://git.ckons.org/resume.git/tree/?h=main"
-         :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)))
-
 ;; notifications
 
 (defn notifications [jsonobj]
@@ -513,7 +418,7 @@
        [:button {:type "button"
                  :class "close"
                  :data-dismiss "modal"}
-        "×"]]
+        "X"]]
       [:div {:class "modal-body"
              :style {:height "460px"}}
        [comp-profile-modify]]
@@ -665,7 +570,7 @@
        [:button {:type "button"
                  :class "close"
                  :data-dismiss "modal"}
-        "×"]]
+        "X"]]
       [:div {:class "modal-body"
              :style {:height "460px"}}
        [comp-about-us-modify]]
@@ -913,7 +818,7 @@
        [:button {:type "button"
                  :class "close"
                  :data-dismiss "modal"}
-        "×"]]
+        "X"]]
       [:div {:class "modal-body"
              :style {:height "460px"}}
        [comp-users-add]]
@@ -934,7 +839,7 @@
        [:button {:type "button"
                  :class "close"
                  :data-dismiss "modal"}
-        "×"]]
+        "X"]]
       [:div {:class "modal-body"
              :style {:height "460px"}}
        [comp-users-modify]]
@@ -1029,7 +934,7 @@
 (defn handler-users-add-submit [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)
-    (render-users-view)))
+    (on-menu-clicked "/users")))
 
 (defn render-users-add-submit []
   (POST "/users/add/submit"
@@ -1180,31 +1085,6 @@
 
 ;; resume
 
-(hiccups/defhtml template-resume [jsonobj]
-  [:h3 {:style "text-align: center"} (get jsonobj "title")]
-  [:div {:id "content"}]
-  [:div {:id "modify-resume"
-         :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"]]]]])
-
 (define-resume-component "resume")
 (define-resume-component "contactinfo")
 (define-resume-component "education")
@@ -1214,23 +1094,27 @@
 
 ;; 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 "/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 "/resume/resume" :func #(render-resume)})
+(push-menu-hook {:handler "/resume/contactinfo" :func #(render-contactinfo)})
+(push-menu-hook {:handler "/resume/education" :func #(render-education)})
+(push-menu-hook {:handler "/resume/language" :func #(render-language)})
+(push-menu-hook {:handler "/resume/skill" :func #(render-skill)})
+(push-menu-hook {:handler "/resume/job" :func #(render-job)})
+
 (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 "/contact-us") (render-contact-us)
-        (= handler "/messages") (render-messages)
-        (= handler "/users") (render-users)
-        (= handler "/resume/resume") (render-resume)
-        (= handler "/resume/contactinfo") (render-contactinfo)
-        (= handler "/resume/education") (render-education)
-        (= handler "/resume/language") (render-language)
-        (= handler "/resume/skill") (render-skill)
-        (= handler "/resume/job") (render-job)))
+  (let [hook (get @menu-hooks handler)]
+    (when hook
+      (apply (get hook :func) '()))))
 
 (defn handler-location [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
@@ -1250,3 +1134,60 @@
   (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"} "Resume Builder"]
+       [:td {:class "banner-menu"} " "]]]]]
+   [comp-menu-main]
+   [ck-notifications/comp-errormsg]
+   [ck-notifications/comp-message]
+   [comp-login]
+   [comp-about-us]
+   [comp-profile]
+   [comp-password]
+   [comp-contactinfo]
+   [comp-education]
+   [comp-language]
+   [comp-skill]
+   [comp-job]
+   [comp-resume]
+   [comp-contact-us]
+   [comp-messages]
+   [comp-users]
+   [:div {:id "footer"}
+    [:hr]
+    "Carlos Konstanski (970) 294-9708"
+    [:br]
+    [:a {:href "https://git.ckons.org/resume.git/tree/?h=main"
+         :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)))