Community categories reorder and persist open/close state (#12758)
This commit is contained in:
parent
21c9248536
commit
b758b70733
|
@ -586,3 +586,56 @@
|
||||||
(fx/merge cofx
|
(fx/merge cofx
|
||||||
(navigation/navigate-back)
|
(navigation/navigate-back)
|
||||||
(remove-chat-from-category community-id id categoryID))))
|
(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 %])}}))
|
||||||
|
|
|
@ -887,6 +887,13 @@
|
||||||
(fn [[{:keys [categories]}] _]
|
(fn [[{:keys [categories]}] _]
|
||||||
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
|
(re-frame/reg-sub
|
||||||
:chats/current-chat-ui-props
|
:chats/current-chat-ui-props
|
||||||
:<- [::chat-ui-props]
|
:<- [::chat-ui-props]
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
(defn section
|
(defn section
|
||||||
"Render collapsible section"
|
"Render collapsible section"
|
||||||
[_props]
|
[_props]
|
||||||
(let [opened? (reagent/atom false)]
|
(let [opened? (reagent/atom (get _props :default))]
|
||||||
(fn [{:keys [title content icon opened disabled
|
(fn [{:keys [title content icon opened disabled
|
||||||
padding-vertical dropdown-margin-left
|
padding-vertical dropdown-margin-left
|
||||||
open-container-style
|
open-container-style
|
||||||
|
|
|
@ -139,7 +139,14 @@
|
||||||
:title (i18n/label :t/edit-chats)
|
:title (i18n/label :t/edit-chats)
|
||||||
:accessibility-label :community-edit-chats
|
:accessibility-label :community-edit-chats
|
||||||
:icon :main-icons/edit
|
: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]
|
(defn blank-page [text]
|
||||||
[rn/view {:style {:padding 16 :flex 1 :flex-direction :row :align-items :center :justify-content :center}}
|
[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]
|
(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)}
|
^{:key (str "cat" name id)}
|
||||||
[:<>
|
[:<>
|
||||||
[accordion/section
|
[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
|
:disabled edit
|
||||||
:title [rn/view styles/category-item
|
:title [rn/view styles/category-item
|
||||||
(if edit
|
(if edit
|
||||||
|
@ -195,7 +205,9 @@
|
||||||
(defn community-chat-list [community-id categories edit from-chat]
|
(defn community-chat-list [community-id categories edit from-chat]
|
||||||
(let [chats (<sub [:chats/categories-by-community-id community-id])]
|
(let [chats (<sub [:chats/categories-by-community-id community-id])]
|
||||||
(if (and (empty? categories) (empty? chats))
|
(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
|
[list/flat-list
|
||||||
{:key-fn :chat-id
|
{:key-fn :chat-id
|
||||||
:content-container-style {:padding-bottom 8}
|
:content-container-style {:padding-bottom 8}
|
||||||
|
@ -258,7 +270,8 @@
|
||||||
(defn community-edit []
|
(defn community-edit []
|
||||||
(let [{:keys [community-id]} (<sub [:get-screen-params])]
|
(let [{:keys [community-id]} (<sub [:get-screen-params])]
|
||||||
(fn []
|
(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
|
[topbar/topbar
|
||||||
{:modal? true
|
{:modal? true
|
||||||
|
@ -274,9 +287,10 @@
|
||||||
(defn community []
|
(defn community []
|
||||||
(let [{:keys [community-id from-chat]} (<sub [:get-screen-params])]
|
(let [{:keys [community-id from-chat]} (<sub [:get-screen-params])]
|
||||||
(fn []
|
(fn []
|
||||||
(let [{:keys [id chats name images members permissions color joined can-request-access?
|
(let [{:keys [id chats name images members permissions color joined
|
||||||
can-join? requested-to-join-at admin categories]
|
can-request-access? can-join? requested-to-join-at admin]
|
||||||
:as community} (<sub [:communities/community community-id])]
|
:as community} (<sub [:communities/community community-id])
|
||||||
|
categories (<sub [:communities/sorted-categories community-id])]
|
||||||
(if community
|
(if community
|
||||||
[rn/view {:style {:flex 1}}
|
[rn/view {:style {:flex 1}}
|
||||||
[topbar/topbar
|
[topbar/topbar
|
||||||
|
|
|
@ -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)])]))
|
|
@ -24,7 +24,7 @@
|
||||||
(defn view []
|
(defn view []
|
||||||
(let [{:keys [community-id chat]} (<sub [:get-screen-params])]
|
(let [{:keys [community-id chat]} (<sub [:get-screen-params])]
|
||||||
(fn []
|
(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)])
|
comm-chat (<sub [:chats/community-chat-by-id community-id (:chat-id chat)])
|
||||||
_ (reset! selected-item (:categoryID comm-chat))]
|
_ (reset! selected-item (:categoryID comm-chat))]
|
||||||
[:<>
|
[:<>
|
||||||
|
@ -56,4 +56,4 @@
|
||||||
@selected-item
|
@selected-item
|
||||||
comm-chat]
|
comm-chat]
|
||||||
3000)}
|
3000)}
|
||||||
(i18n/label :t/done)]}]]))))
|
(i18n/label :t/done)]}]]))))
|
||||||
|
|
|
@ -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
|
(def category-item
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:flex-direction :row
|
:flex-direction :row
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:height 52
|
: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})
|
||||||
|
|
|
@ -41,6 +41,7 @@
|
||||||
{:border-bottom-color (quo.colors/get-color :ui-01)
|
{:border-bottom-color (quo.colors/get-color :ui-01)
|
||||||
:border-bottom-width 1}))
|
:border-bottom-width 1}))
|
||||||
:on-press (fn []
|
:on-press (fn []
|
||||||
|
(>evt [::communities/load-category-states id])
|
||||||
(>evt [:dismiss-keyboard])
|
(>evt [:dismiss-keyboard])
|
||||||
(>evt [:navigate-to :community {:community-id id}]))
|
(>evt [:navigate-to :community {:community-id id}]))
|
||||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||||
|
|
|
@ -115,6 +115,7 @@
|
||||||
[status-im.ui.screens.chat.pinned-messages :as pin-messages]
|
[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.create-category :as create-category]
|
||||||
[status-im.ui.screens.communities.select-category :as select-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]))
|
[status-im.ui.screens.wallet.accounts-manage.views :as accounts-manage]))
|
||||||
|
|
||||||
(def components
|
(def components
|
||||||
|
@ -289,6 +290,10 @@
|
||||||
:insets {:bottom true}
|
:insets {:bottom true}
|
||||||
:options {:topBar {:visible false}}
|
:options {:topBar {:visible false}}
|
||||||
:component community/community-edit}
|
:component community/community-edit}
|
||||||
|
{:name :community-reorder-categories
|
||||||
|
:insets {:top false}
|
||||||
|
:options {:topBar {:visible false}}
|
||||||
|
:component reorder-categories/view}
|
||||||
{:name :community-channel-details
|
{:name :community-channel-details
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
;;TODO custom
|
;;TODO custom
|
||||||
|
|
|
@ -176,6 +176,7 @@
|
||||||
"membership-request-pending": "Membership request pending",
|
"membership-request-pending": "Membership request pending",
|
||||||
"create-community": "Create a community",
|
"create-community": "Create a community",
|
||||||
"create-category": "Create category",
|
"create-category": "Create category",
|
||||||
|
"reorder-categories": "Reorder categories",
|
||||||
"edited": "Edited",
|
"edited": "Edited",
|
||||||
"edit-community": "Edit community",
|
"edit-community": "Edit community",
|
||||||
"editing-message": "Editing message",
|
"editing-message": "Editing message",
|
||||||
|
@ -1324,7 +1325,9 @@
|
||||||
"welcome-to-status": "Welcome to Status!",
|
"welcome-to-status": "Welcome to Status!",
|
||||||
"welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps",
|
"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-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.",
|
"welcome-blank-community-message": "Your communities will appear here.",
|
||||||
"fetch-community": "Fetch community",
|
"fetch-community": "Fetch community",
|
||||||
"fetching-community": "Fetching community...",
|
"fetching-community": "Fetching community...",
|
||||||
|
|
Loading…
Reference in New Issue