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 (defn community-card-view-item
[{:keys [name description locked [{: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/touchable-opacity {:on-press on-press}
[rn/view {:style (merge (style/community-card 20) [rn/view {:style (style/community-card 20)}
{:margin-bottom 16} [rn/view {:style {:width width
(if featured :height 230
{:margin-right 12}
{:flex 1
:margin-horizontal 20}))}
[rn/view {:style {:height 230
:border-radius 20} :border-radius 20}
:on-press on-press} :on-press on-press}
[rn/view [rn/view

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

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