Team Create Form

SketchSystems.spec

Team Create Form
  Inactive 
    focus -> Active 

  Active 
    reset -> Inactive

    Empty
      type -> Completed
      blur -> Inactive 
 
    Completed
      submit -> Submitted

    Submitted

SketchSystems_helper.js

window.GeorgeHelper = {
  getHeaderElements: () => {
  
    const style = `
wired-card, wired-input {
  padding: 10px;
  font-family: inherit;
}
#wrapper {
  font-family: 'Gloria Hallelujah', sans-serif;
}
`;
  return [React.createElement("style", {
    dangerouslySetInnerHTML: {
      __html: style
    }
  }), React.createElement("link", {
    href: "https://fonts.googleapis.com/css?family=Gloria+Hallelujah",
    rel: "stylesheet"
  })];

  
  
},
};

SketchSystems_prototype.js

const loadScript = url => {
  return new Promise(res => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = res;
    document.head.appendChild(script);
  });
};

const scripts = [
  'https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.min.js',
  'https://rawgit.com/georgecrawford/5e12ae27b8b604aefa72313d5c716af5/raw/SketchSystems_helper.js'
];

const loadScripts = cb => {
  window.SCRIPT_LOAD_STATUS = 'loading';
  return Promise.all(scripts.map(loadScript)).then(() => {
    window.SCRIPT_LOAD_STATUS = 'loaded';
  });
};

const render = model => {
  console.warn(model.active_states[0].name);

  if (!window.SCRIPT_LOAD_STATUS) {
    loadScripts().then(() => model.emit('reset'));
    return;
  } else if (window.SCRIPT_LOAD_STATUS !== 'loaded') {
    return;
  }

  if (!window.GeorgeHelper) {
    alert('window.GeorgeHelper not loaded!');
    return;
  }

  const current_state_name = model.active_states[0].name;

  const children = window.GeorgeHelper.getHeaderElements();

  const events = {
    focus: 'onFocus',
    blur: 'onBlur',
    type: 'onKeyUp',
    submit: 'onClick',
    reset: 'onClick'
  };

  const getEvents = types => {
    return types.reduce((acc, type) => {
      return Object.assign(acc, {
        [events[type]]: () => model.emit(type)
      });
    }, {});
  };

  switch (current_state_name) {
    case 'Inactive':
      children.push(createPrompt());
      children.push(createInput(getEvents(['focus', 'blur', 'type'])));
      break;
    case 'Empty':
      children.push(createPrompt());
      children.push(
        createInput(
          Object.assign(getEvents(['focus', 'blur', 'type']), {
            focussed: true
          })
        )
      );
      break;
    case 'Completed':
      children.push(createPrompt());
      children.push(
        createInput(
          Object.assign(getEvents(['focus', 'blur', 'type']), {
            focussed: true,
            value: "George's team!"
          })
        )
      );
      children.push(createSubmit(getEvents(['submit'])));
      children.push(createCancel(getEvents(['reset'])));
      break;
    case 'Submitted':
      children.push(createSuccess({team: "George's team!"}));
      children.push(createLink(getEvents(['reset'])));
      break;
  }

  return (
    <wired-card id="wrapper" elevation={3}>
      {children}
    </wired-card>
  );
};

const createPrompt = () => {
  return <div>Create a team</div>;
};

const createSuccess = ({team}) => {
  return (
    <div>
      Thanks! You created the <span style={{fontWeight: 'bold'}}>{team}</span>{' '}
      team
    </div>
  );
};

const createInput = ({onFocus, onBlur, onKeyUp, focussed, value = ''}) => {
  const style = {backgroundColor: focussed && 'pink'};
  return (
    <wired-input
      elevation={3}
      onFocus={onFocus}
      onBlur={onBlur}
      onKeyUp={onKeyUp}
      style={style}
      value={value}
      placeholder={'my team name'}
    >
      create
    </wired-input>
  );
};

const createSubmit = ({onClick}) => {
  return (
    <wired-button elevation={3} onClick={onClick}>
      create
    </wired-button>
  );
};

const createCancel = ({onClick}) => {
  return <wired-button onClick={onClick}>cancel</wired-button>;
};

const createLink = ({onClick}) => {
  return <a onClick={onClick}>Create another team</a>;
};