#36: Followup request doesn't actually send, everything else works

resources/public/css/yyy-common.css

@@ -365,6 +365,14 @@ th {
 /* phones, and, indeed, smaller phones. Adapted to touch; display radically
  * decluttered */
 @media all and (max-device-width: 768px) {
+  button, input, select {
+    background-color: rgb( 50, 109, 177);
+    color: white;
+    font-size: 1.1em;
+    padding: 0.25em 1em;
+    border-radius: 0.5em;
+  }
+
   footer {
     display: none;
   }
@@ -375,14 +383,6 @@ th {
     padding-left: 75px;
   }
 
-  input, select {
-    background-color: rgb( 50, 109, 177);
-    color: white;
-    font-size: 1.1em;
-    padding: 0.25em 1em;
-    border-radius: 0.5em;
-  }
-
   .hidden {
     display: none;
   }

src/cljs/youyesyet/core.cljs

@@ -79,7 +79,11 @@
   [:div
    [:header
     [ui/navbar]]
-   (let [content (pages @(rf/subscribe [:page]))]
+   (let [content (pages @(rf/subscribe [:page]))
+         error @(rf/subscribe [:error])
+         feedback @(rf/subscribe [:feedback])]
+     [:div.error {:style (str "display: " (if error "block" "none"))} (str error)]
+     [:div.feedback {:style (str "display: " (if feedback "block" "none"))} (str feedback)]
      (if content [content]
        [:div.error (str "No content in page " :page)]))])
 
@@ -109,7 +113,7 @@
   (rf/dispatch [:set-elector-and-page {:elector-id elector-id :page :issues}]))
 
 (secretary/defroute "/issue/:issue" {issue :issue}
-  (rf/dispatch [:set-issue issue]))
+  (rf/dispatch [:set-and-go-to-issue issue]))
 
 (secretary/defroute "/map" []
   (rf/dispatch [:set-active-page :map]))

src/cljs/youyesyet/db.cljs

@@ -57,7 +57,12 @@
               {:id 2 :name "Ann Anderson" :gender :female}
               {:id 3 :name "Alex Anderson" :gender :fluid :intention :yes}
               {:id 4 :name "Andy Anderson" :intention :yes}]
+   ;;; any error to display
+   :error nil
    ;;; the issue from among the issues which is currently selected.
+   ;;; any confirmation message to display
+   :feedback nil
+   ;;; the currently selected issue
    :issue "Currency"
    ;;; the issues selected for the issues page on this day.
    :issues {"Currency" "Scotland could keep the Pound, or use the Euro. But we could also set up a new currency of our own. Yada yada yada"
@@ -67,8 +72,7 @@
    :motd "This is a test version only. There is no real data."
    ;;; the options from among which electors can select.
    :options [{:id :yes :description "Yes"} {:id :no :description "No"}]
-    ;;; the number of requests created by the user in the current session
-    :requests 0
    ;;; the currently displayed 'page' within the app.
+   :outqueue ()
    :page :home
    })

src/cljs/youyesyet/handlers.cljs

@@ -27,17 +27,53 @@
 ;;;;
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+(defn clear-messages
+  "Return a state like this state except with the error and feedback messages
+  set nil"
+  [state]
+  (merge state {:error nil :feedback nil}))
+
+
+(defn get-elector
+  "Return the elector at this address (or the current address if not specified)
+  with this id."
+  ([elector-id state]
+   (get-elector elector-id state (:address state)))
+  ([elector-id state address]
+   (first
+    (remove
+     nil?
+     (map
+      #(if (= elector-id (:id %)) %)
+      (:electors address))))))
+
+
 (reg-event-db
   :initialize-db
   (fn [_ _]
     db/default-db))
 
 
