Gaps on desktop

src/status_im/ui/components/popup_menu/views.cljs

@@ -21,6 +21,10 @@
          :on-select #(re-frame/dispatch [:chat.ui/clear-history-pressed])}
         {:text (i18n/label :t/fetch-history)
          :on-select #(re-frame/dispatch [:chat.ui/fetch-history-pressed chat-id])}
+        #_{:text      "Fetch 48-60h"
+           :on-select #(re-frame/dispatch [:chat.ui/fetch-history-pressed48-60 chat-id])}
+        #_{:text      "Fetch 84-96h"
+           :on-select #(re-frame/dispatch [:chat.ui/fetch-history-pressed84-96 chat-id])}
         {:text (i18n/label :t/delete-chat)
          :on-select #(re-frame/dispatch [(if (and group-chat (not public?))
                                            :group-chats.ui/remove-chat-pressed

src/status_im/ui/screens/chat/message/gap.cljs

@@ -0,0 +1,54 @@
+(ns status-im.ui.screens.chat.message.gap
+  (:require-macros [status-im.utils.views :as views])
+  (:require [status-im.ui.components.react :as react]
+            [re-frame.core :as re-frame]
+            [status-im.i18n :as i18n]
+            [status-im.utils.datetime :as datetime]
+            [status-im.ui.screens.chat.styles.input.gap :as style]))
+
+(defn on-press
+  [ids first-gap? idx list-ref]
+  (fn []
+    (when (and list-ref @list-ref)
+      (.scrollToIndex @list-ref
+                      #js {:index        (max 0 (dec idx))
+                           :viewOffset   20
+                           :viewPosition 0.5}))
+    (if first-gap?
+      (re-frame/dispatch [:chat.ui/fetch-more])
+      (re-frame/dispatch [:chat.ui/fill-gaps ids]))))
+
+(views/defview gap
+  [{:keys [gaps first-gap?]} idx list-ref]
+  (views/letsubs [in-progress? [:chats/fetching-gap-in-progress?
+                                (if first-gap?
+                                  [:first-gap]
+                                  (:ids gaps))]
+                  connected?   [:mailserver/connected?]
+                  range        [:chats/range]
+                  intro-status [:chats/current-chat-intro-status]]
+    (let [ids            (:ids gaps)
+          intro-loading? (= intro-status :loading)]
+      (when-not (and first-gap? intro-loading?)
+        [react/view {:style style/gap-container}
+         [react/touchable-highlight
+          {:on-press (when (and connected? (not in-progress?))
+                       (on-press ids first-gap? idx list-ref))
+           :style    style/touchable}
+          [react/view {:style style/label-container}
+           (if in-progress?
+             [react/activity-indicator]
+             [react/nested-text
+              {:style (style/gap-text connected?)}
+              (i18n/label (if first-gap?
+                            :t/load-more-messages
+                            :t/fetch-messages))
+              (when first-gap?
+                [{:style style/date}
+                 (let [date (datetime/timestamp->long-date
+                             (* 1000 (:lowest-request-from range)))]
+                   (str
+                    "\n"
+                    (i18n/label :t/load-messages-before
+                                {:date date})))])])]]]))))
+

src/status_im/ui/screens/chat/styles/input/gap.cljs

@@ -0,0 +1,33 @@
+(ns status-im.ui.screens.chat.styles.input.gap
+  (:require [status-im.ui.components.colors :as colors]))
+
+(def gap-container
+  {:align-self          :stretch
+   :margin-top          24
+   :margin-bottom       24
+   :height              48
+   :align-items         :center
+   :justify-content     :center
+   :border-color        colors/gray-light
+   :border-top-width    1
+   :border-bottom-width 1
+   :background-color    :white})
+
+(def label-container
+  {:flex            1
+   :align-items     :center
+   :justify-content :center
+   :text-align      :center})
+
+(defn gap-text [connected?]
+  {:text-align :center
+   :color      (if connected?
+                 colors/blue
+                 colors/gray)})
+
+(def touchable
+  {:height 48})
+
+(def date
+  {:typography :caption
+   :color      colors/gray})

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

@@ -27,7 +27,8 @@
             [status-im.ui.screens.chat.toolbar-content :as toolbar-content]
             [status-im.utils.platform :as platform]
             [status-im.utils.utils :as utils]
-            [status-im.utils.datetime :as datetime])
+            [status-im.utils.datetime :as datetime]
+            [status-im.ui.screens.chat.message.gap :as gap])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn add-contact-bar [public-key]
@@ -71,65 +72,9 @@
   [{{:keys [value]} :row}]
   [message-datemark/chat-datemark-mobile value])
 
