status-im/open-bounty
2
0
Fork 0
mirror of https://github.com/status-im/open-bounty.git synced 2025-02-17 03:47:58 +00:00
Code Issues Projects Releases Wiki Activity

Pagination: use React Refs in order to obtain DOM element for scrolling

Browse Source
This commit is contained in:
Vitaliy Vlasov 2018-01-19 21:01:35 +02:00
parent 03ab5b0539
commit 55cbb713f9
3 changed files with 51 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/cljs/commiteth/activity.cljs
View File

@ -58,19 +58,25 @@
(defn activity-list [activity-page-data]
[:div.ui.container.activity-container
{:id "activity-container"}
(if (empty? (:items activity-page-data))
[:div.view-no-data-container
[:p "No recent activity yet"]]
(display-data-page activity-page-data activity-item :set-activity-page-number))])
(if (empty? (:items activity-page-data))
[:div.view-no-data-container
[:p "No recent activity yet"]]
(display-data-page activity-page-data activity-item :set-activity-page-number)))
(defn activity-page []
(let [activity-page-data (rf/subscribe [:activities-page])
activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])]
(fn []
(if @activity-feed-loading?
[:div.view-loading-container
[:div.ui.active.inverted.dimmer
[:div.ui.text.loader.view-loading-label "Loading"]]]
[activity-list @activity-page-data]))))
activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])
container-element (atom nil)
render-fn (fn []
(if @activity-feed-loading?
[:div.view-loading-container
[:div.ui.active.inverted.dimmer
[:div.ui.text.loader.view-loading-label "Loading"]]]
[:div.ui.container.activity-container
{:ref #(reset! container-element %1)}
[activity-list @activity-page-data]]))]
(r/create-class
{:component-did-update (fn []
(when @container-element
(.scrollIntoView @container-element)))
:reagent-render render-fn})))

45
src/cljs/commiteth/bounties.cljs
View File

@ -1,5 +1,6 @@
(ns commiteth.bounties
(:require [re-frame.core :as rf]
[reagent.core :as r]
[commiteth.common :refer [moment-timestamp
display-data-page
items-per-page
@ -46,25 +47,31 @@
(defn bounties-list [{:keys [items item-count page-number total-count]
:as bounty-page-data}]
[:div.ui.container.open-bounties-container
{:id "open-bounties-container"}
[:div.open-bounties-header "Bounties"]
(if (empty? items)
[:div.view-no-data-container
[:p "No recent activity yet"]]
[:div
(let [left (inc (* (dec page-number) items-per-page))
right (dec (+ left item-count))]
[:div.item-counts-label
[:span (str "Showing " left "-" right " of " total-count)]])
(display-data-page bounty-page-data bounty-item :set-bounty-page-number)])])
(if (empty? items)
[:div.view-no-data-container
[:p "No recent activity yet"]]
[:div
(let [left (inc (* (dec page-number) items-per-page))
right (dec (+ left item-count))]
[:div.item-counts-label
[:span (str "Showing " left "-" right " of " total-count)]])
(display-data-page bounty-page-data bounty-item :set-bounty-page-number)]))
(defn bounties-page []
(let [bounty-page-data (rf/subscribe [:open-bounties-page])
open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])]
(fn []
(if @open-bounties-loading?
[:div.view-loading-container
[:div.ui.active.inverted.dimmer
[:div.ui.text.loader.view-loading-label "Loading"]]]
[bounties-list @bounty-page-data]))))
open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])
container-element (atom nil)
render-fn (fn []
(if @open-bounties-loading?
[:div.view-loading-container
[:div.ui.active.inverted.dimmer
[:div.ui.text.loader.view-loading-label "Loading"]]]
[:div.ui.container.open-bounties-container
{:ref #(reset! container-element %1)}
[:div.open-bounties-header "Bounties"]
[bounties-list @bounty-page-data]]))]
(r/create-class
{:component-did-update (fn []
(when @container-element
(.scrollIntoView @container-element)))
:reagent-render render-fn})))

24
src/cljs/commiteth/handlers.cljs
View File

@ -39,16 +39,6 @@
(println "redirecting to" path)
(set! (.-pathname js/location) path)))
(reg-fx
:bounty-scroll-pos
(fn [scroll-pos]
(.scrollIntoView (get-element "open-bounties-container")) ))
(reg-fx
:activity-scroll-pos
(fn [scroll-pos]
(.scrollIntoView (get-element "activity-container"))))
(reg-event-fx
:initialize-db
[(inject-cofx :store)]
@ -78,17 +68,15 @@
(fn [db [_ page]]
(assoc db :page page)))
(reg-event-fx
(reg-event-db
:set-bounty-page-number
(fn [{:keys [db]} [_ page]]
{:db (assoc db :bounty-page-number page)
:bounty-scroll-pos 0}))
(fn [db [_ page]]
(assoc db :bounty-page-number page)))
(reg-event-fx
(reg-event-db
:set-activity-page-number
(fn [{:keys [db]} [_ page]]
{:db (assoc db :activity-page-number page)
:activity-scroll-pos 0}))
(fn [db [_ page]]
(assoc db :activity-page-number page)))
(reg-event-fx
:set-flash-message