Fetching featured communities (#16829)

Featured communities updated from status-go signal
Community card skeleton now is a part of a component

src/quo2/components/community/community_card_view.cljs

@@ -2,15 +2,41 @@
   (:require [quo2.components.community.community-view :as community-view]
             [quo2.components.community.icon :as icon]
             [quo2.components.community.style :as style]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]))
 
-(defn community-card-view-item
+(defn- loading-card-view
-  [{:keys [name description locked images cover
+  [{:keys [width theme]}]
-           status tokens tags width]} on-press]
+  [rn/view {:style (style/loading-card width theme)}
+   [rn/view (style/loading-cover-container theme)]
+   [rn/view (style/loading-content-container theme)
+    [rn/view (style/loading-avatar theme)]
+    [rn/view (style/loading-lock theme)]
+    [rn/view
+     {:style style/loading-card-content-container}
+     [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}]
+     [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}]
+     [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]]
+    [rn/view
+     {:style style/loading-stats-container}
+     [rn/view {:style (style/loading-stat-circle theme 0)}]
+     [rn/view {:style (style/loading-stat-line theme 4)}]
+     [rn/view {:style (style/loading-stat-circle theme 12)}]
+     [rn/view {:style (style/loading-stat-line theme 4)}]]
+    [rn/view
+     {:style style/loading-tags-container}
+     [rn/view {:style (style/loading-tag theme 0)}]
+     [rn/view {:style (style/loading-tag theme 8)}]
+     [rn/view {:style (style/loading-tag theme 8)}]]]])
+
+(defn- community-card-view
+  [{:keys [community on-press width theme]}]
+  (let [{:keys [name description locked? images cover
+                status tokens tags]} community]
     [rn/touchable-without-feedback
      {:accessibility-label :community-card-item
       :on-press            on-press}
-   [rn/view {:style (style/community-card 20)}
+     [rn/view {:style (style/community-card 20 theme)}
       [rn/view
        {:style    {:width         width
                    :height        230
@@ -23,13 +49,13 @@
            :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-content-container 12 theme)
-       [rn/view (style/card-view-chat-icon 48)
+         [rn/view (style/card-view-chat-icon 48 theme)
           [icon/community-icon {:images images} 48]]
          (when (= status :gated)
            [rn/view (style/permission-tag-styles)
             [community-view/permission-tag-container
-           {:locked locked
+             {:locked? locked?
               :status  status
               :tokens  tokens}]])
          [community-view/community-title
@@ -39,4 +65,12 @@
           [community-view/community-stats-column
            {:type :card-view}]]
          [rn/view {:style (style/community-tags-position)}
-        [community-view/community-tags {:tags tags}]]]]]]])
+          [community-view/community-tags {:tags tags}]]]]]]]))
+
+(defn- internal-view
+  [{:keys [loading?] :as props}]
+  (if-not loading?
+    [community-card-view props]
+    [loading-card-view props]))
+
+(def view (quo.theme/with-theme internal-view))

src/quo2/components/community/community_list_view.cljs

