diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index ff6fa6a7c7..927706d376 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/src/status_im2/contexts/communities/home/view.cljs @@ -46,20 +46,25 @@ :render-fn render-fn}]) (defn segments-community-lists [selected-tab] - (let [communities (rf/sub [:communities/community-ids]) + (let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement]) tab @selected-tab] [rn/view {:style {:padding-left 20 :padding-right 8 :padding-vertical 12}} (case tab :joined - [communities-list communities] + [communities-list (:joined ids-by-user-involvement)] :pending - [communities-list communities] + [communities-list (:pending ids-by-user-involvement)] :opened - [communities-list communities])])) + [communities-list (:opened ids-by-user-involvement)] + + [quo/information-box + {:type :error + :icon :i/info} + (i18n/label :t/error)])])) (defn home [] (let [selected-tab (reagent/atom :joined)] diff --git a/src/status_im2/contexts/communities/overview/style.cljs b/src/status_im2/contexts/communities/overview/style.cljs index a4c62a83f3..9ae831580a 100644 --- a/src/status_im2/contexts/communities/overview/style.cljs +++ b/src/status_im2/contexts/communities/overview/style.cljs @@ -1,17 +1,20 @@ (ns status-im2.contexts.communities.overview.style - (:require [react-native.platform :as platform] - [quo2.foundations.colors :as colors])) + (:require [react-native.platform :as platform])) (def preview-user {:flex-direction :row :align-items :center :margin-top 20}) -(def blur-channel-header {:blur-amount 32 - :blur-type :xlight - :overlay-color (if platform/ios? colors/white-opa-70 :transparent) - :style {:position :absolute - :top (if platform/ios? 56 60) - :height 34 - :width "100%" - :flex 1}}) \ No newline at end of file +(def blur-channel-header + {:position :absolute + :top (if platform/ios? 56 60) + :height 34 + :width "100%" + :flex 1}) + +(def join-button + {:width "100%" + :margin-top 20 + :margin-left :auto + :margin-right :auto}) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 9d6ddfdd73..76cffa122b 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -44,38 +44,38 @@ #(rf/dispatch [:bottom-sheet/show-sheet {:content - (constantly [quo/token-gating - {:channel {:name name - :community-color (colors/custom-color :pink 50) - :emoji emoji - :emoji-background-color channel-color - :on-enter-channel (fn [] (utils/show-popup "Entered channel" "Wuhuu!! You successfully entered the channel :)")) - :gates {:read [{:token "KNC" - :token-img-src knc-token-img - :amount 200 - :is-sufficient? true} - {:token "MANA" - :token-img-src mana-token-img - :amount 10 - :is-sufficient? false - :is-purchasable true} - {:token "RARE" - :token-img-src rare-token-img - :amount 10 - :is-sufficient? false}] - :write [{:token "KNC" - :token-img-src knc-token-img - :amount 200 - :is-sufficient? true} - {:token "DAI" - :token-img-src dai-token-img - :amount 20 - :is-purchasable true - :is-sufficient? false} - {:token "ETH" - :token-img-src eth-token-img - :amount 0.5 - :is-sufficient? false}]}}}]) + (fn [] [quo/token-gating + {:channel {:name name + :community-color (colors/custom-color :pink 50) + :emoji emoji + :emoji-background-color channel-color + :on-enter-channel (fn [] (utils/show-popup "Entered channel" "Wuhuu!! You successfully entered the channel :)")) + :gates {:read [{:token "KNC" + :token-img-src knc-token-img + :amount 200 + :is-sufficient? true} + {:token "MANA" + :token-img-src mana-token-img + :amount 10 + :is-sufficient? false + :is-purchasable true} + {:token "RARE" + :token-img-src rare-token-img + :amount 10 + :is-sufficient? false}] + :write [{:token "KNC" + :token-img-src knc-token-img + :amount 200 + :is-sufficient? true} + {:token "DAI" + :token-img-src dai-token-img + :amount 20 + :is-purchasable true + :is-sufficient? false} + {:token "ETH" + :token-img-src eth-token-img + :amount 0.5 + :is-sufficient? false}]}}}]) :content-height 210}])) (def mock-list-of-channels {:Welcome [{:name "welcome" @@ -159,8 +159,27 @@ (def channel-list-component (memoize channel-list-component-fn)) +(defn join-community [{:keys [joined can-join? requested-to-join-at community-color] :as community}] + (let [node-offline? (and can-join? (not joined) (pos? requested-to-join-at))] + [:<> + (when-not joined + [quo/button + {:on-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (fn [] [requests.actions/request-to-join community]) + :content-height 300}]) + :override-background-color community-color + :style style/join-button + :before :i/communities} + (i18n/label :t/join-open-community)]) + (when node-offline? + [quo/information-box + {:type :informative + :icon :i/info + :style {:margin-top 12}} + (i18n/label :t/request-processed-after-node-online)])])) + (defn render-page-content [{:keys [name description locked joined id images - status tokens tags community-color] + status tokens tags] :as community} channel-heights first-channel-height] (let [thumbnail-image (get-in images [:thumbnail])] @@ -192,27 +211,27 @@ [:bottom-sheet/show-sheet {:content-height 210 :content - (constantly [quo/token-gating - {:community {:name name - :community-color colors/primary-50 - :community-avatar (cond - (= id constants/status-community-id) - (resources/get-image :status-logo) - (seq thumbnail-image) - thumbnail-image) - :gates {:join [{:token "KNC" - :token-img-src knc-token-img - :amount 200 - :is-sufficient? true} - {:token "MANA" - :token-img-src mana-token-img - :amount 10 - :is-sufficient? false - :is-purchasable true} - {:token "RARE" - :token-img-src rare-token-img - :amount 10 - :is-sufficient? false}]}}}])}])}]]) + (fn [] [quo/token-gating + {:community {:name name + :community-color colors/primary-50 + :community-avatar (cond + (= id constants/status-community-id) + (resources/get-image :status-logo) + (seq thumbnail-image) + thumbnail-image) + :gates {:join [{:token "KNC" + :token-img-src knc-token-img + :amount 200 + :is-sufficient? true} + {:token "MANA" + :token-img-src mana-token-img + :amount 10 + :is-sufficient? false + :is-purchasable true} + {:token "RARE" + :token-img-src rare-token-img + :amount 10 + :is-sufficient? false}]}}}])}])}]]) (when joined [rn/view {:position :absolute :top 12 @@ -238,25 +257,17 @@ [rn/view {:margin-top 12}] [quo/community-tags tags] [preview-user-list] - (when-not joined - [quo/button - {:on-press #(rf/dispatch [:bottom-sheet/show-sheet - {:content (constantly [requests.actions/request-to-join community]) - :content-height 300}]) - :override-background-color community-color - :style - {:width "100%" - :margin-top 20 - :margin-left :auto - :margin-right :auto} - :before :i/communities} - (i18n/label :t/join-open-community)])] + [join-community community]] [channel-list-component channel-heights first-channel-height]]))) (defn render-sticky-header [channel-heights first-channel-height] (fn [scroll-height] (when (> scroll-height @first-channel-height) - [rn/blur-view style/blur-channel-header + [rn/blur-view + {:blur-amount 32 + :blur-type :xlight + :overlay-color (if platform/ios? colors/white-opa-70 :transparent) + :style style/blur-channel-header} [quo/divider-label {:label (:label (last (filter (fn [{:keys [height]}] (>= scroll-height (+ height @first-channel-height))) @@ -274,7 +285,7 @@ {:icon :i/options :background-color (scroll-page/icon-color) :on-press #(rf/dispatch [:bottom-sheet/show-sheet - {:content (constantly [home.actions/actions community]) + {:content (fn [] [home.actions/actions community]) :content-height 400}])}]} name)] (fn [] @@ -288,7 +299,6 @@ (defn overview [] (let [community-mock (rf/sub [:get-screen-params :community-overview]) ;TODO stop using mock data and only pass community id community (rf/sub [:communities/community (:id community-mock)])] - [rn/view {:style {:position :absolute :top (if platform/ios? 0 44) diff --git a/src/status_im2/subs/communities.cljs b/src/status_im2/subs/communities.cljs index 6e39df06f8..7423d7d4c8 100644 --- a/src/status_im2/subs/communities.cljs +++ b/src/status_im2/subs/communities.cljs @@ -91,12 +91,12 @@ :<- [:communities] (fn [[communities-enabled? search-filter communities]] (filterv - (fn [{:keys [name joined id]}] - (and joined - (or communities-enabled? - (= id constants/status-community-id)) - (or (empty? search-filter) - (string/includes? (string/lower-case (str name)) search-filter)))) + (fn [{:keys [name id]}] + (and + (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 @@ -105,6 +105,25 @@ (fn [communities] (map :id communities))) +(re-frame/reg-sub + :communities/community-ids-by-user-involvement + :<- [:communities/communities] + ;; Return communities splitted by level of user participation. Some communities user + ;; already joined, to some of them join request sent and others were opened one day + ;; and their data remained in app-db. + ;; Result map has form: {:joined [id1, id2] :pending [id3, id5] :opened [id4]}" + (fn [communities] + (reduce (fn [acc community] + (let [joined? (:joined community) + requested? (pos? (:requested-to-join-at community)) + id (:id community)] + (cond + joined? (update acc :joined conj id) + requested? (update acc :pending conj id) + :else (update acc :opened conj id)))) + {:joined [] :pending [] :opened []} + communities))) + (defn community->home-item [community counts] {:name (:name community) :muted? (:muted community) diff --git a/src/status_im2/subs/communities_test.cljs b/src/status_im2/subs/communities_test.cljs index 2885d4d24c..bb5e5ee3ff 100644 --- a/src/status_im2/subs/communities_test.cljs +++ b/src/status_im2/subs/communities_test.cljs @@ -74,3 +74,38 @@ (is (= {:unviewed-messages-count 0 :unviewed-mentions-count 0} (rf/sub [sub-name community-id]))))) + +(h/deftest-sub :communities/community-ids-by-user-involvement + [sub-name] + (testing "Empty communities list" + (swap! rf-db/app-db assoc :communities + {}) + (is (= {:joined [], :pending [], :opened []} + (rf/sub [sub-name])))) + (testing "Only opened communities" + (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 (= {:joined [], :pending [], :opened ["0x1" "0x2" "0x3"]} + (rf/sub [sub-name])))) + (testing "One joined community and two opened ones" + (swap! rf-db/app-db assoc + :communities/enabled? true + :communities + {"0x1" {:id "0x1" :name "civilized monkeys" :joined true} + "0x2" {:id "0x2" :name "Civilized rats"} + "0x3" {:id "0x3" :name "Civilized dolphins"}}) + (is (= {:joined ["0x1"], :pending [], :opened ["0x2" "0x3"]} + (rf/sub [sub-name])))) + (testing "One joined community, one open and one pending" + (swap! rf-db/app-db assoc + :communities/enabled? true + :communities + {"0x1" {:id "0x1" :name "civilized monkeys" :joined true} + "0x2" {:id "0x2" :name "Civilized rats" :requested-to-join-at 1000} + "0x3" {:id "0x3" :name "Civilized dolphins"}}) + (is (= {:joined ["0x1"], :pending ["0x2"], :opened ["0x3"]} + (rf/sub [sub-name]))))) diff --git a/translations/en.json b/translations/en.json index a7e42f67dd..9e733311e2 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1123,6 +1123,7 @@ "repeat-pin": "Repeat new 6-digit passcode", "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", + "request-processed-after-node-online": "Your request will be processed once the community owner node is back online.", "request-transaction": "Request transaction", "required-field": "Required field", "resend-message": "Resend",