reagent 2022-12-26 | Slack Archive

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"}})

p-himik09:12:20

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

p-himik09:12:46

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

Itay Dreyfus10:12:47

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

p-himik10:12:32

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

Itay Dreyfus10:12:35

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

p-himik11:12:47

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-himik11:12:32

"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

kennytilton14:01:33

I do quite a bit of reactive styling/content in this Reagent version of my Hacker News AskHN Who's Hiring browser, @U03RWBQTH9V: 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.

👀 2

Itay Dreyfus15:01:30

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-himik16:01:10

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 Dreyfus16:01:44

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-himik16:01:46

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-himik16:01:13

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.

2022-12-26

Channels