diff --git a/src/quo2/components/community/community_card_view.cljs b/src/quo2/components/community/community_card_view.cljs index 4d1a844b75..570a9dc9b2 100644 --- a/src/quo2/components/community/community_card_view.cljs +++ b/src/quo2/components/community/community_card_view.cljs @@ -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 diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index 1cc253fcca..ffe5182edb 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -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]])]))))