status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-22 07:38:34 +00:00
Code Issues Projects Releases Wiki Activity

wip: add small experiment for ui callback with state and memoization

Browse Source
This commit is contained in:
Sean Hagstrom 2024-03-26 09:45:52 +00:00
parent a79655960b
commit 5bdf46dd71
No known key found for this signature in database
GPG Key ID: 5257FEDF56307320
1 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/status_im/contexts/profile/contact/contact_request/view.cljs
View File

@ -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"}]]))