@@ -46,7 +46,7 @@
            community-icon
            tokens]}]
   [rn/view
-   {:style (merge (style/community-card 16)
+   {:style (merge (style/community-card 16 theme)
                   {:margin-bottom 12})}
    [rn/touchable-highlight
     (merge {:style {:height        56

src/quo2/components/community/style.cljs

@@ -1,8 +1,9 @@
 (ns quo2.components.community.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [quo2.foundations.shadows :as shadows]))
 
 (defn community-card
-  [radius]
+  [radius theme]
   {:shadow-offset    {:width  0
                       :height 2}
    :shadow-radius    radius
@@ -13,7 +14,8 @@
    :justify-content  :space-between
    :background-color (colors/theme-colors
                       colors/white
-                      colors/neutral-90)})
+                      colors/neutral-90
+                      theme)})
 
 (def detail-container
   {:flex 1})
@@ -48,7 +50,7 @@
    :left     12})
 
 (defn card-view-content-container
-  [padding-horizontal]
+  [padding-horizontal theme]
   {:position                :absolute
    :top                     40
    :bottom                  0
@@ -60,10 +62,11 @@
    :border-top-left-radius  16
    :background-color        (colors/theme-colors
                              colors/white
-                             colors/neutral-90)})
+                             colors/neutral-90
+                             theme)})
 
 (defn card-view-chat-icon
-  [icon-size]
+  [icon-size theme]
   {:border-radius    48
    :position         :absolute
    :top              (- (/ icon-size 2))
@@ -71,7 +74,8 @@
    :padding          2
    :background-color (colors/theme-colors
                       colors/white
-                      colors/neutral-90)})
+                      colors/neutral-90
+                      theme)})
 
 (defn list-info-container
   []
@@ -120,21 +124,23 @@
      {:padding-horizontal 12})))
 
 (defn token-row-or-text
-  [padding?]
+  [padding? theme]
   (merge
    {:margin-top 4
     :color      (colors/theme-colors
                  colors/neutral-50
-                 colors/neutral-40)}
+                 colors/neutral-40
+                 theme)}
    (when padding?
      {:padding-left 12})))
 
 (defn token-row-or-border
-  []
+  [theme]
   {:height           1
    :background-color (colors/theme-colors
                       colors/neutral-20
-                      colors/neutral-80)})
+                      colors/neutral-80
+                      theme)})
 
 (defn channel-action-touch
   [big?]
@@ -154,3 +160,95 @@
   {:flex-direction  :row
    :justify-content :space-between
    :align-items     :center})
+
+(defn loading-card
+  [width theme]
+  (merge
+   {:width            width
+    :height           230
+    :border-radius    16
+    :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}
+   (shadows/get 2 theme)))
+
+(defn loading-avatar
+  [theme]
+  {:width            48
+   :height           48
+   :border-radius    24
+   :position         :absolute
+   :top              -24
+   :left             12
+   :background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme)
+   :border-color     (colors/theme-colors colors/white colors/neutral-90 theme)
+   :border-width     2})
+
+(defn loading-lock
+  [theme]
+  {:width            48
+   :height           24
+   :border-radius    20
+   :position         :absolute
+   :top              8
+   :right            8
+   :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
+
+
+(defn loading-cover-container
+  [theme]
+  {:flex-direction          :row
+   :height                  64
+   :border-top-right-radius 16
+   :border-top-left-radius  16
+   :background-color        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
+
+(defn loading-content-container
+  [theme]
+  {:position           :absolute
+   :heigth             190
+   :top                40
+   :bottom             0
+   :left               0
+   :right              0
+   :padding-horizontal 12
+   :border-radius      16
+   :background-color   (colors/theme-colors colors/white colors/neutral-90 theme)})
+
+(def loading-tags-container
+  {:margin-top 20 :flex-direction :row :align-items :center})
+
+(def loading-stats-container
+  {:margin-top 20 :flex-direction :row :align-items :center})
+
+(defn loading-stat-circle
+  [theme margin-left]
+  {:height           14
+   :width            14
+   :border-radius    7
+   :background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme)
+   :margin-left      margin-left})
+
+(defn loading-stat-line
+  [theme margin-left]
+  {:height           12
+   :width            50
+   :border-radius    5
+   :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :margin-left      margin-left})
+
+(defn loading-tag
+  [theme margin-left]
+  {:height           24
+   :width            76
+   :border-radius    20
+   :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
+   :margin-left      margin-left})
+
+(defn loading-content-line
+  [{:keys [theme width margin-top]}]
+  {:width            width
+   :height           16
+   :background-color (colors/theme-colors colors/neutral-20 colors/neutral-70 theme)
+   :border-radius    5
+   :margin-top       margin-top})
+
+(def loading-card-content-container {:margin-top 36})

src/quo2/components/community/token_gating.cljs

@@ -4,6 +4,7 @@
             [react-native.core :as rn]
             [utils.i18n :as i18n]
             [clojure.string :as string]
+            [quo2.theme :as quo.theme]
             [quo2.components.community.style :as style]))
 
 (defn token-requirement-list-row
@@ -25,8 +26,8 @@
                         :img-src     img-src}]]))
                  tokens))])
 
