add Non Token Gated - Manual Approval Required flow (#14513)
chore: add flow for closed community overview page
This commit is contained in:
parent
99f7788c22
commit
aca8c9250f
|
@ -1,12 +1,15 @@
|
||||||
(ns quo2.components.community.community-card-view
|
(ns quo2.components.community.community-card-view
|
||||||
(:require [quo2.components.community.community-view :as community-view]
|
(:require [quo2.components.community.community-view :as community-view]
|
||||||
|
[quo2.components.community.icon :as icon]
|
||||||
[quo2.components.community.style :as style]
|
[quo2.components.community.style :as style]
|
||||||
[react-native.core :as rn]))
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
(defn community-card-view-item
|
(defn community-card-view-item
|
||||||
[{:keys [name description locked
|
[{:keys [name description locked images
|
||||||
status tokens cover tags width]} on-press]
|
status tokens cover tags width]} on-press]
|
||||||
[rn/touchable-opacity {:on-press on-press}
|
[rn/touchable-opacity
|
||||||
|
{:accessibility-label :community-card-item
|
||||||
|
:on-press on-press}
|
||||||
[rn/view {:style (style/community-card 20)}
|
[rn/view {:style (style/community-card 20)}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style {:width width
|
{:style {:width width
|
||||||
|
@ -22,9 +25,9 @@
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:border-radius 20}}]]
|
:border-radius 20}}]]
|
||||||
[rn/view (style/card-view-content-container 12)
|
[rn/view (style/card-view-content-container 12)
|
||||||
[rn/view (style/card-view-chat-icon 48)]
|
[rn/view (style/card-view-chat-icon 48)
|
||||||
;;TODO new pure component based on quo2 should be implemented without status-im usage
|
[icon/community-icon {:images images} 48]]
|
||||||
;[communities.icon/community-icon-redesign community 48]]
|
|
||||||
(when (= status :gated)
|
(when (= status :gated)
|
||||||
[rn/view (style/permission-tag-styles)
|
[rn/view (style/permission-tag-styles)
|
||||||
[community-view/permission-tag-container
|
[community-view/permission-tag-container
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
(ns quo2.components.community.icon
|
||||||
|
(:require [react-native.core :as rn]))
|
||||||
|
|
||||||
|
(defn community-icon [{:keys [images]} size]
|
||||||
|
(let [thumbnail-image (get-in images [:thumbnail :uri])]
|
||||||
|
[rn/image {:source {:uri thumbnail-image}
|
||||||
|
:style {:border-radius 50
|
||||||
|
:border-width 0
|
||||||
|
:border-color :transparent
|
||||||
|
:width size
|
||||||
|
:height size}}]))
|
|
@ -23,10 +23,10 @@
|
||||||
colors/neutral-20
|
colors/neutral-20
|
||||||
colors/neutral-70)})}
|
colors/neutral-70)})}
|
||||||
[selectors/checkbox
|
[selectors/checkbox
|
||||||
{:on-change on-change}]
|
|
||||||
[text/text
|
|
||||||
{:accessibility-label accessibility-label
|
{:accessibility-label accessibility-label
|
||||||
:size :paragraph-2
|
:on-change on-change}]
|
||||||
:style {:margin-left 8}}
|
[text/text
|
||||||
|
{:size :paragraph-2
|
||||||
|
:style {:margin-left 8}}
|
||||||
label]])
|
label]])
|
||||||
|
|
||||||
|
|
|
@ -69,9 +69,10 @@
|
||||||
(defn checkbox
|
(defn checkbox
|
||||||
[{:keys [default-checked?]}]
|
[{:keys [default-checked?]}]
|
||||||
(let [checked? (reagent/atom (or default-checked? false))]
|
(let [checked? (reagent/atom (or default-checked? false))]
|
||||||
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
|
(fn [{:keys [on-change disabled? blurred-background? container-style accessibility-label]}]
|
||||||
[rn/touchable-without-feedback
|
[rn/touchable-without-feedback
|
||||||
{:on-press (handle-press disabled? on-change checked?)}
|
{:accessibility-label accessibility-label
|
||||||
|
:on-press (handle-press disabled? on-change checked?)}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (merge
|
{:style (merge
|
||||||
container-style
|
container-style
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
quo2.components.community.community-list-view
|
quo2.components.community.community-list-view
|
||||||
quo2.components.community.community-view
|
quo2.components.community.community-view
|
||||||
quo2.components.community.discover-card
|
quo2.components.community.discover-card
|
||||||
|
quo2.components.community.icon
|
||||||
quo2.components.community.token-gating
|
quo2.components.community.token-gating
|
||||||
quo2.components.counter.counter
|
quo2.components.counter.counter
|
||||||
quo2.components.dividers.date
|
quo2.components.dividers.date
|
||||||
|
@ -104,6 +105,7 @@
|
||||||
(def permission-tag-container quo2.components.community.community-view/permission-tag-container)
|
(def permission-tag-container quo2.components.community.community-view/permission-tag-container)
|
||||||
(def discover-card quo2.components.community.discover-card/discover-card)
|
(def discover-card quo2.components.community.discover-card/discover-card)
|
||||||
(def token-gating quo2.components.community.token-gating/token-gating)
|
(def token-gating quo2.components.community.token-gating/token-gating)
|
||||||
|
(def community-icon quo2.components.community.icon/community-icon)
|
||||||
|
|
||||||
;;;; DIVIDERS
|
;;;; DIVIDERS
|
||||||
(def divider-label quo2.components.dividers.divider-label/divider-label)
|
(def divider-label quo2.components.dividers.divider-label/divider-label)
|
||||||
|
|
|
@ -34,13 +34,12 @@
|
||||||
(get mock-community-item-data :data)
|
(get mock-community-item-data :data)
|
||||||
{:featured featured?})]
|
{:featured featured?})]
|
||||||
(if (= view-type :card-view)
|
(if (= view-type :card-view)
|
||||||
[quo/community-card-view-item (assoc item :width width)
|
[quo/community-card-view-item (assoc item :width width) #(rf/dispatch [:navigate-to :community-overview (:id item)])]
|
||||||
#(rf/dispatch [:navigate-to :community-overview item])]
|
|
||||||
[quo/communities-list-view-item
|
[quo/communities-list-view-item
|
||||||
{:on-press (fn []
|
{:on-press (fn []
|
||||||
(rf/dispatch [:communities/load-category-states (:id item)])
|
(rf/dispatch [:communities/load-category-states (:id item)])
|
||||||
(rf/dispatch [:dismiss-keyboard])
|
(rf/dispatch [:dismiss-keyboard])
|
||||||
(rf/dispatch [:navigate-to :community {:community-id (:id item)}]))
|
(rf/dispatch [:navigate-to :community (:id item)]))
|
||||||
:on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
|
:on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||||
{:content (fn []
|
{:content (fn []
|
||||||
;; TODO implement with quo2
|
;; TODO implement with quo2
|
||||||
|
@ -94,8 +93,8 @@
|
||||||
:width "100%"
|
:width "100%"
|
||||||
:margin-bottom 24}
|
:margin-bottom 24}
|
||||||
:on-layout #(swap! view-size
|
:on-layout #(swap! view-size
|
||||||
(fn []
|
(fn []
|
||||||
(oops/oget % "nativeEvent.layout.width")))}
|
(oops/oget % "nativeEvent.layout.width")))}
|
||||||
(when-not (= @view-size 0)
|
(when-not (= @view-size 0)
|
||||||
[rn/flat-list
|
[rn/flat-list
|
||||||
{:key-fn :id
|
{:key-fn :id
|
||||||
|
@ -111,7 +110,6 @@
|
||||||
|
|
||||||
(defn other-communities-list
|
(defn other-communities-list
|
||||||
[communities view-type]
|
[communities view-type]
|
||||||
(println view-type)
|
|
||||||
[rn/flat-list
|
[rn/flat-list
|
||||||
{:key-fn :id
|
{:key-fn :id
|
||||||
:keyboard-should-persist-taps :always
|
:keyboard-should-persist-taps :always
|
||||||
|
@ -127,10 +125,9 @@
|
||||||
[]
|
[]
|
||||||
(let [view-type (reagent/atom :card-view)]
|
(let [view-type (reagent/atom :card-view)]
|
||||||
(fn []
|
(fn []
|
||||||
(let [communities (rf/sub [:communities/communities])
|
(let [communities (rf/sub [:communities/sorted-communities])
|
||||||
communities-count (count communities)
|
featured-communities (rf/sub [:communities/featured-communities])
|
||||||
; TODO move sorting to subscription
|
featured-communities-count (count featured-communities)]
|
||||||
sorted-communities (sort-by :name communities)]
|
|
||||||
[safe-area/consumer
|
[safe-area/consumer
|
||||||
(fn []
|
(fn []
|
||||||
[rn/view
|
[rn/view
|
||||||
|
@ -148,6 +145,6 @@
|
||||||
:on-press #(rf/dispatch [:navigate-back])}
|
:on-press #(rf/dispatch [:navigate-back])}
|
||||||
:i/close]
|
:i/close]
|
||||||
[screen-title]
|
[screen-title]
|
||||||
[featured-communities-header communities-count]
|
[featured-communities-header featured-communities-count]
|
||||||
[featured-list communities @view-type]
|
[featured-list featured-communities @view-type]
|
||||||
[other-communities-list sorted-communities @view-type]])]))))
|
[other-communities-list communities @view-type]])]))))
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
(ns status-im2.contexts.communities.overview.style
|
(ns status-im2.contexts.communities.overview.style
|
||||||
(:require [react-native.platform :as platform]))
|
(:require [react-native.platform :as platform]
|
||||||
|
[quo2.foundations.colors :as colors]))
|
||||||
|
|
||||||
(def preview-user
|
(def preview-user
|
||||||
{:flex-direction :row
|
{:flex-direction :row
|
||||||
|
@ -18,3 +19,16 @@
|
||||||
:margin-top 20
|
:margin-top 20
|
||||||
:margin-left :auto
|
:margin-left :auto
|
||||||
:margin-right :auto})
|
:margin-right :auto})
|
||||||
|
|
||||||
|
(defn scroll-view-container [border-radius]
|
||||||
|
{:position :absolute
|
||||||
|
:top -48
|
||||||
|
:overflow :scroll
|
||||||
|
:border-radius border-radius
|
||||||
|
:height "100%"})
|
||||||
|
|
||||||
|
(def review-notice
|
||||||
|
{:color colors/neutral-50
|
||||||
|
:margin-top 12
|
||||||
|
:margin-left :auto
|
||||||
|
:margin-right :auto})
|
||||||
|
|
|
@ -6,14 +6,10 @@
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.platform :as platform]
|
[react-native.platform :as platform]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.react-native.resources :as resources]
|
|
||||||
[status-im.ui.screens.communities.icon :as communities.icon]
|
|
||||||
[status-im.utils.utils :as utils]
|
|
||||||
[status-im2.common.constants :as constants]
|
[status-im2.common.constants :as constants]
|
||||||
[status-im2.common.scroll-page.view :as scroll-page]
|
[status-im2.common.scroll-page.view :as scroll-page]
|
||||||
[status-im2.contexts.communities.home.actions.view :as home.actions]
|
[status-im2.contexts.communities.home.actions.view :as home.actions]
|
||||||
[status-im2.contexts.communities.overview.style :as style] ;; TODO move to status-im2 when
|
[status-im2.contexts.communities.overview.style :as style]
|
||||||
;; reimplemented
|
|
||||||
[status-im2.contexts.communities.requests.actions.view :as requests.actions]
|
[status-im2.contexts.communities.requests.actions.view :as requests.actions]
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
|
@ -56,7 +52,7 @@
|
||||||
:emoji emoji
|
:emoji emoji
|
||||||
:emoji-background-color channel-color
|
:emoji-background-color channel-color
|
||||||
:on-enter-channel (fn []
|
:on-enter-channel (fn []
|
||||||
(utils/show-popup
|
(js/alert
|
||||||
"Entered channel"
|
"Entered channel"
|
||||||
"Wuhuu!! You successfully entered the channel :)"))
|
"Wuhuu!! You successfully entered the channel :)"))
|
||||||
:gates {:read [{:token "KNC"
|
:gates {:read [{:token "KNC"
|
||||||
|
@ -174,21 +170,39 @@
|
||||||
|
|
||||||
(def channel-list-component (memoize channel-list-component-fn))
|
(def channel-list-component (memoize channel-list-component-fn))
|
||||||
|
|
||||||
|
(defn request-to-join-text
|
||||||
|
[is-open?]
|
||||||
|
(if is-open?
|
||||||
|
(i18n/label :t/join-open-community)
|
||||||
|
(i18n/label :t/request-to-join-community)))
|
||||||
|
|
||||||
(defn join-community
|
(defn join-community
|
||||||
[{:keys [joined can-join? requested-to-join-at community-color] :as community}]
|
[{:keys [joined can-join? requested-to-join-at
|
||||||
(let [node-offline? (and can-join? (not joined) (pos? requested-to-join-at))]
|
community-color permissions]
|
||||||
|
:as community}]
|
||||||
|
(let [pending? (pos? requested-to-join-at)
|
||||||
|
is-open? (not= constants/community-channel-access-on-request (:access permissions))
|
||||||
|
node-offline? (and can-join? (not joined) (pos? requested-to-join-at))]
|
||||||
[:<>
|
[:<>
|
||||||
(when-not joined
|
(when-not (or joined pending?)
|
||||||
[quo/button
|
[quo/button
|
||||||
{:on-press #(rf/dispatch
|
{:on-press #(rf/dispatch
|
||||||
[:bottom-sheet/show-sheet
|
[:bottom-sheet/show-sheet
|
||||||
{:content (fn [] [requests.actions/request-to-join
|
{:content (fn [] [requests.actions/request-to-join
|
||||||
community])
|
community])
|
||||||
:content-height 300}])
|
:content-height 300}])
|
||||||
|
:accessibility-label :show-request-to-join-screen-button
|
||||||
:override-background-color community-color
|
:override-background-color community-color
|
||||||
:style style/join-button
|
:style style/join-button
|
||||||
:before :i/communities}
|
:before :i/communities}
|
||||||
(i18n/label :t/join-open-community)])
|
(request-to-join-text is-open?)])
|
||||||
|
|
||||||
|
(when (and (not (or joined pending?)) (not (or is-open? node-offline?)))
|
||||||
|
[quo/text
|
||||||
|
{:size :paragraph-2
|
||||||
|
:style style/review-notice}
|
||||||
|
(i18n/label :t/community-admins-will-review-your-request)])
|
||||||
|
|
||||||
(when node-offline?
|
(when node-offline?
|
||||||
[quo/information-box
|
[quo/information-box
|
||||||
{:type :informative
|
{:type :informative
|
||||||
|
@ -196,12 +210,21 @@
|
||||||
:style {:margin-top 12}}
|
:style {:margin-top 12}}
|
||||||
(i18n/label :t/request-processed-after-node-online)])]))
|
(i18n/label :t/request-processed-after-node-online)])]))
|
||||||
|
|
||||||
|
(defn get-tag
|
||||||
|
[joined]
|
||||||
|
[quo/status-tag
|
||||||
|
{:status {:type (if joined :positive :pending)}
|
||||||
|
:label (if joined
|
||||||
|
(i18n/label :t/joined)
|
||||||
|
(i18n/label :t/pending))}])
|
||||||
|
|
||||||
(defn render-page-content
|
(defn render-page-content
|
||||||
[{:keys [name description locked joined id images
|
[{:keys [name description locked joined images
|
||||||
status tokens tags]
|
status tokens tags requested-to-join-at]
|
||||||
:as community}
|
:as community}
|
||||||
channel-heights first-channel-height]
|
channel-heights first-channel-height]
|
||||||
(let [thumbnail-image (get-in images [:thumbnail])]
|
(let [pending? (pos? requested-to-join-at)
|
||||||
|
thumbnail-image (get-in images [:thumbnail])]
|
||||||
(fn [scroll-height icon-top icon-size]
|
(fn [scroll-height icon-top icon-size]
|
||||||
[rn/view
|
[rn/view
|
||||||
[rn/view {:padding-horizontal 20}
|
[rn/view {:padding-horizontal 20}
|
||||||
|
@ -216,9 +239,10 @@
|
||||||
:background-color (colors/theme-colors
|
:background-color (colors/theme-colors
|
||||||
colors/white
|
colors/white
|
||||||
colors/neutral-90)}
|
colors/neutral-90)}
|
||||||
[communities.icon/community-icon-redesign community
|
[quo/community-icon community
|
||||||
(icon-size scroll-height)]]
|
(icon-size scroll-height)]]
|
||||||
(when (and (not joined)
|
(when (and (not joined)
|
||||||
|
(not pending?)
|
||||||
(= status :gated))
|
(= status :gated))
|
||||||
[rn/view
|
[rn/view
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
|
@ -236,11 +260,7 @@
|
||||||
[quo/token-gating
|
[quo/token-gating
|
||||||
{:community {:name name
|
{:community {:name name
|
||||||
:community-color colors/primary-50
|
:community-color colors/primary-50
|
||||||
:community-avatar (cond
|
:community-avatar thumbnail-image
|
||||||
(= id constants/status-community-id)
|
|
||||||
(resources/get-image :status-logo)
|
|
||||||
(seq thumbnail-image)
|
|
||||||
thumbnail-image)
|
|
||||||
:gates {:join [{:token "KNC"
|
:gates {:join [{:token "KNC"
|
||||||
:token-img-src knc-token-img
|
:token-img-src knc-token-img
|
||||||
:amount 200
|
:amount 200
|
||||||
|
@ -255,12 +275,12 @@
|
||||||
:amount 10
|
:amount 10
|
||||||
:is-sufficient?
|
:is-sufficient?
|
||||||
false}]}}}])}])}]])
|
false}]}}}])}])}]])
|
||||||
(when joined
|
(when (or pending? joined)
|
||||||
[rn/view
|
[rn/view
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:top 12
|
:top 12
|
||||||
:right 12}
|
:right 12}
|
||||||
[quo/status-tag {:status {:type :positive} :label (i18n/label :t/joined)}]])
|
[get-tag joined]])
|
||||||
[rn/view {:margin-top 56}
|
[rn/view {:margin-top 56}
|
||||||
[quo/text
|
[quo/text
|
||||||
{:accessibility-label :chat-name-text
|
{:accessibility-label :chat-name-text
|
||||||
|
@ -268,7 +288,6 @@
|
||||||
:ellipsize-mode :tail
|
:ellipsize-mode :tail
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
:size :heading-1} name]]
|
:size :heading-1} name]]
|
||||||
|
|
||||||
[quo/text
|
[quo/text
|
||||||
{:accessibility-label :community-description-text
|
{:accessibility-label :community-description-text
|
||||||
:number-of-lines 2
|
:number-of-lines 2
|
||||||
|
@ -300,12 +319,12 @@
|
||||||
:chevron-position :left}]])))
|
:chevron-position :left}]])))
|
||||||
|
|
||||||
(defn community-card-page-view
|
(defn community-card-page-view
|
||||||
[{:keys [name cover] :as community}]
|
[{:keys [name images] :as community}]
|
||||||
(let [channel-heights (reagent/atom [])
|
(let [channel-heights (reagent/atom [])
|
||||||
first-channel-height (reagent/atom 0)
|
first-channel-height (reagent/atom 0)
|
||||||
scroll-component (scroll-page/scroll-page
|
scroll-component (scroll-page/scroll-page
|
||||||
(fn [] [communities.icon/community-icon-redesign community 24])
|
(fn [] [quo/community-icon community 24])
|
||||||
cover
|
{:uri (get-in images [:large :uri])}
|
||||||
{:right-section-buttons [{:icon :i/search
|
{:right-section-buttons [{:icon :i/search
|
||||||
:background-color (scroll-page/icon-color)}
|
:background-color (scroll-page/icon-color)}
|
||||||
{:icon :i/options
|
{:icon :i/options
|
||||||
|
@ -328,15 +347,13 @@
|
||||||
|
|
||||||
(defn overview
|
(defn overview
|
||||||
[]
|
[]
|
||||||
(let [community-mock (rf/sub [:get-screen-params :community-overview]) ;TODO stop using mock data and
|
(let [id (rf/sub [:get-screen-params :community-overview])
|
||||||
;only pass community id
|
community (rf/sub [:communities/community id])]
|
||||||
community (rf/sub [:communities/community (:id community-mock)])]
|
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style
|
{:style
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:top (if platform/ios? 0 44)
|
:top (if platform/ios? 0 44)
|
||||||
:width "100%"
|
:width "100%"
|
||||||
:height "110%"}}
|
:height "110%"}}
|
||||||
[community-card-page-view
|
[community-card-page-view community]]))
|
||||||
(merge community-mock {:joined (:joined community)})]]))
|
|
||||||
|
|
||||||
|
|
|
@ -11,22 +11,33 @@
|
||||||
:border-width 1
|
:border-width 1
|
||||||
:border-radius 6})
|
:border-radius 6})
|
||||||
|
|
||||||
|
(def community-rule-container
|
||||||
|
{:flex 1
|
||||||
|
:margin-top 16})
|
||||||
|
|
||||||
|
(def inner-community-rule-container
|
||||||
|
{:flex 1
|
||||||
|
:flex-direction :row
|
||||||
|
:align-items :center})
|
||||||
|
|
||||||
(def community-rule-text
|
(def community-rule-text
|
||||||
{:margin-left :auto
|
{:margin-left :auto
|
||||||
:margin-right :auto
|
:margin-right :auto
|
||||||
:margin-top :auto
|
:margin-top :auto
|
||||||
:margin-bottom :auto})
|
:margin-bottom :auto})
|
||||||
|
|
||||||
(def request-container1
|
(def community-rule-sub-text
|
||||||
{:flex 1
|
{:margin-left 28
|
||||||
:margin-left 20
|
:margin-top 1})
|
||||||
|
|
||||||
|
(def page-container
|
||||||
|
{:margin-left 20
|
||||||
:margin-right 20
|
:margin-right 20
|
||||||
:margin-bottom 20})
|
:margin-bottom 20})
|
||||||
|
|
||||||
(def request-container2
|
(def title-container
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:flex-direction
|
:flex-direction :row
|
||||||
:row
|
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:justify-content :space-between})
|
:justify-content :space-between})
|
||||||
|
|
||||||
|
@ -41,6 +52,10 @@
|
||||||
:display :flex
|
:display :flex
|
||||||
:justify-content :center})
|
:justify-content :center})
|
||||||
|
|
||||||
|
(def cancel-button
|
||||||
|
{:flex 1
|
||||||
|
:margin-right 12})
|
||||||
|
|
||||||
(def request-button
|
(def request-button
|
||||||
{:margin-top 32
|
{:margin-top 32
|
||||||
:margin-bottom 16
|
:margin-bottom 16
|
||||||
|
|
|
@ -1,17 +1,13 @@
|
||||||
(ns status-im2.contexts.communities.requests.actions.view
|
(ns status-im2.contexts.communities.requests.actions.view
|
||||||
(:require [quo.react-native :as rn]
|
(:require [quo.react-native :as rn]
|
||||||
[quo2.components.buttons.button :as button]
|
[quo2.core :as quo]
|
||||||
[quo2.components.icon :as icon]
|
|
||||||
[quo2.components.markdown.text :as text]
|
|
||||||
[quo2.components.selectors.disclaimer :as disclaimer]
|
|
||||||
[quo2.components.tags.context-tags :as context-tags]
|
|
||||||
[quo2.foundations.colors :as colors]
|
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.communities.core :as communities]
|
[status-im.communities.core :as communities]
|
||||||
[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]
|
||||||
[status-im.ui.components.list.views :as list]
|
[status-im2.contexts.communities.requests.actions.style :as style]
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]
|
||||||
|
[utils.requests :as requests]))
|
||||||
|
|
||||||
;; TODO: update with real data
|
;; TODO: update with real data
|
||||||
(def community-rules
|
(def community-rules
|
||||||
|
@ -38,86 +34,72 @@
|
||||||
:title "No offensive names and profile pictures"
|
:title "No offensive names and profile pictures"
|
||||||
:content "You will be asked to change your name or picture if the staff deems them inappropriate."}])
|
:content "You will be asked to change your name or picture if the staff deems them inappropriate."}])
|
||||||
|
|
||||||
|
(defn request-to-join-text
|
||||||
|
[is-open?]
|
||||||
|
(if is-open?
|
||||||
|
(i18n/label :t/join-open-community)
|
||||||
|
(i18n/label :t/request-to-join)))
|
||||||
|
|
||||||
(defn community-rule-item
|
(defn community-rule-item
|
||||||
[{:keys [title content index]}]
|
[{:keys [title content index]}]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style {:flex 1 :margin-top 16}}
|
{:style style/community-rule-container}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style
|
{:style style/inner-community-rule-container}
|
||||||
{:flex 1
|
|
||||||
:flex-direction :row
|
|
||||||
:align-items :center}}
|
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style
|
{:style style/community-rule}
|
||||||
{:height 18
|
[quo/text
|
||||||
:width 18
|
{:style style/community-rule-text
|
||||||
:margin-left 1
|
|
||||||
:margin-right 9
|
|
||||||
:background-color colors/white
|
|
||||||
:border-color colors/neutral-20
|
|
||||||
:border-width 1
|
|
||||||
:border-radius 6}}
|
|
||||||
[text/text
|
|
||||||
{:style
|
|
||||||
{:margin-left :auto
|
|
||||||
:margin-right :auto
|
|
||||||
:margin-top :auto
|
|
||||||
:margin-bottom :auto}
|
|
||||||
:accessibility-label :communities-rule-index
|
:accessibility-label :communities-rule-index
|
||||||
:weight :medium
|
:weight :medium
|
||||||
:size :label}
|
:size :label}
|
||||||
|
|
||||||
(str index)]]
|
(str index)]]
|
||||||
[text/text
|
[quo/text
|
||||||
{:accessibility-label :communities-rule-title
|
{:accessibility-label :communities-rule-title
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
:size :paragraph-2}
|
:size :paragraph-2}
|
||||||
title]]
|
title]]
|
||||||
[text/text
|
[quo/text
|
||||||
{:style {:margin-left 28 :margin-top 1}
|
{:style style/community-rule-sub-text
|
||||||
:accessibility-label :communities-rule-content
|
:accessibility-label :communities-rule-content
|
||||||
:size :paragraph-2}
|
:size :paragraph-2}
|
||||||
content]])
|
content]])
|
||||||
|
|
||||||
(defn community-rules-list
|
(defn community-rules-list
|
||||||
[rules]
|
[rules]
|
||||||
[list/flat-list
|
[rn/flat-list
|
||||||
{:shows-horizontal-scroll-indicator false
|
{:shows-horizontal-scroll-indicator false
|
||||||
:data rules
|
:data rules
|
||||||
:separator [rn/view {:margin-top 1}]
|
:separator [rn/view {:margin-top 1}]
|
||||||
:render-fn community-rule-item}])
|
:render-fn community-rule-item}])
|
||||||
|
|
||||||
(defn request-to-join
|
(defn request-to-join
|
||||||
[community]
|
[{:keys [permissions name id joined
|
||||||
(let [agreed-to-rules? (reagent/atom false)]
|
can-join? can-request-access?
|
||||||
|
requested-to-join-at]}]
|
||||||
|
(let [agreed-to-rules? (reagent/atom false)
|
||||||
|
is-open? (not= 3 (:access permissions))]
|
||||||
(fn []
|
(fn []
|
||||||
[rn/scroll-view {:style {:margin-left 20 :margin-right 20 :margin-bottom 20}}
|
[rn/scroll-view {:style style/page-container}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style {:flex 1 :flex-direction :row :align-items :center :justify-content :space-between}}
|
{:style style/title-container}
|
||||||
|
|
||||||
[text/text
|
[quo/text
|
||||||
{:accessibility-label :communities-join-community
|
{:accessibility-label :communities-join-community
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
:size :heading-1}
|
:size :heading-1}
|
||||||
(i18n/label :t/join-open-community)]
|
(request-to-join-text is-open?)]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style {:height 32
|
{:style style/request-icon}
|
||||||
:width 32
|
[quo/icon :i/info]]]
|
||||||
:align-items :center
|
|
||||||
:background-color colors/white
|
|
||||||
:border-color colors/neutral-20
|
|
||||||
:border-width 1
|
|
||||||
:border-radius 8
|
|
||||||
:display :flex
|
|
||||||
:justify-content :center}}
|
|
||||||
[icon/icon :i/info]]]
|
|
||||||
;; TODO get tag image from community data
|
;; TODO get tag image from community data
|
||||||
[context-tags/context-tag
|
[quo/context-tag
|
||||||
{:style
|
{:style
|
||||||
{:margin-right :auto
|
{:margin-right :auto
|
||||||
:margin-top 8}}
|
:margin-top 8}}
|
||||||
(resources/get-image :status-logo) (:name community)]
|
(resources/get-image :status-logo) name]
|
||||||
[text/text
|
[quo/text
|
||||||
{:style {:margin-top 24}
|
{:style {:margin-top 24}
|
||||||
:accessibility-label :communities-rules-title
|
:accessibility-label :communities-rules-title
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
|
@ -125,26 +107,30 @@
|
||||||
(i18n/label :t/community-rules)]
|
(i18n/label :t/community-rules)]
|
||||||
[community-rules-list community-rules]
|
[community-rules-list community-rules]
|
||||||
|
|
||||||
[disclaimer/disclaimer
|
[quo/disclaimer
|
||||||
{:container-style {:margin-top 20}
|
{:accessibility-label :rules-disclaimer-checkbox
|
||||||
:on-change #(swap! agreed-to-rules? not)}
|
:container-style {:margin-top 20}
|
||||||
|
:on-change #(swap! agreed-to-rules? not)}
|
||||||
(i18n/label :t/accept-community-rules)]
|
(i18n/label :t/accept-community-rules)]
|
||||||
|
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style {:width "100%"
|
{:style style/request-button}
|
||||||
:margin-top 32
|
[quo/button
|
||||||
:margin-bottom 16
|
{:accessibility-label :cancel
|
||||||
:flex 1
|
:on-press #(rf/dispatch [:bottom-sheet/hide])
|
||||||
:flex-direction :row
|
:type :grey
|
||||||
:align-items :center
|
:style style/cancel-button} (i18n/label :t/cancel)]
|
||||||
:justify-content :space-evenly}}
|
[quo/button
|
||||||
[button/button
|
{:accessibility-label :join-community-button
|
||||||
{:on-press #(rf/dispatch [:bottom-sheet/hide])
|
:on-press (fn []
|
||||||
:type :grey
|
(when-not joined
|
||||||
:style {:flex 1 :margin-right 12}} (i18n/label :t/cancel)]
|
(when can-join?
|
||||||
[button/button
|
(rf/dispatch [::communities/join id]))
|
||||||
{:on-press (fn []
|
(rf/dispatch [:bottom-sheet/hide])
|
||||||
(rf/dispatch [::communities/join (:id community)])
|
(when
|
||||||
(rf/dispatch [:bottom-sheet/hide]))
|
(and can-request-access?
|
||||||
:disabled (not @agreed-to-rules?)
|
(not (pos? requested-to-join-at))
|
||||||
:style {:flex 1}} (i18n/label :t/join-open-community)]]])))
|
(requests/can-request-access-again? requested-to-join-at))
|
||||||
|
(rf/dispatch [::communities/request-to-join id])
|
||||||
|
(rf/dispatch [:bottom-sheet/hide]))))
|
||||||
|
:disabled (not @agreed-to-rules?)
|
||||||
|
:style {:flex 1}} (request-to-join-text is-open?)]]])))
|
||||||
|
|
|
@ -78,15 +78,19 @@
|
||||||
:<- [:communities]
|
:<- [:communities]
|
||||||
(fn [[communities-enabled? search-filter communities]]
|
(fn [[communities-enabled? search-filter communities]]
|
||||||
(filterv
|
(filterv
|
||||||
(fn [{:keys [name featured id]}]
|
(fn [{:keys [name id]}]
|
||||||
(and (or featured (= name "Status")) ;; TO DO: remove once featured communities
|
(and (or communities-enabled?
|
||||||
;; exist
|
|
||||||
(or communities-enabled?
|
|
||||||
(= id constants/status-community-id))
|
(= id constants/status-community-id))
|
||||||
(or (empty? search-filter)
|
(or (empty? search-filter)
|
||||||
(string/includes? (string/lower-case (str name)) search-filter))))
|
(string/includes? (string/lower-case (str name)) search-filter))))
|
||||||
(vals communities))))
|
(vals communities))))
|
||||||
|
|
||||||
|
(re-frame/reg-sub
|
||||||
|
:communities/sorted-communities
|
||||||
|
:<- [:communities]
|
||||||
|
(fn [communities]
|
||||||
|
(sort-by :name (vals communities))))
|
||||||
|
|
||||||
(re-frame/reg-sub
|
(re-frame/reg-sub
|
||||||
:communities/communities
|
:communities/communities
|
||||||
:<- [:communities/enabled?]
|
:<- [:communities/enabled?]
|
||||||
|
|
|
@ -115,3 +115,24 @@
|
||||||
"0x3" {:id "0x3" :name "Civilized dolphins"}})
|
"0x3" {:id "0x3" :name "Civilized dolphins"}})
|
||||||
(is (= {:joined ["0x1"] :pending ["0x2"] :opened ["0x3"]}
|
(is (= {:joined ["0x1"] :pending ["0x2"] :opened ["0x3"]}
|
||||||
(rf/sub [sub-name])))))
|
(rf/sub [sub-name])))))
|
||||||
|
|
||||||
|
(h/deftest-sub :communities/sorted-communities
|
||||||
|
[sub-name]
|
||||||
|
(testing "Empty communities list"
|
||||||
|
(swap! rf-db/app-db assoc
|
||||||
|
:communities/enabled? true
|
||||||
|
:communities {})
|
||||||
|
(is (= []
|
||||||
|
(rf/sub [sub-name]))))
|
||||||
|
(testing "communities sorted by name"
|
||||||
|
(swap! rf-db/app-db assoc
|
||||||
|
:communities/enabled? true
|
||||||
|
:communities
|
||||||
|
{"0x1" {:id "0x1" :name "Civilized monkeys"}
|
||||||
|
"0x2" {:id "0x2" :name "Civilized rats"}
|
||||||
|
"0x3" {:id "0x3" :name "Civilized dolphins"}})
|
||||||
|
(is (= [{:id "0x3" :name "Civilized dolphins"}
|
||||||
|
{:id "0x1" :name "Civilized monkeys"}
|
||||||
|
{:id "0x2" :name "Civilized rats"}]
|
||||||
|
(rf/sub [sub-name])))))
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
(ns utils.requests
|
||||||
|
(:require [status-im.utils.datetime :as datetime]))
|
||||||
|
|
||||||
|
(def request-cooldown-ms (* 24 60 60 1000))
|
||||||
|
|
||||||
|
(defn can-request-access-again?
|
||||||
|
[requested-at]
|
||||||
|
(> (datetime/timestamp) (+ (* requested-at 1000) request-cooldown-ms)))
|
||||||
|
|
|
@ -210,6 +210,7 @@
|
||||||
"membership-title": "Membership requirement",
|
"membership-title": "Membership requirement",
|
||||||
"create-channel-title": "New channel",
|
"create-channel-title": "New channel",
|
||||||
"edit-channel-title": "Edit channel",
|
"edit-channel-title": "Edit channel",
|
||||||
|
"community-admins-will-review-your-request":"Community admins will review your request",
|
||||||
"community-thumbnail-image": "Thumbnail image",
|
"community-thumbnail-image": "Thumbnail image",
|
||||||
"community-emoji-thumbnail-title": "Thumbnail",
|
"community-emoji-thumbnail-title": "Thumbnail",
|
||||||
"community-thumbnail-upload": "Upload",
|
"community-thumbnail-upload": "Upload",
|
||||||
|
@ -1124,6 +1125,8 @@
|
||||||
"repeat-puk": "Repeat new 12-digit PUK",
|
"repeat-puk": "Repeat new 12-digit PUK",
|
||||||
"report-bug-email-template": "1. Issue Description\n{{description}}\n\n\n2. Steps to reproduce\n{{steps}}\n\n\n3. Attach screenshots that can demo the problem, please\n",
|
"report-bug-email-template": "1. Issue Description\n{{description}}\n\n\n2. Steps to reproduce\n{{steps}}\n\n\n3. Attach screenshots that can demo the problem, please\n",
|
||||||
"request-processed-after-node-online": "Your request will be processed once the community owner node is back online.",
|
"request-processed-after-node-online": "Your request will be processed once the community owner node is back online.",
|
||||||
|
"request-to-join": "Request to join",
|
||||||
|
"request-to-join-community": "Request to join Community",
|
||||||
"request-transaction": "Request transaction",
|
"request-transaction": "Request transaction",
|
||||||
"required-field": "Required field",
|
"required-field": "Required field",
|
||||||
"resend-message": "Resend",
|
"resend-message": "Resend",
|
||||||
|
|
Loading…
Reference in New Issue