Fork me on GitHub
#fulcro
<
2020-12-24
>
peterdee00:12:55

I am a fulcro newbie, and not too up on javascript either. Following one of the excellent Fulcro videos I learned how to add a react component using react-interop/react-factory. I’d like to add the ‘Controlled’ component of react-codemirror2. In javascript, it is referenced like this

import {Controlled as CodeMirror} from 'react-codemirror2'
 
<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data, value) => {
    this.setState({value});
  }}
  onChange={(editor, data, value) => {
  }}/>
How can I reach the ‘controlled’ component in Fulcro?

lgessler03:12:25

It'd look something like this (not 100% sure about the shadow-cljs syntax for the import):

(ns foo 
    (:require ["react-codemirror2" :rename {"Controlled" CodeMirror}])

(def code-mirror (react-interop/react-factory CodeMirror))

(defsc Foo [this props] 
  {...}
  (code-mirror {:value (:value props)
                :onChange #(...)}))

peterdee18:12:54

Thanks, @U49U72C4V! That was real close. It works with “Controlled” as a symbol in the :require.

🚀 3
David Pham07:12:35

I am sorry if this is a clear answer, but can you use fulcro for client side only and use different backend than Clojure with simple rest calls?

Gleb Posobin08:12:49

Yes, you will have to write your own remote for fulcro on the client side, and probably use pathom to parse the query fulcro is generating and send the corresponding rest query to your server.

tvaughan11:12:58

defmutation has a rest-api method, https://book.fulcrologic.com/#_using_defmutation. I've never used it so I can't say anything more about it.

David Pham14:12:16

thanks a lot for your answers.

Jakub Holý (HolyJak)15:12:49

Notice you can run Pathom on the client side, as an adapter between Fulcro and REST. Or a custom rest endpoint and eg merge-component! the returned data

Gleb Posobin16:12:50

@U0P7ZBZCK defmutation doesn't have a rest-api method by default: you need to define the :rest-api remote yourself first, it is given as an example of how the custom remotes in defmutation could look like.

💡 3
tvaughan17:12:19

Thanks for the clarification @UQ4RJ22EA

David Pham19:12:50

I really don’t understand anything haha. My problem is I don’t understand any of the parts of Fulcro haha. But if you tell me I can do pure client side with fulcro I might just try to start and dig into it.

lgessler20:12:46

@UEQGQ6XH7 yes, it is possible: like @U0522TWDA is saying, using Fulcro with a non-"standard" backend is fully supported. For a REST API for example, you'd just need to write some additional code using Pathom (which can also run in CLJS) that will help turn the output of the REST API into the form that Fulcro is expecting

David Pham20:12:35

I guess in the worst case I can use re frame and fulcro together xD

Chris O’Donnell20:12:20

Here's an example using a hasura graphql backend: https://github.com/codonnell/crudless-todomvc

❤️ 3
Gleb Posobin08:12:13

There is a link to "the graph database section" in the first paragraph of https://book.fulcrologic.com/#_eqlthe_query_and_mutation_language and it doesn't seem to lead anywhere.

Jakub Holý (HolyJak)15:12:20

Good catch, Gleb! Perhaps send a PR to change the link to what Alex suggested?

Gleb Posobin16:12:29

It's a link to the fulcro 2 book though.

Gleb Posobin16:12:57

Maybe there are some differences? Why is it not in the fulcro 3 book?

Gleb Posobin16:12:56

Also, I didn't know there is a github repo for the fulcro book!

Gleb Posobin16:12:33

The core concepts section the fulcro2 book is very useful, surprised it is not in the fulcro3 book!

tony.kay19:12:26

That was a serious oversight…moved to F3 and updated as best I could in short time: https://book.fulcrologic.com/#_core_concepts

👍 6
🎉 6
Gleb Posobin23:12:26

There is also a picture missing in the 3.4.1 part, after the words "Thus, an entire state database with 'root node' properties might look like this:"

Gleb Posobin23:12:38

Though it was missing from the fulcro2 book too.

tony.kay03:12:36

wasn’t a missing diagram, was a duplicate sentence I think

alex-eberts21:12:59

In RAD, is there a report option to tell a report to use an enumerated-label vs. the enumerated-value for :enum attributed? I.e. I would like to display the enumerated-label “Super User” vs the enumerated-value “account.role/superuser”

tony.kay03:12:01

Should do that automatically, might be an oversight

tony.kay03:12:15

you put enumerated-labels on the attr, right?

tony.kay03:12:34

you can add a column-formatter as a workaround, but it’s just me forgetting to handle the case probably

alex-eberts15:12:28

Happy holidays Tony! Yes, I have enumerated labels on the attr:

(def todo-status
  {:todo.status/not-started "Not Started"
   :todo.status/in-progress "In Progress"
   :todo.status/completed   "Completed"
   :todo.status/archived    "Archived"})

(defattr status :todo/status :enum
  {ao/identities        #{:todo/id}
   ao/enumerated-values (set (keys todo-status))
   ao/enumerated-labels todo-status
   ao/schema            :production
   ao/required?         true})
And the output shows enumerated-values:

alex-eberts15:12:30

I’ll give column formatters a shot..