status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fetching featured communities (#16829) 

Featured communities updated from status-go signal
Community card skeleton now is a part of a component
This commit is contained in:
Volodymyr Kozieiev 2023-08-07 16:43:58 +01:00 committed by GitHub
parent d5c1ecc104
commit 86e16564fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 301 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/quo2/components/community/community_card_view.cljs
View File

@ -2,41 +2,75 @@
(:require [quo2.components.community.community-view :as community-view]
[quo2.components.community.icon :as icon]
[quo2.components.community.style :as style]
[quo2.theme :as quo.theme]
[react-native.core :as rn]))
(defn community-card-view-item
[{:keys [name description locked images cover
status tokens tags width]} on-press]
[rn/touchable-without-feedback
{:accessibility-label :community-card-item
:on-press on-press}
[rn/view {:style (style/community-card 20)}
(defn- loading-card-view
[{:keys [width theme]}]
[rn/view {:style (style/loading-card width theme)}
[rn/view (style/loading-cover-container theme)]
[rn/view (style/loading-content-container theme)
[rn/view (style/loading-avatar theme)]
[rn/view (style/loading-lock theme)]
[rn/view
{:style {:width width
:height 230
:border-radius 20}
:on-press on-press}
[rn/view {:style style/detail-container}
[rn/view (style/community-cover-container 60)
[rn/image
{:source cover
:style {:flex 1
:border-top-right-radius 20
:border-top-left-radius 20}}]]
[rn/view (style/card-view-content-container 12)
[rn/view (style/card-view-chat-icon 48)
[icon/community-icon {:images images} 48]]
(when (= status :gated)
[rn/view (style/permission-tag-styles)
[community-view/permission-tag-container
{:locked locked
:status status
:tokens tokens}]])
[community-view/community-title
{:title name
:description description}]
[rn/view {:style (style/card-stats-position)}
[community-view/community-stats-column
{:type :card-view}]]
[rn/view {:style (style/community-tags-position)}
[community-view/community-tags {:tags tags}]]]]]]])
{:style style/loading-card-content-container}
[rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}]
[rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}]
[rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]]
[rn/view
{:style style/loading-stats-container}
[rn/view {:style (style/loading-stat-circle theme 0)}]
[rn/view {:style (style/loading-stat-line theme 4)}]
[rn/view {:style (style/loading-stat-circle theme 12)}]
[rn/view {:style (style/loading-stat-line theme 4)}]]
[rn/view
{:style style/loading-tags-container}
[rn/view {:style (style/loading-tag theme 0)}]
[rn/view {:style (style/loading-tag theme 8)}]
[rn/view {:style (style/loading-tag theme 8)}]]]])
(defn- community-card-view
[{:keys [community on-press width theme]}]
(let [{:keys [name description locked? images cover
status tokens tags]} community]
[rn/touchable-without-feedback
{:accessibility-label :community-card-item
:on-press on-press}
[rn/view {:style (style/community-card 20 theme)}
[rn/view
{:style {:width width
:height 230
:border-radius 20}
:on-press on-press}
[rn/view {:style style/detail-container}
[rn/view (style/community-cover-container 60)
[rn/image
{:source cover
:style {:flex 1
:border-top-right-radius 20
:border-top-left-radius 20}}]]
[rn/view (style/card-view-content-container 12 theme)
[rn/view (style/card-view-chat-icon 48 theme)
[icon/community-icon {:images images} 48]]
(when (= status :gated)
[rn/view (style/permission-tag-styles)
[community-view/permission-tag-container
{:locked? locked?
:status status
:tokens tokens}]])
[community-view/community-title
{:title name
:description description}]
[rn/view {:style (style/card-stats-position)}
[community-view/community-stats-column
{:type :card-view}]]
[rn/view {:style (style/community-tags-position)}
[community-view/community-tags {:tags tags}]]]]]]]))
(defn- internal-view
[{:keys [loading?] :as props}]
(if-not loading?
[community-card-view props]
[loading-card-view props]))
(def view (quo.theme/with-theme internal-view))

2
src/quo2/components/community/community_list_view.cljs
View File

