[#22404] [News Feed] Implement News AC component

Author: flexsurfer

resources/images/icons2/20x20/[email protected] renamed to resources/images/icons2/20x20/[email protected]

@@ -29,6 +29,7 @@
   (let [customization-color (rf/sub [:profile/customization-color])
 
         preview-privacy? (rf/sub [:profile/preview-privacy?])
+        news-feed-enabled? (rf/sub [:profile/news-feed-enabled?])
         see-profile-pictures-from (rf/sub [:profile/pictures-visibility])
         show-profile-pictures-to (rf/sub [:multiaccount/profile-pictures-show-to])
 
@@ -38,6 +39,14 @@
                                          (not preview-privacy?)]))
                          [preview-privacy?])
 
+        toggle-news-feed
+        (rn/use-callback (fn []
+                           (rf/dispatch [:profile.settings/profile-update :news-feed-enabled?
+                                         (not news-feed-enabled?)])
+                           (rf/dispatch [:profile.settings/profile-update :news-rss-enabled?
+                                         (not news-feed-enabled?)]))
+                         [news-feed-enabled?])
+
         open-see-profile-pictures-from-options
         (rn/use-callback (fn []
                            (rf/dispatch
@@ -89,6 +98,15 @@
                     :blur?             true
                     :action            :arrow
                     :action-props      {:on-change #(rf/dispatch [:open-modal
-                                                                  :screen/settings.share-usage-data])}}]
+                                                                  :screen/settings.share-usage-data])}}
+                   {:title             (i18n/label :t/status-news-rss)
+                    :description       :text
+                    :description-props {:text (i18n/label :t/rss-privacy-warning)}
+                    :blur?             true
+                    :action            :selector
+                    :action-props      {:on-change           toggle-news-feed
+                                        :checked?            news-feed-enabled?
+                                        :id                  :news-feed
+                                        :customization-color customization-color}}]
        :blur?     true
        :list-type :settings}]]))

resources/images/icons2/20x20/[email protected] renamed to resources/images/icons2/20x20/[email protected]

@@ -0,0 +1 @@
+(ns status-im.contexts.shell.activity-center.notification.news.style)

src/status_im/contexts/settings/privacy_and_security/view.cljs

@@ -0,0 +1,82 @@
+(ns status-im.contexts.shell.activity-center.notification.news.view
+  (:require [clojure.string :as string]
+            [promesa.core :as promesa]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.contexts.shell.activity-center.notification.common.view :as common]
+            [utils.datetime :as datetime]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn auto-resized-image
+  [url]
+  (let [[height set-height] (rn/use-state nil)
+        window-width        (- (:width (rn/get-window)) 40)]
+    (rn/use-effect #(-> (rn/image-get-size url)
+                        (promesa/then (fn [[w h]]
+                                        (let [scale      (/ window-width w)
+                                              new-height (* h scale)]
+                                          (set-height new-height))))))
+    (if height
+      [rn/image
+       {:resize-mode :contain
+        :style       {:width         window-width
+                      :height        height
+                      :align-self    :center
+                      :border-radius 12}
+        :source      url}]
+      [rn/view {:style {:height 200 :align-items :center :justify-content :center}}
+       [rn/activity-indicator]])))
+
+(defn sheet
+  [{:keys [newsImageUrl newsTitle newsContent newsLink newsLinkLabel]} timestamp]
+  (let [customization-color (rf/sub [:profile/customization-color])]
+    [:<>
+     [quo/drawer-top {:title newsTitle :description timestamp}]
+     [rn/scroll-view {:style {:flex 1}}
+      (when (not (string/blank? newsImageUrl))
+        [auto-resized-image newsImageUrl])
+      [quo/text
+       {:style {:padding-horizontal 20
+                :padding-vertical   8}}
+       newsContent]]
+     (when (and (not (string/blank? newsLink)) (not (string/blank? newsLinkLabel)))
+       [quo/bottom-actions
+        {:button-one-label newsLinkLabel
+         :button-one-props {:customization-color
+                            customization-color
+                            :icon-right :i/external
+                            :on-press
+                            (fn []
+                              (rf/dispatch [:browser.ui/open-url newsLink])
+                              (rf/dispatch [:hide-bottom-sheet]))}}])]))
+
+(defn view
+  [{:keys [notification extra-fn]}]
+  (let [customization-color                           (rf/sub [:profile/customization-color])
+        {:keys [newsTitle newsDescription timestamp]} notification
+        timestamp                                     (datetime/timestamp->relative timestamp)]
+    [common/swipeable
+     {:left-button    common/swipe-button-read-or-unread
+      :left-on-press  common/swipe-on-press-toggle-read
+      :right-button   common/swipe-button-delete
+      :right-on-press common/swipe-on-press-delete
+      :extra-fn       extra-fn}
+     [quo/activity-log
+      {:title               newsTitle
+       :customization-color customization-color
+       :icon                :i/status-logo-bw
+       :timestamp           timestamp
+       :context             [[quo/text {} newsDescription]]
+       :items               [{:type                :button
+                              :subtype             :primary
+                              :key                 :button-reply
+                              :customization-color customization-color
+                              :label               (i18n/label :t/read-more)
+                              :accessibility-label :read-more
+                              :on-press            #(rf/dispatch
+                                                     [:show-bottom-sheet
+                                                      {:theme :dark
+                                                       :content
+                                                       (fn []
+                                                         [sheet notification timestamp])}])}]}]]))

