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

Update communities discover screen 

* Fix: discover communities missing data

* made community tags scrollable
This commit is contained in:
John Ngei 2023-03-31 13:25:56 +03:00 committed by GitHub
parent 2ab491f12b
commit abe4dc7ac1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,15 +16,13 @@
:height 230 :height 230
:border-radius 20} :border-radius 20}
:on-press on-press} :on-press on-press}
[rn/view [rn/view {:style style/detail-container}
{:flex 1}
[rn/view (style/community-cover-container 60) [rn/view (style/community-cover-container 60)
[rn/image [rn/image
{:source cover {:source cover
:style :style {:flex 1
{:flex 1 :border-top-right-radius 20
:border-top-right-radius 20 :border-top-left-radius 20}}]]
:border-top-left-radius 20}}]]
[rn/view (style/card-view-content-container 12) [rn/view (style/card-view-content-container 12)
[rn/view (style/card-view-chat-icon 48) [rn/view (style/card-view-chat-icon 48)
[icon/community-icon {:images images} 48]] [icon/community-icon {:images images} 48]]
@ -38,7 +36,7 @@
{:title name {:title name
:description description}] :description description}]
[rn/view {:style (style/card-stats-position)} [rn/view {:style (style/card-stats-position)}
[community-view/community-stats-column :card-view]] [community-view/community-stats-column
{:type :card-view}]]
[rn/view {:style (style/community-tags-position)} [rn/view {:style (style/community-tags-position)}
[community-view/community-tags tags]]]]]]]) [community-view/community-tags tags]]]]]]])

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