-(defn token-requirement-list
+(defn- internal-view
-  [{:keys [tokens padding?]}]
+  [{:keys [tokens padding? theme]}]
   [:<>
    (if (> (count tokens) 1)
      (doall
@@ -35,11 +36,13 @@
          ^{:key token-requirement-index}
          [rn/view {:margin-bottom 12}
           (when-not (= token-requirement-index 0)
-            [rn/view {:style (style/token-row-or-border)}])
+            [rn/view {:style (style/token-row-or-border theme)}])
           (when-not (= token-requirement-index 0)
             [text/text
-             {:style (style/token-row-or-text padding?)
+             {:style (style/token-row-or-text padding? theme)
               :size  :label} (string/lower-case (i18n/label :t/or))])
           [token-requirement-list-row tokens padding?]])
        tokens))
      [token-requirement-list-row (first tokens) padding?])])
+
+(def token-requirement-list (quo.theme/with-theme internal-view))

src/quo2/core.cljs

@@ -148,7 +148,7 @@
 (def picker-colors quo2.components.colors.color-picker.view/picker-colors)
 
 ;;;; COMMUNITY
-(def community-card-view-item quo2.components.community.community-card-view/community-card-view-item)
+(def community-card-view-item quo2.components.community.community-card-view/view)
 (def communities-membership-list-item
   quo2.components.community.community-list-view/communities-membership-list-item)
 (def community-stats-column quo2.components.community.community-view/community-stats-column)

src/status_im/signals/core.cljs

@@ -11,7 +11,8 @@
             [status-im2.constants :as constants]
             [quo2.foundations.colors :as colors]
             [status-im2.contexts.profile.login.events :as profile.login]
-            [utils.transforms :as transforms]))
+            [utils.transforms :as transforms]
+            [status-im2.contexts.communities.discover.events]))
 
 (rf/defn summary
   [{:keys [db] :as cofx} peers-summary]
@@ -139,6 +140,10 @@
       "status.updates.timedout"    (visibility-status-updates/handle-visibility-status-updates
                                     cofx
                                     (js->clj event-js :keywordize-keys true))
-      "localPairing"            (handle-local-pairing-signals cofx
+      "localPairing"               (handle-local-pairing-signals
+                                    cofx
                                     (js->clj event-js :keywordize-keys true))
+      "curated.communities.update" (rf/dispatch [:fetched-contract-communities
+                                                 (js->clj event-js :keywordize-keys true)])
+
       (log/debug "Event " type " not handled"))))

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

@@ -27,8 +27,10 @@
                      (get mock-community-item-data :data))
         cover {:uri (get-in (:images item) [:banner :uri])}]
     (if (= view-type :card-view)
-      [quo/community-card-view-item (assoc item :width width :cover cover)
+      [quo/community-card-view-item
-       #(rf/dispatch [:communities/navigate-to-community (:id item)])]
+       {:community (assoc item :cover cover)
+        :width     width
+        :on-press  #(rf/dispatch [:communities/navigate-to-community (:id item)])}]
       [quo/community-list-item
        {:on-press      (fn []
                          (rf/dispatch [:communities/load-category-states (:id item)])
@@ -88,9 +90,18 @@
                        :label               (i18n/label :t/gated)
                        :accessibility-label :gated-communities-tab}]}]])
 
+(defn loading-community-item
+  [_ _ _ {:keys [width]}]
+  [quo/community-card-view-item
+   {:width    width
+    :loading? true}])
+
+(def loading-instances-to-show 3)
+
 (defn featured-list
   [communities view-type]
-  (let [view-size (reagent/atom 0)]
+  (let [view-size (reagent/atom 0)
+        loaded?   (and communities (pos? (count communities)))]
     (fn []
       [rn/view
        {:style     style/featured-list-container
@@ -105,8 +116,8 @@
            :shows-horizontal-scroll-indicator false
            :nestedScrollEnabled               true
            :separator                         [rn/view {:width 12}]
-           :data                              communities
+           :data                              (if loaded? communities (range loading-instances-to-show))
-           :render-fn                         community-list-item
+           :render-fn                         (if loaded? community-list-item loading-community-item)
            :render-data                       {:width     @view-size
                                                :view-type view-type}
            :content-container-style           style/flat-list-container}])])))
