This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-05-26
Channels
- # announcements (7)
- # babashka (42)
- # beginners (349)
- # chlorine-clover (9)
- # cider (16)
- # circleci (2)
- # clj-kondo (6)
- # cljs-dev (61)
- # cljsrn (15)
- # clojure (95)
- # clojure-europe (11)
- # clojure-italy (2)
- # clojure-nl (4)
- # clojure-spec (4)
- # clojure-uk (24)
- # clojurescript (21)
- # conjure (2)
- # core-async (8)
- # cursive (12)
- # datascript (2)
- # emacs (4)
- # exercism (1)
- # figwheel-main (86)
- # fulcro (27)
- # graalvm (4)
- # helix (36)
- # hoplon (3)
- # interop (44)
- # kaocha (6)
- # lein-figwheel (4)
- # malli (7)
- # meander (9)
- # off-topic (95)
- # pathom (33)
- # pedestal (13)
- # re-frame (20)
- # reitit (3)
- # shadow-cljs (102)
- # tools-deps (14)
- # xtdb (16)
@mruzekw no, fulcro css uses real css, which is not available in RN
(defsc Root [this props]
{:use-hooks? true}
(let [is-desktop (rresp/useMediaQuery #js {:minWidth 400})]
(ui-view
{:style (.-container styles)}
(ui-text {:style (.-text styles)} is-desktop))))
react-dom.development.js:16238Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ...
The react/react-dom version was different between my project package.json and my fulcro version
When I do df/load!
, it does not create the root
edge, I have been trying using the {:target [:component/id ::uif/account-list :account/farms]}
, this creates a new entry in the db, but doesnt create a root edge like in the video tutorial.
@murtaza52 not sure what you mean “like in the tutorial”…I beleive the tutorial shows you that is the default place it goes (only) if you don’t specify a target.
(df/load! app :all-accounts uif/Account)
@U0CKQ19AQ When I do the above it loads the data under the :all-accounts
key but nothing under the :root
key in the DB.@U0CKQ19AQ other than the root element, if I am loading the data from a remote, what is the purpose of the initial-state ?
if you only ever load it, initial state serves no purpose. It is for generating the first “frame” of your reified view for initial render.
Can anyone explain this behavior? The component renders form inputs with an initial state that sets the values to empty strings. As soon as one of the inputs `onChange` is triggered and the value is updated, the component is getting re-rendered with only that modified input field as a key in props.
Can you share more of your code? It's hard to say from what you've shared.
I have this helper for debugging form state, it may help clarify what's happening, but i'm not sure, as it could be a number of things. To use it pass it your form validator and the component and it shows you the form state
(defn form-debug
"show table of form fields for a component with value and validation state.
validator component instance"
[validator com show?]
(let [props (comp/props com)
{:keys [form-fields]} (comp/component-options com)
form-ident (comp/get-ident com)]
(when show?
(comp/fragment
(dom/h4 :.ui.violet.message (str "Form fields for " (pr-str form-ident) ":"))
(dom/table :.ui.celled.table.striped.yellow
(dom/thead
(dom/tr (dom/th "field") (dom/th "value") (dom/th "valid state")))
(dom/tbody
(dom/tr {:key "all"} (dom/td "Entire form") (dom/td "n/a") (dom/td (pr-str (validator props))))
(map #(dom/tr {:key (str %)}
(dom/td (str %))
(dom/td (pr-str (props %)))
(dom/td (pr-str (validator props %))))
form-fields)))))))
Thanks dvingo. I'll try that out. Here's the code https://pastebin.com/bNWZtPTK
Ah. I still have a lot of misunderstandings in my head. Never used React, new to Clojure, and Fulcro is a lot to take in.
(defsc Root [this {::keys [user-list]}]
{:query [{::user-list (comp/get-query UserList)}]
:initial-state {::user-list {}}}
(dom/div
(dom/div
:.ui.container.segment
(ui-user-form (comp/get-initial-state UserForm)))
Fixed by (side-note: removed unrelated user-list code) ->
(defsc Root [this {::keys [user-form]}]
{:query [{::user-form (comp/get-query UserForm)}]
:initial-state (fn [params] {::user-form (comp/get-initial-state UserForm)})}
(dom/div
:.ui.container.segment
(ui-user-form user-form)))
Starting with ClojureScript, React, and Fulcro, that might be too much. In general I recommend starting with simple Clojure apps, then ClojureScript, then a simple cljs framework such as Reagent, then Fulcro.
Hi, I'm trying to create an AWS Cognito authentication ui state machine. The state machine is quite similar to the demo presented in Fulcro Part 17, of the Fulcro 3 video tutorials. My login mutation can return session related information, similar to the tutorial such as user/id, user/email, user/valid?, but can also give back some error information too which seems to belong more to the login table (again from the video tutorial where you have a session table containing user info and a login-form table that contains username, password form fields).
In my trigger-remote-mutation
call I'm passing:
{::uism/mutation-remote :cognito
::m/returning user-class
::dt/target [:session/current-user]
::uism/ok-event :event/ok
::uism/error-event :event/error}
What's the best way of putting some of the return information one table and the rest in another in a ui state machine?You can do that in your handler for :event/ok
. Here's an example from an app where I handle updating the client db after a successful entity creation - the relevant parts are apply-action
in the success handler
(sm/trigger-remote-mutation
:actor/form
remote-mutation
(merge
{::m/returning item-cls
::sm/ok-event :event/success
::sm/ok-data {:form-cls form-cls :entity entity :append append}
::sm/error-event :event/failed}
entity))
(sm/activate :state/submitting)
;; in handlers section:
{:event/success {::sm/handler
(fn [{{:keys [form-cls entity append]} ::sm/event-data :as env}]
(-> env
(sm/apply-action #(merge/merge-component % form-cls entity :append append))
(sm/apply-action #(cu/reset-form* % (sm/actor->ident env :actor/form)))
(sm/assoc-aliased :server-msg "Success")
(sm/set-timeout :clear-msg-timer :event/reset {} 2000)
(sm/activate :state/success)))}}