Clojurians Log v2

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

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

Nice. Good work man!

@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.

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

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 😄

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 😜

These are all in settings under Cursive:

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

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)

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

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.

See fulcro semantic-ui-wrappers

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.

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

I could hear it in the keystrokes.

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!

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

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

look at fulcro-template. it uses them

Actually not decards but Workspaces which is similar https://github.com/fulcrologic/fulcro-template#workspaces-1

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)

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

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

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.

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?

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"))))))

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 [*]}]}]}]}]