@ -46,7 +46,7 @@
community-icon
tokens]}]
[rn/view
{:style (merge (style/community-card 16)
{:style (merge (style/community-card 16 theme)
{:margin-bottom 12})}
[rn/touchable-highlight
(merge {:style {:height 56

120
src/quo2/components/community/style.cljs
View File

@ -1,8 +1,9 @@
(ns quo2.components.community.style
(:require [quo2.foundations.colors :as colors]))
(:require [quo2.foundations.colors :as colors]
[quo2.foundations.shadows :as shadows]))
(defn community-card
[radius]
[radius theme]
{:shadow-offset {:width 0
:height 2}
:shadow-radius radius
@ -13,7 +14,8 @@
:justify-content :space-between
:background-color (colors/theme-colors
colors/white
colors/neutral-90)})
colors/neutral-90
theme)})
(def detail-container
{:flex 1})
@ -48,7 +50,7 @@
:left 12})
(defn card-view-content-container
[padding-horizontal]
[padding-horizontal theme]
{:position :absolute
:top 40
:bottom 0
@ -60,10 +62,11 @@
:border-top-left-radius 16
:background-color (colors/theme-colors
colors/white
colors/neutral-90)})
colors/neutral-90
theme)})
(defn card-view-chat-icon
[icon-size]
[icon-size theme]
{:border-radius 48
:position :absolute
:top (- (/ icon-size 2))
@ -71,7 +74,8 @@
:padding 2
:background-color (colors/theme-colors
colors/white
colors/neutral-90)})
colors/neutral-90
theme)})
(defn list-info-container
[]
@ -120,21 +124,23 @@
{:padding-horizontal 12})))
(defn token-row-or-text
[padding?]
[padding? theme]
(merge
{:margin-top 4
:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)}
colors/neutral-40
theme)}
(when padding?
{:padding-left 12})))
(defn token-row-or-border
[]
[theme]
{:height 1
:background-color (colors/theme-colors
colors/neutral-20
colors/neutral-80)})
colors/neutral-80
theme)})
(defn channel-action-touch
[big?]
@ -154,3 +160,95 @@
{:flex-direction :row
:justify-content :space-between
:align-items :center})
(defn loading-card
[width theme]
(merge
{:width width
:height 230
:border-radius 16
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}
(shadows/get 2 theme)))
(defn loading-avatar
[theme]
{:width 48
:height 48
:border-radius 24
:position :absolute
:top -24
:left 12
:background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme)
:border-color (colors/theme-colors colors/white colors/neutral-90 theme)
:border-width 2})
(defn loading-lock
[theme]
{:width 48
:height 24
:border-radius 20
:position :absolute
:top 8
:right 8
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
(defn loading-cover-container
[theme]
{:flex-direction :row
:height 64
:border-top-right-radius 16
:border-top-left-radius 16
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
(defn loading-content-container
[theme]
{:position :absolute
:heigth 190
:top 40
:bottom 0
:left 0
:right 0
:padding-horizontal 12
:border-radius 16
:background-color (colors/theme-colors colors/white colors/neutral-90 theme)})
(def loading-tags-container
{:margin-top 20 :flex-direction :row :align-items :center})
(def loading-stats-container
{:margin-top 20 :flex-direction :row :align-items :center})
(defn loading-stat-circle
[theme margin-left]
{:height 14
:width 14
:border-radius 7
:background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme)
:margin-left margin-left})
(defn loading-stat-line
[theme margin-left]
{:height 12
:width 50
:border-radius 5
:background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
:margin-left margin-left})
(defn loading-tag
[theme margin-left]
{:height 24
:width 76
:border-radius 20
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
:margin-left margin-left})
(defn loading-content-line
[{:keys [theme width margin-top]}]
{:width width
:height 16
:background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme)
:border-radius 5
:margin-top margin-top})
(def loading-card-content-container {:margin-top 36})

11
src/quo2/components/community/token_gating.cljs
View File

@ -4,6 +4,7 @@
[react-native.core :as rn]
[utils.i18n :as i18n]
[clojure.string :as string]
[quo2.theme :as quo.theme]
[quo2.components.community.style :as style]))
(defn token-requirement-list-row
@ -25,8 +26,8 @@
:img-src img-src}]]))
tokens))])
(defn token-requirement-list
[{:keys [tokens padding?]}]
(defn- internal-view
[{:keys [tokens padding? theme]}]
[:<>
(if (> (count tokens) 1)
(doall
@ -35,11 +36,13 @@
^{:key token-requirement-index}
[rn/view {:margin-bottom 12}
(when-not (= token-requirement-index 0)
[rn/view {:style (style/token-row-or-border)}])
[rn/view {:style (style/token-row-or-border theme)}])
(when-not (= token-requirement-index 0)
[text/text
{:style (style/token-row-or-text padding?)
{:style (style/token-row-or-text padding? theme)
:size :label} (string/lower-case (i18n/label :t/or))])
[token-requirement-list-row tokens padding?]])
tokens))
[token-requirement-list-row (first tokens) padding?])])
(def token-requirement-list (quo.theme/with-theme internal-view))

