Fork me on GitHub
#re-frame
<
2016-12-21
>
andre10:12:12

2000 stars! sweet! congratulations :)🍻

cmal10:12:17

You guys are going to be famous.

escherize10:12:38

kudos on the new docs

escherize10:12:17

and the diagrams are great

joshkh11:12:37

i know this is isn't exactly the right place, but i have a question about the coding style behind re-com

joshkh11:12:52

the reagent components accept arguments as a keyword followed by a value, like

[component :label "First" :value "a"]
As seen in their declarations:
(fn
  [& {:keys [label on-click tooltip tooltip-position disabled? class style attr]
      :or   {class "btn-default"}
      :as   args}]
I'm just curious, why was this style chosen over accepting a map of arguments?

joshkh11:12:16

args is a map, of course, but as far as i know you can't apply a map to a reagent component that might be nested inside the parent component

geoffs15:12:40

@joshkh I think instead of using apply, you can use (into [child-component] (apply concat arg-map)) to get an "apply-like" result. the (apply concat ...)is to turn a map into a flat sequence.

geoffs15:12:02

I can't speak to why re-com chose that declaration style, but that's one way to workaround it at least

joshkh15:12:32

good point, thanks geoffs!

shaun-mahood20:12:40

@kishanov: Looks awesome, I'll add it to the external resources page in the docs

dhruv121:12:02

I get the following error: #object[Error Invariant Violation: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.] Here is what my code looks like:

(defn main-panel []
  (fn [] [ui/mui-theme-provider
         {:mui-theme (ui/get-mui-theme
                      {:palette {:text-color (ui/color :green600)}
                       :app-bar {:color (ui/color :red700)}})}
         [:div
          [ui/app-bar {:title "Title"
                       :icon-element-right (reagent/as-element [ui/icon-button (ic/action-play-for-work)])}]]])) 
Here is how I’m calling my code: (reagent/render [views/main-panel] (.getElementById js/document “app”)) Can anyone help me debug this?

shaun-mahood21:12:19

@dhruv1: What do you get when you run (main-panel) from the REPL?

dhruv121:12:16

[#object[cljs_react_material_ui$core$mui_theme_provider "function cljs_react_material_ui$core$mui_theme_provider(var_args){
var args__45341__auto__ = [];
var len__45334__auto___56102 = arguments.length;
var i__45335__auto___56103 = (0);
while(true){
if((i__45335__auto___56103 < len__45334__auto___56102)){
args__45341__auto__.push((arguments[i__45335__auto___56103]));

var G__56104 = (i__45335__auto___56103 + (1));
i__45335__auto___56103 = G__56104;
continue;
} else {
}
break;
}

var argseq__45342__auto__ = ((((0) < args__45341__auto__.length))?(new cljs.core.IndexedSeq(args__45341__auto__.slice((0)),(0),null)):null);
return cljs_react_material_ui.core.mui_theme_provider.cljs$core$IFn$_invoke$arity$variadic(argseq__45342__auto__);
}"] {:mui-theme #js {:appBar #js {:color "red700", :textColor "#ffffff", :height 64, :titleFontWeight 400, :padding 24}, :avatar #js {:color "#ffffff", :backgroundColor "rgb(188, 188, 188)"}, :badge #js {:color "#ffffff", :textColor "#43a047", :primaryColor "#00bcd4", :primaryTextColor "#ffffff", :secondaryColor "#ff4081", :secondaryTextColor "#ffffff", :fontWeight 500}, :bottomNavigation #js {:backgroundColor "#ffffff", :unselectedColor "rgba(67, 160, 71, 0.54)", :selectedColor "#00bcd4", :height 56, :unselectedFontSize 12, :selectedFontSize 14}, :button #js {:height 36, :minWidth 88, :iconButtonSize 48}, :card #js {:titleColor "rgba(67, 160, 71, 0.87)", :subtitleColor "rgba(67, 160, 71, 0.54)", :fontWeight 500}, :cardMedia #js {:color "rgba(255, 255,  .... 

dhruv121:12:29

@shaun-mahood response from (main-panel)

shaun-mahood21:12:17

@dhruv1: Ok - I might be wrong about this, but I think if you change your code to

(defn main-panel []
  [ui/mui-theme-provider
         {:mui-theme (ui/get-mui-theme
                      {:palette {:text-color (ui/color :green600)}
                       :app-bar {:color (ui/color :red700)}})}
         [:div
          [ui/app-bar {:title "Title"
                       :icon-element-right (reagent/as-element [ui/icon-button (ic/action-play-for-work)])}]]]) 
then it might work - it should return a valid hiccup data structure.

dhruv121:12:36

@shaun-mahood I get the same error #object[Error Invariant Violation: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.]

shaun-mahood21:12:28

@dhruv1: What do you get when you run that same function again (change the code and run (main-panel) again)?

shaun-mahood21:12:51

Once that function returns valid hiccup, I think the rest of it should work as well.

dhruv121:12:27

@shaun-mahood

[#object[cljs_react_material_ui$core$mui_theme_provider "function cljs_react_material_ui$core$mui_theme_provider(var_args){
var args__45341__auto__ = [];
var len__45334__auto___56102 = arguments.length;
var i__45335__auto___56103 = (0);
while(true){
if((i__45335__auto___56103 < len__45334__auto___56102)){
args__45341__auto__.push((arguments[i__45335__auto___56103]));

var G__56104 = (i__45335__auto___56103 + (1));
i__45335__auto___56103 = G__56104;
continue;
} else {
}
break;
}

var argseq__45342__auto__ = ((((0) < args__45341__auto__.length))?(new cljs.core.IndexedSeq(args__45341__auto__.slice((0)),(0),null)):null);
return cljs_react_material_ui.core.mui_theme_provider.cljs$core$IFn$_invoke$arity$variadic(argseq__45342__auto__);
}"] {:mui-theme #js {:appBar #js {:color "#d32f2f", :textColor "#ffffff", :height 64, :titleFontWeight 400, :padding 24}, :avatar #js {:color "#ffffff", :backgroundColor "rgb(188, 188, 188)"}, :badge #js {:color "#ffffff", :textColor "#43a047", :primaryColor "#00bcd4", :primaryTextColor "#ffffff", :secondaryColor "#ff4081", :secondaryTextColor "#ffffff", :fontWeight 500}, :bottomNavigation #js {:backgroundColor "#ffffff", :unselectedColor "rgba(67, 160, 71, 0.54)", :selectedColor "#00bcd4", :height 56, :unselectedFontSize 12, :selectedFontSize 14}, :button #js {:height 36, :minWidth 88, :iconButtonSize 48}, :card #js {:titleColor "rgba(67, 160, 71, 0.87)", :subtitleColor "rgba(67, 160, 71, 0.54)", :fontWeight 500}, :cardMedia #js {:color "rgba(255, 255, 255, 0.87)", :overlayContentBackground "rgba(0, 0, 0, 0.54)", :titleColor "rgba(255, 255, 255, 0.87)", :subtitleColor "rgba(255, 255, 255, 0.54)"}, :cardText #js {:textColor "#43a047"}, :checkbox #js {:boxColor "#43a047", :checkedColor "#00bcd4", :requiredColor "#00bcd4", :disabledColor "rgba(0, 0, 0, 0.3)", :labelColor "#43a047", :labelDisabledCo … 
That’s what I get when I run (main-panel)

dhruv121:12:14

ah found the issue

dhruv121:12:30

(defn main-panel []
  [ui/mui-theme-provider
   {:mui-theme (ui/get-mui-theme
                {:palette {:text-color (ui/color :green600)}
                 :app-bar {:color (ui/color :red700)}})}
   (reagent/as-element [:div
                        [ui/app-bar {:title "Title"
                                     :icon-element-right (reagent/as-element [ui/icon-button (ic/action-play-for-work)])}]])]) 

dhruv121:12:50

I had to wrap the :div in reagent/as-element

shaun-mahood21:12:01

Oh good 🙂

dhruv121:12:10

@shaun-mahood thank you! 🙂

josh.freckleton21:12:09

what is the best way to explore my db in the browser while developing re-frame?

dhruv121:12:25

re-frame.db/app-db?

manutter5121:12:10

have you looked at re-frisk?

josh.freckleton21:12:57

re-frisk nails it, thank you!

mikethompson23:12:57

@dhruv1 see FAQ #1 for detailed options