2022-12-26 reagent | Clojure Slack Archive

reagent

Itay Dreyfus 2022-12-26T09:33:09.227199Z

How would you model this static range rating? So I’ve got this component where I managed to get a simple 1-10 range

(defn circle-level [items]
  [:div.level-list
   (for [item items]
     [:div.circle-normal item])]) 


(defn fancy-level-list [] 
  [:div.fancy-level-list
   "Fancy level:"
   [circle-level (range 1 11)]]
   )

Now based on a data file, I want to colorize the circle matched to the :level value. What’s kinda a best practice for this?

(def coffee-shops {:item-01 {:img ""
                             :title "Cafetish"
                             :description "Neig"
                             :level "5"}
                  :item-02 {:img ""
                            :title "Cafelix"
                            :description "Neighbourhood"
                            :level "3"}
                  :item-03 {:img ""
                            :title "HOC - House of Coffee"
                            :description "Fancy coffee shop nearby Neve Tzedek"
                            :level "8"}})

kennytilton 2023-01-01T14:12:33.457809Z

I do quite a bit of reactive styling/content in this Reagent version of my Hacker News AskHN Who's Hiring browser, @itaydr: https://github.com/kennytilton/hiringagent/blob/6339ede41e2241d66775f2ee2a529d7fc17067bf/src/aghire/job_list_control_bar.cljs#L24 Guessing we want :level to be mutable, and the styling to follow that, we might have a single ratom associating :item-ids with :levels, meaning modestly excessive propagation, or give each item its own ratom and have some reactive specificity. That is a judgment call based on anticipated volume.

👀 1

p-himik 2022-12-26T09:34:20.304499Z

If it's just color then I'd do it with CSS.

p-himik 2022-12-26T09:34:46.847549Z

Easy enough if you set a data attribute and use it in a CSS selector.

Itay Dreyfus 2022-12-26T10:07:47.871009Z

Wouldn’t you set it as a state or do you think it’s too much?

p-himik 2022-12-26T10:29:32.121829Z

I'm "eh" on this matter. :) I'd probably depend on my mood and approaches that are already employed in the project.

Itay Dreyfus 2022-12-26T10:59:35.648019Z

My thought was to practice states with this one but I’m struggling to model that 😆

p-himik 2022-12-26T11:01:47.634009Z

But styling is quite orthogonal to a state. It might depend on one, sure, but it doesn't affect how you want to model the state itself.

p-himik 2022-12-26T11:02:32.042069Z

"The fancy level is 8" is a state. "The 8th level of fancy happens to be green" is not a state, unless those colors change based on something else (but then I'd say that the state is that "something else" still).

👍 1

Itay Dreyfus 2023-01-15T15:55:30.444289Z

Still struggling with this one.. I’ve uploaded https://codepen.io/itaydre/pen/VwBzpGL. I’ve managed to update the level item statically, but how can I make it to work for each item-id in coffee-shops? I also tried to store this in “active?” but it returns all values together and not per item-card. (for [level (vals coffee-shops)] (:level level))) Appreciate your help!

p-himik 2023-01-15T16:39:10.309819Z

You're rendering 3 exactly identical fancy-level-lists. You gotta pass some information down for that component to know which of the lists it's rendering and what the actual active-level is (which is what I'd rename active? to).

Itay Dreyfus 2023-01-15T16:44:44.342489Z

The issue it that when I do

(def active-level (for [level (vals coffee-shops)]
                    (:level level)))

I get 5 3 8 printed together

p-himik 2023-01-15T16:45:46.253599Z

Don't do it in def, do it in a let that's local to the right instant of the component that renders the corresponding list.

p-himik 2023-01-15T16:47:13.146139Z

It seems like you're just trying out random things. Instead, formulate your problem in plain English, but precisely and with Clojure primitives in mind. Then split it into chunks, them split those chunks, and keep on iterating till you get chunks that are small enough for you to easily write them in Clojure.

Clojurians Log v2

reagent