status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-22 23:58:30 +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 (ns status-im.contexts.profile.contact.contact-request.view
(:require [clojure.string :as string] (:require [clojure.string :as string]
[quo.core :as quo] [quo.core :as quo]
[re-frame.core :as re-frame]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform] [react-native.platform :as platform]
[reagent.ratom]
[status-im.constants :as constants] [status-im.constants :as constants]
[status-im.contexts.profile.contact.contact-request.style :as style] [status-im.contexts.profile.contact.contact-request.style :as style]
[status-im.contexts.profile.utils :as profile.utils] [status-im.contexts.profile.utils :as profile.utils]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [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 (defn view
[] []
(let [{:keys [public-key customization-color] (let [profile-sub (re-frame/subscribe [:contacts/current-contact])
:as profile} (rf/sub [:contacts/current-contact]) {:keys [public-key customization-color]
:as profile} (deref profile-sub)
customization-color customization-color customization-color customization-color
full-name (profile.utils/displayed-name profile) full-name (profile.utils/displayed-name profile)
profile-picture (profile.utils/photo profile) profile-picture (profile.utils/photo profile)
input-ref (rn/use-ref-atom nil) input-ref (rn/use-ref-atom nil)
[message set-message] (rn/use-state "") [message set-message] (rn/use-state "")
on-message-change (rn/use-callback #(set-message %)) on-message-change (rn/use-callback #(set-message %))
act (bind profile-sub)
on-message-submit (rn/use-callback (fn [] on-message-submit (rn/use-callback (fn []
(rf/dispatch [:hide-bottom-sheet]) (rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:contact.ui/send-contact-request (rf/dispatch [:contact.ui/send-contact-request
@ -63,10 +97,14 @@
:input-container-style {:flex-shrink 1}}]] :input-container-style {:flex-shrink 1}}]]
[quo/bottom-actions [quo/bottom-actions
{:container-style {:style {:flex 1}} {:container-style {:style {:flex 1}}
:actions :one-action :actions :two-actions
:button-one-props {:disabled? (string/blank? message) :button-one-props {:disabled? (string/blank? message)
:accessibility-label :send-contact-request :accessibility-label :send-contact-request
:customization-color customization-color :customization-color customization-color
:on-press on-message-submit} :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"}]]))