Clojurians Log v2
reagent
hi, I'm having a what I'd think small problem with reagent. here is the context and the problem:
I have a side menu that lists various types. when i click on a type, a list of items of that type shows to the right of the side menu. that works pretty well. however, now that i introduced retrieving items of type from the database, the view that shows items is misbehaving as it is not clearing the view of the earlier items, it just adds newly selected type's items below the previously selected type's items.
I am sure that I am using a reagent atom, and that I am swapping it correctly.
the problems seems to be related to the fact that I am updating my reagent atom that contains my state from a promise handler.
I am using a promise handler to retrieve my data as follows:
(ajax.core/GET "/items" {:handler #(swap! app-state assoc items %)})
would somebody please guide me how to redeem this situation
The first step would be to post your actual code.
Also that swap! call is suspicious - what is items in there?
my app-state has shape {items [item1, item2, ...], some-other-key some-other-value}
and here is what Id say is the relevant code you asked for:
(defonce app-state
(reagent/atom {:items []
:mapper pulagjite-mapper}))
(defn get-trainers []
(GET "/trainers" {:handler #(swap! app-state assoc :items (:body %))}))
(defn trainers-click-handler [e]
(println "trainers clicked")
(swap! app-state assoc :mapper trainers-mapper)
(get-trainers))
That looks alright.
right, but the view is not alright. for some reasinf, my trainers-click-handler is not resulting in a clear view with trainer items only
rather, it shows items of other types also. now, i do not retrieve items of other types from the db. I have them hardcoded in my other-type-click-handler
and so other type click handlers work fine, but not trainers-click-handler
I cannot provide any useful answer when there's no code.
do you have any code that retrieves data from db and puts it in a reagent atom for it to be shown in the UI
if you have that kind of code that works fine, then please show me how you retrieve the data and how you put it in the state atom
The Reagent repo has plenty of examples. Your code above is nothing special, it looks just fine. Most likely, the error is either in the view or in the version of the code that the app is using (maybe a hot-reload or a cache issue).
I ooked at reagent repo but I did not find any example that uses ajax.core to get data and show it in UI
ajax.core is a very specific thing. You just need an example that changes a ratom asynchronously, that's it.
Doesn't matter whether it's because of a response from ajax.core, or response from js/fetch, or file reading, or WebSocket, or whatever else one might come up with.
it was my failure to set keys properly for some elements that was giving the problem. thanks for trying to help though.
And that's why we usually ask for the full code. :)
Hey there. What development workflows do you guys use for Reagent apps?
I use the ClojureScript REPL that one gets with cider-jack-in-cljs, I use it for inspecting values, but I'm always in the context of the main app. I've seen some people mounting components manually and working on them individually (devcards style), I haven't done this yet, although it seems like an interesting approach.
For more complex data structures I like to use (tap> value). and check them out in ShadowCLJS inspector, the one that starts on port 9630. (It shows up in the Inspect Latest tab.)
I got some Rich comments with some manual setup, random stuff that helps me with development (.setItem js/localStorage "keep-open" true) etc, all ad-hoc.
My screen is just 13", so if I can avoid it I try not to use Chrome dev tools (and splitting screen either vertically or horizontally. I essentially use them only when I need to inspect element, styles etc; so I try to stay in Emacs as much as possible.
I feel like ClojureScript apps will inherently miss on many of the coolest parts of RDD, like I can't start a new REPL in a catch block with local context; because the runtime that blows up is the browser JS engine. (So I just went with nREPL, otherwise I'd prefer socket REPL which can be nested like this.)
Do people use devcards? I've seen it, but haven't got to trying it out yet. Look like it might be useful, but I'm not 100% convinced yet.
Anything else, tools & techniques that are worth of exploring?
FWIW, DevTools can be popped out into their own window. I don't use REPL with UI development at all, only the console for all my logging needs and the fast feedback loop of hot code reloading with state preservation. Regarding starting a new REPL in a catch block - not the same of course, but I substitute it with "Break on all exceptions" when I debug something.
They do. I don't do that, because I have my apps in full-screen, so opening dev tools in a different space is useless then when I do want to inspect elements. Would I have two screens, I'd be using that, but I don't.
@p-himik "Break on all exception" is an attribute of what? Dev tools?
DevTools, yeah.
@p-himik I wasn't aware. I'll try.
Oh, just in case - there's also cljs-devtools.
Oh yeah. We used to go with darwin (author of cljs-devtools) to the first Ruby meetups in Prague back in 2007 I think it was. Good old times! Will check them out.
I personally use devcards and cljs-devtools. The nice part about devcards for me is the fact that I have a dedicated, isolated page to break and prototype whatever I want. I've been taking a look at portfolio as an alternative, though, since it is able to test responsiveness without compromises or extra setup cljs-devtools is mostly useful for being able to pretty print cljs data structures to a REPL
for data visualization i recall seeing some relatively new thing that'd let you tap> data and see a pretty picture of it in a browser tab; I forgot its name though
Maybe Portal or Reveal?
portal looks close to what i saw several months ago; that may be it
@hifumi123 @p-himik Isn't it the Shadow CLJS inspector? It uses tap> and exactly shows it pretty printed in a tab of their inspector UI (which starts on a different port).
It's pretty cool, very readable. I like cljs-devtools a lot, but I wouldn't want to inspect something too large in it; this on the other hand has more space to it and is navigable, you can dive into the values.
Yes shadow-cljs also has it. There are more than one tool. :) JS console is indispensable when working with JS values a lot.