[SQL-272] Refactor Reactions UI with re-route

src/com/yetanalytics/lrs_admin_ui/handlers.cljs

@@ -1061,9 +1061,7 @@
                              rfns/focus->edit-form)]
      {:db (-> db
               (assoc ::db/editing-reaction reaction)
-              prep-edit-reaction-template)
-      ;; unset focus in case we're looking at one
-      :fx [[:dispatch [:reaction/unset-focus]]]}
+              prep-edit-reaction-template)}
      {:fx [[:dispatch [:notification/notify true
                        "Cannot edit, reaction not found!"]]]})))
 
@@ -1088,9 +1086,7 @@
                                     "verb" {"id" "https://adlnet.gov/expapi/verbs/completed"}}}}]
      {:db (-> db
               (assoc ::db/editing-reaction reaction)
-              prep-edit-reaction-template)
-      ;; unset focus in case we're looking at one
-      :fx [[:dispatch [:reaction/unset-focus]]]})))
+              prep-edit-reaction-template)})))
 
 (re-frame/reg-event-fx
  :reaction/upload-edit
@@ -1105,8 +1101,7 @@
        (if (valid? ::rse/reaction reaction)
          {:db (-> db
                   (assoc ::db/editing-reaction reaction)
-                  prep-edit-reaction-template)
-          :fx [[:dispatch [:reaction/unset-focus]]]}
+                  prep-edit-reaction-template)}
          {:fx [[:dispatch [:notification/notify true
                            "Cannot upload invalid reaction"]]]}))
      {:fx [[:dispatch [:notification/notify true
@@ -1121,9 +1116,7 @@
                                  rfns/focus->edit-form)]
        {:db (-> db
                 (assoc ::db/editing-reaction reaction)
-                prep-edit-reaction-template)
-        ;; unset focus in case we're looking at one
-        :fx [[:dispatch [:reaction/unset-focus]]]}))))
+                prep-edit-reaction-template)}))))
 
 (re-frame/reg-event-fx
  :reaction/server-error
@@ -1160,21 +1153,24 @@
               [:notification/notify true
                "Cannot save invalid reaction."]]]}))))
 
-(defn- cancel-edit
-  [db]
-  (dissoc db
-          ::db/editing-reaction
-          ::db/editing-reaction-template-json
-          ::db/editing-reaction-template-errors))
-
 (re-frame/reg-event-fx
  :reaction/save-edit-success
  global-interceptors
- (fn [{:keys [db]} [_ {:keys [reactionId]}]]
-   {:db (-> db
-            cancel-edit
-            (assoc ::db/reaction-focus reactionId))
-    :fx [[:dispatch [:reaction/load-reactions]]]}))
+ (fn [_ [_ {:keys [reactionId]}]]
+   ;; TODO: Only reload the reaction being updated, rather than all of them.
+   ;; TODO: Display some sort of loading screen before reaction is updated
+   ;; (for slow connection).
+   {:fx [[:dispatch [:reaction/load-reactions]]
+         [:dispatch [::re-route/navigate :reactions/focus {:id reactionId}]]]}))
+
+(re-frame/reg-event-db
+ :reaction/clear-edit
+ global-interceptors
+ (fn [db _]
+   (dissoc db
+           ::db/editing-reaction
+           ::db/editing-reaction-template-json
+           ::db/editing-reaction-template-errors)))
 
 ;; TODO: :reaction/save-edit-fail
 
@@ -1214,24 +1210,9 @@
  global-interceptors
  (fn [_ _]
    {:fx [[:dispatch [:reaction/load-reactions]]
-         [:dispatch [:reaction/back-to-list]]
          [:dispatch [:notification/notify false
                      "Reaction Deleted"]]]}))
 
