feat: add community overview page (#13945)

src/quo2/components/community/community_card_view.cljs

@@ -1,16 +1,16 @@
 (ns quo2.components.community.community-card-view
   (:require
    [quo2.components.community.community-view :as community-view]
-   [status-im.communities.core :as communities]
+   [status-im.utils.handlers :refer [<sub]]
-   [status-im.utils.handlers :refer [>evt <sub]]
    [status-im.ui.components.react :as react]
    [status-im.ui.screens.communities.styles :as styles]
-   [status-im.ui.screens.communities.community :as community]
    [status-im.ui.screens.communities.icon :as communities.icon]))
 
-(defn community-card-view-item [{:keys [id name description locked
+(defn community-card-view-item
-                                        status tokens cover tags featured] :as community}]
+  [{:keys [name description locked
+           status tokens cover tags featured] :as community} on-press]
   (let [width (* (<sub [:dimensions/window-width]) 0.90)]
+    [react/touchable-opacity {:on-press on-press}
      [react/view {:style (merge (styles/community-card 20)
                                 {:margin-bottom 16}
                                 (if featured
@@ -20,12 +20,7 @@
                                    :margin-horizontal 20}))}
       [react/view {:style         {:height          230
                                    :border-radius   20}
-                  :on-press      (fn []
+                   :on-press      on-press}
-                                   (>evt [::communities/load-category-states id])
-                                   (>evt [:dismiss-keyboard])
-                                   (>evt [:navigate-to :community {:community-id id}]))
-                  :on-long-press #(>evt [:bottom-sheet/show-sheet
-                                         {:content (fn [] [community/community-actions community])}])}
        [react/view
         {:flex 1}
         [react/view (styles/community-cover-container 40)
@@ -46,4 +41,5 @@
           {:title name
            :description description}]
          [community-view/community-stats-column :card-view]
-        [community-view/community-tags tags]]]]]))
+         [community-view/community-tags tags]]]]]]))
+

src/status_im/subs.cljs

@@ -347,6 +347,21 @@
           (sort-by #(get names (get % 0)))
           (sort-by #(visibility-status-utils/visibility-status-order (get % 0)))))))
 
+(re-frame/reg-sub
+ :communities/featured-communities
+ :<- [:communities/enabled?]
+ :<- [:search/home-filter]
+ :<- [:communities]
+ (fn [[communities-enabled? search-filter communities]]
+   (filterv
+    (fn [{:keys [name featured id]}]
+      (and (or featured (= name "Status")) ;; TO DO: remove once featured communities exist
+           (or communities-enabled?
+               (= id constants/status-community-id))
+           (or (empty? search-filter)
+               (string/includes? (string/lower-case (str name)) search-filter))))
+    (vals communities))))
+
 (re-frame/reg-sub
  :communities/communities
  :<- [:communities/enabled?]

src/status_im/switcher/home_stack.cljs

@@ -29,7 +29,7 @@
                                   :right            0
                                   :position         :absolute})}
         (case stack-id
-          :communities-stack [communities/views]
+          :communities-stack [communities/communities-list]
           :chats-stack       [home/home]
           :wallet-stack      [wallet.accounts/accounts-overview]
           :browser-stack     [profile.user/my-profile])])]))

src/status_im/ui/screens/communities/communities_list_redesign.cljs

@@ -18,7 +18,7 @@
             [status-im.multiaccounts.core :as multiaccounts]
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.components.plus-button :as plus-button]
-            [status-im.utils.handlers :refer [<sub]]
+            [status-im.utils.handlers :refer [<sub  >evt]]
             [status-im.ui.components.topnav :as topnav]
             [quo2.components.community.community-card-view :as community-card]
             [quo2.components.community.community-list-view :as community-list]
@@ -28,7 +28,7 @@
 (def view-type   (reagent/atom  :card-view))
 (def sort-list-by (reagent/atom :name))
 
