Clojurians Log v2

In RAD, I'd like to have a report with checkbox controls to show/hide some columns but I see no simple way of doing that, other than creating my own table and row components. Correct?

I’m busy trying to track down a bug in my app and just want to check that what I’m trying to do is supported. I have a union component that has a to many recursive collection of itself. The union component uses the correct query when in isolation but when the union component is a child it doesn’t use the correct query when its type differs from its parent. It’s denormalised using the parent’s type query.

I am trying to use JS async/await functions from 3rd party libraries in Fulcro. I have tried using mutations and state machine to handle the asynchrony of the call, but without success. Does anyone have any experience solving this problem? I appreciate what you can share.

Async just returns a promise, no? Cannot you simply (.then promise #(transact this-component...))?

The problem is that I am integrating an image picker with a UI component. So I am trying to pick an image then display it. The image picker is async.

What exactly does it do? Pick an image from the disk, upload, display? Or pick an image from a list of images? What do you get from the picker, an url?

It picks an image from storage and returns a url, if one is picked.

I can't put a Promise or a go block inside a render code block. I can't put it in the event handler of a state machine either.

Hi all, I remember seeing a message here about using Fulcro via a React hook. Does anyone know where that’s documented? Thanks

I assume the picker is a React component that you nest in your fulcro component and that it expects that you pass it a callback it will call when the user has picked. Or?

I don't seem to have a callback. The React example uses await I am sure I can convert that to a callback though.

I see it’s actually deeper than that… reading the EQL docs it doesn’t seem to me, on first reading at least, that the semantics of recursive unions are spelt out explicitly… but how the AST is structured it seems to me that implicitly a recursive union was intended to only be of one type

…no, I think there isn’t an implied semantics in the AST. I think it might be in fulcro…

You can't have a Promise in the render body of a defsc. Any ideas?

Nvm, I figured it out. Just save the promise and return nil. That works.

What do you need? Use hook based instead of class based components? See the doc string of defsc and the Dev Guide

Using Fulcro without Fulcro components, via hooks, see the develop branch and the raw-components namespace

Search the code for its usages to find the examples.

No @holyjak. I did not solve it. Here is my code:

(defsc Photo [this {:ui/keys [photo] :as props}]
  {:ident         (fn [] [:component/id ::Photo])
   :query         (fn [] [:ui/photo])
   :initial-state (fn [photo] {:ui/photo photo})
   :route-segment ["photo"]}

  (log/debug "Photo props" props)
  (let [foo (-> (.requestMediaLibraryPermissionsAsync ImagePicker)
              (.then (fn [resp]
                       (let [granted? ^boolean (.-granted resp)]
                         (if granted?
                           (-> (.launchImageLibraryAsync ImagePicker)
                             (.then (fn [resp]
                                      (let [cancelled? ^boolean (.-cancelled resp)
                                            photo (.-uri resp)]
                                        (when-not cancelled?
                                          (log/debug "Photo uri=" photo)
                                          (n/ui-view {:style {:flex 1}}
                                            (n/ui-text {} "Hello there!!!!!!")
                                            (n/ui-image
                                              {:source {:uri photo}})
                                            (rne/ui-button {:title       "Accept"
                                                            :buttonStyle {:height 40}
                                                            :onPress     (fn [] (js/alert "You pressed the button!"))}))))))))))))]))

Can you not separate out the ui and promise handling code? You might need some internal state to orchestrate? I don’t think what you’re trying to do will ever work the way you want it to.

I’m attempting to use ao/style :autocomplete with a RAD :string attribute, but I’m getting an error thrown Uncaught Error: Assert failed: (or (eql/ident? server-property-or-ident) (keyword? server-property-or-ident)) because the :autocomplete/search-key is nil in com.fulcrologic.rad.rendering.semantic-ui.autocomplete/AutocompleteField :initLocalState I’m setting that key in the form like:

fo/field-options {:worktime/task {:autocomplete/search-key :worktime/tasks}}

The Photo component’s render method (the body of the macro) needs to return react dom constructors. You’re not even using foo in the body

Hi @donavan. I have tried to separate the ui and promise code. I tried a transaction, and a statemachine without success. I don't use foo, because it is an object and React was complaining about it. I am stumped as to how to separate the concerns.

Yeah, was just typing that promise then doesn’t return the result of the then method

…as far as I remember, it’s been a while since I’ve used promises

Thanks @holyjak! I was thinking the second. Using Fulcro without Fulcro components

I’ll check that namespace out, thanks

The problem is that the function returns immediately, then computes the result and saves it. I don't know how to deref a promise.

Sorry @hadilsabbagh18 I have food about to arrive but…

I would just keep some local state…

and in the .then callback update that state with whatever is in resp (it looks like it’s a URL)

then always return DOM from the component

and check whether you have a URL in the component’s local state

if you do, do whatver you want like displaying the image, if not show a button saying ‘upload the image’

I have to go sorry, will try check back later

You may want to find a plain React tutorial on how to build an upload button… that might help you understand what you need to do?

Thanks @donavan

It was something with raw and components, not sure about the order :)

As donovan says. Put the body into photo and inside the then just store the url so the photo component can see it, either in local state or in the Fulcro client db: do there something like (transact! this [(m/set-string :ui/img-url <the url>]))

Thanks @holyjak. How do I know when the uri is ready?

I made a change that fixes the error above, so the remote call is happening, and the options are getting stored, but they’re still not showing up back in the dropdown in the browser. https://github.com/thosmos/fulcro-rad-semantic-ui/tree/bugfix/autocomplete

I think the component will update when the transaction occurs.