+ (reg-event-db
+  :send-request
+  (fn [db [_ _]]
+    (if (and (:elector db) (:issue db) (:telephone db))
+      (do
+        (js/console.log "Sending request")
+        (assoc db
+          :feedback "Request has been queued"
+          :outqueue (cons
+                     {:elector-id (:id (:elector db))
+                      :issue (:issue db)
+                      :action :add-request} (:outqueue db))))
+      (assoc db :error "Please supply a telephone number to call"))))
+
+
 (reg-event-db
  :set-active-page
  (fn [db [_ page]]
    (if page
-     (assoc db :page page))))
+     (assoc (clear-messages db) :page page))))
 
 
 (reg-event-db
@@ -45,29 +81,39 @@
  (fn [db [_ address-id]]
    (let [id (read-string address-id)
          address (first (remove nil? (map #(if (= id (:id %)) %) (:addresses db))))]
-     (assoc (assoc db :address address) :page :electors))))
+     (assoc (clear-messages db) :address address :page :electors))))
 
 
 (reg-event-db
+ :set-and-go-to-issue
+ (fn [db [_ issue]]
+   (js/console.log (str "Setting page to :issue, issue to " issue))
+   (assoc (assoc (clear-messages db) :issue issue) :page :issue)))
+
+
+ (reg-event-db
   :set-elector-and-page
   (fn [db [_ args]]
     (let [page (:page args)
           elector-id (read-string (:elector-id args))
-         elector
+          elector (get-elector elector-id db)]
-         (first
-          (remove nil?
-                 (map
-                  #(if (= elector-id (:id %)) %)
-                  (:electors (:address db)))))]
       (js/console.log (str "Setting page to " page ", elector to " elector))
-     (assoc (assoc db :elector elector) :page page))))
+      (assoc (clear-messages db) :elector elector :page page))))
+
+
+(reg-event-db
+ :set-elector
+ (fn [db [_ elector-id]]
+   (let [elector (get-elector (read-string elector-id) db)]
+     (js/console.log (str "Setting elector to " elector))
+     (assoc (clear-messages db) :elector elector))))
 
 
 (reg-event-db
  :set-intention
  (fn [db [_ args]]
    (let [intention (:intention args)
-          elector-id (read-string (:elector-id args))
+         elector-id (:elector-id args)
          elector
          (first
           (remove nil?
@@ -77,16 +123,29 @@
          old-address (:address db)
          new-address (assoc old-address :electors (cons (assoc elector :intention intention) (remove #(= % elector) (:electors old-address))))]
      (cond
-        (nil? elector)(do (js/console.log "No elector found; not setting intention") db)
+      (nil? elector)
+      (assoc db :error "No elector found; not setting intention")
       (= intention (:intention elector)) (do (js/console.log "Elector's intention hasn't changed; not setting intention") db)
       true
       (do
         (js/console.log (str "Setting intention of elector " elector " to " intention))
-          (assoc db :addresses (cons new-address (remove old-address (:addresses db)))))))))
+        (merge
+         (clear-messages db)
+         {:addresses
+          (cons new-address (remove old-address (:addresses db)))
+          :address new-address
+          :outqueue (cons (assoc args :action :set-intention) (:outqueue db))}))))))
 
 
 (reg-event-db
  :set-issue
  (fn [db [_ issue]]
-   (js/console.log (str "Setting page to :issue, issue to " issue))
+   (js/console.log (str "Setting issue to " issue))
-   (assoc (assoc db :issue issue) :page :issue)))
+   (assoc (clear-messages db) :issue issue)))
+
+
+(reg-event-db
+ :set-telephone
+ (fn [db [_ telephone]]
+   (js/console.log (str "Setting telephone to " telephone))
+   (assoc (clear-messages db) :issue telephone)))

src/cljs/youyesyet/subscriptions.cljs

@@ -49,6 +49,16 @@
   (fn [db _]
     (:elector db)))
 
