status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

tweak: update demo with a variety of helper functions

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

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

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