Fork me on GitHub
#reagent
<
2016-05-09
>
michael.heuberger02:05:00

hello everyone - i have a stumbling block here with reagent/cljs-react-material-ui. maybe one of you can help:

(ns ui-sandbox.nav
  (:require [cljsjs.material-ui]                            ; this also loads react (is within)
            [cljs-react-material-ui.core :as mui]
            [cljs-react-material-ui.reagent :as rui]        ; that's the react-material-ui wrapper, not reagent itself!
            [cljs-react-material-ui.icons :as icons]
            [reagent.core :as reagent]))

; just an example how to use a full react class instead of the shorter form (because we will need that later!)
(defn user-menu []
  (reagent/create-class
    {:component-did-mount #(println "user-menu-did-mount")
     :display-name        "user-menu"
     :reagent-render      (fn []
                            [rui/icon-menu {:icon-button-element (mui/icon-button {:touch true} (icons/navigation-expand-more))}
                             [rui/menu-item {:primary-text "Edit Profile"}]
                             [rui/menu-item {:primary-text "Logout"}]])}))

(defn user-bar []
  [rui/list
   [rui/list-item {:primary-text "Michael Heuberger" :right-icon-button [user-menu]}]])

...

michael.heuberger02:05:48

in the browser's dev console i get the error "`material-ui.inc.js:2410 Warning: Failed propType: Invalid prop rightIconButton supplied to ListItem, expected a single ReactElement. Check the render method of smx3_ui_sandbox.nav.user_bar."

nberger11:05:55

@michael.heuberger: try to wrap the right-icon-button value with r/as-element. The docstring says "Turns a vector of Hiccup syntax into a React element"

nberger11:05:17

:right-icon-button (r/as-element [user-menu])

lewix13:05:48

anyone coming from react/redux?

mihaelkonjevic13:05:21

I did some react / redux stuff

lewix13:05:25

@michael.heuberger: how does it compare in real life?

mihaelkonjevic13:05:24

@lewix: I guess that the question was for me simple_smile . I like reagent much more, because I feel that abstracting components as functions was a really great decision. Also the reagent atom provides a lot of stuff you need to wire up manually in the react apps.

lewix13:05:27

@mihaelkonjevic: ah sorry. hehe thanks for catching that - do you feel as productive? I like redux middlewares a lot, there won't be a penury of the libraries around it anytime soon - do we have something similar in the reagent ecosystem?

mihaelkonjevic13:05:05

I feel very productive, but I might be a wrong person to ask because I’m also lead dev on Keechma which is a micro framework for Reagent (http://keechma.com/). I would also recommend you to check re-frame https://github.com/Day8/re-frame to see how people architect their Reagent apps

hugobessaa17:05:09

I have done some react/redux and @mihaelkonjevic said what I think: reagent make it easy to do things you have to manually wire up on react

hugobessaa17:05:56

that and having the things clojurescript comes with: immutable data structures, core api, macros and clojure.async

cky17:05:44

I must confess to being really spoilt by Reagent+re-frame myself, and find it hard to go back to anything else. 😛

cky17:05:33

That suite should be called Recrack. Then I can say “once you go Recrack you can’t go back”. 😛

lewix19:05:22

cky: What were you using before?

cky19:05:50

@lewix: Y'know, plain React.

bojan.matic20:05:44

has anyone here tried elm?

gadfly36120:05:56

@bojan.matic: only superficially .. and it was great

gadfly36120:05:19

human-readable error messages. in particular, compile time errors w.r.t. schema was great. Seems like a big step up from what clojurescript can do in that space (prismatic schema is good, but still runtime :( )

grav20:05:30

more a react-question than a reagent-one. Why do a component (all components) re-render when I resize the window, but not if I programatically resize its parent component?

grav20:05:47

or rather: why does it re-render when resizing the window?

michael.heuberger21:05:51

@nberger: thanks but reagent/as-element doesnt work well for me. the life cycle seems broken, i.E. :component-did-mount #(println "user-menu-did-mount") is never printed when you wrap it with as-element

nberger21:05:57

@michael.heuberger: I'm far from the keyboard now, and haven't used as-element much myself, but I'd think the lifecycle should work. It'd be great if you could post a failing example, without material UI to make it simpler. Maybe you can use http://cljsfiddle.com to do that, it requires reagent.core

tom21:05:53

@michael.heuberger: What are you attempting to do? My suggestion might be off but if you ran into my sort of problem then create-class worked well.