Fork me on GitHub

I am wondering how to design a subscription that is used in lots of places? I have a key in app-db representing a selection, and I got ~100 items that can be selected, so I use a parameterized subscription like (subscribe [:select id]) in a component that is created 100 instances of, which means that the subscription will run 100 times each time the :select key is changed. Any ideas?


could you change it so that you have a list of items, each of which has a selected attribute? Then the component would only need to subscribe to the relevant item. You could still have a value determining which one is selected, and use it to determine which items to change


@lucien.knechtli: yeah that could work, thanks for the pointer. The only difference is that I have to check that only one item is selected


not really - when you change you checked value, first uncheck the old one.


yeah thats what I meant, maybe keep a key containing the index, so I dont have to iterate through the list


how would one write a debunce middleware for handlers? should the middleware skip forwarding events, and after timeout do dispatch (or dispatch-sync).. any ideas?


what's the idiomatic way to use the value of another subscription in a subscription?


@kanwei: you can just do it by derefing the subscription


If you share an example I can show you what I mean


(register-sub :not-found?
              (fn [db _]
                (reaction (and (empty? (:results-list @db))
                               (not (clojure.string/blank? (:search-input @db)))))))


I want to use the value of that sub in another sub


do I create a let block and subscribe to not-found?


in the other sub handler


I have an spa, that is part of a larger application. When the spa loads it fires off the database initialization, validates the session token (cookie) at the database and then redirects to login (part of spa) or if it’s a valid session, loads dashboard content from some restful url’s into some table components drawn on the screen. When I navigate away and then back using the back arrows. The table components are redrawn, but the session initialization and the rest data urls to fill in the table don’t fire. This only happens in firefox… I suspect something about their handling of history… but it’s a bit disturbing… Oh and it only happens in the version compiled to min using cljsbuild, not in my figwheel dev instance...


Any thoughts?


I’m a bit at a loss as to what’s happening, seems like possibly they’re attempting to cache the state of the page, and just swap it back in instead of actually loading it, and it fails to get everything.


Some other clues. All of the cljs namespaces aren’t loaded when I use the console to examine my namespace


only hylng.core and hylng.handlers are present as js objects.


my database object appears to have all of the state in it, but man this is really weird.


@mangr3n: When you go back in firefox, is that initialization data filled with the old info or totally missing?


my cljs namespaces that hold my view code don’t even exist in the js namespace tree


Are you using anything like Secretary for keeping track of the URL?


I've had a bit of trouble with secretary doing similar things, but I don't know if it happened for the same reason - essentially, event handlers would fire properly if I typed the URL and hit enter but not if I went back and forward in the browser.


I didn't find a great solution though and ended up moving away from that design so can't really help you on that side.


yeah, I’m using secretary and hash-values index.html#/dashboard #/login #/details


hmmm…. I wish I understood firefox’s strategy for handling back and forward. If I wait long enough it goes back to the server properly, but if I don’t it just swaps in this bad version of my page


the fact that my namespaces are missing from the global namespace suggests it’s a firefox issue to me.


Seems weird to me too


I think I may have found a solution. It isn’t re-running my javascript. The solution is to use window.onunload = function() {}; I’m going to check and see if this works for me… ugh...


that just keeps it out of “bfcache” by basically invalidating it… I think I might know what’s going on… some of my code is wrapped in clairvoyant for tracing purposes


I can compile that code out of existence for production and see what happens.


@kanwei (let [not-found-value (subscribe [:not-found?]) ] (if (@not-found-value) x y))


you can bind to and dereference a reaction (which is what register-sub takes as it’s argument) in multiple places


What is an idiomatic way of getting a responsive grid in re-frame? I'm using re-com as well, and have cobbled something together using v/h-boxes, but it's certainly not responsive... Thoughts?


@shaun-mahood using the window.onunload = function() {}; invalidated the firefox fbcache and solved my problem with the page.


