Fix: logo and community image banner not showing

https://github.com/status-im/status-go/compare/4d705ce1...6b1cac69

src/quo2/components/community/community_card_view.cljs

@@ -16,15 +16,13 @@
                  :height        230
                  :border-radius 20}
       :on-press on-press}
-     [rn/view
+     [rn/view {:flex 1}
-      {:flex 1}
       [rn/view (style/community-cover-container 60)
        [rn/image
         {: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-chat-icon 48)
         [icon/community-icon {:images images} 48]]
@@ -38,7 +36,8 @@
         {: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]]]]]]])
 

src/quo2/components/community/community_list_view.cljs

@@ -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?

src/quo2/components/community/community_view.cljs

@@ -23,7 +23,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)
@@ -46,11 +46,12 @@
      ^{:key name}
      [rn/view {:margin-right 8}
       [tag/tag
-       {:size      24
+       {:size        24
-        :label     name
+        :label       name
-        :type      :emoji
+        :type        :emoji
-        :labelled? true
+        :labelled?   true
-        :resource  emoji}]])])
+        :scrollable? true
+        :resource    emoji}]])])
 
 (defn community-title
   [{:keys [title description size] :or {size :small}}]

src/quo2/components/community/style.cljs

@@ -62,7 +62,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

src/status_im/utils/money.cljs

@@ -225,8 +225,12 @@
 
 (defn format-members
   [count]
-  (if (> count 1000000)
+  (cond
+    (> count 1000000)
     (str (with-precision (/ count 1000000) 1) (i18n/label :t/M))
-    (if (and (> count 999) (< count 1000000))
+
-      (str (with-precision (/ count 1000) 1) (i18n/label :t/K))
+    (< 999 count 1000000)
-      count)))
+    (str (with-precision (/ count 1000) 1) (i18n/label :t/K))
+
+    :else
+    count))

src/status_im2/common/scroll_page/view.cljs

@@ -89,7 +89,7 @@
 
 
 (defn display-picture
-  [scroll-height cover]
+  [scroll-height logo]
   (let [input-range (if platform/ios? [-67 10] [0 150])
         y           (reanimated/use-shared-value scroll-height)
         animation   (reanimated/interpolate y
@@ -104,7 +104,7 @@
     [reanimated/view
      {:style (style/display-picture-container animation)}
      [rn/image
-      {:source cover
+      {:source logo
        :style  style/display-picture}]]))
 
 (defn scroll-page
@@ -117,7 +117,7 @@
       [:<>
        [:f> scroll-page-header @scroll-height height name page-nav-right-section-buttons
         logo sticky-header top-nav title-colum navigate-back?]
-       [rn/scroll-view
+       [rn/flat-list
         {:content-container-style         (style/scroll-view-container
                                            (diff-with-max-min @scroll-height 16 0))
          :shows-vertical-scroll-indicator false
@@ -128,21 +128,25 @@
                                                                     event
                                                                     "nativeEvent.contentOffset.y")))
                                             (when on-scroll
-                                              (on-scroll @scroll-height)))}
+                                              (on-scroll @scroll-height)))
-        (when cover-image
+         :header                          [rn/view
-          [rn/view {:style {:height 151}}
+                                           (when cover-image
-           [rn/image
+                                             [rn/view {:style {:height 151}}
-            {:source cover-image
+                                              [rn/image
-             ;; Using negative margin-bottom as a workaround because on Android,
+                                               {:source cover-image
-             ;; ScrollView clips its children despite setting overflow: 'visible'.
+                                                ;; Using negative margin-bottom as a workaround because
-             ;; Related issue: https://github.com/facebook/react-native/issues/31218
+                                                ;; on Android,
-             :style  {:margin-bottom -16
+                                                ;; ScrollView clips its children despite setting
-                      :flex          1}}]])
+                                                ;; overflow: 'visible'.
-        (when children
+                                                ;; Related issue:
-          [rn/view
+                                                ;; https://github.com/facebook/react-native/issues/31218
-           {:flex             1
+                                                :style  {:margin-bottom -16
-            :border-radius    (diff-with-max-min @scroll-height 16 0)
+                                                         :flex          1}}]])
-            :background-color background-color}
+                                           (when children
-           (when cover-image
+                                             [rn/view
-             [:f> display-picture @scroll-height logo])
+                                              {:flex             1
-           children])]])))
+                                               :border-radius    (diff-with-max-min @scroll-height 16 0)
+                                               :background-color background-color}
+                                              (when cover-image
+                                                [:f> display-picture @scroll-height logo])
+                                              children])]}]])))

