Fork me on GitHub
#reagent
<
2020-02-16
>
Jaime Sangcap17:02:50

What am I doing wrong on below code? I'm getting this error

Uncaught Error: No protocol method IDeref.-deref defined for type cljs.core/PersistentArrayMap: {:on-seek #object[handle_on_seek], :duration 570.98449, :current-time 0}
It seems like I'm missing something out when deferencing atom in inner func (reagent Form-2 component). Not sure what's the proper fix CODE:
(defn seek-bar [{:keys [on-seek duration current-time :as props]}]
  (let [state (r/atom {:percentage 0
                       :width 0}) 
        handle-mouse-move (fn [e]
                            (let [rect (.getBoundingClientRect (.-currentTarget e))
                                  x (js/Math.floor (.-pageX e))
                                  curr (- x (js/Math.floor (.-x rect)))
                                  percentage (as-> (/ (* 100 curr) (js/Math.floor (- (.-right rect) (.-left rect)))) percent
                                               (if (neg? percent) 0 percent))]
                              (swap! state assoc :percentage percentage)
                              (js/console.log (:percentage @state))))]
    (fn [state current-time]
      [:div {:class "flex flex-1 h-2 w-full cursor-pointer"
             :on-mouse-move handle-mouse-move
             :on-click (fn [_] (on-seek (compute-current-time (:percentage @state) duration)))}
       [:div {:class "flex flex-1 h-2 items-center bg-gray-400 relative w-full"}
            ; [:div {:class "absolute h-0 z-10 m-0 p-2 border border-purple-800 bg-purple-800 rounded-full"
            ;        :style {:left (str (- (:current-position @state) (or (some-> @marker (.-offsetWidth) (/ 2)) 0)) "px")}
            ;        :ref (fn [el] (reset! marker el))}]
        [:div {:class "absolute h-2 bg-purple-800"
               :style {:width (str (percentage current-time duration) "%")}}]]])))

juhoteperi18:02:41

(fn [state current-time] state from the inner fn shadows the state from let binding

Jaime Sangcap18:02:57

In the inner func, Is there a way to always get the updated state that was being set in the handle-mouse-move of the outer func?

Jaime Sangcap18:02:42

(fn [current-time]
When removing the state in the inner func params. I don't get the updated state

Jaime Sangcap08:02:26

Got it working. I did a rookie mistake of Form-2 I need to destructure the inner func arguments as well

(fn [{:keys [on-seek duration current-time]}]