@mangr3n: Wow, I don't think I've ever seen a use for window.onunload before. Stupid that it needs it but glad it worked!


@josh.freckleton can you point at an existing responsive grid elsewhere that captures the functionality that you’re looking for?


@shaun-mahood sounds like there’s a mismatch between how the compiled cljs is loaded into memory and the caching process for firefox’s fbcache. It doesn’t cache all the dom, and it doesn’t cache all of the js… it’s really odd...


@mangr3n: even just Bootstrap's responsive grid, that'd be amazing if I could do something similar:


I use bootstrap directly in my code.


they work just fine, there’s no need to add anything else


I use the grid


<div class="col-md-1" data-reactid="."></div>


@mangr3n: so, you just include the bootstrap.css in your index.html, and then add css attributes to things? What about the js elements in bootstrap, how do you get those working? (forgive me, I'm new to the clojure community)


that’s from one of my components rendered in the page


[:div.col-md-1 <content>]


I thought you were looking for an excel like data grid, and was curious what responsive looked like in that world.


no forgiveness for finding the one true path 😉


15+ years mired in Java’s object land makes clojure feel like nirvana…


heck, I'm mostly working in angular and django atm, and that feels worlds better than java


me: python->clojure. same nirvana., and yes, just a responsive grid layout. how about getting bootstrap's js stuff into cljs? I've tried things like cljsjs, but it never seems very friendly...


haha, everything feels better than java


but Java feels better than C++/C which was the standard when I started...


and don’t get me started on “What’s idiomatic in perl…"


depends on the time of day, and how full your coffee cup is


@josh.freckleton: I’ll add a couple of lines from my index.html page to show how I get bootstrap in


<link rel="stylesheet" href="/hylighter/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="vendor/css/material-design-iconic-font.min.css"> <link rel="stylesheet" href="vendor/css/re-com.css"> <link href="css/compiled/screen.css" rel="stylesheet" type="text/css"> </head> <body> <script src="/hylighter/vendor/jquery.js" type="text/javascript"></script> <script src="/hylighter/vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <div id="app"></div> <script src="js/compiled/app.js"></script>


(.log js/console (js/jQuery "body"))


hope that helps


@mangr3n: Hm, looks a lot simpler than what I've been doing. Are there any issues using this with reacty things? I've noticed a lot of libraries simply wrap existing UI libs to make them get a long with react, as well as ClojureScript, and I'm new enough that I still don't quite get if I need that kind of thing or not...


So… I’m not saying you might not have issues with react… But… logically the css portions just trigger reflow if they change (either the rules or what classes and styles are attached.) Secondly you’re attaching the style/classes as data in the definition of your react components (using reagent/re-com) and those changes only trigger a change to dom IF you get a change in the resulting data structure, and then the only changes are specifically what changes in the virtual DOM as compared to the real DOM. Now you’re left with things going around react to get to the dom directly… and I can see how in theory that might cause issues if they collide but I haven’t seen that happen for me yet.


An example, I use bootstrap’s dropdown menu in my application. The navbar and the menu content are generated by reagent (react underneath), and I didn’t write any cljs to open/close the menu, so that behavior is coming directly from the js in bootstrap (I hope…) Someone else might know more about how collisions occur.


[:div.btn-group [re-com/md-icon-button :md-icon-name "zmdi-menu" :class "dropdown-toggle" :attr {:data-toggle "dropdown"}] [:ul.dropdown-menu (doall (map menu-item-builder system-menu-items))]]


that’s the reagent vector that handles the menu.


I would solve problems you have after you try and fail, rather than solving problems you might have before they appear.


Thank you, and that's good advice, this all helps me a little better, because I have been trying, and I have been struggling, but I think I'll crest over this learning curve soon enough, and then I'll be able to "pay it forward" and help others simple_smile


no problem at all. I’ve slammed my head against a bunch of problems, too.


feel free to ask more questions. This group has been helpful to me.