DEV Community

Cover image for ReasonML & ThemeUI in GatsbyJS via Render Props
CangleCode profile image Can Rau
Can Rau for CangleCode

Posted on • Edited on

ReasonML & ThemeUI in GatsbyJS via Render Props

#reason #gatsby #react #javascript

For weeks I was romanticizing ReasonML but didn't find an opportunity so far to actually try it out 😭

Then I started working on the contact form of a new project I'm doing in GatsbyJS, which I started using useState hooks but then decided to use useReducer for the first time, to get a more state machine like experience, when I started to remember Reason's beautiful Pattern Matching and couldn't resist any longer 😁

The Problem

I'm new to ReasonML & Bucklescript and am using Theme UI for styling, which I think is a little more complicated to use in Reason due to the custom JSX Pragma & sx prop magic ✨
Please let me know if you know good ways to integrate/bind.

Render Props to the rescue

So I'm using Render Props to connect logic & styling.
I don't use them often, but they can be pretty useful at times. 👏
For example, I have a layout component which wraps most pages, takes in the original page props and passes certain helpers down/back if the child is a function. This way I can save on state-management/context. 😎

Before

Just for reference that's the pure JS contact form I started out with.

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { useReducer } from 'react'
import isEmail from 'validator/es/lib/isEmail'
import { InputField } from './input-field'

const initialValue = {
  status: 'idle',
  errors: {},
  values: { email: '', message: '', consent: false },
}

function reducer(state, action) {
  switch (action.type) {
    case 'touched':
      return {
        ...state,
        status: 'touched',
        values: { ...state.values, ...action.values },
      }
    case 'submitting':
      return { ...state, status: 'submitting', errors: {} }
    case 'error':
      return {
        ...state,
        status: 'error',
        errors: { ...state.errors, ...action.errors },
      }
    case 'success':
      return { ...initialValue, status: 'success' }
    default:
      throw new Error()
  }
}

export const ContactForm = () => {
  const [{ status, values, errors }, dispatch] = useReducer(
    reducer,
    initialValue
  )
  const collectErrors = {}

  const handleSubmit = event => {
    event.preventDefault()

    dispatch({ type: 'submitting' })

    const cleaned = {
      email: values.email.trim(),
      message: values.message.trim(),
    }

    if (!isEmail(cleaned.email)) {
      collectErrors.email = 'Please provide your best e-mail address'
    }

    if (!cleaned.message) {
      collectErrors.message = 'Please provide a message'
    } else if (cleaned.message.length < 20) {
      collectErrors.message = 'Please be more specific'
    }

    if (!values.consent) {
      collectErrors.consent = 'You have to agree to submit'
    }

    if (Object.keys(collectErrors).length > 0) {
      dispatch({ type: 'error', errors: collectErrors })
      return
    }

    setTimeout(() => {
      dispatch({ type: 'success' })
    }, 2000)
  }

  const setEmail = (_, value) => {
    dispatch({ type: 'touched', values: { email: value } })
  }

  const setMessage = (_, value) => {
    dispatch({ type: 'touched', values: { message: value } })
  }

  const setConsent = (_, value) => {
    dispatch({ type: 'touched', values: { consent: value } })
  }

  const handleKeyDown = event => {
    if (event.metaKey && (event.key === 'Enter' || event.keyCode === 13)) {
      handleSubmit(event)
    }
  }

  return (
    <form
      action=""
      method="post"
      key="ContactForm"
      onSubmit={handleSubmit}
      onKeyDown={handleKeyDown}
    >
      <fieldset disabled={status === 'submitting'} sx={{ border: 0 }}>
        <InputField
          type="email"
          label="E-Mail-Address"
          value={values.email}
          placeholder="mail@example.com"
          onChange={setEmail}
          errorMessage={errors.email}
          required
        />

        <InputField
          type="textarea"
          label="Message"
          value={values.message}
          placeholder="Say hi 👋"
          onChange={setMessage}
          errorMessage={errors.message}
          sx={{ marginTop: '1rem' }}
          required
        />

        <InputField
          type="checkbox"
          label="I agree to my e-mail address and message being stored and used to review the request Privacy policy"
          value={values.consent}
          onChange={setConsent}
          errorMessage={errors.consent}
          disabled={status === 'submitting'}
          sx={{ marginTop: '1rem' }}
          required
        />

        <button
          type="submit"
          disabled={status === 'submitting'}
          sx={{ variant: 'buttons.primary', marginTop: '1rem' }}
        >
          Submit
        </button>
      </fieldset>
    </form>
  )
}
Enter fullscreen mode Exit fullscreen mode

Initial ContactForm.re

