mattpocock

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

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

mattpocock

Auto Generating forms (or an entire admin application?) based on JSON API models

I've been thinking more and more about how we can automate the generation of FE code based on knowledge of the BE model. I feel strongly that if the BE changes, the FE should be able to automatically react.

This should definitely be true when inputting data to mutations.

// AssetInputForm.jsx

// auto-generated JSON from API schema

mattpocock

const file = require('file');
const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
const getSchema = require('./getSchema');
const generateMocks = require('./generateMocks');

const typesDir = path.resolve('../JlrLmsUI/app/utils/fixtures/api');
if (fs.existsSync(typesDir)) {
  execSync(`rm -rf ${typesDir}`);

mattpocock

const file = require('file');
const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
const getSchema = require('./getSchema');
const generateMocks = require('./generateMocks');

const typesDir = path.resolve('../JlrLmsUI/app/types/api');

execSync(`rm -rf ${typesDir}`);

mattpocock

/** Account manager becomes a wrapped instance of the api which you can perform actions on */
const accountManager = useResource('AccountManagerResource');

/** 'fetch' calls will first check the cache, then return it to the data prop */
accountManager.fetch({ ...params });
accountManager.fetchAll({ ...params });

/** refetch calls will override the cache */
accountManager.refetch({ ...params });
accountManager.refetchAll({ ...params });

mattpocock

Switching Props based on clients

Getting rid of region tags is a tough problem. It's not tough technically - it can be done in lots of different ways. But working out the best way is tough.

The options

clientSwitchValue

const someValue = clientSwitchValue({

mattpocock

import 'storybook-addon-styled-component-theme/dist/src/register';

mattpocock

rm -rf packages/ae
cp -r ../one-app-mono/packages/all3 packages/ae
cd packages/ae
git checkout ae/staging
rm -rf .git
cd ../../
echo "Successfully replaced ae"

rm -rf packages/all3
cp -r ../one-app-mono/packages/all3 packages/all3

mattpocock

import React, { useState } from 'react';
import {
  getStorybookUI,
  configure,
  addDecorator,
} from '@storybook/react-native';
import ThemeProvider from '../theme/ThemeProvider';
import './stories/Split.stories.tsx';
import { themesAsObject } from '../test-utils/testAllThemes';
import { View } from 'react-native';

mattpocock

import { makeReducer, makeActionCreators } from './makeReducer';

const createReducer = <
  State,
  Actions extends { [K in keyof Actions]: (payload?: any) => void }
>({
  initialState,
  actions,
}: Params<State, Actions>): CreateReducerReturnedObject<State, Actions> => {
  const reducer = makeReducer({