Fork me on GitHub
#fulcro
<
2021-02-12
>
stuartrexking00:02:57

kill sexp or just kill works, but how do you paste onto the line below.

tony.kay01:02:58

So I’m using the IntelliJ “Kill Sexp”, which puts it in the normal copy buffer. So, the key sequence you see me using is: Kill Sexp, Undo, move to new location, OS Paste

tony.kay01:02:12

I should be using “Copy as Kill”, which doesn’t delete it (and would not need the undo), but I have a strong habit of just using the other because the kb shortcut is easier for me to hit 😄

tony.kay01:02:03

Now that you’ve asked me to explain it, and it sounds so silly, I’ll probably spend the time making myself use the better shortcut 😜

tony.kay01:02:25

These are all in settings under Cursive:

tony.kay01:02:04

I use some non-standard mappings, but that’s where to look to set your own. The Help->Show Cursive Cheat Sheet will show you a more readable version of what they are set to (it is updated when you change them)

stuartrexking01:02:59

Thanks for the detailed answer. I figured you were just going into insert mode and pasting.

stuartrexking01:02:11

I could hear it in the keystrokes.

peterdee00:02:56

Newbie question: could someone suggest how to display a modal with fulcro and Semantic UI?

stuartrexking00:02:40

@peterd Are you familiar with Fulcro? If not then the best approach is to learn Fulcro by reading the book https://book.fulcrologic.com and watching the video series https://www.youtube.com/playlist?list=PLVi9lDx-4C_T7jkihlQflyqGqU4xVtsfi. That should get you to a point of understanding where you can open a modal.

Jakub Holý (HolyJak)13:02:44

though Peter already knows these 🙂

peterdee01:02:03

Hi @stuartrexking I’m getting there with Fulcro. I have read the book, watched the videos up to the 6th one or so. @holyjak Minimalist’s Guide is fantastic. I have two apps that do some basics. For example, a chess UI https://github.com/pdenno/chui/blob/main/src/main/app/client.cljs but struggle with javascript interop with things like the modal. You can see my modal attempt there. The semantic UI React modal here https://semantic-ui.com/modules/modal.html#/usage

tony.kay01:02:45

bleh…I just use semantic ui react and let them deal with the overall mess of Portals and such.

tony.kay01:02:19

So then it is just a local attribute like :ui/modal-visible? in the query/props that I can toggle true/false to set the modal open.

tony.kay01:02:28

See fulcro semantic-ui-wrappers

tony.kay01:02:05

Otherwise, if you really want to implement it yourself (correctly) you’d use React portals to plop the node onto the root for aria compliance, etc.

peterdee01:02:41

Thanks! Since I have no idea what a React portal is, I’ll take your advice and stay away! Though I don’t know Fulcro very well yet, I can see that it is built on solid principles and will be very effective for me once I “get it”. Thanks also for creating it!

👍 3
peterdee02:02:16

Wow, that was easy. I had dinner in that time too!

😁 3
Pragyan Tripathi12:02:58

Is there any example which show how to use devcards with fulcro?

Jakub Holý (HolyJak)14:02:03

look at fulcro-template. it uses them

dvingo14:02:54

I managed to get this working, mostly copying the code from workspaces. https://github.com/dvingo/my-clj-utils https://github.com/dvingo/my-clj-utils/blob/master/src/main/dv/devcards_fulcro3.clj here's an example usage:

(ns app.react-collapse-cards
  (:require
    [my-app.client.ui.collapsible-view :refer [ui-collapse]]
    [com.fulcrologic.fulcro.components :as c :refer [defsc]]
    [dv.devcards-fulcro3 :as f3]))