I thought I'd "just" write the following in ReasonML and keep the rest in JS. This way I could progress my learning slowly and mostly leverage the cool pattern matching in my reducer. 😍

type status =
  | Idle
  | Touched
  | Submitting
  | Success
  | Error;

type record = {
  email: string,
  message: string,
  consent: bool,
};

module Errors = {
  type error = {
    mutable email: string,
    mutable message: string,
    mutable consent: string,
  };
};

type state = {
  status,
  errors: Errors.error,
  values: record,
};

let initialValue = {
  status: Idle,
  errors: {
    email: "",
    message: "",
    consent: "",
  },
  values: {
    email: "",
    message: "",
    consent: false,
  },
};

type action =
  | Touched(record)
  | Submitting
  | Success
  | Error(Errors.error);

let reducer = (state, action) => {
  switch (action) {
  | Touched(values) => {...state, status: Touched, values}
  | Submitting => {...state, status: Submitting, errors: initialValue.errors}
  | Error(errors) => {...state, status: Error, errors}
  | Success => {...initialValue, status: Success}
  };
};

[@react.component]
let make = (~children) => {
  let (state, dispatch) = React.useReducer(reducer, initialValue);

  children({
    "status": state.status,
    "values": state.values,
    "errors": state.errors,
    "setTouched": x => dispatch(Touched(x)),
    "setSubmitting": () => dispatch(Submitting),
    "setSuccess": () => dispatch(Success),
    "setError": x => dispatch(Error(x)),
  });
}
Enter fullscreen mode Exit fullscreen mode

After getting this to work and feeling comfortable enough I decided to handle all the logic in ReasonML 🙌

open ReactEvent.Keyboard;

[@bs.module "validator/es/lib/isEmail"]
external isEmail: string => bool = "default";

[@bs.val] external setTimeout: (unit => unit, int) => unit = "setTimeout";
/* I modified it to return unit instead of float
   because of some error I got but don't remember right now
   and is only used to fake an async submit until I implement the actual logic */

type status =
  | Idle
  | Touched
  | Submitting
  | Success
  | Error;

type record = {
  email: string,
  message: string,
  consent: bool,
};

module Errors = {
  type error = {
    mutable email: string,
    mutable message: string,
    mutable consent: string,
  };
};

type state = {
  status,
  errors: Errors.error,
  values: record,
};

let initialValue = {
  status: Idle,
  errors: {
    email: "",
    message: "",
    consent: "",
  },
  values: {
    email: "",
    message: "",
    consent: false,
  },
};

type action =
  | Touched(record)
  | Submitting
  | Success
  | Error(Errors.error);

let reducer = (state, action) => {
  switch (action) {
  | Touched(values) => {...state, status: Touched, values}
  | Submitting => {...state, status: Submitting, errors: initialValue.errors}
  | Error(errors) => {...state, status: Error, errors}
  | Success => {...initialValue, status: Success}
  };
};

[@react.component]
let make = (~children) => {
  let (state, dispatch) = React.useReducer(reducer, initialValue);

  let handleSubmit = event => {
    ReactEvent.Synthetic.preventDefault(event);
    let collectErrors: Errors.error = {email: "", message: "", consent: ""};

    dispatch(Submitting);

    let email = Js.String.trim(state.values.email);
    let message = Js.String.trim(state.values.message);

    if (!isEmail(email)) {
      collectErrors.email = "Please provide your best e-mail address";
    };

    /*
    let msgLength = String.length(message);
    if (msgLength === 0) {
      collectErrors.message = "Please provide a message";
    } else if (msgLength < 20) {
      collectErrors.message = "Please be more specific";
    };
    */

    switch (String.length(message)) {
    | 0 => collectErrors.message = "Please provide a message"
    | (x) when x < 20 => collectErrors.message = "Please be more specific"
    | x => ignore(x)
    };

    if (!state.values.consent) {
      collectErrors.consent = "You have to agree to submit";
    };

    /*
    Not my best work 😂
    showing alternative syntax |> & ->
    I'm using the latter in my "real" code
    it's in this case a little more concise as it formats nicer
    a little bit confusing maybe 🤔, also I don't like this formatting actually 🤷‍♂️
    */
    if (String.length(collectErrors.email) > 0
        || collectErrors.message
        |> String.length > 0
        || collectErrors.consent->String.length > 0) {
      dispatch(Error(collectErrors));
    } else {
      /* Submit logic has yet to come as I'm focusing on UI first */
      setTimeout(() => dispatch(Success), 2000);
    };
  };

  let handleKeyDown = event =>
    if (event->metaKey && (event->key === "Enter" || event->keyCode === 13)) {
      handleSubmit(event);
    };

  let status =
    switch (state.status) {
    | Idle => "idle"
    | Touched => "touched"
    | Submitting => "submitting"
    | Success => "success"
    | Error => "error"
    };

  let props = {
    "status": status,
    "values": state.values,
    "errors": state.errors,
    "setTouched": x => dispatch(Touched(x)),
  };

  <form
    action=""
    method="post"
    key="ContactForm"
    onSubmit=handleSubmit
    onKeyDown=handleKeyDown>
    {children(props)}
  </form>;
};

