mattpocock

import optionalChain from 'utils/helperFunctions/optionalChain';

const recursivelyCreateThemeFunctions = (
  themeObject: ThemeObject,
  steps: (string | number)[] = [],
): ThemeFunction | ThemeObjectReturn => {
  if (Array.isArray(themeObject)) {
    // @ts-ignore
    return themeObject.map((value, index) =>
      recursivelyCreateThemeFunctions(value, [...steps, index]),

mattpocock

const { execSync } = require('child_process');
const path = require('path');

const pathToInspect = path.resolve(__dirname, '../../../app');
const acceptedNumberOfErrors = 0;

console.log(`Running jsinspect with accepted number of errors: ${acceptedNumberOfErrors}`)

try {
  execSync(`jsinspect ${pathToInspect} -r json`);

mattpocock

// React
import React from 'react'
import { Localisation } from 'javascript/config/features'

// Stores
import PagesStore from 'javascript/stores/pages'

// Actions
import PagesActions from 'javascript/actions/pages'

mattpocock

// React
import ListModal from 'javascript/components/list-modal';
import Modal from 'javascript/components/modal';
// Components
import PageLoader from 'javascript/components/page-loader';
import { Localisation } from 'javascript/config/features';
import modelData from 'javascript/models';
import compose from 'javascript/utils/compose';
import blocks from 'javascript/views/blocks';
import React from 'react';

mattpocock

Benefits

Default case

This makes the default case a lot terser. It removes a ton of boilerplate code you have to write. Crucially, it means when we take on a new client we won't have to update every default case out there, it'll do it automatically.

JS works again

Several very useful tools rely on javascript being legal in order to work: ESLint and Prettier among them. This is legal javascript, so these tools can work again.

mattpocock

import { useEffect, useState } from 'react'

const useWatchForTruthy = (value, callback) => {
  const [prevValue, setPrevValue] = useState(null)
  const [isFirstRun, setIsFirstRun] = useState(true)
  useEffect(() => {
    if (!isFirstRun && !prevValue && value) {
      callback()
    }
    setPrevValue(value)

mattpocock

import JsonApi from 'devour-client'
import apiConfig from 'javascript/config'

import modelData from 'javascript/models'

const api = new JsonApi(apiConfig)
api.headers = Object.assign(apiConfig.headers, api.headers)
api.insertMiddlewareBefore('axios-request', {
  name: 'set-auth-token',
  req: payload => {

mattpocock

import React from 'react'

const withLogic = useLogic => Component => props => {
  const propsToPass = useLogic(props) || {}
  return <Component {...props} {...propsToPass} />
}

export default withLogic

mattpocock

extends

We should err on the side of caution with 'extends'. It makes the codebase awful to read for a newbie, and goes against lots of React's functional paradigms. The classes feel quite polluted, especially since you're not sure which methods are native to the class or its parent. OOP is definitely not OP.

withQuery

We should gut the services, actions and stores file. They just aren't necessary, and they look slow and cumbersome to use. For some reason, every single API call is in a flux store, meaning the amount of boilerplate required is killer. We can, and should, reduce this to one function - withQuery. We want to migrate Flux to React, but first I think we should get rid of most of our flux stuff.

withLogic

mattpocock

type Params = any
type Payload = any
type Meta = any

declare namespace Api {
  function find(
    modelName: string,
    id: string | number,
    params?: Params
  ): Promise<any>