status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-24 16:48:45 +00:00
Code Issues Projects Releases Wiki Activity

feat: add community overview page (#13945)

Browse Source
This commit is contained in:
Jamie Caprani 2022-09-08 12:10:03 +01:00 committed by GitHub
parent 079074abde
commit 28963acb09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 138 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui/coinbase-community-background@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
resources/images/ui/coinbase_community-background@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

78
src/quo2/components/community/community_card_view.cljs
View File

@ -1,49 +1,45 @@
(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 [>evt <sub]]
[status-im.utils.handlers :refer [<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
status tokens cover tags featured] :as community}]
(defn community-card-view-item
[{:keys [name description locked
status tokens cover tags featured] :as community} on-press]
(let [width (* (<sub [:dimensions/window-width]) 0.90)]
[react/view {:style (merge (styles/community-card 20)
{:margin-bottom 16}
(if featured
{:margin-right 12
:width width}
{:flex 1
:margin-horizontal 20}))}
[react/view {:style {:height 230
:border-radius 20}
:on-press (fn []
(>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)
[react/image
{:source cover
:style
{:flex 1
:border-radius 20}}]]
[react/view (styles/card-view-content-container 12)
[react/view (styles/card-view-chat-icon 48)
[communities.icon/community-icon-redesign community 48]]
(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
:description description}]
[community-view/community-stats-column :card-view]
[community-view/community-tags tags]]]]]))
[react/touchable-opacity {:on-press on-press}
[react/view {:style (merge (styles/community-card 20)
{:margin-bottom 16}
(if featured
{:margin-right 12
:width width}
{:flex 1
:margin-horizontal 20}))}
[react/view {:style {:height 230
:border-radius 20}
:on-press on-press}
[react/view
{:flex 1}
[react/view (styles/community-cover-container 40)
[react/image
{:source cover
:style
{:flex 1
:border-radius 20}}]]
[react/view (styles/card-view-content-container 12)
[react/view (styles/card-view-chat-icon 48)
[communities.icon/community-icon-redesign community 48]]
(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
:description description}]
[community-view/community-stats-column :card-view]
[community-view/community-tags tags]]]]]]))

15
src/status_im/subs.cljs
View File

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

2
src/status_im/switcher/home_stack.cljs
View File

@ -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])])]))

25
src/status_im/ui/screens/communities/communities_list_redesign.cljs
View File

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

67
src/status_im/ui/screens/communities/community_overview_redesign.cljs Normal file
View File

@ -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]]))

5
src/status_im/ui/screens/screens.cljs
View File

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

1
translations/en.json
View File

@ -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",