2
src/quo2/core.cljs
View File

@ -148,7 +148,7 @@
(def picker-colors quo2.components.colors.color-picker.view/picker-colors)
;;;; COMMUNITY
(def community-card-view-item quo2.components.community.community-card-view/community-card-view-item)
(def community-card-view-item quo2.components.community.community-card-view/view)
(def communities-membership-list-item
quo2.components.community.community-list-view/communities-membership-list-item)
(def community-stats-column quo2.components.community.community-view/community-stats-column)

93
src/status_im/signals/core.cljs
View File

@ -11,7 +11,8 @@
[status-im2.constants :as constants]
[quo2.foundations.colors :as colors]
[status-im2.contexts.profile.login.events :as profile.login]
[utils.transforms :as transforms]))
[utils.transforms :as transforms]
[status-im2.contexts.communities.discover.events]))
(rf/defn summary
[{:keys [db] :as cofx} peers-summary]
@ -95,50 +96,54 @@
^js event-js (.-event data)
type (.-type data)]
(case type
"node.login" (profile.login/login-node-signal cofx (transforms/js->clj event-js))
"backup.performed" {:db (assoc-in db
[:profile/profile :last-backup]
(.-lastBackup event-js))}
"envelope.sent" (transport.message/update-envelopes-status cofx
(:ids
"node.login" (profile.login/login-node-signal cofx (transforms/js->clj event-js))
"backup.performed" {:db (assoc-in db
[:profile/profile :last-backup]
(.-lastBackup event-js))}
"envelope.sent" (transport.message/update-envelopes-status cofx
(:ids
(js->clj event-js
:keywordize-keys
true))
:sent)
"envelope.expired" (transport.message/update-envelopes-status cofx
(:ids
(js->clj event-js
:keywordize-keys
true))
:not-sent)
"message.delivered" (let [{:keys [chatID messageID]} (js->clj event-js
:keywordize-keys
true)]
(models.message/update-db-message-status cofx
chatID
messageID
:delivered))
"mailserver.changed" (mailserver/handle-mailserver-changed cofx (.-id event-js))
"mailserver.available" (mailserver/handle-mailserver-available cofx (.-id event-js))
"mailserver.not.working" (mailserver/handle-mailserver-not-working cofx)
"discovery.summary" (summary cofx (js->clj event-js :keywordize-keys true))
"mediaserver.started" {:db (assoc db :mediaserver/port (.-port event-js))}
"wakuv2.peerstats" (wakuv2-peer-stats cofx (js->clj event-js :keywordize-keys true))
"messages.new" (transport.message/sanitize-messages-and-process-response cofx
event-js
true)
"wallet" (ethereum.subscriptions/new-wallet-event cofx
(js->clj event-js
:keywordize-keys
true))
:sent)
"envelope.expired" (transport.message/update-envelopes-status cofx
(:ids
(js->clj event-js
:keywordize-keys
true))
:not-sent)
"message.delivered" (let [{:keys [chatID messageID]} (js->clj event-js
:keywordize-keys
true)]
(models.message/update-db-message-status cofx
chatID
messageID
:delivered))
"mailserver.changed" (mailserver/handle-mailserver-changed cofx (.-id event-js))
"mailserver.available" (mailserver/handle-mailserver-available cofx (.-id event-js))
"mailserver.not.working" (mailserver/handle-mailserver-not-working cofx)
"discovery.summary" (summary cofx (js->clj event-js :keywordize-keys true))
"mediaserver.started" {:db (assoc db :mediaserver/port (.-port event-js))}
"wakuv2.peerstats" (wakuv2-peer-stats cofx (js->clj event-js :keywordize-keys true))
"messages.new" (transport.message/sanitize-messages-and-process-response cofx
event-js
true)
"wallet" (ethereum.subscriptions/new-wallet-event cofx
(js->clj event-js
:keywordize-keys
true))
"local-notifications" (local-notifications/process cofx
(js->clj event-js :keywordize-keys true))
"community.found" (link-preview/cache-community-preview-data (js->clj event-js
:keywordize-keys
true))
"status.updates.timedout" (visibility-status-updates/handle-visibility-status-updates
cofx
(js->clj event-js :keywordize-keys true))
"localPairing" (handle-local-pairing-signals cofx
(js->clj event-js :keywordize-keys true))
"local-notifications" (local-notifications/process cofx
(js->clj event-js :keywordize-keys true))
"community.found" (link-preview/cache-community-preview-data (js->clj event-js
:keywordize-keys
true))
"status.updates.timedout" (visibility-status-updates/handle-visibility-status-updates
cofx
(js->clj event-js :keywordize-keys true))
"localPairing" (handle-local-pairing-signals
cofx
(js->clj event-js :keywordize-keys true))
"curated.communities.update" (rf/dispatch [:fetched-contract-communities
(js->clj event-js :keywordize-keys true)])
(log/debug "Event " type " not handled"))))

