[15166] Show message edited status (#15190)

src/status_im2/contexts/chat/messages/content/text/style.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.chat.messages.content.text.style
-  (:require
+  (:require [quo2.foundations.colors :as colors]))
-    [quo2.foundations.colors :as colors]))
 
 (def block
   {:border-radius      6

src/status_im2/contexts/chat/messages/content/text/view.cljs

@@ -5,7 +5,8 @@
     [react-native.core :as rn]
     [status-im2.contexts.chat.messages.content.text.style :as style]
     [status-im2.contexts.chat.messages.link-preview.view :as link-preview]
-    [utils.re-frame :as rf]))
+    [utils.re-frame :as rf]
+    [utils.i18n :as i18n]))
 
 
 (defn render-inline
@@ -48,11 +49,22 @@
         :style  {:color (colors/theme-colors colors/primary-50 colors/primary-60)}}
        (rf/sub [:messages/resolve-mention literal])]])
 
+    :edited
+    (conj units
+
+          [quo/text
+           {:weight :medium
+            :style  {:font-size 11 ; Font-size must be used instead of props or the
+                                   ; styles will clash with original message text
+                     :color     (colors/theme-colors colors/neutral-40
+                                                     colors/neutral-50)}}
+           literal])
+
     (conj units literal)))
 
 
 (defn render-block
-  [blocks {:keys [type ^js literal children]}]
+  [blocks {:keys [type ^js literal children]} edited-at]
   (case (keyword type)
     :paragraph
     (conj blocks
@@ -64,19 +76,46 @@
     :blockquote
     (conj blocks
           [rn/view {:style style/quote}
-           [quo/text literal]])
+           [quo/text literal]]
+          (when edited-at
+            [quo/text
+             {:weight :medium
+              :style  {:font-size  11
+                       :margin-top 4
+                       :color      (colors/theme-colors colors/neutral-40 colors/neutral-50)}}
+             (str " (" (i18n/label :t/edited) ")")]))
 
     :codeblock
     (conj blocks
           [rn/view {:style (merge style/block (style/code))}
-           [quo/text (subs literal 0 (dec (count literal)))]])
+           [quo/text (subs literal 0 (dec (count literal)))]]
+          (when edited-at
+            [quo/text
+             {:weight :medium
+              :style  {:font-size  11
+                       :margin-top 4
+                       :color      (colors/theme-colors colors/neutral-40 colors/neutral-50)}}
+             (str " (" (i18n/label :t/edited) ")")]))
     blocks))
 
+(defn add-edited-tag
+  [parsed-text]
+  (update parsed-text
+          (dec (count parsed-text))
+          (fn [last-literal]
+            (update last-literal
+                    :children
+                    conj
+                    {:literal (str " (" (i18n/label :t/edited) ")")
+                     :type    :edited}))))
+
 (defn render-parsed-text
-  [{:keys [content]}]
+  [{:keys [content edited-at]}]
-  (reduce render-block
+  (reduce (fn [acc e]
+            (render-block acc e edited-at))
           [:<>]
-          (:parsed-text content)))
+          (cond-> (:parsed-text content)
+            edited-at add-edited-tag)))
 
 (defn text-content
   [message-data context]

src/status_im2/contexts/chat/messages/content/view.cljs

@@ -84,11 +84,10 @@
                                                          context)}]))
 
 (defn user-message-content
-  [{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data}
+  []
-   {:keys [chat-id] :as context}]
-  [:f>
   (let [show-delivery-state? (reagent/atom false)]
-     (fn []
+    (fn [{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data}
+         {:keys [chat-id] :as context}]
       (let [first-image     (first (:album message-data))
             outgoing-status (if (= content-type constants/content-type-album)
                               (:outgoing-status first-image)
@@ -107,7 +106,7 @@
                                 :opacity       (if (and outgoing (= outgoing-status :sending)) 0.5 1)}
           :on-press            (fn []
                                  (when (and outgoing
-                                             (not (= outgoing-status :sending))
+                                            (not= outgoing-status :sending)
                                             (not @show-delivery-state?))
                                    (reset! show-delivery-state? true)
                                    (js/setTimeout #(reset! show-delivery-state? false)
@@ -145,7 +144,7 @@
 
               [not-implemented/not-implemented [content.unknown/unknown-content message-data]])
             (when @show-delivery-state?
-               [status/status outgoing-status])]]]])))])
+              [status/status outgoing-status])]]]]))))
 
 (defn message-with-reactions
   [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group? message-id] :as message-data}

src/status_im2/contexts/chat/messages/link_preview/view.cljs

@@ -87,13 +87,19 @@
           [community-preview cached-preview-data]))})))
 
 (defn link-preview-loader
-  [link {:keys [on-long-press]}]
+  [link _]
   (reagent/create-class
    {:component-did-mount
     (fn []
       (rf/dispatch [:chat.ui/load-link-preview-data link]))
+    :component-did-update
+    (fn [this [_ previous-props]]
+      (let [[_ props]      (.-argv (.-props ^js this))
+            refresh-photo? (not= previous-props props)]
+        (when refresh-photo?
+          (rf/dispatch [:chat.ui/load-link-preview-data props]))))
     :reagent-render
-    (fn []
+    (fn [link {:keys [on-long-press]}]
       (let [cached-preview-data (rf/sub [:link-preview/cache link])]
         (when-let [{:keys [site title thumbnail-url error] :as preview-data} cached-preview-data]
           (when (and (not error) site title)
@@ -141,8 +147,8 @@
     (i18n/label :t/dont-ask)]])
 
 (defn link-preview
-  [{:keys [content]} context]
+  [{:keys [message-id chat-id]} context]
-  (let [links         (:links content)
+  (let [links         (get-in (rf/sub [:chats/chat-messages chat-id]) [message-id :content :links])
         ask-user?     (rf/sub [:link-preview/link-preview-request-enabled])
         enabled-sites (rf/sub [:link-preview/enabled-sites])
         whitelist     (rf/sub [:link-previews-whitelist])]