-(defview gap
-  [ids idx list-ref in-progress? connected? range first-gap? intro-loading?]
-  (when-not (and first-gap? intro-loading?)
-    [react/view {:align-self          :stretch
-                 :margin-top          24
-                 :margin-bottom       24
-                 :height              48
-                 :align-items         :center
-                 :justify-content     :center
-                 :border-color        colors/gray-light
-                 :border-top-width    1
-                 :border-bottom-width 1
-                 :background-color    :white}
-     [react/touchable-highlight
-      {:on-press (when (and connected? (not in-progress?))
-                   #(do
-                      (when @list-ref
-                        (.scrollToIndex @list-ref #js {:index        (max 0 (dec idx))
-                                                       :viewOffset   20
-                                                       :viewPosition 0.5}))
-                      (if first-gap?
-                        (re-frame/dispatch [:chat.ui/fetch-more])
-                        (re-frame/dispatch [:chat.ui/fill-gaps ids]))))}
-      [react/view {:style {:flex            1
-                           :align-items     :center
-                           :justify-content :center
-                           :text-align      :center}}
-       (if in-progress?
-         [react/activity-indicator]
-         [react/nested-text
-          {:style {:text-align :center
-                   :color      (if connected?
-                                 colors/blue
-                                 colors/gray)}}
-          (i18n/label (if first-gap?
-                        :t/load-more-messages
-                        :t/fetch-messages))
-          (when first-gap?
-            [{:style {:typography :caption
-                      :color      colors/gray}}
-             (str "\n"
-                  (i18n/label :t/load-messages-before
-                              {:date (datetime/timestamp->long-date
-                                      (* 1000 (:lowest-request-from range)))}))])])]]]))
-
-(defview gap-wrapper [{:keys [gaps first-gap?]} idx list-ref]
-  (letsubs [in-progress? [:chats/fetching-gap-in-progress?
-                          (if first-gap?
-                            [:first-gap]
-                            (:ids gaps))]
-            connected?   [:mailserver/connected?]
-            range        [:chats/range]
-            intro-status [:chats/current-chat-intro-status]]
-    [gap (:ids gaps) idx list-ref in-progress?
-     connected? range first-gap? (= intro-status :loading)]))
-
 (defmethod message-row :gap
   [{:keys [row idx list-ref]}]
-  [gap-wrapper row idx list-ref])
+  [gap/gap row idx list-ref])
 
 (defmethod message-row :default
   [{:keys [group-chat current-public-key modal? row]}]

src/status_im/ui/screens/desktop/main/chat/views.cljs

@@ -25,7 +25,8 @@
             [status-im.utils.identicon :as identicon]
             [status-im.utils.utils :as utils]
             [status-im.ui.screens.desktop.main.chat.emoji :as emoji]
-            [status-im.ui.components.icons.vector-icons :as icons])
+            [status-im.ui.components.icons.vector-icons :as icons]
+            [status-im.ui.screens.chat.message.gap :as gap])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn toolbar-chat-view
@@ -186,9 +187,16 @@
 (defmethod message :default
   [text me? {:keys [message-id chat-id message-status user-statuses from
                     current-public-key content-type outgoing type value] :as message}]
-  (if (= type :datemark)
+  (cond
+    (= type :datemark)
     ^{:key (str "datemark" message-id)}
     [message.datemark/chat-datemark value]
+
+    (= type :gap)
+    ^{:key (str "gap" value)}
+    [gap/gap message nil nil]
+
+    :else
     (when (contains? constants/desktop-content-types content-type)
       (reagent.core/create-class
        {:component-did-mount