77
src/status_im2/contexts/communities/discover/view.cljs
View File

@ -27,8 +27,10 @@
(get mock-community-item-data :data))
cover {:uri (get-in (:images item) [:banner :uri])}]
(if (= view-type :card-view)
[quo/community-card-view-item (assoc item :width width :cover cover)
#(rf/dispatch [:communities/navigate-to-community (:id item)])]
[quo/community-card-view-item
{:community (assoc item :cover cover)
:width width
:on-press #(rf/dispatch [:communities/navigate-to-community (:id item)])}]
[quo/community-list-item
{:on-press (fn []
(rf/dispatch [:communities/load-category-states (:id item)])
@ -88,9 +90,18 @@
:label (i18n/label :t/gated)
:accessibility-label :gated-communities-tab}]}]])
(defn loading-community-item
[_ _ _ {:keys [width]}]
[quo/community-card-view-item
{:width width
:loading? true}])
(def loading-instances-to-show 3)
(defn featured-list
[communities view-type]
(let [view-size (reagent/atom 0)]
(let [view-size (reagent/atom 0)
loaded? (and communities (pos? (count communities)))]
(fn []
[rn/view
{:style style/featured-list-container
@ -105,8 +116,8 @@
:shows-horizontal-scroll-indicator false
:nestedScrollEnabled true
:separator [rn/view {:width 12}]
:data communities
:render-fn community-list-item
:data (if loaded? communities (range loading-instances-to-show))
:render-fn (if loaded? community-list-item loading-community-item)
:render-data {:width @view-size
:view-type view-type}
:content-container-style style/flat-list-container}])])))
@ -126,31 +137,37 @@
(defn other-communities-list
[{:keys [communities communities-ids view-type]}]
[rn/view {:style style/other-communities-container}
(map-indexed
(fn [inner-index item]
(let [community-id (when communities-ids item)
community (if communities
item
(rf/sub [:communities/home-item community-id]))
cover {:uri (get-in (:images item) [:banner :uri])}]
[rn/view
{:key (str inner-index (:id community))
:margin-bottom 16}
(if (= view-type :card-view)
[quo/community-card-view-item
(merge community
(get mock-community-item-data :data)
{:cover cover})
#(rf/dispatch [:communities/navigate-to-community (:id community)])]
[quo/community-list-item
{:on-press (fn []
(rf/dispatch [:communities/load-category-states (:id community)])
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:communities/navigate-to-community (:id community)]))
:on-long-press #(js/alert "TODO: to be implemented")}
(merge community
(get mock-community-item-data :data))])]))
(if communities communities communities-ids))])
(if (and communities (pos? (count communities)))
(map-indexed
(fn [inner-index item]
(let [community-id (when communities-ids item)
community (if communities
item
(rf/sub [:communities/home-item community-id]))
cover {:uri (get-in (:images item) [:banner :uri])}]
[rn/view
{:key (str inner-index (:id community))
:margin-bottom 16}
(if (= view-type :card-view)
[quo/community-card-view-item
{:community (merge community
(get mock-community-item-data :data)
{:cover cover})
:on-press #(rf/dispatch [:communities/navigate-to-community (:id community)])}]
[quo/community-list-item
{:on-press (fn []
(rf/dispatch [:communities/load-category-states (:id community)])
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:communities/navigate-to-community (:id community)]))
:on-long-press #(js/alert "TODO: to be implemented")}
(merge community
(get mock-community-item-data :data))])]))
(if communities communities communities-ids))
[:<>
[rn/view {:margin-bottom 16} [quo/community-card-view-item {:loading? true}]]
[rn/view {:margin-bottom 16} [quo/community-card-view-item {:loading? true}]]
[quo/community-card-view-item {:loading? true}]])])
(defn communities-lists
[selected-tab view-type]

2
src/status_im2/contexts/profile/login/events.cljs
View File

@ -13,7 +13,6 @@
[status-im.notifications.core :as notifications]
[status-im2.config :as config]
[status-im.data-store.settings :as data-store.settings]
[status-im2.contexts.communities.discover.events :as contract-communities]
[status-im.communities.core :as communities]
[status-im2.common.log :as logging]
[status-im2.contexts.shell.activity-center.events :as activity-center]
@ -87,7 +86,6 @@
(re-frame/dispatch [:profile.login/get-chats-callback]))})
(profile.config/get-node-config)
(communities/fetch)
(contract-communities/fetch-contract-communities)
(communities/fetch-collapsed-community-categories)
(communities/check-and-delete-pending-request-to-join)
(logging/set-log-level (:log-level settings))

