Fulcro Lesson: Detached Root Component (Form)

I am working on a Fulcro RAD application and want to display a RAD Form in a popup, to create a new customer for an order I am making. Normally Fulcro components are "composed all the way up to the root," including their query in the parent’s and getting their props from the parent. But that does not make sense here - I want a detached form I can pop up, fill, close, and go back to editing the order. I wasn’t able to figure out how to compose this without help and thus want to record the solution.

Continue reading →

Clojure is in fact a trinity - of language, interactive development, and structural editing

You can never really learn Clojure if you only focus on the language. Why? Because Clojure is in fact a synergetic combination of three things: the language itself, a way of working centered on interactive development, and structural editing support in editors for manipulating the code safely and efficiently. You cannot get the full benefits of Clojure unless you embrace all three.

Continue reading →

PostgreSQL: From JSON to table and back

I have a jsonb column in Postgres and I would like to update parts of it based on some other parts of the value. In Clojure I would have used update, which does new-value = f(old-value). How can I achieve something similar - i.e. deriving the new value from the old one - in Postgres? It turns out I can, with the help of a temporary table and jsonb_to_recordset that can turn a jsonb value into a table and row_to_json + jsonb_agg that can turn that back to jsonb. Let’s see how it works.

The data

I have a table called report with the primary key _id and jsonb column columns. It looks like this:

Table 1. Table report


[{"key": "name", "type": "field", "label": "Name"}, {"key": "Supports", "type": "reference-type-outgoing", "label": "Supports"}, …​]


[{"key": "name", "type": "custom", "label": "Name", "dataType": "Text", "sort": "ASC"}]



Notice that the objects in the array may have different keys.

What I want to do is to update every column of the type reference-type-outgoing or reference-type-incoming by appending the direction - outgoing or incoming - to the key. F.ex. the column above would become {"key": "Supports—​outgoing", "type": "reference-type-outgoing", …​.

Continue reading →

Signing git commits with a ssh key using 1Password

The Sign your Git commits with 1Password post is really useful but it does not tell you how to verify that signing works, how to troubleshoot it, or how to make it possible to verify the signatures locally. I will explain that here. The short story is that you need to set up gpg.ssh.allowedSignersFile and add your key there to be able to use git log --show-signature.

First of all, the setup as described in the blog post works and you can display the signature after having made a commit with git show --pretty=raw - notice the line with gpgsig …​ and those below it:

Continue reading →

Using React.forwardRef in Fulcro (and rendering a Fulcro component from a JS one)

How (and why) do you use React.forwardRef in Fulcro? Let’s first explore ref. When you need access to the raw HTMLElement in React - f.ex. to call .focus on it - you need to create a Ref object[1] (similar to Clojure’s atoms) and pass it to a React DOM element such as dom/div via the magical property :ref. React will then do something like "(reset! <the Ref> <the raw element>)" so that you can access the raw element in your code: (some→ <the Ref> .-current .focus). The :ref property is magical in the regard that it is "consumed" by React itself and not passed to the component. But what if you make a custom component and want it to be able to take a Ref object to attach it to its child DOM element? The simplest solution is to pass it under any other name than the reserved ref, which is exactly what this Fulcro examples does, using the custom :forwarded-ref. However some 3rd party higher-order components insist on passing the Ref down using the reserved ref property name. To make it possibly, React invented forwardRef:

const FancyButton = React.forwardRef((props, ref) =>
  (<button ref={ref} className="FancyButton">{props.children}</button>));

const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Continue reading →

The trouble with list components in Fulcro

Imagine you have a list of things to display in your UI. You naturally want to represent them with a list component, such as a TodoList. But that is not the way we do it in Fulcro, which beginners find confusing (I did). Here I explain why and what are the alternatives.

Still new to Fulcro? Make sure to check out my Minimalist Full-Stack Fulcro Tutorial!

Continue reading →

Copyright © 2023 Jakub Holý
Powered by Cryogen
Theme by KingMob