From 5bdf46dd71cbdc22a694933d4f7c7ab5013bd5b9 Mon Sep 17 00:00:00 2001
From: Sean Hagstrom <sean@seanhagstrom.com>
Date: Tue, 26 Mar 2024 09:45:52 +0000
Subject: [PATCH] wip: add small experiment for ui callback with state and
 memoization

---
 .../profile/contact/contact_request/view.cljs | 46 +++++++++++++++++--
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/status_im/contexts/profile/contact/contact_request/view.cljs b/src/status_im/contexts/profile/contact/contact_request/view.cljs
index deed16ef3b..d8ad3ea7d9 100644
--- a/src/status_im/contexts/profile/contact/contact_request/view.cljs
+++ b/src/status_im/contexts/profile/contact/contact_request/view.cljs
@@ -1,24 +1,58 @@
 (ns status-im.contexts.profile.contact.contact-request.view
   (:require [clojure.string :as string]
             [quo.core :as quo]
+            [re-frame.core :as re-frame]
             [react-native.core :as rn]
             [react-native.platform :as platform]
+            [reagent.ratom]
             [status-im.constants :as constants]
             [status-im.contexts.profile.contact.contact-request.style :as style]
             [status-im.contexts.profile.utils :as profile.utils]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
+(defn make-callback
+  [state-ratom]
+  (let [state-ref (atom nil)]
+    (js/console.log "init make-callback")
+    @(reagent.ratom/make-reaction
+      (fn []
+        (js/console.log "init reagent reaction")
+        (let [state @state-ratom]
+          (js/console.log
+           (if (nil? @state-ref)
+             "state init"
+             "state update")
+           (clj->js state))
+          (reset! state-ref state)))
+      :auto-run true)
+    (memoize
+     (fn [callback]
+       (js/console.log "init callback")
+       (fn [event]
+         (callback @state-ref event))))))
+
+(def bind
+  (memoize make-callback))
+
+(defn on-press-test
+  [state event]
+  (js/console.log "on-press state" (clj->js state))
+  (js/console.log "on-press event" #js{:target (.-target event)})
+  (rf/dispatch [:hide-bottom-sheet]))
+
 (defn view
   []
-  (let [{:keys [public-key customization-color]
-         :as   profile}       (rf/sub [:contacts/current-contact])
+  (let [profile-sub           (re-frame/subscribe [:contacts/current-contact])
+        {:keys [public-key customization-color]
+         :as   profile}       (deref profile-sub)
         customization-color   customization-color
         full-name             (profile.utils/displayed-name profile)
         profile-picture       (profile.utils/photo profile)
         input-ref             (rn/use-ref-atom nil)
         [message set-message] (rn/use-state "")
         on-message-change     (rn/use-callback #(set-message %))
+        act                   (bind profile-sub)
         on-message-submit     (rn/use-callback (fn []
                                                  (rf/dispatch [:hide-bottom-sheet])
                                                  (rf/dispatch [:contact.ui/send-contact-request
@@ -63,10 +97,14 @@
         :input-container-style {:flex-shrink 1}}]]
      [quo/bottom-actions
       {:container-style  {:style {:flex 1}}
-       :actions          :one-action
+       :actions          :two-actions
        :button-one-props {:disabled?           (string/blank? message)
                           :accessibility-label :send-contact-request
                           :customization-color customization-color
                           :on-press            on-message-submit}
-       :button-one-label (i18n/label :t/send-contact-request)}]]))
+       :button-one-label (i18n/label :t/send-contact-request)
+       :button-two-props {:accessibility-label :test-button
+                          :customization-color :danger
+                          :on-press            (act on-press-test)}
+       :button-two-label "test"}]]))