22
src/status_im2/contexts/quo_preview/community/community_card_view.cljs
View File

@ -17,13 +17,15 @@
:community-icon (resources/get-mock-image :status-logo)
:color (rand-nth quo.colors/chat-colors)
:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]
:tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
:tags [{:id 1
:tag-label (i18n/label :t/music)
:emoji (resources/get-image :music)}
{:id 2
:tag-label (i18n/label :t/lifestyle)
:resource (resources/get-image :lifestyle)}
:emoji (resources/get-image :lifestyle)}
{:id 3
:tag-label (i18n/label :t/podcasts)
:resource (resources/get-image :podcasts)}]})
:emoji (resources/get-image :podcasts)}]})
(def descriptor
[{:label "Status:"
@ -33,14 +35,18 @@
:value "Gated"}
{:key :open
:value "Open"}]}
{:label "Locked:"
{:label "Locked?"
:key :locked?
:type :boolean}
{:label "Loading?"
:key :loading?
:type :boolean}])
(defn cool-preview
[]
(let [state (reagent/atom {:status :gated
:locked? true})]
(let [state (reagent/atom {:status :gated
:locked? true
:loading? false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
@ -51,7 +57,9 @@
[rn/view
{:padding-vertical 60
:justify-content :center}
[community-card-view/community-card-view-item (merge @state community-data)]]]])))
[community-card-view/view
{:community (merge @state community-data)
:loading? (:loading? @state)}]]]])))
(defn preview-community-card
[]

6
status-go-version.json
View File

@ -3,7 +3,7 @@
"_comment": "Instead use: scripts/update-status-go.sh <rev>",
"owner": "status-im",
"repo": "status-go",
"version": "v0.162.14",
"commit-sha1": "60143556ff942e24f4641dc741049e8ad4fef619",
"src-sha256": "0b8rk8v9fmsf36611c3frzdgq6y09pzy83h4zbz50fccphzrcxcf"
"version": "v0.162.15",
"commit-sha1": "363494f6e48e310936d5de9b11bf7e7682fd2d4b",
"src-sha256": "19qamr372k586v574zf9a84rgvx6vg59xmaacj0s6g7rr88kziil"
}