Adding custom toolbar buttons to Fulcro 3 Workspaces cards

#clojure #fulcro #workspaces #react

Recently I came across the problem that I wanted to use Workspaces' toolbar functionality - but with Fulcro 3 cards. There is no official documentation of doing this, so I ended up taking the standard Fulcro 3 card as a base and creating this custom card.
I used the following imports:

(ns util
  (:require [com.fulcrologic.fulcro.algorithms.merge :as m]
            [nubank.workspaces.core :as ws]
            [nubank.workspaces.model :as wsm]
            [nubank.workspaces.ui :as ui]
            [nubank.workspaces.ui.core :as uc]
            [com.fulcrologic.fulcro.dom :as dom]
            [nubank.workspaces.card-types.fulcro3 :as ct.fulcro]))

And created this card:

(defn custom-toolbar-card [fulcro-class & {::keys [toolbar-items card-width card-height] :as props}]
  {::wsm/card-width card-width
   ::wsm/card-height card-height
   ::wsm/align {:flex 1}
   ::wsm/init
   (fn [card]
     (let [fulcro-card (ct.fulcro/fulcro-card-init card {::ct.fulcro/wrap-root? true
                                                         ::ct.fulcro/root       fulcro-class})
           card-id     (::wsm/card-id card)
           app         (::ct.fulcro/app fulcro-card)]
       (assoc fulcro-card
              ::wsm/render-toolbar
              (fn []
                (dom/div
                 (mapv #(uc/button {:onClick ((:fn %) app)} (:text %)) toolbar-items)
                 (uc/button {:onClick #(ct.fulcro/inspector-set-app card-id)}
                            "Inspector")
                 (uc/button {:onClick #(ui/restart-card card-id)}
                            "Restart"))))))})

Note that I added the standard card-with and card-height parameters as well - you can leave those out - and added the default Fulcro 3 buttons.

Buttons can now be added in the format {:fn (fn [app-of-the-card] ...) :text "Button Text")}.

You can use it like this:

(ws/defcard login-card
            (util/custom-toolbar-card
             account-forms/LoginForm
             ::util/card-width 6
             ::util/card-height 16
             ::util/toolbar-items
             [{:fn (fn [app]
                     #(m/merge-component! app account-forms/LoginForm {:ui/error "The credentials you entered are incorrect."}))
               :text "Trigger error"}]))

In this example, I made a card for a login form (account-forms/LoginForm) which is a Fulcro 3 component. I added a toolbar item with the button text "Trigger error" that, when clicked, calls the fn, which is given the fulcro app of the card, updating the LoginForm to set a login error text.