@ -46,7 +46,7 @@
(merge {:style {:height 56 (merge {:style {:height 56
:border-radius 16}} :border-radius 16}}
props) props)
[rn/view {:flex 1} [rn/view {:style style/detail-container}
[rn/view (style/list-info-container) [rn/view (style/list-info-container)
[community-icon/community-icon [community-icon/community-icon
{:images community-icon} 32] {:images community-icon} 32]
@ -64,7 +64,8 @@
colors/neutral-40 colors/neutral-40
colors/neutral-60))}} colors/neutral-60))}}
name] name]
[community-view/community-stats-column :list-view]] [community-view/community-stats-column
{:type :list-view}]]
(if (= status :gated) (if (= status :gated)
[community-view/permission-tag-container [community-view/permission-tag-container
{:locked? locked? {:locked? locked?

7
src/quo2/components/community/community_view.cljs
View File

@ -5,6 +5,7 @@
[quo2.components.tags.permission-tag :as permission] [quo2.components.tags.permission-tag :as permission]
[quo2.components.tags.tag :as tag] [quo2.components.tags.tag :as tag]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo.gesture-handler :as gesture-handler] ;;TODO move to quo2
[react-native.core :as rn])) [react-native.core :as rn]))
(defn community-stats (defn community-stats
@ -23,7 +24,7 @@
members-count]]) members-count]])
(defn community-stats-column (defn community-stats-column
[type] [{:keys [type]}]
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)] (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
[rn/view [rn/view
(if (= type :card-view) (if (= type :card-view)
@ -41,7 +42,9 @@
(defn community-tags (defn community-tags
[tags] [tags]
[rn/view (style/community-tags-container) [gesture-handler/scroll-view
{:shows-horizontal-scroll-indicator false
:horizontal true}
(for [{:keys [name emoji]} tags] (for [{:keys [name emoji]} tags]
^{:key name} ^{:key name}
[rn/view {:margin-right 8} [rn/view {:margin-right 8}

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

@ -22,6 +22,9 @@
colors/white colors/white
colors/neutral-90)}) colors/neutral-90)})
(def detail-container
{:flex 1})
(defn stats-count-container (defn stats-count-container
[] []
{:flex-direction :row {:flex-direction :row
@ -37,10 +40,6 @@
{:flex-direction :row {:flex-direction :row
:align-items :center}) :align-items :center})
(defn community-tags-container
[]
{:flex-direction :row})
(defn card-stats-position (defn card-stats-position
[] []
{:position :absolute {:position :absolute
@ -62,7 +61,7 @@
:bottom 0 :bottom 0
:left 0 :left 0
:right 0 :right 0
:height 20 :border-radius 20
:padding-horizontal padding-horizontal :padding-horizontal padding-horizontal
:border-top-right-radius 16 :border-top-right-radius 16
:border-top-left-radius 16 :border-top-left-radius 16

9
src/status_im2/contexts/communities/discover/style.cljs
View File

@ -22,10 +22,11 @@
(def featured-list-container (def featured-list-container
{:flex-direction :row {:flex-direction :row
:overflow :hidden :overflow :hidden})
:margin-bottom 24
:margin-left 20 (def flat-list-container
:padding-right 20}) {:padding-bottom 24
:padding-horizontal 20})
(def other-communities-container (def other-communities-container
{:flex 1 {:flex 1

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

@ -4,12 +4,12 @@
[quo2.core :as quo] [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.communities.menus.community-options.view :as options] [status-im2.contexts.communities.menus.community-options.view :as options]
[status-im.ui.screens.communities.community :as community] [status-im.ui.screens.communities.community :as community]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[react-native.platform :as platform]
[status-im2.common.scroll-page.view :as scroll-page] [status-im2.common.scroll-page.view :as scroll-page]
[status-im2.contexts.communities.discover.style :as style] [status-im2.contexts.communities.discover.style :as style]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
@ -22,7 +22,7 @@
:group [{:id 1 :group [{:id 1
:token-icon (resources/get-mock-image :status-logo)}]}]}}) :token-icon (resources/get-mock-image :status-logo)}]}]}})
(defn render-fn (defn community-list-item
[community-item _ _ {:keys [width view-type]}] [community-item _ _ {:keys [width view-type]}]
(let [item (merge community-item (let [item (merge community-item
(get mock-community-item-data :data)) (get mock-community-item-data :data))
@ -98,18 +98,20 @@
{:style style/featured-list-container {:style style/featured-list-container
:on-layout #(swap! view-size :on-layout #(swap! view-size
(fn [] (fn []
(- (oops/oget % "nativeEvent.layout.width") 20)))} (- (oops/oget % "nativeEvent.layout.width") 40)))}
(when-not (= @view-size 0) (when-not (= @view-size 0)
[rn/flat-list [rn/flat-list
{:key-fn :id {:key-fn :id
:horizontal true :horizontal true
:keyboard-should-persist-taps :always :keyboard-should-persist-taps :always
:shows-horizontal-scroll-indicator false :shows-horizontal-scroll-indicator false
:nestedScrollEnabled true
:separator [rn/view {:width 12}] :separator [rn/view {:width 12}]
:data communities :data communities
:render-fn render-fn :render-fn community-list-item
:render-data {:width @view-size :render-data {:width @view-size
:view-type view-type}}])]))) :view-type view-type}
:content-container-style style/flat-list-container}])])))
(defn discover-communities-header (defn discover-communities-header
[{:keys [featured-communities-count [{:keys [featured-communities-count
@ -120,7 +122,7 @@
[screen-title] [screen-title]
[featured-communities-header featured-communities-count] [featured-communities-header featured-communities-count]
[featured-list featured-communities view-type] [featured-list featured-communities view-type]
[quo/separator] [quo/separator {:style {:margin-horizontal 20}}]
[discover-communities-segments selected-tab false]]) [discover-communities-segments selected-tab false]])
(defn other-communities-list (defn other-communities-list
@ -131,14 +133,16 @@
(let [community-id (when communities-ids item) (let [community-id (when communities-ids item)
community (if communities community (if communities
item item
[rf/sub [:communities/home-item community-id]])] (rf/sub [:communities/home-item community-id]))
cover {:uri (get-in (:images item) [:banner :uri])}]
[rn/view [rn/view
{:key (str inner-index (:id community)) {:key (str inner-index (:id community))
:margin-bottom 16} :margin-bottom 16}
(if (= view-type :card-view) (if (= view-type :card-view)
[quo/community-card-view-item [quo/community-card-view-item
(merge community (merge community
(get mock-community-item-data :data)) (get mock-community-item-data :data)
{:cover cover})
#(rf/dispatch [:navigate-to :community-overview (:id community)])] #(rf/dispatch [:navigate-to :community-overview (:id community)])]
[quo/communities-list-view-item [quo/communities-list-view-item
{:on-press (fn [] {:on-press (fn []

2
src/status_im2/contexts/quo_preview/tags/tag.cljs
View File

@ -83,7 +83,7 @@
(:labelled? @state)) (:labelled? @state))
:resource (if (= :emoji (:type @state)) :resource (if (= :emoji (:type @state))
(resources/get-image :music) (resources/get-image :music)
:main-icons2/placeholder)})]]]]]))) :i/placeholder)})]]]]])))
(defn preview-tag (defn preview-tag
[] []
[rn/view [rn/view