From 2e00c8a10c3fd9cc2d7cfca118fc4155308de964 Mon Sep 17 00:00:00 2001
From: Pawel Kapala <github@kapware.com>
Date: Mon, 27 Sep 2021 22:41:21 +0200
Subject: [PATCH] Replaced chat flat list with bidirectional infinite scroll

---
 package.json                                |  2 ++
 src/status_im/ui/components/list/views.cljs | 15 +++++++++++++++
 src/status_im/ui/screens/chat/views.cljs    |  2 +-
 yarn.lock                                   | 17 +++++++++++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 71e3e9a249..21efb48853 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@react-native-community/netinfo": "^4.4.0",
     "@react-native-community/push-notification-ios": "^1.4.1",
     "@react-native-community/slider": "^3.0.0",
+    "@stream-io/flat-list-mvcp": "^0.10.1",
     "bignumber.js": "git+https://github.com/status-im/bignumber.js.git#v4.0.2-status",
     "buffer": "^5.4.2",
     "chance": "^1.1.0",
@@ -34,6 +35,7 @@
     "react-dom": "^16.4.2",
     "react-native": "0.63.4",
     "react-native-background-timer": "^2.1.1",
+    "react-native-bidirectional-infinite-scroll": "^0.3.3",
     "react-native-camera-kit": "^8.0.4",
     "react-native-config": "git+https://github.com/status-im/react-native-config.git#v1.4.2-status",
     "react-native-dark-mode": "^0.2.2",
diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs
index 3467214084..e53b8c6e73 100644
--- a/src/status_im/ui/components/list/views.cljs
+++ b/src/status_im/ui/components/list/views.cljs
@@ -3,9 +3,11 @@
             [status-im.ui.components.list.styles :as styles]
             [status-im.ui.components.react :as react]
             [status-im.utils.platform :as platform]
+            ["react-native-bidirectional-infinite-scroll" :as react-native-bidirectional-infinite-scroll]
             ["react-native" :as react-native]))
 
 (def flat-list-class (reagent/adapt-react-class (.-FlatList react-native)))
+(def bidi-flat-list-class (reagent/adapt-react-class (.-FlatList react-native-bidirectional-infinite-scroll)))
 (def section-list-class (reagent/adapt-react-class (.-SectionList react-native)))
 
 (def memo-wrap-render-fn
@@ -55,6 +57,19 @@
              props
              {:data (to-array data)})])))
 
+(defn bidi-flat-list
+  "A wrapper for react-native-bidirectional-infinite-scroll.
+  See https://github.com/GetStream/react-native-bidirectional-infinite-scroll"
+  ([{:keys [data] :as props}]
+   (do
+     {:pre [(or (nil? data)
+                (sequential? data))]}
+     [bidi-flat-list-class
+      (merge (base-list-props props)
+             props
+             {:data (to-array data)})])))
+
+
 (defn- wrap-render-section-header-fn [f]
   (fn [^js data]
     (let [^js section (.-section data)]
diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs
index c3892cf408..425d8c4d7c 100644
--- a/src/status_im/ui/screens/chat/views.cljs
+++ b/src/status_im/ui/screens/chat/views.cljs
@@ -297,7 +297,7 @@
   (let [{:keys [group-chat chat-id public? community-id admins]} chat
         messages @(re-frame/subscribe [:chats/chat-messages-stream chat-id])]
     ;;do not use anonymous functions for handlers
-    [list/flat-list
+    [list/bidi-flat-list
      (merge
       pan-responder
       {:key-fn                       list-key-fn
diff --git a/yarn.lock b/yarn.lock
index 7f99bfe2dd..87942fcb61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1409,6 +1409,13 @@
   dependencies:
     type-detect "4.0.8"
 
+"@stream-io/flat-list-mvcp@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@stream-io/flat-list-mvcp/-/flat-list-mvcp-0.10.1.tgz#ee7058c247729556959b19a281ae9e74e20f3e65"
+  integrity sha512-/snvyGqEO/7WKrcFOUxh1s1GPfYaUOwr7wyWgZogOUrGXE75zzEvOe39mooMoCJ8G92govZoAO5LCkftXQUoAQ==
+  dependencies:
+    lodash.debounce "^4.0.8"
+
 "@types/babel__core@^7.1.7":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -5070,6 +5077,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -6586,6 +6598,11 @@ react-native-background-timer@^2.1.1:
   resolved "https://registry.yarnpkg.com/react-native-background-timer/-/react-native-background-timer-2.2.0.tgz#ff82d30899209b924983cc00e6ce174b8de5054a"
   integrity sha512-Y7N6diSFko/FCJPMmB0PoBlmY1kEcma7qDVwn8t7zi12GLqpe/Vwls97onkSD8/QL+BR33BygUHOrLTPwgeKfg==
 
+react-native-bidirectional-infinite-scroll@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/react-native-bidirectional-infinite-scroll/-/react-native-bidirectional-infinite-scroll-0.3.3.tgz#31e83e30514be2eaaa889b97d01149c8a08576ec"
+  integrity sha512-zxYJDjrxTkGqg83WH3fSdufg79XZ7xDDn9HdHlKo9avAcz92Rf28/ivDeUM2aOUmmboqJK8BqtVByT6cF/taYg==
+
 react-native-camera-kit@^8.0.4:
   version "8.0.4"
   resolved "https://registry.yarnpkg.com/react-native-camera-kit/-/react-native-camera-kit-8.0.4.tgz#8e350b37a205054ceb140a8babe1d032acdcdbd5"