From 5346dfec0f8d1a75b68cf858d77b2ca702eb17a0 Mon Sep 17 00:00:00 2001 From: Sean Hagstrom Date: Thu, 28 Mar 2024 15:50:09 +0000 Subject: [PATCH] tweak: update demo with a variety of helper functions --- .../profile/contact/contact_request/view.cljs | 178 +++++++++++++----- 1 file changed, 128 insertions(+), 50 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 e59493f45c..32b39fb957 100644 --- a/src/status_im/contexts/profile/contact/contact_request/view.cljs +++ b/src/status_im/contexts/profile/contact/contact_request/view.cljs @@ -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"}]]))