(defsc CollapseView [this {:ui/keys [open?] :as props}]
  {:query         [:ui/open?]
   :ident         (fn [_] [::id ::card])
   :initial-state {:ui/open? false}}
  [:div
   [:button.ui.button.large
    {:on-click #(m/toggle!! this :ui/open?)} "toggle"]
   (ui-collapse {:isOpened open?}
     "Hello world")])

(f3/make-reagent-card CollapseView)
I noticed devcards library code being included in production builds though, and eventually started using storybook instead (https://github.com/dvingo/my-clj-utils/blob/master/src/main/dv/fulcro_storybook.cljs)

👍 6
Pragyan Tripathi15:02:45

Storybook looks really great.. will give it a try.. thanks 🙂

dvingo15:02:39

nice - this setup here, is where I started https://github.com/lilactown/storybook-cljs

Braden Shepherdson19:02:40

I'm still thinking about how to integrate Firestore with Fulcro effectively. Firestore is unusual in that it's not really built for occasional request-response queries, but for streaming. ideally, it would work like this: - app navigates to a page with a list - create a streaming query for a collection from Firestore - burst of "added" events for the current contents - probably merge-component! add/update/delete events into the database? - when the user navigates away from the page, the query can be disconnected again. I don't know Fulcro well enough to know where to put those "mount" and "unmount" hooks, or if that whole approach is misguided.

👍 3
wilkerlucio20:02:32

if I were to do that, I would think about where I want things to start listening for data. Of course you cant on every app listen for every state change, but inside of task (consider doing a TODO app here) component for example, you could use hooks to start a FB subscription for the data on that point (and clear up the subscriptions when the component is removed). This way you could do a more fine tuning on the subscriptions, makes sense?

Jakub Holý (HolyJak)20:02:03

What you described makes sense to me, Braden. You can use React life cycle methods wit Fulcro such as component did mount / unmount for this. (Or React hooks, leveraging the hooks support in F.)

Braden Shepherdson22:02:49

okay, I'll take a look. that's why I asked, I was sure there would be some good place to hook into the lifecycle. I'll hook it into the list component's lifecycle, I suppose.

Alex21:02:50

Hey guys I have the following component

(defsc AccountListItem
  "An account list item"
  [this {:account/keys [id name email active? edit] :as props}]
  {:query [:account/id :account/name :account/email :account/active?
           {:account/edit ['*]}]
   :ident :account/id
   :initLocalState (fn [this _] {:editing? false})}
  (let [editing? (prim/get-state this :editing?)]
    (if editing?
      (account-form props)
      (dom/tr
       (dom/td name)
       (dom/td email)
       (dom/td
        (dom/div :.ui.label.green
                 (if active? "Active" "Inactive")))
       (dom/td
        (dom/button {:onClick
                     (fn []
                        (prim/set-state!
                         this
                         {:editing? (not editing?)})
                        (prim/transact! this `[(app.model.account/use-account-as-form {:account-id ~id})]))}
                    "Edit"))))))
I'm trying to get rid of the `editing?` local state by having a `:account/edit` state on the root which will change when the `edit` button is pressed.  However, when I try to retrieve the value of `:account/edit` on my query I get nil.

Alex21:02:07

My Root query looks like the following:

[:main/welcome-message
 #:main{:accounts
        [:component/id
         #:accounts{:accounts
                    [:list/id
                     #:list{:accounts
                            [:account/id
                             :account/name
                             :account/email
                             :account/active?
                             #:account{:edit [*]}]}]}]}]

Alex Piers02:02:38

Normally, you put join in the query only when you want to go one level deeper into the child, because the shape of the query is supposed to match the shape of the ui. Therefore, :account/edit should be a property just like :account/id, :account/name, etc. In Tony's book, he actually gave an excellent example to show you how editing? can be done. Do check this out: https://book.fulcrologic.com/#_focusing_an_input

Alex06:02:34

So adding the :account/editing? to my data worked when I want to support multiple rows being edited at the same time. However if I only want 1 row being edited at a time what's best practice? First thing I thought of was write a mutation that toggles all :account/editing? to false and then toggling the 1 record that needs to be edited to true.

Alex06:02:15

ah nvm I think I got it 😄

Jakub Holý (HolyJak)20:02:58

You could have it at root and use a Link Query to ask for it. Or perhaps better, have it on the parent (table/list component), which would query for it and pass it to each row as a Computed Property.

Alex17:02:43

@holyjak ah there it is, thank you! this will do.

👍 3