@gadfly361: When using semantic-ui’s widgets with javascript, if I don’t care about cljs purity, I can include the jquery and semantic-ui.js dependencies, then run i.e. $(‘#select’).dropdown() in the console to initialise it. How can I call this from within my cljs source files? Or how do you use the semantic ui widgets currently? Not sure of the right way to approach this.

Ah figured it out. For posterity’s sake,

$(‘#select’).dropdown()

(. (js/jQuery “#select") (dropdown []))

@sooheon: Yeah, that's how you would do it, more or less. Though consider what if you have, say, two components like that, what then?

Here's an example I posted before of using exactly the dropdown - https://clojurians.slack.com/files/jaen/F0JKFP7T6/-.clj

Might be helpful, especially the part about reagent/dom-node instead of jQuery selectors.

ah so instead of selecting by class, its a more explicit way of saying this element?

Yep.

If you would need it during rendering there's also reagent/current-component, but this should be rather rare, I think.

Just calling .dropdown with no args works for me, could you explain the rationale behind #js {:match “text" :onChange (fn [new-value] (reset! value new-value))} please?

Sure.

match is an option on what the dropdown should filter when you enter values - it can be "both" (default), "value" or "text". I want to match on text only.

onChange is a callback that's made when value changes. The fact, that the dropdown "appears" to work is not enough - you have to somehow have your Clojurescript state synced with the dropdown and vice-versa.

(fn [new-value] (reset! value new-value)) synchronises the current state of the dropdown with an atom passed as an argument.

The code in :component-did-update does the reverse - it updates the dropdown when the atom changes.

That's all because it's a stateful JS component, so you need to push and prod it a bit to behave with reagent.

I trust you've seen this example here - http://semantic-ui.com/introduction/integrations.html#managing-lifecycle?

What I've written above is based on that.

Thanks very much! All of this is really helpful

Does the #js turn the following map from a cljs map to a javascript object?

Yeah, but that's for literals only. #js name won't work, you need something like (clj->js name), though I usually prefer to construct options as literals most of the time anyway.

By literals you means the actual values, rather than function calls?

@sooheon 👍 to advice by @jaen

@sooheon: yeah, actual textual {:a 1} or 2 or "string" or something, not a function returning those.

@jaen: Awesome :). I’m still not quite used to the arg destructuring—is the choices atom to be passed in supposed to hold a vector of maps with {:value foo :text bar}?

Also I see that you did :as options in the destructuring but never used it—what would you use it for?

I just call it like [dropdown {:value value-atom} {"key" "value" "key2" "value2"}]

So no, that's not an atom, just a value.

ah it gets passed two arguments

The downside is you can't change the list of things once you instantiate the component, but I didn't need it so far.

In that case you could probably change _ in the inner fn to choices as well.

But no need to make it an atom, I think.

As for :as options it's really just my preference. I feel it documents what I'm destructuring. No need to actually do that if you feel it's superfluous.

Ok :) just wondering what your thoughts behind it were

Also, you could probably use hiccup vectors in the choices map - I didn't try it yet, but I see no reason for it not to work.

Also another downside - string keys; it's a JS library, so any key will be stringified. I could probably add some code to map that both ways, but didn't have a need to yet.

The big upside - a rich component you don't have to duplicate for now.

For sure that’s the main upside to using semantic :)

I would probably still rewrite them into React at some point (a la what re-com did with chosen dropdown for example), but if you're prototyping then it's perfect.

@jaen: I still don’t think i’m understanding what shape to pass it args in properly, I’m getting the “children with the same key” error, so value isn’t getting bound correctly. Is it supposed to receive two maps, one: {:value (r/atom nil)} representing the value of the dropdown component, and then other other {“foo” “Foo” “bar” “Bar”} representing the choices?

Nah, I'm dumb, sorry, given you wrong example '

(let [users (sc/users-query)]
  [dropdown {:value     user}
    (for [user @users]
      {:value (:id user) :text (:username user)})])

Straight from where I use it.

So it should be a vector of maps.

Haha thought that might be weird, because dropdown only takes one arg

With :value and :text keys.

No, it takes two args, at least my component.

[{:keys [value] :as options} choices] doesnt this mean you take one thing called choices, then destructure it?

Hah, no, you're maybe a bit confused by let.

If that were a let clause - you would be right

But you can imagine argument vector as something like

(let [[{:keys [value] :as options} FIRST-ARG
      choices                      SECOND-ARG]]
  ...)

Hope it makes more sense now?

Ahhhh I see. Yeah, in the argument vector each top level sexp should be its own argument, I was confused by let where I’m binding something to a destructured map :)

Makes much more sense thanks

Yeah. Argument vector is an ordered vector of patterns you would bind your n-th positional argument to.

(as in the pseudocode let example above)

Hopefully it now makes sense how I use that component.

@jaen: one more thing! :) in your actual example, you pass {:value user} as first arg before you iterate over @users as user below. So the user below is a map that contains :id and :username keys, what is user above that is the val of :value?

Ah, I kind of omitted that, let me get the full code.

