From 6d227b61e19c22c573c1dd168962d6e0c3c6a01a Mon Sep 17 00:00:00 2001
From: Lungu Cristian <lungucristian95@gmail.com>
Date: Tue, 27 Feb 2024 15:36:12 +0200
Subject: [PATCH] Add react hooks `use-state` and `use-memo` (#19016)

* feat: added use-state and use-memo

* feat: add reagent functional compiler

* test: fixed recovery-phrase tests
---
 .../recovery_phrase/component_spec.cljs       |  4 ++--
 src/react_native/core.cljs                    |  6 ++++++
 src/status_im/navigation/view.cljs            | 20 +++++++++++++------
 src/test_helpers/component_tests_preload.cljs |  2 ++
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/quo/components/inputs/recovery_phrase/component_spec.cljs b/src/quo/components/inputs/recovery_phrase/component_spec.cljs
index 813aca2d4d..e94e325c3b 100644
--- a/src/quo/components/inputs/recovery_phrase/component_spec.cljs
+++ b/src/quo/components/inputs/recovery_phrase/component_spec.cljs
@@ -39,7 +39,7 @@
             {:keys [ok-words error-words]} (group-by #(if (string? %) :ok-words :error-words)
                                                      children-text-nodes)]
         (h/is-equal (apply str ok-words) "Text with some   that   the ")
-        (h/is-truthy (= (map #(-> % :props :argv second) error-words)
+        (h/is-truthy (= (map #(-> % :props :argv first) error-words)
                         ["error" "words" "don't" "satisfy" "predicate"]))))
 
     (h/test "Marked when words exceed the limit given"
@@ -55,7 +55,7 @@
         (h/is-equal (string/trim (apply str ok-words))
                     "these are ok words,")
         (h/is-equal (->> error-words
-                         (map #(-> % :props :argv second))
+                         (map #(-> % :props :argv first))
                          (interpose " ")
                          (apply str))
                     "these words exceed the limit")))))
diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs
index 4f62cf6658..fb4c3de837 100644
--- a/src/react_native/core.cljs
+++ b/src/react_native/core.cljs
@@ -122,6 +122,8 @@
 
 (def memo react/memo)
 
+(def use-state react/useState)
+
 (def create-ref react/createRef)
 
 (def use-ref react/useRef)
@@ -179,6 +181,10 @@
   ([handler deps]
    (react/useCallback handler (get-js-deps deps))))
 
+(defn use-memo
+  [handler deps]
+  (react/useMemo handler (get-js-deps deps)))
+
 (def layout-animation (.-LayoutAnimation ^js react-native))
 (def configure-next (.-configureNext ^js layout-animation))
 
diff --git a/src/status_im/navigation/view.cljs b/src/status_im/navigation/view.cljs
index c63a449eae..c24bc27780 100644
--- a/src/status_im/navigation/view.cljs
+++ b/src/status_im/navigation/view.cljs
@@ -17,6 +17,8 @@
     [status-im.setup.hot-reload :as reloader]
     [utils.re-frame :as rf]))
 
+(def functional-compiler (reagent/create-compiler {:function-components true}))
+
 (defn get-screens
   []
   (reduce
@@ -72,7 +74,8 @@
         (when js/goog.DEBUG
           [:<>
            [reloader/reload-view]
-           [schema.view/view]])]))))
+           [schema.view/view]])]))
+   functional-compiler))
 
 (def bottom-sheet
   (reagent/reactify-component
@@ -90,7 +93,8 @@
           :keyboard-vertical-offset (- (max 20 (:bottom insets)))}
          (when sheet
            [bottom-sheet/view {:insets insets :hide? hide?}
-            sheet])]]))))
+            sheet])]]))
+   functional-compiler))
 
 (def toasts (reagent/reactify-component toasts/toasts))
 
@@ -103,7 +107,8 @@
       [inactive]
       [popover/popover]
       (when js/goog.DEBUG
-        [reloader/reload-view])])))
+        [reloader/reload-view])])
+   functional-compiler))
 
 (def visibility-status-popover-comp
   (reagent/reactify-component
@@ -113,7 +118,8 @@
       [inactive]
       [visibility-status-views/visibility-status-popover]
       (when js/goog.DEBUG
-        [reloader/reload-view])])))
+        [reloader/reload-view])])
+   functional-compiler))
 
 (def sheet-comp-old
   (reagent/reactify-component
@@ -121,7 +127,8 @@
      ^{:key (str "sheet-old" @reloader/cnt)}
      [:<>
       [inactive]
-      [bottom-sheets-old/bottom-sheet]])))
+      [bottom-sheets-old/bottom-sheet]])
+   functional-compiler))
 
 (def signing-comp
   (reagent/reactify-component
@@ -131,4 +138,5 @@
       [inactive]
       [signing/signing]
       (when js/goog.DEBUG
-        [reloader/reload-view])])))
+        [reloader/reload-view])])
+   functional-compiler))
diff --git a/src/test_helpers/component_tests_preload.cljs b/src/test_helpers/component_tests_preload.cljs
index 912cb623d0..49695b04d3 100644
--- a/src/test_helpers/component_tests_preload.cljs
+++ b/src/test_helpers/component_tests_preload.cljs
@@ -1,6 +1,7 @@
 (ns test-helpers.component-tests-preload
   {:dev/always true}
   (:require
+    [reagent.core :as reagent]
     ;; NOTE: Do NOT sort i18n-resources because it MUST be loaded first.
     [status-im.setup.i18n-resources :as i18n-resources]
     #_{:clj-kondo/ignore [:unsorted-required-namespaces]}
@@ -15,6 +16,7 @@
   should never be directly required. However, it will be loaded automatically
   before any component test runs."
   []
+  (reagent/set-default-compiler! (reagent/create-compiler {:function-components true}))
   (interceptors/register-global-interceptors)
   (i18n/set-language "en")
   (i18n-resources/load-language "en"))