status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-27 08:55:39 +00:00
Code Issues Projects Releases Wiki Activity

Refactor mock data out of community page (#14799)

Browse Source
This commit is contained in:
Volodymyr Kozieiev 2023-01-25 11:35:10 +00:00 committed by GitHub
parent 4e8ebc6d85
commit 3e93e353db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 424 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo2/components/avatars/channel_avatar.cljs
View File

@ -7,7 +7,7 @@
(defn channel-avatar (defn channel-avatar
[{:keys [big? locked? emoji-background-color emoji]}] [{:keys [big? locked? emoji-background-color emoji]}]
(let [lock-exists? (some? locked?) (let [lock-exists? locked?
dark? (theme/dark?)] dark? (theme/dark?)]
[rn/view [rn/view
{:style {:width (if big? 32 24) {:style {:width (if big? 32 24)

156
src/status_im2/common/scroll_page/view.cljs
View File

@ -28,98 +28,100 @@
(defn scroll-page-header (defn scroll-page-header
[scroll-height name page-nav cover sticky-header] [scroll-height name page-nav cover sticky-header]
[:f> (let [input-range (if platform/ios? [-47 10] [0 150])
(fn [] output-range (if platform/ios? [-100 0] [-169 -45])
(let [input-range (if platform/ios? [-47 10] [0 150]) y (reanimated/use-shared-value scroll-height)
output-range (if platform/ios? [-100 0] [-169 -45]) translate-animation (reanimated/interpolate y
y (reanimated/use-shared-value @scroll-height) input-range
translate-animation (reanimated/interpolate y output-range
input-range {:extrapolateLeft "clamp"
output-range :extrapolateRight "clamp"})
{:extrapolateLeft "clamp" opacity-animation (reanimated/use-shared-value 0)
:extrapolateRight "clamp"}) threshold (if platform/ios? 30 170)]
opacity-animation (reanimated/use-shared-value 0) (rn/use-effect
threshold (if platform/ios? 30 170)] #(do
(rn/use-effect (reanimated/set-shared-value y scroll-height)
#(do (reanimated/set-shared-value opacity-animation
(reanimated/set-shared-value y @scroll-height) (reanimated/with-timing (if (>= scroll-height threshold) 1 0)
(reanimated/set-shared-value opacity-animation (clj->js {:duration 300}))))
(reanimated/with-timing (if (>= @scroll-height threshold) 1 0) [scroll-height])
(clj->js {:duration 300})))) [:<>
[@scroll-height]) [reanimated/blur-view
[:<> {:blur-amount 32
[reanimated/blur-view :blur-type :xlight
{:blur-amount 32 :overlay-color (if platform/ios? colors/white-opa-70 :transparent)
:blur-type :xlight :style (style/blur-slider translate-animation)}]
:overlay-color (if platform/ios? colors/white-opa-70 :transparent) [rn/view
:style (style/blur-slider translate-animation)}] {:style {:z-index 6
[rn/view :margin-top (if platform/ios? 44 0)}}
{:style {:z-index 6 [reanimated/view
:margin-top (if platform/ios? 44 0)}} {:style (style/sticky-header-title opacity-animation)}
[reanimated/view [rn/image
{:style (style/sticky-header-title opacity-animation)} {:source cover
[rn/image :style style/sticky-header-image}]
{:source cover [quo/text
:style style/sticky-header-image}] {:size :paragraph-1
[quo/text :weight :semi-bold
{:size :paragraph-1 :style {:line-height 21}}
:weight :semi-bold name]]
:style {:line-height 21}} [quo/page-nav
name]] {:horizontal-description? true
[quo/page-nav :one-icon-align-left? true
{:horizontal-description? true :align-mid? false
:one-icon-align-left? true :page-nav-color :transparent
:align-mid? false :mid-section {:type :text-with-description
:page-nav-color :transparent :main-text nil
:mid-section {:type :text-with-description :description-img nil}
:main-text nil :right-section-buttons (:right-section-buttons page-nav)
:description-img nil} :left-section {:icon :i/close
:right-section-buttons (:right-section-buttons page-nav) :icon-background-color (icon-color)
:left-section {:icon :i/close :on-press #(rf/dispatch [:navigate-back])}}]
:icon-background-color (icon-color) sticky-header]]))
:on-press #(rf/dispatch [:navigate-back])}}]
(when sticky-header [sticky-header @scroll-height])]]))])
(defn display-picture (defn display-picture
[scroll-height cover] [scroll-height cover]
[:f> (let [input-range (if platform/ios? [-67 10] [0 150])
(fn [] y (reanimated/use-shared-value scroll-height)
(let [input-range (if platform/ios? [-67 10] [0 150]) animation (reanimated/interpolate y
y (reanimated/use-shared-value @scroll-height) input-range
animation (reanimated/interpolate y [1.2 0.5]
input-range {:extrapolateLeft "clamp"
[1.2 0.5] :extrapolateRight "clamp"})]
{:extrapolateLeft "clamp" (rn/use-effect #(do
:extrapolateRight "clamp"})] (reanimated/set-shared-value y scroll-height)
(rn/use-effect #(do js/undefined)
(reanimated/set-shared-value y @scroll-height) [scroll-height])
js/undefined) [reanimated/view
[@scroll-height]) {:style (style/display-picture-container animation)}
[reanimated/view [rn/image
{:style (style/display-picture-container animation)} {:source cover
[rn/image :style style/display-picture}]]))
{:source cover
:style style/display-picture}]]))])
(defn scroll-page (defn scroll-page
[cover page-nav name] [_ _ _]
(let [scroll-height (reagent/atom negative-scroll-position-0)] (let [scroll-height (reagent/atom negative-scroll-position-0)]
(fn [sticky-header children] (fn [{:keys [cover-image page-nav-right-section-buttons name on-scroll]}
sticky-header
children]
[:<> [:<>
[scroll-page-header scroll-height name page-nav cover sticky-header] [:f> scroll-page-header @scroll-height name page-nav-right-section-buttons cover-image
sticky-header]
[rn/scroll-view [rn/scroll-view
{:style (style/scroll-view-container {:style (style/scroll-view-container
(diff-with-max-min @scroll-height 16 0)) (diff-with-max-min @scroll-height 16 0))
:shows-vertical-scroll-indicator false :shows-vertical-scroll-indicator false
:scroll-event-throttle 16 :scroll-event-throttle 16
:on-scroll (fn [event] :on-scroll (fn [^js event]
(reset! scroll-height (int (reset! scroll-height (int
(oops/oget (oops/oget
event event
"nativeEvent.contentOffset.y"))))} "nativeEvent.contentOffset.y")))
(when on-scroll
(on-scroll @scroll-height)))}
[rn/view {:style {:height 151}} [rn/view {:style {:height 151}}
[rn/image [rn/image
{:source cover {:source cover-image
:style {:overflow :visible :style {:overflow :visible
:flex 1}}]] :flex 1}}]]
(when children (when children
@ -129,5 +131,5 @@
:background-color (colors/theme-colors :background-color (colors/theme-colors
colors/white colors/white
colors/neutral-90)} colors/neutral-90)}
[display-picture scroll-height cover] [:f> display-picture @scroll-height cover-image]
[children]])]]))) children])]])))

2
src/status_im2/contexts/chat/events.cljs
View File

@ -203,7 +203,7 @@
[{db :db :as cofx} chat-id from-shell?] [{db :db :as cofx} chat-id from-shell?]
(rf/merge cofx (rf/merge cofx
{:dispatch [:navigate-to-nav2 :chat chat-id from-shell?]} {:dispatch [:navigate-to-nav2 :chat chat-id from-shell?]}
(when-not (= (:view-id db) :community) (when-not (or (= (:view-id db) :community) (= (:view-id db) :community-overview))
(navigation/pop-to-root-tab :shell-stack)) (navigation/pop-to-root-tab :shell-stack))
(close-chat false) (close-chat false)
(force-close-chat chat-id) (force-close-chat chat-id)

5
src/status_im2/contexts/communities/home/view.cljs
View File

@ -11,10 +11,7 @@
[id] [id]
(let [community-item (rf/sub [:communities/home-item id])] (let [community-item (rf/sub [:communities/home-item id])]
[quo/communities-membership-list-item [quo/communities-membership-list-item
{:on-press (fn [] {:on-press #(rf/dispatch [:navigate-to :community-overview id])
(rf/dispatch [:communities/load-category-states id])
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:navigate-to-nav2 :community {:community-id id}]))
:on-long-press #(rf/dispatch :on-long-press #(rf/dispatch
[:bottom-sheet/show-sheet [:bottom-sheet/show-sheet
{:content (fn [] {:content (fn []

15
src/status_im2/contexts/communities/overview/style.cljs
View File

@ -20,16 +20,15 @@
: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 (def review-notice
{:color colors/neutral-50 {:color colors/neutral-50
:margin-top 12 :margin-top 12
:margin-left :auto :margin-left :auto
:margin-right :auto}) :margin-right :auto})
(def community-overview-container
{:position :absolute
:top (if platform/ios? 0 44)
:left 0
:right 0
:bottom 0})

21
src/status_im2/contexts/communities/overview/utils.cljs Normal file
View File

@ -0,0 +1,21 @@
(ns status-im2.contexts.communities.overview.utils
(:require [clojure.string :as string]
[utils.i18n :as i18n]))
(defn join-existing-users-string
[user-list]
(let [users-count (count user-list)
first-two (->> user-list
(take 2)
(map #(string/split (:full-name %) #" "))
(map first))]
(case users-count
0 ""
1 (i18n/label :t/join-one-user {:user (first first-two)})
2 (i18n/label :join-two-users
{:user1 (first first-two)
:user2 (second first-two)})
(i18n/label :join-more-users
{:user1 (first first-two)
:user2 (second first-two)
:left-count (- users-count 2)}))))

29
src/status_im2/contexts/communities/overview/utils_test.cljs Normal file
View File

@ -0,0 +1,29 @@
(ns status-im2.contexts.communities.overview.utils-test
(:require [cljs.test :refer-macros [deftest is testing]]
[status-im2.contexts.communities.overview.utils :as u]))
(deftest open-activity-center-test
(testing "One user"
(let [users [{:full-name "Alicia K"}]]
(is (= "Join Alicia"
(u/join-existing-users-string users)))))
(testing "Two users"
(let [users [{:full-name "Alicia K"}
{:full-name "Marcus C"}]]
(is (= "Join Alicia and Marcus"
(u/join-existing-users-string users)))))
(testing "Three users"
(let [users [{:full-name "Alicia K"}
{:full-name "Marcus C"}
{:full-name "MNO PQR"}]]
(is (= "Join Alicia, Marcus and 1 more"
(u/join-existing-users-string users)))))
(testing "Four users"
(let [users [{:full-name "Alicia K"}
{:full-name "Marcus C"}
{:full-name "MNO PQR"}
{:full-name "STU VWX"}]]
(is (= "Join Alicia, Marcus and 2 more"
(u/join-existing-users-string users))))))

463
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -12,164 +12,94 @@
[status-im2.contexts.communities.overview.style :as style] [status-im2.contexts.communities.overview.style :as style]
[status-im2.contexts.communities.menus.community-options.view :as options] [status-im2.contexts.communities.menus.community-options.view :as options]
[status-im2.contexts.communities.menus.request-to-join.view :as join-menu] [status-im2.contexts.communities.menus.request-to-join.view :as join-menu]
[status-im2.contexts.communities.overview.utils :as utils]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(def knc-token-img (js/require "../resources/images/tokens/mainnet/KNC.png"))
(def mana-token-img (js/require "../resources/images/tokens/mainnet/MANA.png"))
(def rare-token-img (js/require "../resources/images/tokens/mainnet/RARE.png"))
(def eth-token-img (js/require "../resources/images/tokens/mainnet/ETH.png"))
(def dai-token-img (js/require "../resources/images/tokens/mainnet/DAI.png"))
;; Mocked list items
(def user-list
[{:full-name "Alicia K"}
{:full-name "Marcus C"}
{:full-name "MNO PQR"}
{:full-name "STU VWX"}])
(defn preview-user-list (defn preview-user-list
[] [user-list]
[rn/view style/preview-user [rn/view style/preview-user
[quo/preview-list [quo/preview-list
{:type :user {:type :user
:user user-list :list-size (count user-list)
:list-size 4 :size 24}
:size 24}] user-list]
[quo/text [quo/text
{:accessibility-label :communities-screen-title {:accessibility-label :communities-screen-title
:style {:margin-left 8} :style {:margin-left 8}
:size :label} :size :label}
"Join Alicia, Marcus and 2 more"]]) ;; TODO remove mocked data and use from contacts list/communities members (utils/join-existing-users-string user-list)]])
(defn open-token-gating-mocked (defn channel-token-gating-details
[name emoji channel-color] [name token-gating emoji channel-color]
#(rf/dispatch [rn/view {:height 350 :margin-top 20}
[:bottom-sheet/show-sheet [quo/token-gating
{:content {:channel {:name name
(fn [] :community-color channel-color
[quo/token-gating :emoji emoji
{:channel {:name name :emoji-background-color channel-color
:community-color (colors/custom-color :pink 50) :on-enter-channel (fn []
:emoji emoji (js/alert
:emoji-background-color channel-color "Entered channel"
:on-enter-channel (fn [] "Wuhuu!! You successfully entered the channel :)"))
(js/alert :gates token-gating}}]])
"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 (defn open-channel-token-gating-details
{:Welcome [{:name "welcome" [name token-gating emoji channel-color]
:emoji "🤝"} (rf/dispatch
{:name "onboarding" [:bottom-sheet/show-sheet
:emoji "🍑" {:content
:locked? true (fn []
:on-press #((open-token-gating-mocked [channel-token-gating-details name token-gating emoji channel-color])
"onboarding" :content-height 210}]))
"🍑"
(colors/custom-color :pink 50)))}
{:name "intro"
:emoji "🦄"
:locked? true
:on-press #((open-token-gating-mocked
"intro"
"🦄"
(colors/custom-color :pink 50)))}]
:General [{:name "general"
:emoji "🐷"}
{:name "people-ops"
:emoji "🌏"
:locked? true
:on-press #((open-token-gating-mocked
"onboarding"
"🌏"
(colors/custom-color :blue 50)))}
{:name "announcements"
:emoji "🎺"}]
:Mobile [{:name "mobile"
:emoji "👽"}
{:name "mobile-ui"
:emoji "👽"}
{:name "mobile-ui-reviews"
:emoji "👽"}]
:Desktop [{:name "desktop"
:emoji "👽"}
{:name "desktop-ui"
:emoji "👽"}
{:name "desktop-ui-reviews"
:emoji "👽"}
{:name "desktop2"
:emoji "👽"}
{:name "desktop-ui2"
:emoji "👽"}
{:name "desktop-ui2-reviews"
:emoji "👽"}]})
(defn channel-list-component-fn (defn layout-y
[channel-heights first-channel-height] [event]
[rn/view (oops/oget event "nativeEvent.layout.y"))
{:on-layout #(swap! first-channel-height
(fn []
(+ (if platform/ios?
0
38)
(int (Math/ceil (oops/oget % "nativeEvent.layout.y"))))))
:style {:margin-top 20 :flex 1}}
(map-indexed (fn [index category]
(let [first-category (first category)]
^{:key first-category}
[rn/view
{:flex 1
:key (str index first-category)
:on-layout #(swap! channel-heights
(fn []
(sort-by :height
(conj @channel-heights
{:height (int (oops/oget % "nativeEvent.layout.y"))
:label first-category}))))}
[quo/divider-label (defn add-category-height
{:label first-category [categories-heights category height]
:chevron-position :left}] (swap! categories-heights
[rn/view (fn []
{:margin-left 8 (sort-by :height
:margin-top 10 (conj @categories-heights
:margin-bottom 8} {:height height
(map-indexed (fn [inner-index channel-data] :label category})))))
[rn/view
{:key (str inner-index (:name channel-data))
:margin-top 4}
[quo/channel-list-item channel-data]])
(first-category mock-list-of-channels))]]))
mock-list-of-channels)])
(def channel-list-component (memoize channel-list-component-fn)) (defn channel-list-component
[{:keys [on-categories-heights-changed
on-first-channel-height-changed]}
channels-list]
(let [categories-heights (reagent/atom [])]
[rn/view
{:on-layout #(on-first-channel-height-changed (+ (if platform/ios?
0
38)
(int (Math/ceil (layout-y %)))))
:style {:margin-top 20 :flex 1}}
(map-indexed
(fn [index [category channels-for-category]]
[rn/view
{:flex 1
:key (str index category)
:on-layout #(do
(add-category-height categories-heights category (int (layout-y %)))
(on-categories-heights-changed @categories-heights))}
[quo/divider-label
{:label category
:chevron-position :left}]
[rn/view
{:margin-left 8
:margin-top 10
:margin-bottom 8}
(map (fn [channel]
[rn/view
{:key (:id channel)
:margin-top 4}
[quo/channel-list-item channel]])
channels-for-category)]])
channels-list)]))
(defn request-to-join-text (defn request-to-join-text
[is-open?] [is-open?]
@ -219,126 +149,167 @@
(i18n/label :t/joined) (i18n/label :t/joined)
(i18n/label :t/pending))}]) (i18n/label :t/pending))}])
(defn render-page-content (defn community-token-gating-details
[{:keys [name description locked joined images [name thumbnail-image tokens]
status tokens tags requested-to-join-at] [rn/view {:height 200 :margin-top 20}
:as community} [quo/token-gating
channel-heights first-channel-height] {:community {:name name
(let [pending? (pos? requested-to-join-at) :community-color colors/primary-50
thumbnail-image (get-in images [:thumbnail])] :community-avatar-img-src thumbnail-image
(fn [] :gates tokens}}]])
[rn/view
[rn/view {:padding-horizontal 20}
(when (and (not joined)
(not pending?)
(= status :gated))
[rn/view
{:position :absolute
:top 8
:right 8}
[quo/permission-tag-container
{:locked locked
:status status
:tokens tokens
:on-press #(rf/dispatch
[:bottom-sheet/show-sheet
{:content-height 210
:content
(fn []
[quo/token-gating
{:community {:name name
:community-color colors/primary-50
:community-avatar 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 (or pending? joined)
[rn/view
{:position :absolute
:top 12
:right 12}
[get-tag joined]])
[rn/view {:margin-top 56}
[quo/text
{:accessibility-label :chat-name-text
:number-of-lines 1
:ellipsize-mode :tail
:weight :semi-bold
:size :heading-1} name]]
[quo/text
{:accessibility-label :community-description-text
:number-of-lines 2
:ellipsize-mode :tail
:weight :regular
:size :paragraph-1
:style {:margin-top 8 :margin-bottom 12}}
description]
[quo/community-stats-column :card-view]
[rn/view {:margin-top 12}]
[quo/community-tags tags]
[preview-user-list]
[join-community community]]
[channel-list-component channel-heights first-channel-height]])))
(defn render-sticky-header (defn add-on-press-handler
[channel-heights first-channel-height] [community-id {:keys [name emoji id locked? token-gating] :or {locked? false} :as chat}]
(fn [scroll-height] (merge
(when (> scroll-height @first-channel-height) chat
(if (and locked? token-gating)
{:on-press #(open-channel-token-gating-details
name
token-gating
emoji
(colors/custom-color :pink 50))}
(when (and (not locked?) id)
{:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:chat/navigate-to-chat (str community-id id)])
(rf/dispatch [:search/home-filter-changed nil]))}))))
(defn add-on-press-handler-to-chats
[community-id chats]
(mapv (partial add-on-press-handler community-id) chats))
(defn add-on-press-handler-to-categorized-chats
[community-id categorized-chats]
(reduce-kv (fn [acc category chats]
(assoc acc category (add-on-press-handler-to-chats community-id chats)))
{}
categorized-chats))
(defn community-header
[name]
[quo/text
{:accessibility-label :chat-name-text
:number-of-lines 1
:ellipsize-mode :tail
:weight :semi-bold
:size :heading-1}
name])
(defn community-description
[description]
[quo/text
{:accessibility-label :community-description-text
:number-of-lines 2
:ellipsize-mode :tail
:weight :regular
:size :paragraph-1
:style {:margin-top 8 :margin-bottom 12}}
description])
(defn community-content
[{:keys [name description locked joined images
status tokens tags requested-to-join-at id]
:as community}
{:keys [on-categories-heights-changed
on-first-channel-height-changed]}]
(let [pending? (pos? requested-to-join-at)
thumbnail-image (get-in images [:thumbnail])
chats-by-category (rf/sub [:communities/categorized-channels id])
users (rf/sub [:communities/users id])]
[rn/view
[rn/view {:padding-horizontal 20}
(when (and (not joined)
(not pending?)
(= status :gated))
[rn/view
{:position :absolute
:top 8
:right 8}
[quo/permission-tag-container
{:locked locked
:status status
:tokens tokens
:on-press #(rf/dispatch
[:bottom-sheet/show-sheet
{:content-height 210
:content
(fn []
[community-token-gating-details
name
thumbnail-image
tokens])}])}]])
(when (or pending? joined)
[rn/view
{:position :absolute
:top 12
:right 12}
[get-tag joined]])
[rn/view {:margin-top 56}
[community-header name]]
[community-description description]
[quo/community-stats-column :card-view]
[rn/view {:margin-top 12}]
[quo/community-tags tags]
[preview-user-list users]
[join-community community]]
[channel-list-component
{:on-categories-heights-changed #(on-categories-heights-changed %)
:on-first-channel-height-changed #(on-first-channel-height-changed %)}
(add-on-press-handler-to-categorized-chats id chats-by-category)]]))
(defn sticky-category-header
[_]
(fn [{:keys [:enabled :label]}]
(when enabled
[blur/view [blur/view
{:blur-amount 32 {:blur-amount 32
:blur-type :xlight :blur-type :xlight
:overlay-color (if platform/ios? colors/white-opa-70 :transparent) :overlay-color (if platform/ios? colors/white-opa-70 :transparent)
:style style/blur-channel-header} :style style/blur-channel-header}
[quo/divider-label [quo/divider-label
{:label (:label (last (filter (fn [{:keys [height]}] {:label (:label label)
(>= scroll-height (+ height @first-channel-height)))
@channel-heights)))
:chevron-position :left}]]))) :chevron-position :left}]])))
(defn community-overview-right-section-buttons
[id]
[{:icon :i/options
:background-color (scroll-page/icon-color)
:on-press #(rf/dispatch
[:bottom-sheet/show-sheet
{:content
(fn []
[options/community-options-bottom-sheet
id])}])}])
(defn community-card-page-view (defn community-card-page-view
[{:keys [name images id] :as community}] [{:keys [name images id]}]
(let [channel-heights (reagent/atom []) (let [categories-heights (reagent/atom [])
first-channel-height (reagent/atom 0) first-channel-height (reagent/atom 0)
scroll-component (scroll-page/scroll-page scroll-height (reagent/atom 0)
{:uri (get-in images [:large :uri])} cover {:uri (get-in images [:large :uri])}]
{:right-section-buttons [{:icon :i/options (fn [community]
:background-color (scroll-page/icon-color) [scroll-page/scroll-page
:on-press {:cover-image cover
#(rf/dispatch :page-nav-right-section-buttons (community-overview-right-section-buttons id)
[:bottom-sheet/show-sheet :name name
{:content :on-scroll #(reset! scroll-height %)}
(fn []
[options/community-options-bottom-sheet [sticky-category-header
id])}])}]} {:enabled (> @scroll-height @first-channel-height)
name)] :label (last (filter (fn [{:keys [height]}]
(fn [] (>= @scroll-height (+ height @first-channel-height)))
(let [page-component (memoize (render-page-content community channel-heights first-channel-height)) @categories-heights))}]
sticky-header (memoize (render-sticky-header channel-heights first-channel-height))] [community-content
(fn [] community
(scroll-component {:on-categories-heights-changed #(reset! categories-heights %)
sticky-header :on-first-channel-height-changed #(reset! first-channel-height %)}]])))
page-component))))))
(defn overview (defn overview
[] []
(let [id (rf/sub [:get-screen-params :community-overview]) (let [id (rf/sub [:get-screen-params :community-overview])
community (rf/sub [:communities/community id])] community (rf/sub [:communities/community id])]
[rn/view [rn/view
{:style {:style style/community-overview-container}
{:position :absolute
:top (if platform/ios? 0 44)
:width "100%"
:height "110%"}}
[community-card-page-view community]])) [community-card-page-view community]]))

30
src/status_im2/subs/communities.cljs
View File

@ -3,7 +3,8 @@
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.multiaccounts.core :as multiaccounts] [status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils] [status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils]
[status-im2.constants :as constants])) [status-im2.constants :as constants]
[utils.i18n :as i18n]))
(re-frame/reg-sub (re-frame/reg-sub
:communities :communities
@ -214,3 +215,30 @@
(map #(assoc (get % 1) :community-id id)) (map #(assoc (get % 1) :community-id id))
(sort-by :position) (sort-by :position)
(into [])))) (into []))))
(re-frame/reg-sub
:communities/categorized-channels
(fn [[_ community-id]]
[(re-frame/subscribe [:communities/community community-id])])
(fn [[{:keys [joined categories chats]}] [_ _]]
(reduce
(fn [acc [_ {:keys [name categoryID id emoji can-post?]}]]
(let [category (keyword (get-in categories [categoryID :name] (i18n/label :t/none)))]
(update acc
category
#(vec (conj %1 %2))
{:name name
:emoji emoji
:locked? (or (not joined) (not can-post?))
:id id})))
{}
chats)))
(re-frame/reg-sub
:communities/users
:<- [:communities]
(fn [_ [_ _]]
[{:full-name "Alicia K"}
{:full-name "Marcus C"}
{:full-name "MNO PQR"}
{:full-name "STU VWX"}]))

36
src/status_im2/subs/communities_test.cljs
View File

@ -3,7 +3,8 @@
[re-frame.db :as rf-db] [re-frame.db :as rf-db]
[test-helpers.unit :as h] [test-helpers.unit :as h]
status-im2.subs.communities status-im2.subs.communities
[utils.re-frame :as rf])) [utils.re-frame :as rf]
[utils.i18n :as i18n]))
(use-fixtures :each (use-fixtures :each
{:before #(reset! rf-db/app-db {:communities/enabled? true})}) {:before #(reset! rf-db/app-db {:communities/enabled? true})})
@ -135,3 +136,36 @@
{:id "0x1" :name "Civilized monkeys"} {:id "0x1" :name "Civilized monkeys"}
{:id "0x2" :name "Civilized rats"}] {:id "0x2" :name "Civilized rats"}]
(rf/sub [sub-name]))))) (rf/sub [sub-name])))))
(h/deftest-sub :communities/categorized-channels
[sub-name]
(testing "Channels with categories"
(swap! rf-db/app-db assoc
:communities/enabled? true
:communities
{"0x1" {:id "0x1"
:chats {"0x1" {:id "0x1" :name "chat1" :categoryID 1 :can-post? true}
"0x2" {:id "0x1" :name "chat2" :categoryID 1 :can-post? false}
"0x3" {:id "0x1" :name "chat3" :categoryID 2 :can-post? true}}
:categories {1 {:id 1 :name "category1"}
2 {:id 2 :name "category2"}}
:joined true}})
(is (= {:category1 [{:name "chat1" :emoji nil :locked? false :id "0x1"}
{:name "chat2" :emoji nil :locked? true :id "0x1"}]
:category2 [{:name "chat3" :emoji nil :locked? false :id "0x1"}]}
(rf/sub [sub-name "0x1"]))))
(testing "Channels without categories"
(swap! rf-db/app-db assoc
:communities/enabled? true
:communities
{"0x1" {:id "0x1"
:chats {"0x1" {:id "0x1" :name "chat1" :categoryID 1 :can-post? true}
"0x2" {:id "0x1" :name "chat2" :categoryID 1 :can-post? false}
"0x3" {:id "0x1" :name "chat3" :can-post? true}}
:categories {1 {:id 1 :name "category1"}
2 {:id 2 :name "category2"}}
:joined true}})
(is (= {:category1 [{:name "chat1" :emoji nil :locked? false :id "0x1"}
{:name "chat2" :emoji nil :locked? true :id "0x1"}]
(keyword (i18n/label :t/none)) [{:name "chat3" :emoji nil :locked? false :id "0x1"}]}
(rf/sub [sub-name "0x1"])))))

5
translations/en.json
View File

@ -213,7 +213,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-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",
@ -1943,5 +1943,8 @@
"contact-request-chat-pending": "Your contact request is pending", "contact-request-chat-pending": "Your contact request is pending",
"contact-request-chat-add": "Add {{name}} to send a message", "contact-request-chat-add": "Add {{name}} to send a message",
"join-request": "Join request", "join-request": "Join request",
"join-one-user": "Join {{user}}",
"join-two-users": "Join {{user1}} and {{user2}}",
"join-more-users": "Join {{user1}}, {{user2}} and {{left-count}} more",
"wants-to-join": "wants to join" "wants-to-join": "wants to join"
} }