let default = make;
Enter fullscreen mode Exit fullscreen mode

Most stuff looks more or less okay I guess. Only thing I'm reeaally not sure but didn't manage to find another solution right away is all the collectErrors stuff.
There's maybe, better ways I just don't know yet 🙏🤷‍♂️ Once I do, maybe because of nice feedback (via Twitter) I'll come back to improve it.

Uh and I tried to pass more specific helper functions like setMail down to children but couldn't get the reducer for them working so far.

JS file just for styling purpose 

/** @jsx jsx */
import { jsx } from "theme-ui";
import { InputField } from "components/input-field.js";
import { make as ContactFormLogic } from "components/ContactForm.bs.js";

export const ContactForm = () => (
  <ContactFormLogic>
    {({ status, values, errors, setTouched }) => (
      <fieldset disabled={status === "submitting"} sx={{ border: 0 }}>
        <InputField
          type="email"
          label="E-Mail-Address"
          value={values.email}
          placeholder="mail@example.com"
          onChange={(_, value) => setTouched({ ...values, email: value })}
          errorMessage={errors.email}
          required
        />

        <InputField
          type="textarea"
          label="Message"
          value={values.message}
          placeholder="Say hi 👋"
          onChange={(_, value) => setTouched({ ...values, message: value })}
          errorMessage={errors.message}
          sx={{ marginTop: "1rem" }}
          required
        />

        <InputField
          type="checkbox"
          label="I agree to my e-mail address and message being stored and used to review the request Privacy policy"
          value={values.consent}
          onChange={(_, value) => setTouched({ ...values, consent: value })}
          errorMessage={errors.consent}
          disabled={status === "submitting"}
          sx={{ marginTop: "1rem" }}
          required
        />

        <button
          type="submit"
          disabled={status === "submitting"}
          sx={{ variant: "buttons.primary", marginTop: "1rem" }}
        >
          Submit
        </button>
      </fieldset>
    )}
  </ContactFormLogic>
);
Enter fullscreen mode Exit fullscreen mode

Thoughts on ReasonML

I really enjoy using it, not being able to spread props or multiple times into objects/records is still a little confusing. But that's a trade-off I'm willing to accept.

Actually I'm looking forward to a stable release of elodin by @robinweser probably in conjunction with fela to replace ThemeUI and drop the additional JS file. We'll see..

How I do ReasonML in GatsbyJS

I started with the help of gatsby-plugin-reason only to discover it's pretty outdated and bs-loader is not even recommended anymore.
Took me a while to figure this out though while trying to understand why nothing was working^^

Installing ReasonML & ReasonReact in an existing GatsbyJS project 

yarn install reason-react && yarn install -D bs-plattform
Enter fullscreen mode Exit fullscreen mode

By the way I'm on reason-react@0.7.0 & bs-platform@7.2.2

bsconfig.json

{
  "name": "PROJECT_NAME",
  "reason": { "react-jsx": 3 },
  "bsc-flags": ["-bs-super-errors"],
  "sources": [
    {
      "dir": "src",
      "subdirs": true
    }
  ],
  "package-specs": [
    {
      "module": "es6",
      "in-source": true
    }
  ],
  "suffix": ".bs.js",
  "namespace": true,
  "bs-dependencies": ["reason-react"],
  "ppx-flags": [],
  "refmt": 3
}
Enter fullscreen mode Exit fullscreen mode

package.json

{
  "scripts": {
    "re:build": "bsb -make-world -clean-world",
    "re:start": "bsb -make-world -clean-world -w",
    "re:clean": "bsb -clean-world"
  }
}
Enter fullscreen mode Exit fullscreen mode

That's actually it.

Pretty useful links

Official

By Dr. Axel Rauschmayer (@rauschma)

By others

📸 Cover image by Victor Garcia on Unsplash

Top comments (0)

Read next

fabbuilder profile image

React + Vite: The ultimate guide to static application deployment

FAB Builder | Code Generation -

abhay_yt_52a8e72b213be229 profile image

Mastering Paginated API Calls in React for Optimized Data Fetching

Abhay Singh Kathayat -

rawas_aditya profile image

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas -

abhay_yt_52a8e72b213be229 profile image

Unlocking the Power of Web Components and Custom Elements for Reusable UI Design

Abhay Singh Kathayat -