status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: refactor communities code for reusabilty (#13921)

This commit is contained in:
Jamie Caprani 2022-09-05 23:39:12 +01:00 committed by GitHub
parent 409f81a6f5
commit 4a926a1943
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 233 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/quo2/components/communities/community_card_view.cljs Normal file
View File

@ -0,0 +1,49 @@
(ns quo2.components.communities.community-card-view
(:require
[quo2.components.communities.community-view :as community-view]
[status-im.communities.core :as communities]
[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
status tokens cover tags featured] :as community}]
(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]]]]]))

76
src/quo2/components/communities/community_list_view.cljs Normal file
View File

@ -0,0 +1,76 @@
(ns quo2.components.communities.community-list-view
(:require
[quo2.components.communities.community-view :as community-view]
[quo2.components.text :as text]
[quo2.foundations.colors :as colors]
[status-im.communities.core :as communities]
[status-im.utils.handlers :refer [>evt]]
[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 communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
[react/view {:style (merge (styles/community-card 16)
{:margin-bottom 12
:margin-horizontal 20})}
[react/view {:style {:height 56
:border-radius 16}
: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 {:flex-direction :row
:border-radius 16
:padding-horizontal 12
:align-items :center
:padding-vertical 8
:background-color background-color}
[react/view
[communities.icon/community-icon-redesign community 32]]
[react/view {:flex 1
:margin-horizontal 12}
[text/text {:weight :semi-bold
:size :paragraph-1
:accessibility-label :community-name-text
:number-of-lines 1
:ellipsize-mode :tail}
name]
[community-view/community-stats-column :list-view]]
(when (= status :gated)
[community-view/permission-tag-container {:locked locked
:status status
:tokens tokens}])]]]])
(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
[react/view {:margin-bottom 12
:padding-horizontal 8}
[react/touchable-highlight {:underlay-color colors/primary-50-opa-5
:style {:border-radius 12}
: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
:padding-vertical 8
:padding-horizontal 12}
[react/view {:flex-direction :row
:border-radius 16
:align-items :center}
[communities.icon/community-icon-redesign community 48]
[react/view {:margin-left 12
:flex 1}
[community-view/community-title {:title name}]]
(when (= status :gated)
[react/view {:justify-content :center
:margin-right 12}
[community-view/permission-tag-container {:locked locked
:status status
:tokens tokens}]])]]]])

86
src/quo2/components/communities/community_view.cljs Normal file
View File

@ -0,0 +1,86 @@
(ns quo2.components.communities.community-view
(:require
[quo2.components.text :as text]
[quo2.components.icon :as icons]
[quo2.foundations.colors :as colors]
[quo2.components.permission-tag :as permission]
[quo2.components.filter-tag :as filter-tag]
[status-im.ui.components.react :as react]
[status-im.utils.money :as money]
[status-im.i18n.i18n :as i18n]
[status-im.ui.screens.communities.styles :as styles]))
(defn format-members [count]
(if (> count 1000000)
(str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))
(if (and (> count 999) (< count 1000000))
(str (money/with-precision (/ count 1000) 1) (i18n/label :t/K))
count)))
(defn community-stats [{:keys [icon count icon-color]}]
[react/view (styles/stats-count-container)
[react/view {:margin-right 4}
[icons/icon icon {:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:size 16
:color icon-color}]]
[text/text {:weight :regular
:size :paragraph-1}
(format-members count)]])
(defn community-stats-column [type]
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
[react/view (if (= type :card-view)
(styles/card-stats-container)
(styles/list-stats-container))
[community-stats {:icon :main-icons2/group
:count "629.2K"
:icon-color icon-color}]
[community-stats {:icon :main-icons2/lightning
:count "112.1K"
:icon-color icon-color}]
[community-stats {:icon :main-icons2/placeholder
:count 4
:icon-color icon-color}]]))
(defn community-tags [tags]
[react/view (styles/community-tags-container)
(for [{:keys [id tag-label resource]} tags]
^{:key id}
[react/view {:margin-right 8}
[filter-tag/filter-tag
{:id id
:size 24
:label tag-label
:type :emoji
:labelled true
:resource resource}]])])
(defn community-title [{:keys [title description size] :or {size :small}}]
[react/view (styles/community-title-description-container (if (= size :large) 56 32))
(when title
[text/text
{:accessibility-label :chat-name-text
:number-of-lines 1
:ellipsize-mode :tail
:weight :semi-bold
:size (if (= size :large) :heading-1 :heading-2)}
title])
(when description
[text/text
{:accessibility-label :community-description-text
:number-of-lines 2
:ellipsize-mode :tail
:weight :regular
:size :paragraph-1
:style {:margin-top (if (= size :large) 8 2)}}
description])])
(defn permission-tag-container [{:keys [locked tokens]}]
[permission/tag {:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)
:locked locked
:tokens tokens
:size 24}])

