Reduce renderings in community overview
c15f9e73...1ea2bd99
This PR reduces the amount of rendering in community overview.
It limits the amount of data is passed to components to the necessary,
and it creates functions on component initialization so that they won't
cause a re-render.
Performance of the header are very noticeably better on my local
environment, though on nightly builds is less noticeable.
It also removes data from `communities/communities id` as that cause a
re-render of any component subscribed to it.
This commit is contained in:
parent
37be08d2d7
commit
4e3ce54ac4
|
@ -10,16 +10,16 @@
|
|||
{:db (-> db
|
||||
(assoc-in [:community-channels-permissions community-id]
|
||||
(data-store/rpc->channel-permissions (:channels response)))
|
||||
(assoc-in [:communities community-id :checking-all-channels-permissions?] false))}))
|
||||
(assoc-in [:communities/channel-permissions-check community-id] false))}))
|
||||
|
||||
(rf/reg-event-fx :communities/check-all-community-channels-permissions-failed
|
||||
(fn [{:keys [db]} [community-id]]
|
||||
{:db (assoc-in db [:communities community-id :checking-all-channels-permissions?] false)}))
|
||||
{:db (assoc-in db [:communities/channel-permissions-check community-id] false)}))
|
||||
|
||||
(rf/reg-event-fx :communities/check-all-community-channels-permissions
|
||||
(fn [{:keys [db]} [community-id]]
|
||||
(when (get-in db [:communities community-id])
|
||||
{:db (assoc-in db [:communities community-id :checking-all-channels-permissions?] true)
|
||||
{:db (assoc-in db [:communities/channel-permissions-check community-id] true)
|
||||
:fx [[:json-rpc/call
|
||||
[{:method "wakuext_checkAllCommunityChannelsPermissions"
|
||||
:params [{:CommunityID community-id}]
|
||||
|
@ -38,21 +38,19 @@
|
|||
(let [token-permissions-check (cond-> result
|
||||
based-on-client-selection? (assoc :based-on-client-selection? true))]
|
||||
{:db (-> db
|
||||
(assoc-in [:communities community-id :checking-permissions?] false)
|
||||
(assoc-in [:communities community-id :token-permissions-check]
|
||||
token-permissions-check))})))
|
||||
(assoc-in [:communities/permissions-check community-id]
|
||||
{:checking? false
|
||||
:check token-permissions-check}))})))
|
||||
|
||||
(rf/reg-event-fx :communities/check-permissions-to-join-community-failed
|
||||
(fn [{:keys [db]} [community-id]]
|
||||
{:db (assoc-in db [:communities community-id :checking-permissions?] false)}))
|
||||
{:db (assoc-in db [:communities/permissions-check community-id :checking?] false)}))
|
||||
|
||||
(rf/reg-event-fx :communities/check-permissions-to-join-community
|
||||
(fn [{:keys [db]} [community-id addresses based-on-client-selection?]]
|
||||
(when-let [community (get-in db [:communities community-id])]
|
||||
(when-not (:checking-permissions? community)
|
||||
{:db (-> db
|
||||
(assoc-in [:communities community-id :checking-permissions?] true)
|
||||
(assoc-in [:communities community-id :can-request-access?] false))
|
||||
{:db (assoc-in db [:communities/permissions-check community-id :checking?] true)
|
||||
:json-rpc/call [{:method "wakuext_checkPermissionsToJoinCommunity"
|
||||
:params [(cond-> {:communityId community-id}
|
||||
addresses
|
||||
|
|
|
@ -112,7 +112,7 @@
|
|||
|
||||
(defn- network-not-supported
|
||||
[]
|
||||
[quo/text (i18n/label :network-not-supported)])
|
||||
[quo/text (i18n/label :t/network-not-supported)])
|
||||
|
||||
(defn- request-access-button
|
||||
[id color]
|
||||
|
@ -253,14 +253,16 @@
|
|||
:description-accessibility-label :community-description}])
|
||||
|
||||
(defn- community-content
|
||||
[{:keys [id]}]
|
||||
[id]
|
||||
(rf/dispatch [:communities/check-all-community-channels-permissions id])
|
||||
(fn [{:keys [name description joined spectated images tags color id membership-permissions?]
|
||||
:as community}
|
||||
(fn [id
|
||||
{:keys [on-category-layout
|
||||
collapsed?
|
||||
on-first-channel-height-changed]}]
|
||||
(let [joined-or-spectated (or joined spectated)
|
||||
(let [{:keys [name description joined spectated images tags color id membership-permissions?]
|
||||
:as community}
|
||||
(rf/sub [:communities/community id])
|
||||
joined-or-spectated (or joined spectated)
|
||||
chats-by-category (rf/sub [:communities/categorized-channels id])]
|
||||
[:<>
|
||||
[rn/view {:style style/community-content-container}
|
||||
|
@ -311,20 +313,24 @@
|
|||
(and (>= scroll-height (+ height first-channel-height))
|
||||
category)))))
|
||||
|
||||
(defn- community-scroll-page
|
||||
[{:keys [joined]}]
|
||||
(let [scroll-height (reagent/atom 0)
|
||||
categories-heights (reagent/atom {})
|
||||
first-channel-height (reagent/atom 0)
|
||||
;; We track the initial value of joined
|
||||
;; as we open the page to avoid switching
|
||||
;; from not collapsed to collapsed if the
|
||||
;; user is on this page
|
||||
initial-joined? joined]
|
||||
(fn [{:keys [id name images] :as community}]
|
||||
|
||||
(defn- community-scroll-page
|
||||
[_ initial-joined? _ _]
|
||||
(let [scroll-height (reagent/atom 0)
|
||||
categories-heights (reagent/atom {})
|
||||
first-channel-height (reagent/atom 0)
|
||||
on-category-layout (partial add-category-height categories-heights)
|
||||
on-first-channel-height-changed (fn [height categories]
|
||||
(swap! categories-heights select-keys categories)
|
||||
(reset! first-channel-height height))]
|
||||
(fn [id joined name images]
|
||||
(let [cover {:uri (get-in images [:banner :uri])}
|
||||
logo {:uri (get-in images [:thumbnail :uri])}
|
||||
collapsed? (and initial-joined? (:joined community))
|
||||
collapsed? (and initial-joined? joined)
|
||||
overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
|
||||
[scroll-page/scroll-page
|
||||
{:cover-image cover
|
||||
|
@ -347,24 +353,22 @@
|
|||
@first-channel-height
|
||||
@categories-heights)}]}
|
||||
[community-content
|
||||
community
|
||||
{:on-category-layout (partial add-category-height categories-heights)
|
||||
id
|
||||
{:on-category-layout on-category-layout
|
||||
:collapsed? collapsed?
|
||||
:on-first-channel-height-changed
|
||||
;; Here we set the height of the component and we filter out the categories, as some
|
||||
;; might have been removed.
|
||||
(fn [height categories]
|
||||
(swap! categories-heights select-keys categories)
|
||||
(reset! first-channel-height height))}]]))))
|
||||
on-first-channel-height-changed}]]))))
|
||||
|
||||
(defn- community-card-page-view
|
||||
[id]
|
||||
(let [{:keys [id joined]
|
||||
(let [{:keys [id joined name images]
|
||||
:as community} (rf/sub [:communities/community id])]
|
||||
(when community
|
||||
(when joined
|
||||
(rf/dispatch [:activity-center.notifications/dismiss-community-overview id]))
|
||||
[community-scroll-page community])))
|
||||
[community-scroll-page id joined name images])))
|
||||
|
||||
(defn view
|
||||
[id]
|
||||
|
|
|
@ -311,25 +311,33 @@
|
|||
:amount (wallet.utils/remove-trailing-zeroes amount)
|
||||
:img-src (get token-images sym)}))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:communities/checking-permissions-by-id
|
||||
:<- [:communities/permissions-check]
|
||||
(fn [permissions [_ id]]
|
||||
(get permissions id)))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:community/token-gated-overview
|
||||
(fn [[_ community-id]]
|
||||
[(re-frame/subscribe [:communities/community community-id])])
|
||||
(fn [[{:keys [token-permissions-check checking-permissions? token-images]}] _]
|
||||
(let [highest-role (:highestRole token-permissions-check)
|
||||
networks-not-supported? (:networksNotSupported token-permissions-check)
|
||||
lowest-role (last (:roles token-permissions-check))
|
||||
[(re-frame/subscribe [:communities/community community-id])
|
||||
(re-frame/subscribe [:communities/checking-permissions-by-id community-id])])
|
||||
(fn [[{:keys [token-images]}
|
||||
{:keys [checking? check]}] _]
|
||||
(let [highest-role (:highestRole check)
|
||||
networks-not-supported? (:networksNotSupported check)
|
||||
lowest-role (last (:roles check))
|
||||
highest-permission-role (:type highest-role)
|
||||
can-request-access? (and (boolean highest-permission-role) (not networks-not-supported?))]
|
||||
{:can-request-access? can-request-access?
|
||||
:highest-permission-role highest-permission-role
|
||||
:networks-not-supported? networks-not-supported?
|
||||
:no-member-permission? (and highest-permission-role
|
||||
(not (-> token-permissions-check :highestRole :criteria)))
|
||||
(not (-> check :highestRole :criteria)))
|
||||
:tokens (map (fn [{:keys [tokenRequirement]}]
|
||||
(map
|
||||
(partial token-requirement->token
|
||||
checking-permissions?
|
||||
checking?
|
||||
token-images)
|
||||
tokenRequirement))
|
||||
(or (:criteria highest-role)
|
||||
|
|
|
@ -383,6 +383,31 @@
|
|||
(let
|
||||
[checking-permissions? true
|
||||
token-image-eth "data:image/jpeg;base64,/9j/2w"
|
||||
checks {:checking? checking-permissions?
|
||||
:check
|
||||
{:satisfied true
|
||||
:highestRole {:type constants/community-token-permission-become-admin
|
||||
:criteria [{:tokenRequirement [{:satisfied true
|
||||
:criteria {:contract_addresses
|
||||
{:5 "0x0"}
|
||||
:type 1
|
||||
:symbol "DAI"
|
||||
:amount "5.0"
|
||||
:decimals 18}}]}
|
||||
{:tokenRequirement [{:satisfied false
|
||||
:criteria {:type 1
|
||||
:symbol "ETH"
|
||||
:amount "0.002"
|
||||
:decimals 18}}]}]}
|
||||
|
||||
:permissions
|
||||
{:a3dd5b6b-d93b-452c-b22a-09a8f42ec566 {:criteria [true false
|
||||
true]}}
|
||||
:validCombinations
|
||||
[{:address "0xd722eaa60dc73e334b588d34ba66a3b27e537783"
|
||||
:chainIds nil}
|
||||
{:address "0x738d3146831c5871fa15872b409e8f360e341784"
|
||||
:chainIds [5 420]}]}}
|
||||
community {:id community-id
|
||||
:checking-permissions? checking-permissions?
|
||||
:permissions {:access 3}
|
||||
|
@ -411,36 +436,14 @@
|
|||
:position 0
|
||||
:can-post? false
|
||||
:members {"0x04" {"roles" [1]}}}}
|
||||
:token-permissions-check
|
||||
{:satisfied true
|
||||
:highestRole {:type constants/community-token-permission-become-admin
|
||||
:criteria [{:tokenRequirement [{:satisfied true
|
||||
:criteria {:contract_addresses
|
||||
{:5 "0x0"}
|
||||
:type 1
|
||||
:symbol "DAI"
|
||||
:amount "5.0"
|
||||
:decimals 18}}]}
|
||||
{:tokenRequirement [{:satisfied false
|
||||
:criteria {:type 1
|
||||
:symbol "ETH"
|
||||
:amount "0.002"
|
||||
:decimals 18}}]}]}
|
||||
|
||||
:permissions
|
||||
{:a3dd5b6b-d93b-452c-b22a-09a8f42ec566 {:criteria [true false
|
||||
true]}}
|
||||
:validCombinations
|
||||
[{:address "0xd722eaa60dc73e334b588d34ba66a3b27e537783"
|
||||
:chainIds nil}
|
||||
{:address "0x738d3146831c5871fa15872b409e8f360e341784"
|
||||
:chainIds [5 420]}]}
|
||||
:members {"0x04" {"roles" [1]}}
|
||||
:can-request-access? false
|
||||
:outroMessage "bla"
|
||||
:verified false}]
|
||||
(swap! rf-db/app-db assoc-in [:communities community-id] community)
|
||||
(swap! rf-db/app-db assoc-in [:communities/permissions-check community-id] checks)
|
||||
(is (match? {:can-request-access? true
|
||||
:networks-not-supported? nil
|
||||
:tokens [[{:symbol "DAI"
|
||||
:amount "5"
|
||||
:sufficient? true
|
||||
|
|
|
@ -148,6 +148,8 @@
|
|||
(reg-root-key-sub :communities/selected-tab :communities/selected-tab)
|
||||
(reg-root-key-sub :contract-communities :contract-communities)
|
||||
(reg-root-key-sub :communities/permissioned-balances :communities/permissioned-balances)
|
||||
(reg-root-key-sub :communities/permissions-check :communities/permissions-check)
|
||||
(reg-root-key-sub :communities/channel-permissions-check :communities/channel-permissions-check)
|
||||
|
||||
;;activity center
|
||||
(reg-root-key-sub :activity-center :activity-center)
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"_comment": "Instead use: scripts/update-status-go.sh <rev>",
|
||||
"owner": "status-im",
|
||||
"repo": "status-go",
|
||||
"version": "chore/debug-token-permissions",
|
||||
"commit-sha1": "b7b7660a534a01099e55ee0e4253f6a9531c7f02",
|
||||
"src-sha256": "0nrmm3j9z6iwlr32mggd3xl63226drvvhrlrhrkgxcpgrgpixcfj"
|
||||
"version": "v0.174.5",
|
||||
"commit-sha1": "1ea2bd99d4c11f591df554c089aa9283b9742c59",
|
||||
"src-sha256": "0b9411581gmxrrrbgbjk34db8xgz5qlhvrhp9hngggar1b7vmp1w"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue