Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2021-09-17

Channels

#cljsrn
<
2021-09-17
>
Charles Suggs15:09:27

hello 👋 Is someone able to help me out with a reactivity issue? I'm just getting started with ClojureScript and Re-frame and seem to be missing an important detail. We have a set of checkboxes for some hierarchical filters we call categories. We fetch the set of filters from an external API source and store them all in a vector in re-frame. We have a separate map in re-frame keyed by category ID where we want to store the state of which checkboxes are checked, like this {:123 true :304 false :309 true} . Currently, when I tap a checkbox the re-frame event handler updates the state of which boxes are checked, but the boxes do not gain the checked status in the UI and always look unchecked. I have excerpts of the relevant code ready to paste :)

Charles Suggs15:09:51

The checkboxes are actually a subset of the filters which we pass to map-indexed like so: 

(map-indexed (fn [i c] [view {:key i :style (tw "flex-row")}
                             [checkbox-item (checkbox-config {:checkbox c
                                                              :selected #(get-selected-sub-categories)})]])
                  (get-sub-categories (get-categories)))
And here are the supporting functions: 
(defn get-categories []
  (let [cats @(subscribe [:categories])] cats))
(defn get-selected-sub-categories []
  (let [selected-subcats @(subscribe [:selected-sub-categories])] selected-subcats))
(defn get-sub-categories [categories]
  (filter-child-categories categories (get-selected-category)))

(defn checkbox-config [props]
  (let [checkbox (:checkbox props)
        selected (:selected props)
        checked (doall (get-in selected [(:term_id checkbox)]))
        ]
    {:color (:grey colors)
     :label (gstr/unescapeEntities (:name checkbox))
     :labelStyle (merge {:marginLeft -32} (:labelStyle props))
     :mode "android"
     :status (if checked "checked" "unchecked")
     :style (merge {:marginLeft 32
                    :width (- (:width dimensions) 28)} (:style props))
     :onPress #(dispatch [:sub-categories-selected (:term_id checkbox)])}))

bringe16:09:50

In the map-indexed call, you are setting :selected to a function, instead of the result of calling that function. Is that intended?

Charles Suggs16:09:35

Hm, so when I set :selected to the result of calling that function, I get an "is not ISeqable" error, but maybe then the issue is that function is not returning the right thing

Charles Suggs16:09:28

double-checking that...

Charles Suggs16:09:11

welp, that plus removing the (doall) from checked (doall (get-in selected [(:term_id checkbox)])) in the checkbox-config let fixed it. thank you very much!

bringe16:09:33

Awesome! You’re welcome.

🍻 2
bringe16:09:45

Hi. I’m currently setting up Storybook to be used for developing components for an app, and I’m wondering how others have gone about integrating their components developed with Storybook with their cljsrn apps. We’re leaning toward using JS for building our components and then using them via cljs. @dnolen, I learned from one of your talks that you use this method at Vouch. Do you keep the component library + storybook in a separate repo from your app, or keep it in the same repo? So far what I’ve done is make a separate repo for the components and Storybook and use an npm package, but getting that into the app involves publishing a package to npm, or using some local install method. The latter seems to lack ease of installing and versioning, and the former requires a paid npm account if we want to keep the package private. I just want to weigh the options before paying for something. If anyone else has done this, I’d like to know your approach. Thanks. simple_smile

bringe00:09:36

Ah thanks! I didn’t know about this.