fix(communities): Stats not shown in discover page

Author: ulisesmac

src/quo/components/community/community_card_view.cljs

@@ -55,18 +55,19 @@
         [rn/view (style/card-view-chat-icon 48 theme)
          [icon/community-icon {:images images} 48]]
         (when (= status :gated)
-          [rn/view (style/permission-tag-styles)
+          [rn/view style/permission-tag-styles
            [community-view/permission-tag-container
             {:locked? locked?
              :status  status
              :tokens  tokens}]])
         [community-view/community-title
          {:title       name
           :description description}]
-        [rn/view {:style (style/card-stats-position)}
-         [community-view/community-stats-column
-          {:type :card-view}]]
-        [rn/view {:style (style/community-tags-position)}
+        [rn/view {:style style/card-stats-position}
+         [community-view/community-stats-column {:type                 :card-view
+                                                 :members-count        (:members-count community)
+                                                 :active-members-count (:active-members-count community)}]]
+        [rn/view {:style style/community-tags-position}
          [community-view/community-tags {:tags tags}]]]]]]))
 
 (defn view

src/quo/components/community/community_list_view.cljs

@@ -60,7 +60,7 @@
              :style          {:border-radius 12
                               :margin-left   12}}
             props)
-     [rn/view (merge (style/membership-info-container) style)
+     [rn/view (merge style/membership-info-container style)
       [community-icon/community-icon
        {:images images} 32]
       [rn/view

src/quo/components/community/community_view.cljs

@@ -11,11 +11,8 @@
     [react-native.gesture :as gesture]))
 
 (defn community-stats-column
-  [{:keys [type members-count active-count]}]
-  [rn/view
-   (if (= type :card-view)
-     (style/card-stats-container)
-     (style/list-stats-container))
+  [{:keys [type members-count active-members-count]}]
+  [rn/view (if (= type :card-view) style/card-stats-container style/list-stats-container)
    [community-stat/view
     {:accessibility-label :stats-members-count
      :icon                :i/group
@@ -24,7 +21,7 @@
    [community-stat/view
     {:accessibility-label :stats-active-count
      :icon                :i/active-members
-     :value               active-count}]])
+     :value               active-members-count}]])
 
 (defn community-tags
   [{:keys [tags container-style last-item-style]}]

src/quo/components/community/style.cljs

@@ -17,24 +17,20 @@
 (def detail-container
   {:flex 1})
 
-(defn card-stats-container
-  []
+(def card-stats-container
   {:flex-direction :row})
 
-(defn list-stats-container
-  []
+(def list-stats-container
   {:flex-direction :row
    :align-items    :center})
 
-(defn card-stats-position
-  []
+(def card-stats-position
   {:position :absolute
    :top      116
    :right    12
    :left     12})
 
-(defn community-tags-position
-  []
+(def community-tags-position
   {:position :absolute
    :top      154
    :right    12
@@ -68,8 +64,7 @@
                       colors/neutral-90
                       theme)})
 
-(defn membership-info-container
-  []
+(def membership-info-container
   {:flex-direction :row
    :border-radius  16
    :align-items    :center
@@ -87,8 +82,7 @@
    :border-top-left-radius  20
    :background-color        colors/primary-50-opa-20})
 
-(defn permission-tag-styles
-  []
+(def permission-tag-styles
   {:position :absolute
    :top      8
    :right    8})
@@ -146,10 +140,14 @@
    :background-color   (colors/theme-colors colors/white colors/neutral-90 theme)})
 
 (def loading-tags-container
-  {:margin-top 20 :flex-direction :row :align-items :center})
+  {:margin-top 20
+   :flex-direction :row
+   :align-items :center})
 
 (def loading-stats-container
-  {:margin-top 20 :flex-direction :row :align-items :center})
+  {:margin-top 20
+   :flex-direction :row
+   :align-items :center})
 
 (defn loading-stat-circle
   [theme margin-left]

src/status_im/contexts/communities/actions/leave/events.cljs

@@ -18,7 +18,8 @@
       :params      [{:id request-to-join-id}]
       :on-success  #(rf/dispatch [:communities/cancel-request-to-join-success %])
       :js-response true
-      :on-error    #(log/error "failed to cancel request to join community" request-to-join-id %)}]}))
+      :on-error    #(log/error "failed to cancel request to join community"
+                               request-to-join-id %)}]}))
 
 (rf/reg-event-fx :communities/left
  (fn [_ [response-js]]

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

@@ -34,8 +34,7 @@
 
 (defn screen-title
   []
-  [rn/view
-   {:style (style/screen-title-container (safe-area/get-top))}
+  [rn/view {:style (style/screen-title-container (safe-area/get-top))}
    [quo/text
     {:accessibility-label :communities-screen-title
      :weight              :semi-bold
@@ -95,14 +94,14 @@
 
 (defn featured-list
   [communities view-type]
-  (let [view-size (reagent/atom 0)
-        loaded?   (and communities (pos? (count communities)))]
+  (let [view-size     (reagent/atom 0)
+        set-view-size (fn [e]
+                        (reset! view-size (- (oops/oget e "nativeEvent.layout.width") 40)))
+        loaded?       (and communities (pos? (count communities)))]
     (fn []
       [rn/view
        {:style     style/featured-list-container
-        :on-layout #(swap! view-size
-                      (fn [_]
-                        (- (oops/oget % "nativeEvent.layout.width") 40)))}
+        :on-layout set-view-size}
        (when-not (= @view-size 0)
          [rn/flat-list
           {:key-fn                            :id
@@ -132,32 +131,27 @@
    [discover-communities-segments selected-tab false]])
 
 (defn other-communities-list
-  [{:keys [communities communities-ids view-type]}]
+  [{:keys [communities view-type]}]
   [rn/view {:style style/other-communities-container}
-   (if (and communities (pos? (count communities)))
-     (map-indexed
-      (fn [inner-index item]
-        (let [community-id (when communities-ids item)
-              community    (if communities
-                             item
-                             (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
-              {:community (assoc community :cover cover)
-               :on-press  #(rf/dispatch [:communities/navigate-to-community-overview (:id community)])}]
-
-             [quo/community-list
-              {:on-press      (fn []
-                                (rf/dispatch [:dismiss-keyboard])
-                                (rf/dispatch [:communities/navigate-to-community-overview
-                                              (:id community)]))
-               :on-long-press #(js/alert "TODO: to be implemented")}
-              community])]))
-      (if communities communities communities-ids))
+   (if (seq communities)
+     (map-indexed (fn [inner-index {community-id :id :as community}]
+                    (let [cover {:uri (-> community :images :banner :uri)}]
+                      [rn/view
+                       {:key   (str inner-index community-id)
+                        :style {:margin-bottom 16}}
+                       (if (= view-type :card-view)
+                         [quo/community-card-view-item
+                          {:community (assoc community :cover cover
+                                                       :members-count (count (:members community)))
+                           :on-press  #(rf/dispatch [:communities/navigate-to-community-overview community-id])}]
+                         [quo/community-list
+                          {:on-press      (fn []
+                                            (rf/dispatch [:dismiss-keyboard])
+                                            (rf/dispatch [:communities/navigate-to-community-overview
+                                                          community-id]))
+                           :on-long-press #(js/alert "TODO: to be implemented")}
+                          community])]))
+                  communities)
      [:<>
       [rn/view {:margin-bottom 16} [quo/community-card-view-item {:loading? true}]]
       [rn/view {:margin-bottom 16} [quo/community-card-view-item {:loading? true}]]
@@ -168,8 +162,8 @@
   [rn/view {:style {:flex 1}}
    (case @selected-tab
      :all
-     (other-communities-list {:communities (rf/sub [:communities/other-contract-communities])
-                              :view-type   view-type})
+     [other-communities-list {:communities (rf/sub [:communities/other-contract-communities])
+                              :view-type   view-type}]
 
      :open
      [:<>]
@@ -183,60 +177,53 @@
       (i18n/label :t/error)])])
 
 (defn render-communities
-  [selected-tab
-   featured-communities-count
-   featured-communities
-   view-type]
-  (fn []
-    [rn/view
-     [discover-communities-header
-      {:selected-tab               selected-tab
-       :view-type                  view-type
-       :featured-communities-count featured-communities-count
-       :featured-communities       featured-communities}]
-     [communities-lists selected-tab view-type]]))
+  [{:keys [selected-tab featured-communities-count featured-communities view-type]}]
+  [rn/view
+   [discover-communities-header
+    {:selected-tab               selected-tab
+     :view-type                  view-type
+     :featured-communities-count featured-communities-count
+     :featured-communities       featured-communities}]
+   [communities-lists selected-tab view-type]])
 
 (defn render-sticky-header
   [{:keys [selected-tab scroll-height]}]
-  (fn []
-    (when (> @scroll-height 360)
-      [rn/view
-       {:style (style/blur-tabs-header (safe-area/get-top))}
-       [discover-communities-segments selected-tab true]])))
+  (when (> @scroll-height 360)
+    [rn/view
+     {:style (style/blur-tabs-header (safe-area/get-top))}
+     [discover-communities-segments selected-tab true]]))
 
-(defn discover-screen-content
-  [featured-communities theme]
+(defn discover-screen-content []
   (let [view-type                  (reagent/atom :card-view)
         selected-tab               (reagent/atom :all)
-        scroll-height              (reagent/atom 0)
-        featured-communities-count (count featured-communities)]
+        scroll-height              (reagent/atom 0)]
     (fn []
-      [scroll-page/scroll-page
-       {:on-scroll        #(reset! scroll-height %)
-        :page-nav-props   {:background :blur}
-        :navigate-back?   :true
-        :height           (if (> @scroll-height 360)
-                            208
-                            148)
-        :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
-        :sticky-header    [render-sticky-header
-                           {:selected-tab  selected-tab
-                            :scroll-height scroll-height}]}
-
-       [render-communities
-        selected-tab
-        featured-communities-count
-        featured-communities
-        @view-type]])))
+      (let [theme                      (quo.theme/use-theme)
+            featured-communities       (rf/sub [:communities/featured-contract-communities])
+            featured-communities-count (count featured-communities)]
+        [scroll-page/scroll-page
+         {:on-scroll        #(reset! scroll-height %)
+          :page-nav-props   {:background :blur}
+          :navigate-back?   :true
+          :height           (if (> @scroll-height 360)
+                              208
+                              148)
+          :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
+          :sticky-header    [render-sticky-header
+                             {:selected-tab  selected-tab
+                              :scroll-height scroll-height}]}
+         [render-communities
+          {:selected-tab               selected-tab
+           :featured-communities-count featured-communities-count
+           :featured-communities       featured-communities
+           :view-type                  @view-type}]]))))
 
 (defn view
   []
-  (let [theme                (quo.theme/use-theme)
-        featured-communities (rf/sub [:communities/featured-contract-communities])]
+  (let [theme (quo.theme/use-theme)]
     (rn/use-mount #(rf/dispatch [:fetch-contract-communities]))
-    [rn/view
-     {:style (style/discover-screen-container (colors/theme-colors
-                                               colors/white
-                                               colors/neutral-95
-                                               theme))}
-     [discover-screen-content featured-communities theme]]))
+    [rn/view {:style (style/discover-screen-container (colors/theme-colors
+                                                       colors/white
+                                                       colors/neutral-95
+                                                       theme))}
+     [discover-screen-content]]))