src/status_im2/contexts/communities/discover/style.cljs

@@ -22,10 +22,11 @@
 
 (def featured-list-container
   {: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
   {:flex              1

src/status_im2/contexts/communities/discover/view.cljs

@@ -7,7 +7,6 @@
             [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]
@@ -22,23 +21,28 @@
                              :group [{:id         1
                                       :token-icon (resources/get-mock-image :status-logo)}]}]}})
 
-(defn render-fn
+(defn community-list-item
-  [community-item _ _ {:keys [width view-type]}]
+  [{:keys [id] :as community} _ _ {:keys [width view-type]}]
-  (let [item  (merge community-item
+  (let [community-item (merge
-                     (get mock-community-item-data :data))
+                        community
-        cover {:uri (get-in (:images item) [:banner :uri])}]
+                        (get mock-community-item-data :data))
+        cover          {:uri (get-in (:images community) [:banner :uri])}]
     (if (= view-type :card-view)
-      [quo/community-card-view-item (assoc item :width width :cover cover)
+      [quo/community-card-view-item (assoc community-item :width width :cover cover)
-       #(rf/dispatch [:navigate-to :community-overview (:id item)])]
+       #(rf/dispatch [:navigate-to :community-overview (:id community)])]
       [quo/communities-list-view-item
        {:on-press      (fn []
-                         (rf/dispatch [:communities/load-category-states (:id item)])
+                         (rf/dispatch [:communities/load-category-states id])
                          (rf/dispatch [:dismiss-keyboard])
+<<<<<<< HEAD
                          (rf/dispatch [:navigate-to :community-overview (:id item)]))
+=======
+                         (rf/dispatch [:navigate-to :community {:community-id id}]))
+>>>>>>> 1675fef63 (Fix: community data not displayed)
         :on-long-press #(rf/dispatch
                          [:bottom-sheet/show-sheet
                           {:content (fn []
-                                      [options/community-options-bottom-sheet (:id item)])}])}])))
+                                      [options/community-options-bottom-sheet id])}])}])))
 
 (defn screen-title
   []
@@ -89,7 +93,6 @@
                        :label               (i18n/label :t/gated)
                        :accessibility-label :gated-communities-tab}]}]])
 
-
 (defn featured-list
   [communities view-type]
   (let [view-size (reagent/atom 0)]
@@ -98,7 +101,7 @@
        {: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
@@ -107,9 +110,22 @@
            :shows-horizontal-scroll-indicator false
            :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}
+           :contentContainerStyle             style/flat-list-container}])])))
+
+(defn other-communities-list
+  [{:keys [communities view-type]}]
+  [rn/view style/other-communities-container
+   [rn/flat-list
+    {:key-fn                       :id
+     :keyboard-should-persist-taps :always
+     :separator                    [rn/view {:height 16}]
+     :data                         communities
+     :render-fn                    community-list-item
+     :contentContainerStyle        style/flat-list-container
+     :render-data                  {:view-type view-type}}]])
 
 (defn discover-communities-header
   [{:keys [featured-communities-count
@@ -120,39 +136,10 @@
    [screen-title]
    [featured-communities-header featured-communities-count]
    [featured-list featured-communities view-type]
-   [quo/separator]
+   [rn/view {:style {:margin-horizontal 20}}
+    [quo/separator]]
    [discover-communities-segments selected-tab false]])
 
-(defn other-communities-list
-  [{:keys [communities communities-ids view-type]}]
-  [rn/view {:style style/other-communities-container}
-   (map-indexed
-    (fn [inner-index item]
-      (let [community-id (when communities-ids item)
-            community    (if communities
-                           item
-                           [rf/sub [:communities/home-item community-id]])]
-        [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))
-            #(rf/dispatch [:navigate-to :community-overview (:id community)])]
-           [quo/communities-list-view-item
-            {:on-press      (fn []
-                              (rf/dispatch [:communities/load-category-states (:id community)])
-                              (rf/dispatch [:dismiss-keyboard])
-                              (rf/dispatch [:navigate-to :community-overview (:id community)]))
-             :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
-                                           {:content (fn []
-                                                       ;; TODO implement with quo2
-                                                       [community/community-actions community])}])}
-            (merge community
-                   (get mock-community-item-data :data))])]))
-    (if communities communities communities-ids))])
-
 (defn communities-lists
   [selected-tab view-type]
   [rn/view {:style {:flex 1}}