src/status_im/contexts/shell/activity_center/notification/news/style.cljs

@@ -12,6 +12,7 @@
 (def ^:const contact-verification 10)
 (def ^:const new-installation-received 23)
 (def ^:const new-installation-created 24)
+(def ^:const news-feed 29)
 
 (def ^:const all-supported
   #{one-to-one-chat
@@ -24,7 +25,8 @@
     community-kicked
     contact-verification
     new-installation-received
-    new-installation-created})
+    new-installation-created
+    news-feed})
 
 ;; TODO: Replace with correct enum values once status-go implements them.
 (def ^:const tx 66612)

src/status_im/contexts/shell/activity_center/notification/news/view.cljs

@@ -29,6 +29,11 @@
       :default-active      filter-type
       :data                [{:id    types/no-type
                              :label (i18n/label :t/all)}
+                            {:id                  types/news-feed
+                             :label               (i18n/label :t/news)
+                             :accessibility-label :tab-news
+                             :notification-dot?   (when-not is-mark-all-as-read-undoable?
+                                                    (contains? types-with-unread types/news-feed))}
                             {:id                  types/admin
                              :label               (i18n/label :t/admin)
                              :accessibility-label :tab-admin

src/status_im/contexts/shell/activity_center/notification_types.cljs

@@ -18,6 +18,7 @@
      contact-verification]
     [status-im.contexts.shell.activity-center.notification.membership.view :as membership]
     [status-im.contexts.shell.activity-center.notification.mentions.view :as mentions]
+    [status-im.contexts.shell.activity-center.notification.news.view :as news]
     [status-im.contexts.shell.activity-center.notification.reply.view :as reply]
     [status-im.contexts.shell.activity-center.notification.syncing.view :as syncing]
     [status-im.contexts.shell.activity-center.style :as style]
@@ -55,6 +56,9 @@
        (= notification-type types/new-installation-created)
        [syncing/installation-created-view props]
 
+       (= notification-type types/news-feed)
+       [news/view props]
+
        (types/membership notification-type)
        (condp = notification-type
          types/private-group-chat [membership/view props]
@@ -69,7 +73,6 @@
 (defn view
   []
   (let [notifications    (rf/sub [:activity-center/notifications])
-
         ;; We globally control the active swipeable for all notifications
         ;; because when a swipe left/right gesture initiates, the previously
         ;; active swiped notification (if any) must be removed & closed with

src/status_im/contexts/shell/activity_center/tabs/view.cljs

@@ -234,6 +234,11 @@
  (fn [{:keys [preview-privacy?]}]
    (boolean preview-privacy?)))
 
+(re-frame/reg-sub :profile/news-feed-enabled?
+ :<- [:profile/profile]
+ (fn [{:keys [news-feed-enabled?]}]
+   (boolean news-feed-enabled?)))
+
 (defn- replace-multiaccount-image-uri
   [profile port font-file avatar-opts theme]
   (let [{:keys [key-uid images

src/status_im/contexts/shell/activity_center/view.cljs

@@ -3,7 +3,7 @@
     "_comment": "Instead use: scripts/update-status-go.sh <rev>",
     "owner": "status-im",
     "repo": "status-go",
-    "version": "v10.27.0",
-    "commit-sha1": "f5fe88d8b31a287e66a48fe90ef613c7617279b6",
-    "src-sha256": "01cn2f9f3sq5dmygh4gqpip5zp9f61383xix7rfwxr2nazbqrka3"
+    "version": "feat/news-feed-mobile",
+    "commit-sha1": "6ded349455d121039625961cec23fdbb403fb175",
+    "src-sha256": "1rvnvmzvq9g4rnc3mvbyk63m8v6zv8bvim586p2l4x02p2ywha29"
 }