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

fix: adjust community cards on discover page (#14444) 

fix: adjust community cards on discover page
This commit is contained in:
Jamie Caprani 2022-11-30 09:58:44 +00:00 committed by GitHub
parent 1000cb79a2
commit d948939ce3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 88 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,15 +6,11 @@
(defn community-card-view-item
[{:keys [name description locked
status tokens cover tags featured]} on-press]
status tokens cover tags width]} on-press]
[rn/touchable-opacity {:on-press on-press}
[rn/view {:style (merge (style/community-card 20)
{:margin-bottom 16}
(if featured
{:margin-right 12}
{:flex 1
:margin-horizontal 20}))}
[rn/view {:style {:height 230
[rn/view {:style (style/community-card 20)}
[rn/view {:style {:width width
:height 230
:border-radius 20}
:on-press on-press}
[rn/view

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

@ -4,19 +4,14 @@
[react-native.safe-area :as safe-area]
[react-native.core :as rn]
[quo2.core :as quo]
[quo2.components.community.community-card-view :as community-card]
[quo2.components.community.community-list-view :as community-list]
[quo2.components.icon :as icons]
[quo2.foundations.colors :as colors]
[utils.re-frame :as rf]
[oops.core :as oops]
;; TODO move to status-im2
[status-im.react-native.resources :as resources]
[status-im.ui.screens.communities.community :as community]))
(def view-type (reagent/atom :card-view))
(def mock-community-item-data ;; TODO: remove once communities are loaded with this data.
(def mock-community-item-data ;; TODO: remove once communities are loaded with this data.
{:data {:community-color "#0052FF"
:status :gated
:locked? true
@ -34,13 +29,14 @@
:tag-label (i18n/label :t/podcasts)
:resource (resources/get-image :podcasts)}]}})
(defn render-other-fn [community-item]
(defn render-fn
[community-item _ _ {:keys [featured? width view-type]}]
(let [item (merge community-item
(get mock-community-item-data :data)
{:featured false})]
(if (= @view-type :card-view)
[community-card/community-card-view-item item #(rf/dispatch [:navigate-to :community-overview item])]
[community-list/communities-list-view-item
{:featured featured?})]
(if (= view-type :card-view)
[quo/community-card-view-item (assoc item :width width) #(rf/dispatch [:navigate-to :community-overview item])]
[quo/communities-list-view-item
{:on-press (fn []
(rf/dispatch [:communities/load-category-states (:id item)])
(rf/dispatch [:dismiss-keyboard])
@ -51,88 +47,94 @@
[community/community-actions item])}])}
item])))
(defn render-featured-fn [community-item]
(let [item (merge community-item
(get mock-community-item-data :data)
{:featured true})]
[community-card/community-card-view-item item #(rf/dispatch [:navigate-to :community-overview item])]))
(defn get-item-layout-js [_ index]
#js {:length 64 :offset (* 64 index) :index index})
(defn screen-title []
[rn/view
{:height 56
:padding-vertical 12
:padding-horizontal 20}
:padding-vertical 12}
[quo/text {:accessibility-label :communities-screen-title
:weight :semi-bold
:size :heading-1}
(i18n/label :t/discover-communities)]])
(defn featured-communities [communities]
(defn featured-communities-header [communities-count]
[rn/view {:flex-direction :row
:height 30
:margin-bottom 8
:justify-content :space-between}
[rn/view {:flex-direction :row
:align-items :center}
[quo/text {:accessibility-label :featured-communities-title
:weight :semi-bold
:size :paragraph-1
:style {:margin-right 6}}
(i18n/label :t/featured)]
[quo/counter {:type :grey} communities-count]]
[quo/icon :i/info {:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:size 20
:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)}]])
(defn featured-list [communities view-type]
(let [view-size (reagent/atom 0)]
(fn []
[rn/view {:style {:flex-direction :row
:overflow :hidden
:width "100%"
:margin-bottom 24}
:on-layout #(swap! view-size
(fn []
(oops/oget % "nativeEvent.layout.width")))}
(when-not (= @view-size 0)
[rn/flat-list
{:key-fn :id
:horizontal true
:keyboard-should-persist-taps :always
:shows-horizontal-scroll-indicator false
:separator [rn/view {:width 12}]
:data communities
:render-fn render-fn
:render-data {:featured? true
:width @view-size
:view-type view-type}}])])))
(defn other-communities-list [communities view-type]
(println view-type)
[rn/flat-list
{:key-fn :id
:horizontal true
:getItemLayout get-item-layout-js
:keyboard-should-persist-taps :always
:shows-horizontal-scroll-indicator false
:separator [rn/view {:margin-bottom 16}]
:data communities
:render-fn render-featured-fn}])
(defn featured-communities-section [communities]
(let [count (reagent/atom {:value (count communities) :type :grey})]
[rn/view {:flex 1}
[rn/view {:flex-direction :row
:height 30
:padding-top 8
:justify-content :space-between
:padding-horizontal 20}
[rn/view {:flex-direction :row
:align-items :center}
[quo/text {:accessibility-label :featured-communities-title
:weight :semi-bold
:size :paragraph-1
:style {:margin-right 6}}
(i18n/label :t/featured)]
[quo/counter @count (:value @count)]]
[icons/icon :i/info {:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:size 20
:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)}]]
[rn/view {:margin-top 8
:padding-left 20}
[featured-communities communities]]]))
(defn other-communities []
(let [communities (rf/sub [:communities/communities])
;;TODO move sorting to subscription
sorted-communities (sort-by :name communities)]
[rn/flat-list
{:key-fn :id
:getItemLayout get-item-layout-js
:keyboard-should-persist-taps :always
:shows-horizontal-scroll-indicator false
:header (featured-communities-section communities)
:data sorted-communities
:render-fn render-other-fn}]))
:render-fn render-fn
:render-data {:featured? false
:width "100%"
:view-type view-type}}])
(defn discover []
[safe-area/consumer
(fn []
[rn/view {:style {:flex 1
:background-color (colors/theme-colors
colors/white
colors/neutral-90)}}
[quo/button {:icon true
:type :grey
:size 32
:style {:margin-vertical 12
:margin-left 20}
:on-press #(rf/dispatch [:navigate-back])}
:i/close]
[screen-title]
[other-communities]])])
(let [view-type (reagent/atom :card-view)]
(fn []
(let [communities (rf/sub [:communities/communities])
communities-count (count communities)
; TODO move sorting to subscription
sorted-communities (sort-by :name communities)]
[safe-area/consumer
(fn []
[rn/view {:style {:margin-left 20
:margin-right 20
:flex 1
:background-color (colors/theme-colors
colors/white
colors/neutral-90)}}
[quo/button {:icon true
:type :grey
:size 32
:style {:margin-vertical 12}
:on-press #(rf/dispatch [:navigate-back])}
:i/close]
[screen-title]
[featured-communities-header communities-count]
[featured-list communities @view-type]
[other-communities-list sorted-communities @view-type]])]))))