Fork me on GitHub
#rum
<
2017-03-10
>
grounded_sage04:03:13

I'm having a bit of trouble understanding how to do a reactive component. This is the code

(def current-opacity (atom 1))

#?(:cljs (defn scrolled-vh [] ;;js/console.log
                      (reset! current-opacity  (float (/ (.-scrollY js/window) (.-innerHeight js/window))))
                      (js/console.log @current-opacity)))



#?(:cljs (.addEventListener js/window "scroll" scrolled-vh))


(rum/defc video-logo < rum/reactive []
  (let [opacity (rum/react @current-opacity)]
    [:div {:class [(css {:width "20em"
                         :align-self "center"})]}
      [:svg {:class [(css {:align-self "center"
                           :margin-bottom "1em"
                           :z-index "2"
                           :position "fixed"
                           :filter "drop-shadow( 2px 2px 4px rgba(0,0,0,.4))"
                           :margin-top "15vh"})]
             :style {:opacity opacity}
             :height "20em"
             :width "20em"
             :viewBox "0 0 1395 645"}
       [:use {:xlink-href "/svg/coffs.svg#coffs"}]]]))

grounded_sage04:03:33

I am rendering both server side and client side so I realised I had to change the atom from just cljs to both to make things easier. I'm just not sure how to make the opacity in the component become reactive

grounded_sage06:03:25

I figured it out. I didnt need the let binding in there or anything

niwinz10:03:58

(rum/react current-opacity) instead of (rum/react @current-opacity) you should use

niwinz10:03:16

rum/react should receive the atom, and not the value of the atom

niwinz10:03:28

it automatically dereferences it for you

grounded_sage15:03:45

@niwinz thanks I ended up figuring it out. Slowly getting there 🙂

grounded_sage15:03:22

I asked this in the beginners but I was told I should probably ask in here. Sorry about all the nooby questions!! I'm not sure what the best way is to invoke this method. I get that I need to hook into react for this but not sure how. #?(:cljs (.playbackRate (. js/document (getElementById "my-video")) 0.6))

mruzekw17:03:33

Try #?(:cljs (.playbackRate (.getElementById js/document "my-video") 0.6))

mruzekw17:03:23

I’m not sure if I’m answering your root question though

rauh17:03:47

Looks good to me, what's the error?

niwinz17:03:09

I think that playBackRate is not a function, is a property

niwinz17:03:03

so you need to something like this:

(let [dom (.getElementById js/document "my-video")]
  (set! (.-playBackRate dom) 0.6))

mruzekw20:03:19

I’m currently trying to load some data before I render a component. How do you all accomplish this?

mruzekw20:03:41

Right now I’m trying to load via cljs-http with go blocks and channels, but it’s not working out.

mruzekw20:03:05

Something similar to:

(rum/defc root < rum/reactive []
  (let [page (:handler (:page (rum/react state)))
        user (js->clj js/window.user :keywordize-keys true)]
    (case page
      :page-one (ui/page-one user)
      :page-two (go
                        (let [resp (http/post "/upload/jwurls" {:headers {"x-csrf-token" js/csrfToken}})]
                          (page-two user (<! resp))))
      [:div "404"])))

mruzekw20:03:26

The issue is the go block returns another channel, not the component

sebastjan.pereyro20:03:34

load data in componentWillMount

mruzekw20:03:28

Can set data asynchronously in lifecycle methods in rum?

sebastjan.pereyro20:03:31

render function should be pure

sebastjan.pereyro20:03:55

you can use component state to store loaded data

sebastjan.pereyro20:03:12

or better flux store (if you have one)

mruzekw20:03:23

I was thinking of going that route (flux)

mruzekw20:03:49

I was also thinking datascript, but I’m afraid of my js payload getting too hefty

sebastjan.pereyro20:03:58

how big is the react app?

mruzekw20:03:13

Not that big at the moment. Only started it a couple weeks ago

sebastjan.pereyro20:03:44

if you planning to do big app (10 screens or more with a lot of shared data) i will suggest you to use flux

sebastjan.pereyro20:03:04

for smaller apps it's okay to use just state of components

sebastjan.pereyro20:03:41

also i will not recommend datascript for big apps due to problems with performance

mruzekw20:03:56

How would one set component state (not rum state) in rum?

sebastjan.pereyro20:03:34

use rum/local mixin

sebastjan.pereyro20:03:50

or rum/reactive with map

mruzekw20:03:06

Do you just use flux with an atom? Or is there a library you use?

mruzekw20:03:10

I know there’s scrum

sebastjan.pereyro20:03:20

i don't know good flux implementation in clojure

mruzekw20:03:46

There’s Petrol from kris a jenkins inspired by Elm

mruzekw20:03:17

Or you could grow your own pub/sub with core.async

sebastjan.pereyro20:03:56

i prefer original redux but i didn't saw good cljs implementation

grounded_sage23:03:16

@niwinz: thanks again! I figured out it was a property but had no idea how to do it. My best googling left me empty handed