From 4e3ce54ac466fe026909206b04b8e11dd1c22bf6 Mon Sep 17 00:00:00 2001 From: Andrea Maria Piana Date: Tue, 13 Feb 2024 08:43:20 +0000 Subject: [PATCH] Reduce renderings in community overview https://github.com/status-im/status-go/compare/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. --- .../contexts/communities/overview/events.cljs | 18 ++-- .../contexts/communities/overview/view.cljs | 46 +++++----- src/status_im/subs/communities.cljs | 22 +++-- src/status_im/subs/communities_test.cljs | 91 ++++++++++--------- src/status_im/subs/root.cljs | 2 + status-go-version.json | 6 +- 6 files changed, 100 insertions(+), 85 deletions(-) diff --git a/src/status_im/contexts/communities/overview/events.cljs b/src/status_im/contexts/communities/overview/events.cljs index 2e685500b2..68a0387d20 100644 --- a/src/status_im/contexts/communities/overview/events.cljs +++ b/src/status_im/contexts/communities/overview/events.cljs @@ -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 diff --git a/src/status_im/contexts/communities/overview/view.cljs b/src/status_im/contexts/communities/overview/view.cljs index 9838660a3c..d3059f8db9 100644 --- a/src/status_im/contexts/communities/overview/view.cljs +++ b/src/status_im/contexts/communities/overview/view.cljs @@ -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,15 +253,17 @@ :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) - chats-by-category (rf/sub [:communities/categorized-channels id])] + (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} (when-not collapsed? @@ -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] diff --git a/src/status_im/subs/communities.cljs b/src/status_im/subs/communities.cljs index 6cb531aeaf..97140c0559 100644 --- a/src/status_im/subs/communities.cljs +++ b/src/status_im/subs/communities.cljs @@ -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) diff --git a/src/status_im/subs/communities_test.cljs b/src/status_im/subs/communities_test.cljs index 9e197d5798..da44f5b0a1 100644 --- a/src/status_im/subs/communities_test.cljs +++ b/src/status_im/subs/communities_test.cljs @@ -383,35 +383,8 @@ (let [checking-permissions? true token-image-eth "data:image/jpeg;base64,/9j/2w" - community {:id community-id - :checking-permissions? checking-permissions? - :permissions {:access 3} - :highest-permission-role constants/community-token-permission-become-admin - :token-images {"ETH" token-image-eth} - :name "Community super name" - :chats {"89f98a1e-6776-4e5f-8626-8ab9f855253f" - {:description "x" - :emoji "🎲" - :permissions {:access 1} - :color "#88B0FF" - :name "random" - :categoryID "0c3c64e7-d56e-439b-a3fb-a946d83cb056" - :id "89f98a1e-6776-4e5f-8626-8ab9f855253f" - :position 4 - :can-post? false - :members {"0x04" {"roles" [1]}}} - "a076358e-4638-470e-a3fb-584d0a542ce6" - {:description "General channel for the community" - :emoji "🐷 " - :permissions {:access 1} - :color "#4360DF" - :name "general" - :categoryID "0c3c64e7-d56e-439b-a3fb-a946d83cb056" - :id "a076358e-4638-470e-a3fb-584d0a542ce6" - :position 0 - :can-post? false - :members {"0x04" {"roles" [1]}}}} - :token-permissions-check + checks {:checking? checking-permissions? + :check {:satisfied true :highestRole {:type constants/community-token-permission-become-admin :criteria [{:tokenRequirement [{:satisfied true @@ -434,22 +407,52 @@ [{:address "0xd722eaa60dc73e334b588d34ba66a3b27e537783" :chainIds nil} {:address "0x738d3146831c5871fa15872b409e8f360e341784" - :chainIds [5 420]}]} - :members {"0x04" {"roles" [1]}} - :can-request-access? false - :outroMessage "bla" - :verified false}] + :chainIds [5 420]}]}} + community {:id community-id + :checking-permissions? checking-permissions? + :permissions {:access 3} + :highest-permission-role constants/community-token-permission-become-admin + :token-images {"ETH" token-image-eth} + :name "Community super name" + :chats {"89f98a1e-6776-4e5f-8626-8ab9f855253f" + {:description "x" + :emoji "🎲" + :permissions {:access 1} + :color "#88B0FF" + :name "random" + :categoryID "0c3c64e7-d56e-439b-a3fb-a946d83cb056" + :id "89f98a1e-6776-4e5f-8626-8ab9f855253f" + :position 4 + :can-post? false + :members {"0x04" {"roles" [1]}}} + "a076358e-4638-470e-a3fb-584d0a542ce6" + {:description "General channel for the community" + :emoji "🐷 " + :permissions {:access 1} + :color "#4360DF" + :name "general" + :categoryID "0c3c64e7-d56e-439b-a3fb-a946d83cb056" + :id "a076358e-4638-470e-a3fb-584d0a542ce6" + :position 0 + :can-post? false + :members {"0x04" {"roles" [1]}}}} + :members {"0x04" {"roles" [1]}} + :can-request-access? false + :outroMessage "bla" + :verified false}] (swap! rf-db/app-db assoc-in [:communities community-id] community) - (is (match? {:can-request-access? true - :tokens [[{:symbol "DAI" - :amount "5" - :sufficient? true - :loading? checking-permissions?}] - [{:symbol "ETH" - :amount "0.002" - :sufficient? false - :loading? checking-permissions? - :img-src token-image-eth}]]} + (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 + :loading? checking-permissions?}] + [{:symbol "ETH" + :amount "0.002" + :sufficient? false + :loading? checking-permissions? + :img-src token-image-eth}]]} (rf/sub [sub-name community-id]))))) (h/deftest-sub :communities/airdrop-account diff --git a/src/status_im/subs/root.cljs b/src/status_im/subs/root.cljs index 15c23e7182..a5ec336f62 100644 --- a/src/status_im/subs/root.cljs +++ b/src/status_im/subs/root.cljs @@ -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) diff --git a/status-go-version.json b/status-go-version.json index 62d12bd5a4..ff87880d12 100644 --- a/status-go-version.json +++ b/status-go-version.json @@ -3,7 +3,7 @@ "_comment": "Instead use: scripts/update-status-go.sh ", "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" }