#30: Tremendous progress, now understand reg-sub model

Although there's no actual collection of data from the back end, the user interface is now mostly working. And, I flatter myself, looking good.

resources/public/css/yyy-app.css

@@ -19,9 +19,18 @@
  * USA.
  */
 
+h1 {
+  width:100%;
+  background-color: rgb(7, 57, 106);
+  color: white;
+  font-family: "Archivo Black", "Sans Bold", "Arial Black", sans-serif;
+  font-weight: normal;
+  margin-top: 0;
+}
 
 /* desktops and laptops, primarily. Adapted to mouse; targets may be small */
 @media all and (min-device-width: 1025px) {
+
   /* top-of-page navigation, not editable, provided by Smeagol */
   #nav{
     margin: 0;

resources/public/css/yyy-common.css

@@ -373,8 +373,7 @@ th {
   h1 {
     /* I wouldn't normally use a px value, but the menu icon is 49px wide */
     padding: 0.25em 5%;
-    padding-left: 100px;
-    text-align: right;
+    padding-left: 75px;
   }
 
   .hidden {

src/cljs/youyesyet/core.cljs

@@ -12,7 +12,7 @@
             [youyesyet.ui-utils :as ui]
             [youyesyet.views.about :as about]
             [youyesyet.views.electors :as electors]
-            [youyesyet.views.home :as home]
+            [youyesyet.views.issue :as issue]
             [youyesyet.views.issues :as issues]
             [youyesyet.views.map :as maps]
             [youyesyet.views.followup-request :as request])
@@ -22,12 +22,12 @@
 (defn about-page []
   (about/panel))
 
-(defn home-page []
-  (home/panel))
-
 (defn issues-page []
   (issues/panel))
 
+(defn issue-page []
+  (issue/panel))
+
 (defn map-page []
   (maps/panel))
 
@@ -35,16 +35,16 @@
   (request/panel))
 
 (def pages
-  {:home #'home-page
+  {:about #'about-page
    :issues #'issues-page
+   :issue #'issue-page
    :map #'map-page
-   :about #'about-page})
+   })
 
 (defn page []
   [:div
   [:header
-   [ui/navbar]
-    [:h1 "You yes yet?"]]
+   [ui/navbar]]
    [(pages @(rf/subscribe [:page]))]])
 
 ;; -------------------------
@@ -60,6 +60,9 @@
 (secretary/defroute "/issues" []
   (rf/dispatch [:set-active-page :issues]))
 
+(secretary/defroute "/issue/:issue" {issue :issue}
+  (rf/dispatch [:set-issue issue]))
+
 (secretary/defroute "/map" []
   (rf/dispatch [:set-active-page :map]))
 
@@ -76,9 +79,6 @@
 
 ;; -------------------------
 ;; Initialize app
-(defn fetch-docs! []
-  (GET (str js/context "/docs")
-       {:handler #(rf/dispatch [:set-docs %])}))
 
 (defn mount-components []
   (r/render [#'page] (.getElementById js/document "app")))
@@ -86,6 +86,5 @@
 (defn init! []
   (rf/dispatch-sync [:initialize-db])
   (load-interceptors!)
-  (fetch-docs!)
   (hook-browser-navigation!)
   (mount-components))

src/cljs/youyesyet/db.cljs

@@ -30,4 +30,22 @@
 ;;; 'client-state'.
 
 (def default-db
-  {:page :home})
+  ;;; the currently displayed 'page' within the app.
+  {:page :home
+   ;;; the currently selected address, if any.
+   :address {:address "13 Imaginary Terrace, IM1 3TE"}
+   ;;; a list of the addresses in the current location at which there
+   ;;; are electors registered.
+   :addresses []
+   ;;; electors at the currently selected address
+   :electors [{:name "Alan Anderson" :gender :male :intention :no}
+              {:name "Ann Anderson" :gender :female}
+              {:name "Alex Anderson" :gender :fluid :intention :yes}
+              {:name "Andy Anderson" :intention :yes}]
+   ;;; 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"
+            "Monarchy" "Scotland could keep the Queen. This is an issue to be decided after independence. Yada yada yada"
+            "Defence" "Scotland will not have nuclear weapons, and will probably not choose to engage in far-off wars. But we could remain members of NATO"}
+   ;;; the issue from among those issues which is currently selected.
+   :issue "Currency"
+   })

src/cljs/youyesyet/handlers.cljs

@@ -13,6 +13,7 @@
     (assoc db :page page)))
 
 (reg-event-db
-  :set-docs
-  (fn [db [_ docs]]
-    (assoc db :docs docs)))
+  :set-issue
+  (fn [db [_ issue]]
+    (assoc (assoc db :issue issue) :page :issue)))
+

src/cljs/youyesyet/subscriptions.cljs

@@ -7,6 +7,11 @@
     (:page db)))
 
 (reg-sub
-  :docs
+  :issues
   (fn [db _]
-    (:docs db)))
+    (:issues db)))
+
+(reg-sub
+  :issue
+  (fn [db _]
+    (:issue db)))

src/cljs/youyesyet/views/about.cljs

@@ -33,6 +33,8 @@
 (defn panel
   "Generate the about panel."
   []
+  [:div
+   [:h1 "You Yes Yet?"]
    [:div.container {:id "main-container"}
     [:h2 "Pre-alpha/proof of concept"]
     [:p
@@ -55,4 +57,4 @@
      [:img {:src "img/gnu.small.png" :alt "Free Software Foundation" :height "24" :width "24"}]
      " Licensed under the "
      [:a {:href "http://www.gnu.org/licenses/gpl-2.0.html"}
-     "GNU General Public License v2.0"]]])
+      "GNU General Public License v2.0"]]]])