(defn user-choice-component []
  (let [user (reagent-utils/wrap
               #(:id @selected-user)
               #(reset! selected-user-id (js/parseInt %)))]
    (fn []
      (let [users (sc/users-query)]
        [dropdown {:value     user}
          (for [user @users]
            {:value (:id user) :text (:username user)})]))))

Where reagent-utils/wrap is this thing I've done - https://gist.github.com/jaen/c59a3e0abcf0c6f6ade2

Not sure how kosher is that

But the stock reagent wrap has this problem it receives a value, so you can't for example construct it in the outer let of a Form2 component

Because it won't update.

Before writing that wrapper I actuall had a second parameter in options, the :on-change callback

But I though writing something atom-like would be cleaner.

Hrm this has too many levels for me to really grok right now :p

I’ll try wrestling with it and come back with more informed questions

Yeah, I can imagine it's a bit more complex

But forstarters

You could just do

i thought the :value val was just an atom that held something like component local state

Well

If you do it like that

It will work

That is

(let [user (reagent/atom 12)] ...)

For example should just work, try it.

Why I'm doing it that way, is because I need a "view" of another reactive value that's updateable through that "view".

Hence this.

It's a bit like the wrap example here - http://reagent-project.github.io/news/news050.html - but like I said, you can't really use reagent's wrap in an outer let of Form 2.

So, to sum up

(defn user-choice-component []
  (let [user-id (reagent/atom "first")]
    (fn []
      (let [users (sc/users-query)]
        [dropdown {:value     user-id}
          (for [user @users]
            {:value (:id user) :text (:username user)})]))))

Will probably work

Yes, it does! :)

Whew

The whole wrap thing, I think I will have to come back to

Thanks for all the reading material though. I’ll try to start absorbing it through osmosis

Sure, no problem; if anything's unclear then feel free to ask.

Also, if anyone thinks I'm doing something dumb with my Wrapper - feel free to yell at me.

I’m curious if anyone has experience the following using bidi (or any other client side routing): navigating around with links in the app works fine, and keeps track of things like user log in state, but if I directly type in and navigate to an address, the entire app reloads, losing all state. Most likely I’m neglecting to do something very basic with session or something, anyone recognise a common newbie pitfall?

I think that has nothing to do with bidi for that matter. You can listen to hash change event, but I'm not sure if there's something similar for URL change.

If you change whole URL you'll just get your page reloaded.

Fairly sure, though not 100%.

jaen: I think the problem is my app-db (using re-frame) doesn’t persist across reload. When i navigate routes with links, they’re nearly instantaneous, but when I reload or manually go to a page, it seems like the whole app is loading again. if my init fn looks like this:

(defn ^:export init []
  (routes/start!)
  (rf/dispatch-sync [:initialize-db])
  (reagent/render
   [views/app]
   (.getElementById js/document "app")))

Because well, as you say - you reload. Your page will get loaded again, can't do much about that.

At least as far as I know.

But you can do one thing - if your app db doesn't persist across reloads

Then you could serialise it using, say, transit and store in local storage using, for example, hodgepodge or something.

Wow so by default all apps with this architecture won’t persist app-db? That makes sense, but it’s a little surprising.

Sorry to keep asking so many questions, but could you steer me towards how to do what you said with the local storage?

^^this would mean that any re-frame apps would log out their users when they reload page, right?

It's really not all that complicated, hodgepodge exposes it as ITransientAssociative so you can just do (assoc! hodgepodge.core/local-storeage :your-key "your-value)

You would just have to hook it up

In an appropriate place for re-frame

ah you meant literally hodgepodge

Haha I’ll start by googling that

thought it was a figure of speech

Here - https://github.com/funcool/hodgepodge

Hah no, the lib is named that; sorry for confusion ; d

And yes, when you reload a page in the browser all in-memory state goes away, no matter what language you use.

no after staring at code all day my reading comprehension is a little off :) might need parens around grammatical clauses

So you have to store what you don't want to loose somewhere, like local storage for example.

(just FYI local storage has a hard 5MB limit)

so... Form1,2,3... I have a component-did-update hook that is rerun every time the component arguments (i.e. loc in [google-map loc]) change, however when using loc in the code it refers to the initial value — any pointers how to make that change as well?

I tried using :component-did-update (fn [this loc] ...) similar as it is recommended for the render fn but that didn't do the trick

Hm, according to React's docs componentDidUpdate gets previous props and componentWillUpdate will get next props.

Maybe that's reflected in reagent?

Just a guess, didn't have to do such hooks so far.

huh, so apparently did-update gets [this [some-fn props]]

Where some-fn seems to be the result of the create-class call

:component-will-update
      ;; not sure if I've fully understood why the signature is this way.
      ;; the first item in the second arg seems to be the return value of
      ;; the create-class call (seems!)
      (fn [this [_ new-center]]
        (.panTo (:map <@U06QXASV8>) new-center))

hello, I need someone adventurous. I need feedback on my (kinda) framework for reagent apps, I can offer an incomplete readme and an example app. I'm planning to release it soon (it works for me "tm") but I'd like some feedback before everyone calls me an idiot

@mihaelkonjevic: just provide a link, I'm sure some people here will be happy to take a look

well here it goes: - lib/framework: https://bitbucket.org/retro/keechma - example app: https://bitbucket.org/retro/place-my-order . Place my order app is ported/rewrittent from the https://github.com/donejs/place-my-order app which is used as an example for the http://donejs.com/ framework

readme for the place-my-order-app is inside the client folder