190
src/quo2/components/community_card_view.cljs
View File

@ -1,190 +0,0 @@
(ns quo2.components.community-card-view
(:require
[quo2.components.text :as text]
[quo2.components.icon :as icons]
[quo2.foundations.colors :as colors]
[quo2.components.permission-tag :as permission]
[quo2.components.filter-tag :as filter-tag]
[status-im.communities.core :as communities]
[status-im.utils.handlers :refer [>evt <sub]]
[status-im.ui.components.react :as react]
[status-im.utils.money :as money]
[status-im.i18n.i18n :as i18n]
[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 format-members [count]
(if (> count 1000000)
(str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))
(if (and (> count 999) (< count 1000000))
(str (money/with-precision (/ count 1000) 1) (i18n/label :t/K))
count)))
(defn community-stats [{:keys [icon count icon-color]}]
[react/view (styles/stats-count-container)
[react/view {:margin-right 4}
[icons/icon icon {:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:size 16
:color icon-color}]]
[text/text {:weight :regular
:size :paragraph-1}
(format-members count)]])
(defn community-stats-column [type]
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
[react/view (if (= type :card-view)
(styles/card-stats-container)
(styles/list-stats-container))
[community-stats {:icon :main-icons2/group
:count 630000
:icon-color icon-color}]
[community-stats {:icon :main-icons2/lightning
:count 3300
:icon-color icon-color}]
[community-stats {:icon :main-icons2/placeholder
:count 63
:icon-color icon-color}]]))
(defn community-tags [tags]
[react/view (styles/community-tags-container)
(for [{:keys [id tag-label resource]} tags]
^{:key id}
[react/view {:margin-right 8}
[filter-tag/filter-tag
{:id id
:size 24
:label tag-label
:type :emoji
:labelled true
:resource resource}]])])
(defn community-title [{:keys [title description]}]
[react/view (styles/community-title-description-container)
(when title
[text/text
{:accessibility-label :chat-name-text
:number-of-lines 1
:ellipsize-mode :tail
:weight :semi-bold
:size :heading-2}
title])
(when description
[text/text
{:accessibility-label :community-description-text
:number-of-lines 2
:ellipsize-mode :tail
:weight :regular
:size :paragraph-1}
description])])
(defn permission-tag-container [{:keys [locked tokens]}]
[permission/tag {:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)
:locked locked
:tokens tokens
:size 24}])
(defn community-card-view-item [{:keys [id name description locked
status tokens cover tags featured] :as community}]
(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)
[react/image {:source cover
:style {:flex 1
:border-radius 20}}]]
[react/view (styles/card-view-content-container)
[react/view (styles/card-view-chat-icon)
[communities.icon/community-icon-redesign community 48]]
(when (= status :gated)
[react/view (styles/permission-tag-styles)
[permission-tag-container {:locked locked
:status status
:tokens tokens}]])
[community-title {:title name
:description description}]
[community-stats-column :card-view]
[community-tags tags]]]]]))
(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
[react/view {:style (merge (styles/community-card 16)
{:margin-bottom 12
:margin-horizontal 20})}
[react/view {:style {:height 56
:border-radius 16}
: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 {:flex-direction :row
:border-radius 16
:padding-horizontal 12
:align-items :center
:padding-vertical 8
:background-color background-color}
[react/view
[communities.icon/community-icon-redesign community 32]]
[react/view {:flex 1
:margin-horizontal 12}
[text/text {:weight :semi-bold
:size :paragraph-1
:accessibility-label :community-name-text
:number-of-lines 1
:ellipsize-mode :tail}
name]
[community-stats-column :list-view]]
(when (= status :gated)
[permission-tag-container {:locked locked
:status status
:tokens tokens}])]]]])
(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
[react/view {:margin-bottom 12
:padding-horizontal 8}
[react/touchable-highlight {:underlay-color colors/primary-50-opa-5
:style {:border-radius 12}
: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
:padding-vertical 8
:padding-horizontal 12}
[react/view {:flex-direction :row
:border-radius 16
:align-items :center}
[communities.icon/community-icon-redesign community 48]
[react/view {:margin-left 12
:flex 1}
[community-title {:title name}]]
(when (= status :gated)
[react/view {:justify-content :center
:margin-right 12}
[permission-tag-container {:locked locked
:status status
:tokens tokens}]])]]]])

12
src/quo2/screens/community_card_view.cljs
View File

