Skip to content

Commit

Permalink
Fix re-rendering of collectibles in flat-list
Browse files Browse the repository at this point in the history
  • Loading branch information
@ulisesmac
ulisesmac committed May 14, 2024
1 parent ef371d2 commit 23e7d7d
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 58 deletions.
34 changes: 21 additions & 13 deletions src/status_im/contexts/wallet/account/tabs/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,22 @@
[utils.i18n :as i18n]
[utils.re-frame :as rf]))

(defn- on-collectible-press
[{:keys [id]}]
(rf/dispatch [:wallet/get-collectible-details id]))

(defn- on-collectible-long-press
[{:keys [preview-url collectible-details]}]
(rf/dispatch [:show-bottom-sheet
{:content (fn []
[options-drawer/view
{:name (:name collectible-details)
:image (:uri preview-url)}])}]))

(defn- on-end-reached
[]
(rf/dispatch [:wallet/request-collectibles-for-current-viewing-account]))

(defn view
[{:keys [selected-tab]}]
(let [collectible-list (rf/sub
Expand All @@ -20,19 +36,11 @@
(case selected-tab
:assets [assets/view]
:collectibles [collectibles/view
{:collectibles collectible-list
:current-account-address current-account-address
:on-end-reached #(rf/dispatch
[:wallet/request-collectibles-for-current-viewing-account])
:on-collectible-press (fn [{:keys [id]}]
(rf/dispatch [:wallet/get-collectible-details id]))
:on-collectible-long-press (fn [{:keys [preview-url collectible-details]}]
(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[options-drawer/view
{:name (:name collectible-details)
:image (:uri preview-url)}])}]))}]
{:collectibles collectible-list
:current-account-address current-account-address
:on-end-reached on-end-reached
:on-collectible-press on-collectible-press
:on-collectible-long-press on-collectible-long-press}]
:activity [activity/view {:activities []}]
:permissions [empty-tab/view
{:title (i18n/label :t/no-permissions)
Expand Down
4 changes: 2 additions & 2 deletions src/status_im/contexts/wallet/collectible/utils.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
(ns status-im.contexts.wallet.collectible.utils
(:require [status-im.config :as config]
[status-im.constants :as constants]
[taoensso.timbre :as log]
[status-im.contexts.wallet.common.utils.networks :as network-utils]))
[status-im.contexts.wallet.common.utils.networks :as network-utils]
[taoensso.timbre :as log]))

(defn collectible-balance
[collectible]
Expand Down
4 changes: 4 additions & 0 deletions src/status_im/contexts/wallet/common/collectibles_tab/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,7 @@
(def list-container-style
{:margin-horizontal 12
:padding-bottom constants/floating-shell-button-height})

(def collectible-container
{:padding 8
:width "50%"})
65 changes: 37 additions & 28 deletions src/status_im/contexts/wallet/common/collectibles_tab/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,14 @@
[status-im.contexts.wallet.common.empty-tab.view :as empty-tab]
[utils.i18n :as i18n]))

(defn- render-fn
[{:keys [preview-url collection-data ownership collectible-data] :as collectible} index address
on-press on-long-press]
(let [total-owned (utils/total-owned-collectible ownership address)]
(defn- collectible-item
[{:keys [preview-url collection-data collectible-data total-owned on-press on-long-press]
:as collectible}
index]
(let [on-press-fn (rn/use-callback #(when on-press
(on-press collectible)))
on-long-press-fn (rn/use-callback #(when on-long-press
(on-long-press collectible)))]
[quo/collectible-list-item
{:type :card
:image-src (:uri preview-url)
Expand All @@ -21,18 +25,15 @@
:supported-file? (utils/supported-file? (:animation-media-type collectible-data))
:gradient-color-index (keyword (str "gradient-" (inc (mod index 5))))
:counter (utils/collectible-owned-counter total-owned)
:container-style {:padding 8
:width "50%"}
:on-press #(when on-press
(on-press collectible))
:on-long-press #(when on-long-press
(on-long-press collectible))}]))
:container-style style/collectible-container
:on-press on-press-fn
:on-long-press on-long-press-fn}]))

(defn view
[{:keys [collectibles filtered? on-collectible-press on-end-reached current-account-address
on-collectible-long-press]}]
(let [no-results-match-query? (and filtered? (empty? collectibles))
theme (quo.theme/use-theme)]
[{:keys [collectibles filtered? on-end-reached
on-collectible-press current-account-address on-collectible-long-press]}]
(let [theme (quo.theme/use-theme)
no-results-match-query? (and filtered? (empty? collectibles))]
(cond
no-results-match-query?
[rn/view {:style {:flex 1 :justify-content :center}}
Expand All @@ -48,17 +49,25 @@
:image (resources/get-themed-image :no-collectibles theme)}]

:else
[rn/flat-list
{:data collectibles
:style {:flex 1}
:content-container-style style/list-container-style
:window-size 11
:num-columns 2
:render-fn (fn [item index]
(render-fn item
index
current-account-address
on-collectible-press
on-collectible-long-press))
:on-end-reached on-end-reached
:on-end-reached-threshold 4}])))
;; TODO:
;; 1. If possible, move `collectibles-data` calculation to a subscription
;; 2. Optimization: do not recalculate all the collectibles, process only the new ones
(let [collectibles-data (map-indexed (fn [index {:keys [ownership] :as collectible}]
(assoc collectible
:total-owned (utils/total-owned-collectible
ownership
current-account-address)
:on-long-press on-collectible-long-press
:on-press on-collectible-press
:collectible-index index))
collectibles)]
[rn/flat-list
{:data collectibles-data
:style {:flex 1}
:content-container-style style/list-container-style
:window-size 11
:num-columns 2
:render-fn collectible-item
:on-end-reached on-end-reached
:key-fn :collectible-index
:on-end-reached-threshold 4}]))))
32 changes: 17 additions & 15 deletions src/status_im/contexts/wallet/home/tabs/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,21 @@
[status-im.contexts.wallet.home.tabs.style :as style]
[utils.re-frame :as rf]))

(defn- on-collectible-long-press
[{:keys [preview-url collectible-details id]}]
(let [chain-id (get-in id [:contract-id :chain-id])
address (get-in id [:contract-id :address])]
(rf/dispatch [:show-bottom-sheet {:content (fn []
[options-drawer/view
{:chain-id chain-id
:address address
:name (:name collectible-details)
:image (:uri preview-url)}])}])))

(defn- on-collectible-press
[{:keys [id]}]
(rf/dispatch [:wallet/get-collectible-details id]))

(defn view
[{:keys [selected-tab]}]
(let [collectible-list (rf/sub [:wallet/all-collectibles-list-in-selected-networks])
Expand All @@ -18,20 +33,7 @@
:assets [assets/view]
:collectibles [collectibles/view
{:collectibles collectible-list
:on-collectible-long-press (fn [{:keys [preview-url collectible-details id]}]
(let [chain-id (get-in id [:contract-id :chain-id])
address (get-in id [:contract-id :address])]
(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[options-drawer/view
{:chain-id chain-id
:address address
:name (:name
collectible-details)
:image (:uri
preview-url)}])}])))
:on-collectible-long-press on-collectible-long-press
:on-end-reached request-collectibles
:on-collectible-press (fn [{:keys [id]}]
(rf/dispatch [:wallet/get-collectible-details id]))}]
:on-collectible-press on-collectible-press}]
[activity/view {:activities []}])]))

0 comments on commit 23e7d7d

Please sign in to comment.