status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-21 15:18:41 +00:00
Code Issues Projects Releases Wiki Activity

tweak: update demo with a variety of helper functions

Browse Source
This commit is contained in:
Sean Hagstrom 2024-03-28 15:50:09 +00:00 committed by Icaro Motta
parent 83e9f8f0fc
commit 5346dfec0f
No known key found for this signature in database
GPG Key ID: 009557D9D014DF07
1 changed files with 128 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,58 +11,138 @@
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn make-stateful-callbacks ;; ---
[state-ratom]
(def contact-request-message-store
(reagent.ratom/atom {}))
(def button-count-store
(reagent.ratom/atom {}))
(re-frame/reg-sub
:button-count
(fn []
[button-count-store])
(fn [[store] [_ id]]
(get store id 0)))
(re-frame/reg-sub
:contact-request-message
(fn []
[contact-request-message-store])
(fn [[store] [_ id]]
(get store id "")))
(re-frame/reg-fx
:store/set-contact-request-message
(fn [[id message]]
(swap! contact-request-message-store assoc id message)))
(re-frame/reg-event-fx
:ui/set-contact-request-message
(fn [_cofx [id message]]
{:fx [[:store/set-contact-request-message [id message]]]}))
;; ---
(defn make-state-ref
[state-ratom label]
(let [state-ref (atom nil)] (let [state-ref (atom nil)]
(js/console.log "init make-stateful-callbacks") (js/console.log "init make-state-ref" label)
(let [reaction-sub (reagent.ratom/track! (let [reaction-sub (reagent.ratom/track!
(fn [state-ratom] (fn [state-ratom]
(js/console.log "reagent reaction") (js/console.log "reagent reaction" label)
(let [state @state-ratom] (let [state @state-ratom]
(js/console.log (js/console.log
(if (nil? @state-ref) (if (nil? @state-ref)
"state init" "state-ref init"
"state update") "state-ref update")
label
(clj->js state)) (clj->js state))
(reset! state-ref state))) (reset! state-ref state)
state))
state-ratom)] state-ratom)]
@reaction-sub @reaction-sub
{:sub reaction-sub {:sub reaction-sub
:factory (memoize :ref state-ref})))
(defn make-state-handler-factory [state-ref]
(rn/use-callback
(memoize
(fn [callback] (fn [callback]
(js/console.log "init callback")
(fn [event] (fn [event]
(callback @state-ref event))))}))) (callback @state-ref event))))
[state-ref]))
(defn use-bind [state-ratom] (defn make-snapshot-handler-factory [state-ref]
(let [{:keys [factory sub]} (rn/use-memo (fn [] (rn/use-callback
(make-stateful-callbacks state-ratom)) (let [snapshot @state-ref]
[state-ratom])] (fn [handler]
((memoize
(fn [callback]
(fn [event]
(callback snapshot event))))
handler)))
[@state-ref]))
(defn make-snapshot-state-handler-factory [state-ref]
(rn/use-callback
(let [snapshot @state-ref]
(fn [handler]
((memoize
(fn [callback]
(fn [event]
(callback snapshot @state-ref event))))
handler)))
[@state-ref]))
(defn use-bind-sub [state-sub]
(let [{:keys [ref sub]}
(rn/use-memo (fn []
(make-state-ref state-sub "bind-sub"))
[state-sub])]
(rn/use-unmount (fn [] (rn/use-unmount (fn []
(js/console.log "unmount sub") (js/console.log "unmount bind-sub")
(reagent.ratom/dispose! sub))) (reagent.ratom/dispose! sub)))
factory)) (make-state-handler-factory ref)))
(defonce contact-request-message-store (defn use-bind-sub-snapshot [state-sub]
(reagent.ratom/atom {})) (let [{:keys [ref sub]}
(rn/use-memo (fn []
(make-state-ref state-sub "bind-sub-snapshot"))
[state-sub])]
(rn/use-unmount (fn []
(js/console.log "unmount bind-sub-snapshot")
(reagent.ratom/dispose! sub)))
(make-snapshot-state-handler-factory ref)))
(defn access-message-store (defn use-bind-state [state]
([k] (get-in @contact-request-message-store k "")) (let [state-ref (rn/use-ref-atom state)]
([k v] (swap! contact-request-message-store assoc-in k v))) (reset! state-ref state)
(make-snapshot-handler-factory state-ref)))
(defn get-message-sub [public-key] ;; ---
(reagent.ratom/cursor access-message-store public-key))
(defn on-press-test (defn on-message-submit
[state event] ([state _event]
(js/console.log "on-press state" (clj->js state)) (js/console.log "on-press state" (clj->js state))
(js/console.log "on-press event" #js{:target (.-target event)}) (let [{:keys [public-key message]} state]
(access-message-store (:public-key state) "") ;; (rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:hide-bottom-sheet])) ;; (rf/dispatch [:contact.ui/send-contact-request
;; public-key message])
(rf/dispatch [:toasts/upsert
{:id :send-contact-request
:type :positive
:text message}]))))
(defn combine-subs [message-sub profile-sub] (defn combine-subs-helper [subs-map]
{:message @message-sub (reduce (fn [result [name sub]]
:public-key @(reagent.ratom/cursor profile-sub [:public-key])}) (assoc result name @sub))
{}
subs-map))
(defn combine-subs [subs-map]
(reagent.ratom/track combine-subs-helper subs-map))
(defn view (defn view
[] []
@ -73,23 +153,21 @@
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-sub (get-message-sub public-key) message-sub (re-frame/subscribe [:contact-request-message public-key])
[message set-message] (rn/use-state "") [message set-message] (rn/use-state "")
on-message-change (rn/use-callback #(do on-message-change (rn/use-callback #(do
(reset! message-sub %) (rf/dispatch-sync [:ui/set-contact-request-message public-key %])
(set-message %))) (set-message %)))
callback-state-sub (reagent.ratom/track combine-subs message-sub profile-sub) bind-sub (use-bind-sub
bind (use-bind callback-state-sub) (combine-subs {:message message-sub
on-message-submit (rn/use-callback (fn [] :public-key (reagent.ratom/cursor
(rf/dispatch [:hide-bottom-sheet]) profile-sub
(rf/dispatch [:contact.ui/send-contact-request [:public-key])}))
public-key message]) bind-state (use-bind-state {:public-key public-key
(rf/dispatch [:toasts/upsert :message message})]
{:id :send-contact-request (rn/use-unmount
:type :positive (fn []
:text (i18n/label (rf/dispatch [:ui/set-contact-request-message public-key ""])))
:t/contact-request-was-sent)}]))
[public-key message])]
(rn/use-mount (rn/use-mount
(fn [] (fn []
(let [listener (.addListener rn/keyboard (let [listener (.addListener rn/keyboard
@ -129,10 +207,10 @@
: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 (bind-state on-message-submit)}
:button-one-label "Test Button One" :button-one-label "Test Button One"
:button-two-props {:accessibility-label :test-button :button-two-props {:accessibility-label :test-button
:customization-color :danger :customization-color :danger
:on-press (bind on-press-test)} :on-press (bind-sub on-message-submit)}
:button-two-label "Test Button Two"}]])) :button-two-label "Test Button Two"}]]))