-(re-frame/reg-event-db
- :reaction/cancel-edit
- global-interceptors
- (fn [db _]
-   (cancel-edit db)))
-
-(re-frame/reg-event-fx
- :reaction/back-to-list
- global-interceptors
- (fn [_ _]
-   ;; TODO: Whatever new needs to clear
-   {:fx [[:dispatch [:reaction/unset-focus]]
-         [:dispatch [:reaction/cancel-edit]]]}))
-
 (re-frame/reg-event-db
  :reaction/edit-title
  global-interceptors

src/com/yetanalytics/lrs_admin_ui/routes.cljs

@@ -6,9 +6,12 @@
    [com.yetanalytics.lrs-admin-ui.views.credentials     :refer [credentials]]
    [com.yetanalytics.lrs-admin-ui.views.data-management :refer [data-management]]
    [com.yetanalytics.lrs-admin-ui.views.not-found       :refer [not-found]]
-   [com.yetanalytics.lrs-admin-ui.views.reactions       :refer [reactions]]
    [com.yetanalytics.lrs-admin-ui.views.status          :refer [status]]
-   [com.yetanalytics.lrs-admin-ui.views.update-password :refer [update-password]]))
+   [com.yetanalytics.lrs-admin-ui.views.update-password :refer [update-password]]
+   [com.yetanalytics.lrs-admin-ui.views.reactions       :refer [reactions-list
+                                                                reaction-focus
+                                                                reaction-edit
+                                                                reaction-new]]))
 
 (defn routes [{:keys [proxy-path
                       enable-admin-delete-actor
@@ -30,15 +33,13 @@
            ["/accounts"
             {:name        :accounts
              :view        accounts
-             :controllers [{:start
-                            (fn [_]
-                              (dispatch [:accounts/load-accounts]))}]}]
+             :controllers [{:start (fn [_]
+                                     (dispatch [:accounts/load-accounts]))}]}]
            ["/accounts/password"
             {:name        :update-password
              :view        update-password
-             :controllers [{:stop
-                            (fn [_]
-                              (dispatch [:update-password/clear]))}]}]
+             :controllers [{:stop (fn [_]
+                                    (dispatch [:update-password/clear]))}]}]
            ["/browser"
             {:name :browser
              :view browser}]
@@ -53,16 +54,39 @@
     (conj ["/status"
            {:name        :status
             :view        status
-            :controllers [{:start
-                           (fn [_]
-                             (dispatch [:status/get-all-data]))}]}])
-    ;; TODO: Add `/reactions/new`, `/reactions/view`, and `/reactions/edit`
-    ;; routes for their respective pages.
+            :controllers [{:start (fn [_]
+                                    (dispatch [:status/get-all-data]))}]}])
     enable-reactions
-    (conj ["/reactions"
-           {:name        :reactions
-            :view        reactions
-            :controllers [{:start
-                           (fn [_]
-                             (dispatch [:reaction/back-to-list])
-                             (dispatch [:reaction/load-reactions]))}]}])))
+    (conj
+     ["/reactions"
+      {:name        :reactions
+       :view        reactions-list
+       :controllers [{:start (fn [_]
+                               (dispatch [:reaction/load-reactions]))}]}]
+     ["/reactions/new"
+      {:name        :reactions/new
+       :view        reaction-new
+       :controllers [{:start (fn [_]
+                               (dispatch [:reaction/new]))
+                      :stop  (fn [_]
+                               (dispatch [:reaction/clear-edit]))}]}]
+     ["/reactions/:id/view"
+      {:name        :reactions/focus
+       :view        reaction-focus
+       :parameters  {:path [:id]}
+       :controllers [{:identity (fn [params]
+                                  (get-in params [:path-params :id]))
+                      :start    (fn [id]
+                                  (dispatch [:reaction/set-focus id]))
+                      :stop     (fn [_]
+                                  (dispatch [:reaction/unset-focus]))}]}]
+     ["/reactions/:id/edit"
+      {:name        :reactions/edit
+       :view        reaction-edit
+       :parameters  {:path [:id]}
+       :controllers [{:identity (fn [params]
+                                  (get-in params [:path-params :id]))
+                      :start    (fn [id]
+                                  (dispatch [:reaction/edit id]))
+                      :stop     (fn [_]
+                                  (dispatch [:reaction/clear-edit]))}]}])))

src/com/yetanalytics/lrs_admin_ui/subs.cljs

@@ -394,20 +394,6 @@
 
 ;; Reactions
 
-;; Are we viewing the list, an individual activiy, editing or creating?
-(reg-sub
- :reaction/mode
- :<- [:reaction/editing]
- :<- [:reaction/focus-id]
- (fn [[editing
-       focus]]
-   (cond
-     editing (if (:id editing)
-               :edit
-               :new)
-     focus :focus
-     :else :list)))
-
 (reg-sub
  :reaction/enabled?
  (fn [db _]
@@ -516,6 +502,14 @@
  (fn [emap [_ in-path]]
    (get emap in-path)))
 
+(reg-sub
+ :reaction/edit-error?
+ :<- [:reaction/edit-spec-errors]
+ :<- [:reaction/edit-template-errors]
+ (fn [[spec-errors template-errors] _]
+   (boolean (or (some? spec-errors)
+                (seq template-errors)))))
+
 ;; Dialog
 
 (reg-sub