+(reg-sub
+ :error
+  (fn [db _]
+    (:error db)))
+
+(reg-sub
+ :feedback
+  (fn [db _]
+    (:feedback db)))
+
 (reg-sub
   :issue
   (fn [db _]

src/cljs/youyesyet/views/electors.cljs

@@ -1,6 +1,6 @@
 (ns youyesyet.views.electors
   (:require [reagent.core :refer [atom]]
-            [re-frame.core :refer [reg-sub subscribe]]
+            [re-frame.core :refer [reg-sub subscribe dispatch]]
             [youyesyet.ui-utils :as ui]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -71,14 +71,19 @@
   [electors option]
   (let [optid (:id option)
         optname (name optid)]
-    [:tr {:key (str "options-" optid)}
+    [:tr {:key (str "options-" optname)}
      (map
-       #(let [selected (= optid (:intention %))
+      (fn [elector] (let [selected (= optid (:intention elector))
                           image (if selected (str "img/option/" optname "-selected.png")
                                   (str "img/option/" optname "-unselected.png"))]
-          [:td  {:key (str "option-" optid "-" (:id %))}
+                      [:td  {:key (str "option-" optid "-" (:id elector))}
-           [:a {:href (str "#/set-intention/" (:id %) "/" optid)}
+                       [:img
-            [:img {:src image :alt optname}]]])
+                        {:src image
+                         :alt optname
+                         :on-click #(dispatch
+                                    [:set-intention {:elector-id (:id elector)
+                                                     :intention optid}])}]]))
+      ;; TODO: impose an ordering on electors - by name or by id
       electors)]))
 
 
@@ -102,7 +107,7 @@
   []
   (let [address @(subscribe [:address])
         addresses @(subscribe [:addresses])
-        electors (:electors address)
+        electors (sort-by :id (:electors address))
         options @(subscribe [:options])
         changes @(subscribe [:changes])]
     (if address

src/cljs/youyesyet/views/followup.cljs

@@ -1,5 +1,5 @@
 (ns youyesyet.views.followup
-  (:require [re-frame.core :refer [reg-sub subscribe]]
+  (:require [re-frame.core :refer [reg-sub subscribe dispatch]]
             [youyesyet.ui-utils :as ui]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -50,25 +50,28 @@
      [:div
       [:h1 "Followup Request"]
       [:div.container {:id "main-container"}
-       [:form {}
+       [:div {}
         [:p.widget
          [:label {:for "elector"} "Elector"]
-         [:select {:id "elector" :name "elector" :value (:id elector)}
+         [:select {:id "elector" :name "elector" :defaultValue (:id elector)
+                   :on-change #(dispatch [:set-elector (.-value (.-target %))])}
           (map
            #(let []
               [:option {:value (:id %) :key (:id %)} (:name %)]) (:electors address))]]
         [:p.widget
          [:label {:for "issue"} "Issue"]
-         [:select {:id "issue" :name "issue" :value issue}
+         ;; #(reset! val (-> % .-target .-value))
+         [:select {:id "issue" :name "issue" :defaultValue issue
+                   :on-change #(dispatch [:set-issue (.-value (.-target %))])}
           (map
            #(let []
               [:option {:key % :value %} %]) (keys issues))]]
         [:p.widget
          [:label {:for "telephone"} "Telephone number"]
-         [:input {:type "text" :id "telephone" :name "telephone"}]]
+         [:input {:type "text" :id "telephone" :name "telephone"
+                  :on-change #(dispatch [:set-telephone (.-value (.-target %))])}]]
         [:p.widget
-         [:label {:for "submit"} "To request a call"]
+         [:label {:for "send"} "To request a call"]
-         [:input {:id "submit" :name "submit" :type "submit" :value "Send this!"}]]
+         [:button {:id "send" :on-click #(dispatch [:send-request])} "Send this!"]]]
-        ]
        (ui/back-link)]])))
 

src/cljs/youyesyet/views/map.cljs

@@ -69,7 +69,7 @@
   [id]
   (js/console.log (str "Click handler for address #" id))
   (set! window.location.href (str "#electors/" id)))
-;; This way is probably more idiomatic React, but back links don't work:
+;; This way is probably more idiomatic React, but history doesn't work:
 ;; (defn map-pin-click-handler
 ;;  [id]
 ;;  (dispatch [:set-address id]))