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

Community categories reorder and persist open/close state (#12758)

This commit is contained in:
Parvesh Monu 2021-11-04 18:58:12 +05:30 committed by GitHub
parent 21c9248536
commit b758b70733
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 183 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/status_im/communities/core.cljs
View File

@ -586,3 +586,56 @@
(fx/merge cofx
(navigation/navigate-back)
(remove-chat-from-category community-id id categoryID))))
(fx/defn reorder-category
{:events [::reorder-community-category]}
[_ community-id category-id new-position]
{::json-rpc/call [{:method "wakuext_reorderCommunityCategories"
:params [{:communityId community-id
:categoryId category-id
:position new-position}]
:js-response true
:on-success #(re-frame/dispatch [:sanitize-messages-and-process-response %])
:on-error #(log/error "failed to reorder community category" %)}]})
(defn category-hash [public-key community-id category-id]
(hash (str public-key community-id category-id)))
(fx/defn store-category-state
{:events [::store-category-state]}
[{:keys [db]} community-id category-id state-open?]
(let [public-key (get-in db [:multiaccount :public-key])
hash (category-hash public-key community-id category-id)]
{::async-storage/set! {hash state-open?}}))
(fx/defn update-category-states-in-db
{:events [::category-states-loaded]}
[{:keys [db]} community-id hashes states]
(let [public-key (get-in db [:multiaccount :public-key])
categories-old (get-in db [:communities community-id :categories])
categories (reduce (fn [acc [category-id category]]
(let [hash (get hashes category-id)
state (get states hash)
category-updated (assoc category :state state)]
(assoc acc category-id category-updated)))
{} categories-old)]
{:db (update-in db [:communities community-id :categories] merge categories)}))
(fx/defn load-category-states
{:events [::load-category-states]}
[{:keys [db]} community-id]
(let [public-key (get-in db [:multiaccount :public-key])
categories (get-in db [:communities community-id :categories])
{:keys [keys hashes]} (reduce (fn [acc category]
(let [category-id (get category 0)
hash (category-hash
public-key
community-id
category-id)]
(-> acc
(assoc-in [:hashes category-id] hash)
(update :keys #(conj % hash)))))
{} categories)]
{::async-storage/get {:keys keys
:cb #(re-frame/dispatch
[::category-states-loaded community-id hashes %])}}))

7
src/status_im/subs.cljs
View File

@ -887,6 +887,13 @@
(fn [[{:keys [categories]}] _]
categories))
(re-frame/reg-sub
:communities/sorted-categories
:<- [:communities]
(fn [communities [_ id]]
(->> (get-in communities [id :categories])
(sort-by #(:position (get % 1))))))
(re-frame/reg-sub
:chats/current-chat-ui-props
:<- [::chat-ui-props]

2
src/status_im/ui/components/accordion.cljs
View File

@ -17,7 +17,7 @@
(defn section
"Render collapsible section"
[_props]
(let [opened? (reagent/atom false)]
(let [opened? (reagent/atom (get _props :default))]
(fn [{:keys [title content icon opened disabled
padding-vertical dropdown-margin-left
open-container-style

30
src/status_im/ui/screens/communities/community.cljs
View File

@ -139,7 +139,14 @@
:title (i18n/label :t/edit-chats)
:accessibility-label :community-edit-chats
:icon :main-icons/edit
:on-press #(hide-sheet-and-dispatch [:open-modal :community-edit-chats {:community-id id}])}]])]))
:on-press #(hide-sheet-and-dispatch [:open-modal :community-edit-chats {:community-id id}])}]
[quo/list-item
{:theme :accent
:title (i18n/label :t/reorder-categories)
:accessibility-label :community-reorder-categories
:icon :main-icons/channel-category
:on-press #(hide-sheet-and-dispatch
[:open-modal :community-reorder-categories {:community-id id}])}]])]))
(defn blank-page [text]
[rn/view {:style {:padding 16 :flex 1 :flex-direction :row :align-items :center :justify-content :center}}
@ -163,11 +170,14 @@
(defn categories-accordion [community-id chats categories edit data]
[:<>
(for [{:keys [name id]} (vals categories)]
(for [{:keys [name id state]} (vals categories)]
^{:key (str "cat" name id)}
[:<>
[accordion/section
{:opened edit
{:on-open #(>evt [::communities/store-category-state community-id id true])
:on-close #(>evt [::communities/store-category-state community-id id false])
:default state
:opened edit
:disabled edit
:title [rn/view styles/category-item
(if edit
@ -195,7 +205,9 @@
(defn community-chat-list [community-id categories edit from-chat]
(let [chats (<sub [:chats/categories-by-community-id community-id])]
(if (and (empty? categories) (empty? chats))
[blank-page (i18n/label :t/welcome-community-blank-message)]
(if edit
[blank-page (i18n/label :t/welcome-community-blank-message-edit-chats)]
[blank-page (i18n/label :t/welcome-community-blank-message)])
[list/flat-list
{:key-fn :chat-id
:content-container-style {:padding-bottom 8}
@ -258,7 +270,8 @@
(defn community-edit []
(let [{:keys [community-id]} (<sub [:get-screen-params])]
(fn []
(let [{:keys [id name images members permissions color categories]} (<sub [:communities/community community-id])]
(let [{:keys [id name images members permissions color]} (<sub [:communities/community community-id])
categories (<sub [:communities/sorted-categories community-id])]
[:<>
[topbar/topbar
{:modal? true
@ -274,9 +287,10 @@
(defn community []
(let [{:keys [community-id from-chat]} (<sub [:get-screen-params])]
(fn []
(let [{:keys [id chats name images members permissions color joined can-request-access?
can-join? requested-to-join-at admin categories]
:as community} (<sub [:communities/community community-id])]
(let [{:keys [id chats name images members permissions color joined
can-request-access? can-join? requested-to-join-at admin]
:as community} (<sub [:communities/community community-id])
categories (<sub [:communities/sorted-categories community-id])]
(if community
[rn/view {:style {:flex 1}}
[topbar/topbar

60
src/status_im/ui/screens/communities/reorder_categories.cljs Normal file
View File

@ -0,0 +1,60 @@
(ns status-im.ui.screens.communities.reorder-categories
(:require [quo.core :as quo]
[quo.react-native :as rn]
[clojure.set :as clojure.set]
[status-im.i18n.i18n :as i18n]
[status-im.constants :as constants]
[quo.design-system.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.topbar :as topbar]
[status-im.communities.core :as communities]
[status-im.utils.handlers :refer [>evt <sub]]
[status-im.ui.components.icons.icons :as icons]
[status-im.ui.screens.communities.styles :as styles]
[status-im.ui.screens.communities.community :as community]))
(defn category-change-positon [community-id key up? position]
(let [new-position (if up? (dec position) (inc position))]
(>evt [::communities/reorder-community-category community-id key new-position])))
(defn category-item-button [community-id up? disabled? key position]
(let [[margin-right icon] (if up?
[10 :main-icons/dropdown-up]
[25 :main-icons/dropdown])]
[react/touchable-opacity {:disabled disabled?
:on-press #(category-change-positon
community-id key up? position)}
[rn/view {:style (styles/reorder-categories-button margin-right)}
[icons/icon icon {:color colors/black}]]]))
(defn category-item [community-id count {:keys [key name position]}]
(let [up-disabled? (= position 0)
down-disabled? (= position (dec count))]
[:<>
[rn/view {:style styles/reorder-categories-item}
[icons/icon :main-icons/channel-category {:color colors/gray}]
[rn/text {:style (styles/reorder-categories-text)} name]
[category-item-button community-id true up-disabled? key position]
[category-item-button community-id false down-disabled? key position]]
[quo/separator]]))
(defn categories-view [community-id categories count]
[rn/view {:accessibility-label :reorder-categories-list}
(for [category-vector categories]
(let [category (clojure.set/rename-keys (get category-vector 1) {:id :key})]
[category-item community-id count category]))])
(defn view []
(let [{:keys [community-id]} (<sub [:get-screen-params])
{:keys [id name images members permissions color]}
(<sub [:communities/community community-id])
categories (<sub [:communities/sorted-categories community-id])]
[:<>
[topbar/topbar
{:modal? true
:content [community/toolbar-content id name color images
(not= (:access permissions) constants/community-no-membership-access)
(count members)]}]
(if (empty? categories)
[community/blank-page (i18n/label :t/welcome-community-blank-message-categories)]
[categories-view community-id categories (count categories)])]))

4
src/status_im/ui/screens/communities/select_category.cljs
View File

@ -24,7 +24,7 @@
(defn view []
(let [{:keys [community-id chat]} (<sub [:get-screen-params])]
(fn []
(let [categories (<sub [:community/categories community-id])
(let [categories (<sub [:communities/sorted-categories community-id])
comm-chat (<sub [:chats/community-chat-by-id community-id (:chat-id chat)])
_ (reset! selected-item (:categoryID comm-chat))]
[:<>
@ -56,4 +56,4 @@
@selected-item
comm-chat]
3000)}
(i18n/label :t/done)]}]]))))
(i18n/label :t/done)]}]]))))

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

@ -1,8 +1,34 @@
(ns status-im.ui.screens.communities.styles)
(ns status-im.ui.screens.communities.styles
(:require [quo.design-system.colors :as colors]))
(def category-item
{:flex 1
:flex-direction :row
:align-items :center
:height 52
:margin-left 18})
:margin-left 18})
(def reorder-categories-item
{:accessibility-label :reorder-categories-item
:flex-direction :row
:height 60
:align-items :center
:margin-left 18})
(defn reorder-categories-text []
{:font-size 17
:margin-left 10
:color (colors/get-color :text-01)
:flex 1})
(defn reorder-categories-button [margin-right]
{:accessibility-label :reorder-categories-button
:width 30
:height 30
:border-radius 15
:margin 10
:margin-right margin-right
:border-width 1
:justify-content :center
:align-items :center
:border-color colors/black})

1
src/status_im/ui/screens/communities/views.cljs
View File

@ -41,6 +41,7 @@
{:border-bottom-color (quo.colors/get-color :ui-01)
:border-bottom-width 1}))
: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

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

@ -115,6 +115,7 @@
[status-im.ui.screens.chat.pinned-messages :as pin-messages]
[status-im.ui.screens.communities.create-category :as create-category]
[status-im.ui.screens.communities.select-category :as select-category]
[status-im.ui.screens.communities.reorder-categories :as reorder-categories]
[status-im.ui.screens.wallet.accounts-manage.views :as accounts-manage]))
(def components
@ -289,6 +290,10 @@
:insets {:bottom true}
:options {:topBar {:visible false}}
:component community/community-edit}
{:name :community-reorder-categories
:insets {:top false}
:options {:topBar {:visible false}}
:component reorder-categories/view}
{:name :community-channel-details
:insets {:top false}
;;TODO custom

5
translations/en.json
View File

@ -176,6 +176,7 @@
"membership-request-pending": "Membership request pending",
"create-community": "Create a community",
"create-category": "Create category",
"reorder-categories": "Reorder categories",
"edited": "Edited",
"edit-community": "Edit community",
"editing-message": "Editing message",
@ -1324,7 +1325,9 @@
"welcome-to-status": "Welcome to Status!",
"welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps",
"welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button",
"welcome-community-blank-message": "Your chats will appear here. To start new chats click on the 3 dots above and select \"Create a channel\"",
"welcome-community-blank-message": "Your channels will appear here. To create a new channel, click on the ⊕ button and select \"Create a channel\"",
"welcome-community-blank-message-edit-chats": "Your channels will appear here. To create a new channel, go back to the community screen, click on the ⊕ button and select \"Create a channel\"",
"welcome-community-blank-message-categories": "Your categories will appear here. To create a new category, go back to the community screen, click on the ⊕ button and select \"Create category\"",
"welcome-blank-community-message": "Your communities will appear here.",
"fetch-community": "Fetch community",
"fetching-community": "Fetching community...",