mirror of
https://github.com/status-im/open-bounty.git
synced 2025-02-05 14:13:26 +00:00
Pagination: use React Refs in order to obtain DOM element for scrolling
This commit is contained in:
parent
03ab5b0539
commit
55cbb713f9
@ -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})))
|
||||
|
@ -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})))
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user