Pagination

src/cljs/commiteth/db.cljs

@@ -7,4 +7,7 @@
    :repos            []
    :enabled-repos    {}
    :all-bounties     []
-   :owner-bounties []})
+   :owner-bounties   []
+   :pagination       {}
+   :pagination-props {:page-size 10
+                      :pages-max 10}})

src/cljs/commiteth/handlers.cljs

@@ -26,6 +26,19 @@
   (fn [db [_ page]]
     (assoc db :page page)))
 
+(reg-event-db
+  :set-page
+  (fn [db [_ table page]]
+    (assoc-in db [:pagination table :page] page)))
+
+(reg-event-db
+  :init-pagination
+  (fn [db [_ bounties]]
+    (let [{page-size :page-size} (:pagination-props db)]
+      (assoc-in db [:pagination :all-bounties]
+        {:page  0
+         :pages (Math/ceil (/ (count bounties) page-size))}))))
+
 (reg-event-fx
   :set-active-user
   (fn [{:keys [db]} [_ user]]
@@ -43,10 +56,11 @@
             :url        "/api/bounties"
             :on-success #(dispatch [:set-bounties %])}}))
 
-(reg-event-db
+(reg-event-fx
   :set-bounties
-  (fn [db [_ bounties]]
-    (assoc db :all-bounties bounties)))
+  (fn [{:keys [db]} [_ bounties]]
+    {:db       (assoc db :all-bounties bounties)
+     :dispatch [:init-pagination bounties]}))
 
 (reg-event-fx
   :load-owner-bounties

src/cljs/commiteth/issues.cljs

@@ -2,20 +2,43 @@
   (:require [reagent.core :as r]
             [re-frame.core :as rf]))
 
-(defn pagination []
+(defn- page-btn
+  [table selected-page current-page]
+  ^{:key current-page}
+  [:a {:class    (when (= selected-page current-page) "current")
+       :on-click #(rf/dispatch [:set-page table current-page])}
+   (str (inc current-page))])
+
+(defn pagination [table]
   (fn []
+    (let [{page  :page
+           pages :pages} @(rf/subscribe [:pagination table])
+          {pages-max :pages-max} @(rf/subscribe [:get-in [:pagination-props]])]
+      (when (> pages 1)
+        (let [last-page  (dec pages)
+              start-page (max 1 (min (- pages pages-max) (max 1 (- page (quot pages-max 2)))))
+              end-page   (min (dec pages) (+ pages-max start-page))
+              gap-left   (> start-page 1)
+              gap-right  (< end-page last-page)]
           [:div.paginate-container
            [:div.pagination
-      [:span.previous-page.disabled "Previous"]
-      [:em.current "1"]
-      [:a {:rel "next", :href "#"} "2"]
-      [:a {:href "#"} "3"]
-      [:a {:href "#"} "4"]
-      [:a {:href "#"} "5"]
-      [:span.gap "…"]
-      [:a {:href "#"} "10"]
-      [:a {:href "#"} "11"]
-      [:a.next-page {:rel "next", :href "#"} "Next"]]]))
+            [:span.previous-page
+             (let [disabled (= page 0)]
+               {:class    (when disabled "disabled")
+                :on-click (when-not disabled
+                            #(rf/dispatch [:set-page table (dec page)]))})
+             "Previous"]
+            (page-btn table page 0)
+            (when gap-left [:span.gap "…"])
+            (map #(page-btn table page %) (range start-page end-page))
+            (when gap-right [:span.gap "…"])
+            (page-btn table page last-page)
+            [:span.next-page
+             (let [disabled (= page last-page)]
+               {:class    (when disabled "disabled")
+                :on-click (when-not disabled
+                            #(rf/dispatch [:set-page table (inc page)]))})
+             "Next"]]])))))
 
 (defn repo-link
   [owner repo]
@@ -63,14 +86,19 @@
 
 (defn issues-list-table
   [issues-path issue-row-fn]
-  (let [issues (rf/subscribe issues-path)]
   (fn []
+    (let [{page :page} @(rf/subscribe (into [:pagination] issues-path))
+          {page-size :page-size} @(rf/subscribe [:get-in [:pagination-props]])
+          issues      (rf/subscribe issues-path)
+          issues-page (->> @issues
+                        (drop (* page page-size))
+                        (take page-size))]
       [:div.issues-list-table
        [:ul.issues-list
-        (map issue-row-fn @issues)]])))
+        (map issue-row-fn issues-page)]])))
 
 (defn issues-page []
   (fn []
     [:div.container
      [(issues-list-table [:all-bounties] issue-row)]
-     [pagination]]))
+     [(pagination :all-bounties)]]))

src/cljs/commiteth/subscriptions.cljs

@@ -26,6 +26,11 @@
   (fn [db _]
     (:owner-bounties db)))
 
+(reg-sub
+  :pagination
+  (fn [db [_ table]]
+    (get-in db [:pagination table])))
+
 (reg-sub
   :get-in
   (fn [db [_ path]]