src/cljs/youyesyet/views/electors.cljs

@@ -32,6 +32,14 @@
 
 ;;; See https://github.com/simon-brooke/youyesyet/blob/master/doc/specification/userspec.md#electors-view
 
+;;; The design for this panel is one column per elector within the address.
+;;; Each column contains
+;;; 1. a stick figure identifying gender (for recognition);
+;;; 2. the elector's name;
+;;; 3. one icon for each option on the ballot;
+;;; 4. an 'issues' icon.
+;;; The mechanics of how this panel is laid out don't matter.
+
 (defn panel
   "Generate the electors panel."
   []

src/cljs/youyesyet/views/home.cljs

@@ -1,49 +0,0 @@
-(ns youyesyet.views.home
-  (:require [re-frame.core :as rf]
-            [markdown.core :refer [md->html]]
-            [youyesyet.ui-utils :as ui]))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;;;;
-;;;; youyesyet.views.electors: home view for youyesyet.
-;;;;
-;;;; This program is free software; you can redistribute it and/or
-;;;; modify it under the terms of the GNU General Public License
-;;;; as published by the Free Software Foundation; either version 2
-;;;; of the License, or (at your option) any later version.
-;;;;
-;;;; This program is distributed in the hope that it will be useful,
-;;;; but WITHOUT ANY WARRANTY; without even the implied warranty of
-;;;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-;;;; GNU General Public License for more details.
-;;;;
-;;;; You should have received a copy of the GNU General Public License
-;;;; along with this program; if not, write to the Free Software
-;;;; Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301,
-;;;; USA.
-;;;;
-;;;; Copyright (C) 2016 Simon Brooke for Radical Independence Campaign
-;;;;
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-
-;;; The pattern from the re-com demo (https://github.com/Day8/re-com) is to have
-;;; one source file/namespace per view. Each namespace contains a function 'panel'
-;;; whose output is an enlive-style specification of the view to be redered.
-;;; I propose to follow this pattern. This file will provide the home view.
-
-(defn panel
-  "Generate the home panel."
-  []
-  [:div.container {:id "main-container"}
-   (ui/big-link "About" "#/about")
-   (ui/big-link "Map" "#/map")
-   [:div.jumbotron
-    [:h1 "You Yes Yet?"]
-    [:p "Time to start building your site!"]
-    [:p [:a.btn.btn-primary.btn-lg {:href "http://luminusweb.net"} "Learn more »"]]]])
-   (when-let [docs @(rf/subscribe [:docs])]
-     [:div.row
-      [:div.col-md-12
-       [:div {:dangerouslySetInnerHTML
-              {:__html (md->html docs)}}]]])

src/cljs/youyesyet/views/issue.cljs

@@ -1,5 +1,5 @@
 (ns youyesyet.views.issue
-  (:require [re-frame.core :refer [reg-sub]]
+  (:require [re-frame.core :refer [reg-sub subscribe]]
             [youyesyet.ui-utils :as ui]
             [youyesyet.views.issues :as issues]))
 
@@ -31,3 +31,16 @@
 ;;; one source file/namespace per view. Each namespace contains a function 'panel'
 ;;; whose output is an enlive-style specification of the view to be redered.
 ;;; I propose to follow this pattern. This file will (eventually) provide the single issue view.
+
+(defn panel
+  "Generate the issue panel."
+  []
+  (let [issue @(subscribe [:issue])
+        issues @(subscribe [:issues])]
+    [:div
+     [:h1 issue]
+     [:div.container {:id "main-container"}
+      (ui/back-link)
+      [:div {:id "issue"}
+       [:div {:id "issue-text"}
+        (issues issue)]]]]))

src/cljs/youyesyet/views/issues.cljs

@@ -1,5 +1,5 @@
 (ns youyesyet.views.issues
-  (:require [re-frame.core :refer [reg-sub]]
+  (:require [re-frame.core :refer [reg-sub subscribe]]
             [youyesyet.ui-utils :as ui]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -33,26 +33,14 @@
 
 ;;; See https://github.com/simon-brooke/youyesyet/blob/master/doc/specification/userspec.md#issues-view
 
-(def *issues*
-  ;;; this is a dummy for the map fetched at load-time
-  {"Currency" "Lorem ipsum dolar sit amet"
-   "Head of state" "Lorem ipsum dolar sit amet"
-   "NATO and defence" "Lorem ipsum dolar sit amet"})
-
-(defn get-issues-fn
-  "This is a temporary dummy for the function which will pull the issues from
-  the server."
-  []
-  *issues*)
-
-;;; By memoising the function we arange that it is called only once
-(def get-issues (memoize get-issues-fn))
-
+;;; Simple list of the issues of the day.
 (defn panel
   "Generate the issues panel."
   []
+  (let [issues @(subscribe [:issues])]
+    [:div
+     [:h1 "Issues"]
      [:div.container {:id "main-container"}
       (ui/back-link)
       [:div {:id "issue-list"}
-      ]
-     (map (fn [k] (ui/big-link k (str "#/issue/" k))) (keys (get-issues)))])
+       (map (fn [k] (ui/big-link k (str "#/issue/" k))) (keys issues))]]]))

src/cljs/youyesyet/views/map.cljs

@@ -41,6 +41,11 @@
 ;;; Note that this is raw reagent stylee; it should be refactoed into re-frame stylee
 ;;; when I understand it better.
 
+;;; There should be one flag on the map for each address record currently in frame.
+;;; Clicking the flag sets that address as the current address in the app state,
+;;; and redirects to the electors view. How we handle blocks of flats needs further
+;;; thought.
+
 ;; which provider to use
 (def *map-provider* :osm)