rosschapman

// This is an example of one of our inputs.
// This data sructure represents the org structure of a company.
// At the top level here we have an _array_ of employees with various properties.

// 1. Required keys need to exist
// 2. Values need to match the specified type
// 3. Extraneous keys are invalid and should error
// 4. Return when you encounter the very first error
export function validate(data, schema) {
  try {

rosschapman

// Assumes a valid url
export function extractHostAndTLD(url) {
  const reDot = /\./g;
  const reAfterDot = /\.(.*)$/;
  const boxedUrl = new URL(url);
  const host = boxedUrl.host;

  if (host.match(reDot).length > 1) {
    // Ignore the inclusive match and only extract the captured group
    const [_, afterDot] = host.match(reAfterDot);

rosschapman

Retool Challenge
  IDLE
    try -> EDITING
  EDITING
    untry -> IDLE
    execute -> WAITING
  WAITING
    data -> HAS_DATA_EDITING
  HAS_DATA_EDITING
    untry -> HAS_DATA

rosschapman

if (books.ids.length > 0) {
  this.stateMachine(this.statuses.waiting as Status);
  let suggestedBooks = await this.apiAdapater.books.suggest();
  this.stateMachine(this.statuses.success as Status);
  this.model.updateAll("suggestedBooks", suggestedBooks);
}

rosschapman

<AppConductor>
  {({ submitForm, getModel }) => (...)}
</AppConductor>

rosschapman

private processEntityCreate = async (payload: any) => {
  // Update component status (sync)
  this.statusMachine(this.statuses.waiting);
  // Post request (async)
  await this.apiAdapater.MY_ENTITY.post(action.payload);
  // Update component status (sync)
  this.statusMachine(this.statuses.success);
};

private actionDispatch = async (action: Action) => {

rosschapman

type UserAction = "SUBMIT_FORM";
type UserActions = {
  [key: string]: UserAction;
};

class AppConductor extends React.Component<Props, State> {
  readonly userActions: UserActions = {
    submitForm: "SUBMIT_FORM"
  };
  //...

rosschapman

processBookCreate = async (payload) => {
  // Update component status (sync)
  this.statusMachine(this.statuses.waiting);
  // Post request (async)
  await this.apiAdapater.books.post(action.payload);
  // Update component status (sync)
  this.statusMachine(this.statuses.success);
};

statusMachine = (nextStatus: Status) => {

rosschapman

class AppConductor extends React.Component {
  userActions = {
    submitForm: "SUBMIT_FORM"
  };
  
  actionRouter = async (action) => {
    switch (action.type) {
      case "SUBMIT_FORM":
        // wondering where all those calls are gonna go?? 😎
      default:

rosschapman

<AppConductor>
  {({ submitForm }) => {
    return (
      <>
        <Form handleOnSubmit={submitForm} />
      <>
    );
  }}
</AppConductor>