@ -5,7 +5,8 @@
[status-im.constants :as constants] [status-im.constants :as constants]
[quo.design-system.colors :as quo.colors] [quo.design-system.colors :as quo.colors]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.community-card-view :as community-view] [quo2.components.communities.community-list-view :as community-list-view]
[quo2.components.communities.community-card-view :as community-card-view]
[status-im.i18n.i18n :as i18n] [status-im.i18n.i18n :as i18n]
[status-im.react-native.resources :as resources])) [status-im.react-native.resources :as resources]))
@ -13,8 +14,8 @@
{:id constants/status-community-id {:id constants/status-community-id
:name "Status" :name "Status"
:description "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology" :description "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
:status "gated" :status :gated
:section "popular" :section :popular
:permissions true :permissions true
:cover (resources/get-image :community-cover) :cover (resources/get-image :community-cover)
:community-icon (resources/get-image :status-logo) :community-icon (resources/get-image :status-logo)
@ -42,9 +43,8 @@
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:justify-content :center} :justify-content :center}
(if (= :card-view (:view-style @state)) (if (= :card-view (:view-style @state))
[community-view/community-card-view-item community-data] [community-card-view/community-card-view-item community-data]
[community-view/communities-list-view-item community-data])]]))) [community-list-view/communities-list-view-item community-data])]])))
(defn preview-community-card [] (defn preview-community-card []
[rn/view {:background-color (colors/theme-colors colors/neutral-5 [rn/view {:background-color (colors/theme-colors colors/neutral-5
colors/neutral-95) colors/neutral-95)

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

@ -4,7 +4,6 @@
[status-im.i18n.i18n :as i18n] [status-im.i18n.i18n :as i18n]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[quo2.components.community-card-view :as community-card]
[quo2.components.separator :as separator] [quo2.components.separator :as separator]
[quo2.components.text :as quo2.text] [quo2.components.text :as quo2.text]
[quo2.components.button :as quo2.button] [quo2.components.button :as quo2.button]
@ -21,6 +20,8 @@
[status-im.ui.components.plus-button :as plus-button] [status-im.ui.components.plus-button :as plus-button]
[status-im.utils.handlers :refer [<sub]] [status-im.utils.handlers :refer [<sub]]
[status-im.ui.components.topnav :as topnav] [status-im.ui.components.topnav :as topnav]
[quo2.components.communities.community-card-view :as community-card]
[quo2.components.communities.community-list-view :as community-list]
[quo2.components.icon :as icons])) [quo2.components.icon :as icons]))
(def selected-tab (reagent/atom :all)) (def selected-tab (reagent/atom :all))
@ -50,7 +51,7 @@
{:featured false})] {:featured false})]
(if (= @view-type :card-view) (if (= @view-type :card-view)
[community-card/community-card-view-item item] [community-card/community-card-view-item item]
[community-card/communities-list-view-item item]))) [community-list/communities-list-view-item item])))
(defn render-featured-fn [community-item] (defn render-featured-fn [community-item]
(let [item (merge community-item (let [item (merge community-item

38
src/status_im/ui/screens/communities/styles.cljs
View File

@ -29,10 +29,7 @@
(defn card-stats-container [] (defn card-stats-container []
{:flex-direction :row {:flex-direction :row
:position :absolute :margin-top 12})
:top 116
:left 12
:right 12})
(defn list-stats-container [] (defn list-stats-container []
{:flex-direction :row {:flex-direction :row
@ -40,29 +37,23 @@
(defn community-tags-container [] (defn community-tags-container []
{:flex-direction :row {:flex-direction :row
:position :absolute :margin-top 16})
:top 154
:left 12
:right 12})
(defn card-view-content-container [] (defn card-view-content-container [padding-horizontal]
{:flex 1 {:flex 1
:position :absolute :height 20
:top 40 :padding-left padding-horizontal
:left 0 :padding-right padding-horizontal
:right 0
:bottom 0
:border-radius 16 :border-radius 16
:padding-horizontal 12
:background-color (colors/theme-colors :background-color (colors/theme-colors
colors/white colors/white
colors/neutral-90)}) colors/neutral-90)})
(defn card-view-chat-icon [] (defn card-view-chat-icon [icon-size]
{:border-radius 48 {:border-radius 48
:position :absolute :position :absolute
:top -24 :top (- (/ icon-size 2))
:left 12 :left (/ icon-size 4)
:padding 2 :padding 2
:background-color (colors/theme-colors :background-color (colors/theme-colors
colors/white colors/white
@ -80,15 +71,12 @@
{:border-radius 32 {:border-radius 32
:padding 12}) :padding 12})
(defn community-title-description-container [] (defn community-title-description-container [margin-top]
{:position :absolute {:margin-top margin-top})
:top 32
:left 12
:right 12})
(defn community-cover-container [] (defn community-cover-container [height]
{:flex-direction :row {:flex-direction :row
:height 64 :height height
:border-top-right-radius 20 :border-top-right-radius 20
:border-top-left-radius 20 :border-top-left-radius 20
:background-color colors/primary-50-opa-20}) :background-color colors/primary-50-opa-20})