@@ -126,6 +137,7 @@
 (defn other-communities-list
   [{:keys [communities communities-ids 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)
@@ -138,10 +150,11 @@
             :margin-bottom 16}
            (if (= view-type :card-view)
              [quo/community-card-view-item
-            (merge community
+              {:community (merge community
                                  (get mock-community-item-data :data)
                                  {:cover cover})
-            #(rf/dispatch [:communities/navigate-to-community (:id community)])]
+               :on-press  #(rf/dispatch [:communities/navigate-to-community (:id community)])}]
+
              [quo/community-list-item
               {:on-press      (fn []
                                 (rf/dispatch [:communities/load-category-states (:id community)])
@@ -150,7 +163,11 @@
                :on-long-press #(js/alert "TODO: to be implemented")}
               (merge community
                      (get mock-community-item-data :data))])]))
-    (if communities communities communities-ids))])
+      (if communities communities communities-ids))
+     [:<>
+      [rn/view {:margin-bottom 16} [quo/community-card-view-item {:loading? true}]]
+      [rn/view {:margin-bottom 16} [quo/community-card-view-item {:loading? true}]]
+      [quo/community-card-view-item {:loading? true}]])])
 
 (defn communities-lists
   [selected-tab view-type]

src/status_im2/contexts/profile/login/events.cljs

@@ -13,7 +13,6 @@
     [status-im.notifications.core :as notifications]
     [status-im2.config :as config]
     [status-im.data-store.settings :as data-store.settings]
-    [status-im2.contexts.communities.discover.events :as contract-communities]
     [status-im.communities.core :as communities]
     [status-im2.common.log :as logging]
     [status-im2.contexts.shell.activity-center.events :as activity-center]
@@ -87,7 +86,6 @@
                      (re-frame/dispatch [:profile.login/get-chats-callback]))})
               (profile.config/get-node-config)
               (communities/fetch)
-              (contract-communities/fetch-contract-communities)
               (communities/fetch-collapsed-community-categories)
               (communities/check-and-delete-pending-request-to-join)
               (logging/set-log-level (:log-level settings))

src/status_im2/contexts/quo_preview/community/community_card_view.cljs

@@ -17,13 +17,15 @@
    :community-icon (resources/get-mock-image :status-logo)
    :color (rand-nth quo.colors/chat-colors)
    :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]
-   :tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
+   :tags [{:id        1
+           :tag-label (i18n/label :t/music)
+           :emoji     (resources/get-image :music)}
           {:id        2
            :tag-label (i18n/label :t/lifestyle)
-           :resource  (resources/get-image :lifestyle)}
+           :emoji     (resources/get-image :lifestyle)}
           {:id        3
            :tag-label (i18n/label :t/podcasts)
-           :resource  (resources/get-image :podcasts)}]})
+           :emoji     (resources/get-image :podcasts)}]})
 
 (def descriptor
   [{:label   "Status:"
@@ -33,14 +35,18 @@
                :value "Gated"}
               {:key   :open
                :value "Open"}]}
-   {:label "Locked:"
+   {:label "Locked?"
     :key   :locked?
+    :type  :boolean}
+   {:label "Loading?"
+    :key   :loading?
     :type  :boolean}])
 
 (defn cool-preview
   []
   (let [state (reagent/atom {:status   :gated
-                             :locked? true})]
+                             :locked?  true
+                             :loading? false})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}
@@ -51,7 +57,9 @@
         [rn/view
          {:padding-vertical 60
           :justify-content  :center}
-         [community-card-view/community-card-view-item (merge @state community-data)]]]])))
+         [community-card-view/view
+          {:community (merge @state community-data)
+           :loading?  (:loading? @state)}]]]])))
 
 (defn preview-community-card
   []

status-go-version.json

@@ -3,7 +3,7 @@
     "_comment": "Instead use: scripts/update-status-go.sh <rev>",
     "owner": "status-im",
     "repo": "status-go",
-    "version": "v0.162.14",
+    "version": "v0.162.15",
-    "commit-sha1": "60143556ff942e24f4641dc741049e8ad4fef619",
+    "commit-sha1": "363494f6e48e310936d5de9b11bf7e7682fd2d4b",
-    "src-sha256": "0b8rk8v9fmsf36611c3frzdgq6y09pzy83h4zbz50fccphzrcxcf"
+    "src-sha256": "19qamr372k586v574zf9a84rgvx6vg59xmaacj0s6g7rr88kziil"
 }