-(def community-item-data
+(def mock-community-item-data ;; TO Do remove once communities are loaded with this data.
   {:data {:status          :gated
           :locked         true
           :cover          (resources/get-image :community-cover)
@@ -47,17 +47,17 @@
 
 (defn render-other-fn [community-item]
   (let [item (merge community-item
-                    (get community-item-data :data)
+                    (get mock-community-item-data :data)
                     {:featured       false})]
     (if (= @view-type :card-view)
-      [community-card/community-card-view-item item]
+      [community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]
       [community-list/communities-list-view-item item])))
 
 (defn render-featured-fn [community-item]
   (let [item (merge community-item
-                    (get community-item-data :data)
+                    (get mock-community-item-data :data)
                     {:featured       true})]
-    [community-card/community-card-view-item item]))
+    [community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]))
 
 (defn community-list-key-fn [item]
   (:id item))
@@ -101,7 +101,7 @@
 
 (defn featured-communities [communities]
   [list/flat-list
-   {:key-fn                            community-list-key-fn
+   {:key-fn                          str
     :horizontal                        true
     :getItemLayout                     get-item-layout-js
     :keyboard-should-persist-taps      :always
@@ -112,7 +112,7 @@
 (defn other-communities [communities sort-list-by]
   (let [sorted-communities (sort-by sort-list-by communities)]
     [list/flat-list
-     {:key-fn                            community-list-key-fn
+     {:key-fn                            str
       :getItemLayout                     get-item-layout-js
       :keyboard-should-persist-taps      :always
       :shows-horizontal-scroll-indicator false
@@ -133,7 +133,7 @@
       [other-communities communities sort-list-by])))
 
 (defn featured-communities-section [communities]
-  (let [count (reagent/atom {:value 2 :type :grey})]
+  (let [count (reagent/atom {:value (count communities) :type :grey})]
     [react/view {:flex         1}
      [react/view {:flex-direction  :row
                   :height          30
@@ -202,9 +202,10 @@
                                           quo2.colors/neutral-50
                                           quo2.colors/neutral-40)}]]]))
 
-(defn views []
+(defn communities-list []
   (let [multiaccount (<sub [:multiaccount])
-        communities  (<sub [:communities/communities])]
+        communities (<sub [:communities/communities])
+        featured-communities (<sub [:communities/featured-communities])]
     (fn []
       [safe-area/consumer
        (fn [insets]
@@ -228,7 +229,7 @@
           [title-column]
           [react/scroll-view
            [community-filter-tags]
-           [featured-communities-section communities]
+           [featured-communities-section featured-communities]
            (when communities
              [:<>
               [react/view {:margin-vertical    4

src/status_im/ui/screens/communities/community_overview_redesign.cljs

@@ -0,0 +1,67 @@
+(ns status-im.ui.screens.communities.community-overview-redesign
+  (:require  [status-im.i18n.i18n :as i18n]
+             [status-im.ui.components.react :as react]
+             [quo2.components.markdown.text :as quo2.text]
+             [quo2.components.buttons.button :as quo2.button]
+             [quo2.components.community.community-view :as community-view]
+             [status-im.utils.handlers :refer [<sub]]
+             [status-im.ui.screens.communities.styles :as styles]
+             [status-im.ui.screens.communities.icon :as communities.icon]))
+
+(defn preview-list-component []
+  [react/view {:style {:height 20 :margin-top 20}}
+   [quo2.text/text {:accessibility-label :communities-screen-title
+                    :weight              :semi-bold
+                    :size                :label}
+    "placeholder for preview list component"]])
+
+(defn channel-list-component []
+  [react/view {:style {:height 200 :margin-top 20}}
+   [quo2.text/text {:accessibility-label :communities-screen-title
+                    :weight              :semi-bold
+                    :size                :label}
+    "placeholder for channel list component"]])
+
+(defn community-card-page-view [{:keys [name description locked
+                                        status tokens cover tags] :as community}]
+  [react/view
+   {:style
+    {:height "100%"
+     :border-radius   20}}
+   [react/view (styles/community-cover-container  148)
+    [react/image
+     {:source      cover
+      :style  {:height 180
+               :flex 1}}]]
+   [react/view (styles/card-view-content-container 20)
+    [react/view (styles/card-view-chat-icon 80)
+     [communities.icon/community-icon-redesign community 80]]
+    (when (= status :gated)
+      [react/view (styles/permission-tag-styles)
+       [community-view/permission-tag-container
+        {:locked       locked
+         :status       status
+         :tokens       tokens}]])
+    [community-view/community-title
+     {:title name
+      :size :large
+      :description description}]
+    [community-view/community-stats-column :card-view]
+    [community-view/community-tags tags]
+    [preview-list-component]
+    [quo2.button/button
+     {:style
+      {:width "100%"
+       :margin-top 20
+       :margin-left :auto
+       :margin-right :auto}
+      :before :main-icons/community}
+     (i18n/label :join-open-community)]
+    [channel-list-component]]])
+
+(defn overview []
+  (let [community (<sub [:get-screen-params :community-overview])]
+    [react/view {:style {}}
+     [community-card-page-view
+      community]]))
+

src/status_im/ui/screens/screens.cljs

@@ -21,6 +21,7 @@
             [status-im.ui.screens.bug-report :as bug-report]
             [status-im.ui.screens.chat.pinned-messages :as pin-messages]
             [status-im.ui.screens.chat.views :as chat]
+            [status-im.ui.screens.communities.community-overview-redesign :as community-overview]
             [status-im.ui.screens.communities.channel-details :as communities.channel-details]
             [status-im.ui.screens.communities.community :as community]
             [status-im.ui.screens.communities.community-emoji-thumbnail-picker :as community-emoji-thumbnail-picker]
@@ -326,7 +327,9 @@
            {:name      :community-membership
             :options   {:topBar {:title {:text (i18n/label :t/membership-title)}}}
             :component membership/membership}
-
+           {:name      :community-overview
+            :options   {:topBar {:visible true}} ;; to do, replace with new top bar style
+            :component community-overview/overview}
            ;;BROWSER
 
            {:name      :empty-tab

translations/en.json

@@ -683,6 +683,7 @@
     "invalid-username-or-key": "Invalid username or chat key",
     "join-me": "Hey join me on Status: {{url}}",
     "join-a-community": "or join a community",
+    "join-open-community": "Join community",
     "http-gateway-error": "Oops, request failed!",
     "sign-request-failed": "Could not sign message",
     "invite-friends": "Invite friends",