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

tidy: focus on the ergonomics of using use-bind-snapshot

This commit is contained in:
Sean Hagstrom 2024-05-14 10:57:19 +01:00
parent 73a57bb186
commit 3c2dbaa58b
No known key found for this signature in database
GPG Key ID: 5257FEDF56307320
1 changed files with 38 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
(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]
@ -13,28 +12,6 @@
;; ---
(def contact-request-message-store
(reagent.ratom/atom {}))
(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]]]}))
;; ---
(def ^:private lookup-sentinel (js-obj))
(defn memo
@ -53,43 +30,8 @@
ret)
v))))
(defn make-state-ref
[state-ratom]
(let [state-ref (atom nil)]
(js/console.log "init make-state-ref")
(let [reaction-sub
(reagent.ratom/track!
(fn [state-ratom]
(js/console.log "reagent reaction")
(let [state @state-ratom]
(js/console.log
(if (nil? @state-ref)
"state-ref init"
"state-ref update")
(clj->js state))
(reset! state-ref state)
state))
state-ratom)]
@reaction-sub
{:sub reaction-sub
:ref state-ref})))
(defn make-state-handler-factory [state-ref]
(let [storage (rn/use-memo #(atom {}) [state-ref])
factory (rn/use-memo
(fn []
(fn [handler]
((memo storage
(fn [callback]
(print "make state handler")
(fn [event]
(callback @state-ref event))))
handler)))
[state-ref storage])]
{:factory factory
:storage storage}))
(defn make-snapshot-handler-factory [snapshot]
(defn make-snapshot-handler-factory
[snapshot]
(let [storage (rn/use-memo #(atom {}) [])
capture (rn/use-memo #(atom snapshot) [])
_update (rn/use-layout-effect
@ -108,49 +50,8 @@
{:factory factory
:storage storage}))
(defn make-past-present-state-handler-factory [state-ref]
(let [storage (rn/use-memo #(atom {}) [state-ref])
capture (rn/use-memo #(atom @state-ref) [state-ref])
factory (rn/use-memo
(fn []
(fn [handler]
(reset! capture @state-ref)
((memo storage
(fn [callback]
(fn [event]
(callback @capture @state-ref event))))
handler)))
[state-ref storage])]
{:factory factory
:storage storage}))
(defn use-bind-sub [state-sub]
(let [{:keys [ref sub]}
(rn/use-memo (fn []
(make-state-ref state-sub))
[state-sub])
{:keys [factory storage]}
(make-state-handler-factory ref)]
(rn/use-unmount (fn []
(js/console.log "unmount bind-sub")
(prn "unmount storage" storage)
(reagent.ratom/dispose! sub)))
factory))
(defn use-bind-past-present-sub [state-sub]
(let [{:keys [ref sub]}
(rn/use-memo (fn []
(make-state-ref state-sub))
[state-sub])
{:keys [factory storage]}
(make-past-present-state-handler-factory ref)]
(rn/use-unmount (fn []
(js/console.log "unmount bind-sub-and-snapshot")
(prn "unmount storage" storage)
(reagent.ratom/dispose! sub)))
factory))
(defn use-bind-snapshot [snapshot]
(defn use-bind-snapshot
[snapshot]
(let [{:keys [factory storage]}
(make-snapshot-handler-factory snapshot)]
(rn/use-unmount (fn []
@ -161,62 +62,48 @@
;; ---
(defn on-message-submit
([snapshot state _event]
(js/console.log "on-press snapshot" (clj->js snapshot))
(js/console.log "on-press state" (clj->js state))
(let [{:keys [public-key message]} state]
[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}])))
([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}]))))
(rf/dispatch [:toasts/upsert
{:id :send-contact-request
:type :positive
:text message}])))
(defn combine-subs-helper [subs-map]
(reduce (fn [result [name sub]]
(assoc result name @sub))
{}
subs-map))
(defn on-message-change
[{:keys [set-message]} message-text]
(set-message message-text))
(defn combine-subs [subs-map]
(reagent.ratom/track combine-subs-helper subs-map))
(defn use-event
[f scope]
(let [bind (use-bind-snapshot scope)]
(bind f)))
(defn use-events
[fs scope]
(let [bind (use-bind-snapshot scope)]
(->> fs
(reduce-kv
(fn [acc label f]
(assoc acc label (bind f)))
{}))))
(defn view
[]
(let [profile-sub (re-frame/subscribe [:contacts/current-contact])
{:keys [public-key customization-color]
:as profile} (deref profile-sub)
customization-color customization-color
(let [{:keys [public-key customization-color]
:as profile} (rf/sub [:contacts/current-contact])
full-name (profile.utils/displayed-name profile)
profile-picture (profile.utils/photo profile)
input-ref (rn/use-ref-atom nil)
message-sub (re-frame/subscribe [:contact-request-message public-key])
[message set-message] (rn/use-state "")
on-message-change (rn/use-callback #(do
(rf/dispatch-sync [:ui/set-contact-request-message public-key %])
(set-message %)))
state-sub (combine-subs {:message message-sub
:public-key (reagent.ratom/cursor
profile-sub
[:public-key])})
bind-sub (use-bind-sub state-sub)
bind-past-present-sub (use-bind-past-present-sub state-sub)
bind-snapshot (use-bind-snapshot {:public-key public-key
:message message})]
(rn/use-unmount
(fn []
(rf/dispatch [:ui/set-contact-request-message public-key ""])))
on-change (use-event on-message-change
{:set-message set-message})
on-submit (use-event on-message-submit
{:public-key public-key
:message message})]
(rn/use-mount
(fn []
(let [listener (.addListener rn/keyboard
@ -246,8 +133,7 @@
:auto-focus true
:accessibility-label :contact-request-message
:label (i18n/label :t/message)
:value @message-sub
:on-change-text on-message-change
:on-change-text on-change
:container-style {:flex-shrink 1}
:input-container-style {:flex-shrink 1}}]]
[quo/bottom-actions
@ -256,17 +142,17 @@
:button-one-props {:disabled? (string/blank? message)
:accessibility-label :send-contact-request
:customization-color :purple
:on-press (bind-past-present-sub on-message-submit)}
:on-press on-submit}
:button-one-label "Past Present Sub"}]
[quo/bottom-actions
{:container-style {:style {:flex 1}}
:actions :two-actions
:button-one-props {:accessibility-label :send-contact-request
:customization-color :blue
:on-press (bind-snapshot on-message-submit)}
:on-press on-submit}
:button-one-label "Snapshot"
:button-two-props {:accessibility-label :test-button
:customization-color :orange
:on-press (bind-sub on-message-submit)}
:on-press on-submit}
:button-two-label "Sub"}]]))