[#13895] Create new Activity Center screen (#13987)

src/status_im/activity_center/core.cljs

@@ -0,0 +1,69 @@
+(ns status-im.activity-center.core
+  (:require [re-frame.core :as re-frame]
+            [status-im.data-store.activities :as data-store.activities]
+            [status-im.ethereum.json-rpc :as json-rpc]
+            [status-im.utils.fx :as fx]
+            [taoensso.timbre :as log]))
+
+(def notifications-per-page
+  20)
+
+(def start-or-end-cursor
+  "")
+
+(defn notifications-group->rpc-method
+  [notifications-group]
+  (if (= notifications-group :notifications-read)
+    "wakuext_readActivityCenterNotifications"
+    "wakuext_unreadActivityCenterNotifications"))
+
+(defn notifications-read-status->group
+  [status-filter]
+  (if (= status-filter :read)
+    :notifications-read
+    :notifications-unread))
+
+(fx/defn notifications-fetch
+  [{:keys [db]} cursor notifications-group]
+  (when-not (get-in db [:activity-center notifications-group :loading?])
+    {:db             (assoc-in db [:activity-center notifications-group :loading?] true)
+     ::json-rpc/call [{:method     (notifications-group->rpc-method notifications-group)
+                       :params     [cursor notifications-per-page]
+                       :on-success #(re-frame/dispatch [:activity-center/notifications-fetch-success notifications-group %])
+                       :on-error   #(re-frame/dispatch [:activity-center/notifications-fetch-error notifications-group %])}]}))
+
+(fx/defn notifications-fetch-first-page
+  {:events [:activity-center/notifications-fetch-first-page]}
+  [{:keys [db] :as cofx} {:keys [status-filter] :or {status-filter :unread}}]
+  (let [notifications-group (notifications-read-status->group status-filter)]
+    (fx/merge cofx
+              {:db (-> db
+                       (assoc-in [:activity-center :current-status-filter] status-filter)
+                       (update-in [:activity-center notifications-group] dissoc :loading?)
+                       (update-in [:activity-center notifications-group] dissoc :data))}
+              (notifications-fetch start-or-end-cursor notifications-group))))
+
+(fx/defn notifications-fetch-next-page
+  {:events [:activity-center/notifications-fetch-next-page]}
+  [{:keys [db] :as cofx}]
+  (let [status-filter       (get-in db [:activity-center :current-status-filter])
+        notifications-group (notifications-read-status->group status-filter)
+        {:keys [cursor]}    (get-in db [:activity-center notifications-group])]
+    (when-not (= cursor start-or-end-cursor)
+      (notifications-fetch cofx cursor notifications-group))))
+
+(fx/defn notifications-fetch-success
+  {:events [:activity-center/notifications-fetch-success]}
+  [{:keys [db]} notifications-group {:keys [cursor notifications]}]
+  {:db (-> db
+           (update-in [:activity-center notifications-group] dissoc :loading?)
+           (assoc-in [:activity-center notifications-group :cursor] cursor)
+           (update-in [:activity-center notifications-group :data]
+                      concat
+                      (map data-store.activities/<-rpc notifications)))})
+
+(fx/defn notifications-fetch-error
+  {:events [:activity-center/notifications-fetch-error]}
+  [{:keys [db]} notifications-group error]
+  (log/warn "Failed to load Activity Center notifications" error)
+  {:db (update-in db [:activity-center notifications-group] dissoc :loading?)})

src/status_im/events.cljs

@@ -36,6 +36,7 @@
             [status-im.native-module.core :as status]
             [status-im.navigation :as navigation]
             status-im.notifications-center.core
+            status-im.activity-center.core
             status-im.pairing.core
             [status-im.popover.core :as popover]
             status-im.profile.core

src/status_im/subs.cljs

@@ -1935,6 +1935,31 @@
 
 ;;ACTIVITY CENTER NOTIFICATIONS ========================================================================================
 
+(re-frame/reg-sub
+ :activity-center/notifications-read
+ (fn [db]
+   (get-in db [:activity-center :notifications-read :data])))
+
+(re-frame/reg-sub
+ :activity-center/notifications-unread
+ (fn [db]
+   (get-in db [:activity-center :notifications-unread :data])))
+
+(re-frame/reg-sub
+ :activity-center/current-status-filter
+ (fn [db]
+   (get-in db [:activity-center :current-status-filter])))
+
+(re-frame/reg-sub
+ :activity-center/notifications-per-read-status
+ :<- [:activity-center/notifications-read]
+ :<- [:activity-center/notifications-unread]
+ :<- [:activity-center/current-status-filter]
+ (fn [[notifications-read notifications-unread status-filter]]
+   (if (= status-filter :unread)
+     notifications-unread
+     notifications-read)))
+
 (defn- group-notifications-by-date
   [notifications]
   (->> notifications

src/status_im/ui/screens/activity_center/views.cljs

@@ -0,0 +1,52 @@
+(ns status-im.ui.screens.activity-center.views
+  (:require [quo.react-native :as rn]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.notifications.activity-logs :as activity-logs]
+            [quo2.components.tags.context-tags :as context-tags]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [status-im.i18n.i18n :as i18n]
+            [status-im.ui.components.topbar :as topbar]
+            [status-im.utils.handlers :refer [<sub >evt]]))
+
+(defn render-notification
+  [notification index]
+  [rn/view {:flex           1
+            :flex-direction :column
+            :margin-top     (if (= 0 index) 0 4)}
+   [activity-logs/activity-log {:context   [[context-tags/group-avatar-tag "Name" {:color          :purple
+                                                                                   :override-theme :dark
+                                                                                   :size           :small
+                                                                                   :style          {:background-color colors/white-opa-10}
+                                                                                   :text-style     {:color colors/white}}]
+                                            [rn/text {:style {:color colors/white}} "did something here."]]
+                                :icon      :placeholder
+                                :message   {:body (get-in notification [:message :content :text])}
+                                :timestamp (:timestamp notification)
+                                :title     "Activity Title"
+                                :unread?   (not (:read notification))}]])
+
+(defn notifications-list
+  []
+  (let [notifications (<sub [:activity-center/notifications-per-read-status])]
+    [rn/flat-list {:style          {:padding-horizontal 8}
+                   :data           notifications
+                   :key-fn         :id
+                   :on-end-reached #(>evt [:activity-center/notifications-fetch-next-page])
+                   :render-fn      render-notification}]))
+
+(defn activity-center []
+  (reagent/create-class
+   {:component-did-mount #(>evt [:activity-center/notifications-fetch-first-page {:status-filter :unread}])
+    :reagent-render
+    (fn []
+      [:<>
+       [topbar/topbar {:navigation {:on-press #(>evt [:navigate-back])}
+                       :title      (i18n/label :t/activity)}]
+       ;; TODO(ilmotta): Temporary solution to switch between read/unread
+       ;; notifications while the Design team works on the mockups.
+       [button/button {:on-press #(>evt [:activity-center/notifications-fetch-first-page {:status-filter :unread}])}
+        "Unread"]
+       [button/button {:on-press #(>evt [:activity-center/notifications-fetch-first-page {:status-filter :read}])}
+        "Read"]
+       [notifications-list]])}))

src/status_im/ui/screens/screens.cljs

@@ -80,6 +80,7 @@
             [status-im.ui.screens.network.network-details.views :as network-details]
             [status-im.ui.screens.network.views :as network]
             [status-im.ui.screens.notifications-center.views :as notifications-center]
+            [status-im.ui.screens.activity-center.views :as activity-center]
             [status-im.ui.screens.notifications-settings.views :as notifications-settings]
             [status-im.ui.screens.offline-messaging-settings.edit-mailserver.views
              :as
@@ -255,6 +256,9 @@
             ;;TODO custom nav
             :options   {:topBar {:visible false}}
             :component notifications-center/center}
+           {:name      :activity-center
+            :options   {:topBar {:visible false}}
+            :component activity-center/activity-center}
            ;; Community
            {:name      :community
             ;;TODO custom