Update communities discover screen

* Fix: discover communities missing data

* made community tags scrollable

Author: jo-mut

Diff for: src/quo2/components/community/community_card_view.cljs

@@ -16,15 +16,13 @@
                  :height        230
                  :border-radius 20}
       :on-press on-press}
-     [rn/view
-      {:flex 1}
+     [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}}]]
+         :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]]
@@ -38,7 +36,7 @@
         {:title       name
          :description description}]
        [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)}
         [community-view/community-tags tags]]]]]]])
-

Diff for: src/quo2/components/community/community_list_view.cljs

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

Diff for: src/quo2/components/community/community_view.cljs

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

Diff for: src/quo2/components/community/style.cljs

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

Diff for: src/status_im2/contexts/communities/discover/style.cljs

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

Diff for: src/status_im2/contexts/communities/discover/view.cljs

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

Diff for: src/status_im2/contexts/quo_preview/tags/tag.cljs

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