From b758b70733e6cfbefd6a8aeb195cf89200f6749c Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Thu, 4 Nov 2021 18:58:12 +0530 Subject: [PATCH] Community categories reorder and persist open/close state (#12758) --- src/status_im/communities/core.cljs | 53 ++++++++++++++++ src/status_im/subs.cljs | 7 +++ src/status_im/ui/components/accordion.cljs | 2 +- .../ui/screens/communities/community.cljs | 30 +++++++--- .../communities/reorder_categories.cljs | 60 +++++++++++++++++++ .../screens/communities/select_category.cljs | 4 +- .../ui/screens/communities/styles.cljs | 30 +++++++++- .../ui/screens/communities/views.cljs | 1 + src/status_im/ui/screens/screens.cljs | 5 ++ translations/en.json | 5 +- 10 files changed, 183 insertions(+), 14 deletions(-) create mode 100644 src/status_im/ui/screens/communities/reorder_categories.cljs diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs index ac2237152a..a3b7119f55 100644 --- a/src/status_im/communities/core.cljs +++ b/src/status_im/communities/core.cljs @@ -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 %])}})) diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 8b3ee30835..11b3235bbf 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -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] diff --git a/src/status_im/ui/components/accordion.cljs b/src/status_im/ui/components/accordion.cljs index fd00dddd4e..f5dc2dc58b 100644 --- a/src/status_im/ui/components/accordion.cljs +++ b/src/status_im/ui/components/accordion.cljs @@ -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 diff --git a/src/status_im/ui/screens/communities/community.cljs b/src/status_im/ui/screens/communities/community.cljs index 8464c67d30..f5cccf20ed 100644 --- a/src/status_im/ui/screens/communities/community.cljs +++ b/src/status_im/ui/screens/communities/community.cljs @@ -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 ( [topbar/topbar {:modal? true @@ -274,9 +287,10 @@ (defn community [] (let [{:keys [community-id from-chat]} (evt 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]} ( + [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)])])) diff --git a/src/status_im/ui/screens/communities/select_category.cljs b/src/status_im/ui/screens/communities/select_category.cljs index 219ddbd3e0..a35593b98f 100644 --- a/src/status_im/ui/screens/communities/select_category.cljs +++ b/src/status_im/ui/screens/communities/select_category.cljs @@ -24,7 +24,7 @@ (defn view [] (let [{:keys [community-id chat]} ( @@ -56,4 +56,4 @@ @selected-item comm-chat] 3000)} - (i18n/label :t/done)]}]])))) \ No newline at end of file + (i18n/label :t/done)]}]])))) diff --git a/src/status_im/ui/screens/communities/styles.cljs b/src/status_im/ui/screens/communities/styles.cljs index 4745422c88..b894317ec4 100644 --- a/src/status_im/ui/screens/communities/styles.cljs +++ b/src/status_im/ui/screens/communities/styles.cljs @@ -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}) \ No newline at end of file + :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}) diff --git a/src/status_im/ui/screens/communities/views.cljs b/src/status_im/ui/screens/communities/views.cljs index ecbe00102f..37638a3427 100644 --- a/src/status_im/ui/screens/communities/views.cljs +++ b/src/status_im/ui/screens/communities/views.cljs @@ -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 diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index d5df196d21..5ff133ad4d 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -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 diff --git a/translations/en.json b/translations/en.json index ad8b2bddc5..24c22a1b48 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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...",