brookslybrand

// styled component version
const Container = styled.div`
  /*all of the styles*/
`
function MyComponent() {
  return <Container>{/*other stuff*/}</Container>
}


// css prop version

brookslybrand

const INITIAL_CONDITIONS_FAILED = 'INITIAL_CONDITIONS_FAILED'
const INITIAL_CONDITIONS_MET = 'INITIAL_CONDITIONS_MET'
const CHECK_IF_SCHEDULE_IS_VALID = 'CHECK_IF_SCHEDULE_IS_VALID'
const UPDATE_SCHEDULE_ID = 'UPDATE_SCHEDULE_ID'

// visualization of the state machine: https://xstate.js.org/viz/?gist=c33367d493886a6f93e149c530ce8cb1
const startOptimizationMachine = Machine(
  {
    id: 'startOptimizationMachine',
    initial: 'disabled',

brookslybrand

const autoSaveMachine = Machine(
  {
    id: 'autoSaveMachine',
    initial: 'saved',
    states: {
      saved: {
        on: {
          HAS_UNSAVED_DATA: 'waitingToSave'

brookslybrand

const initialContext = {
  displayName: '',
  email: ''
}
const userMachine = Machine(
  {
    id: 'user',
    initial: 'unchecked',
    context: initialContext,

brookslybrand

// this machine expects an authenticate service to be passed in
// and handles where a user is in the authentication process.
// `logedIn` is marked as final state because once logged in
// the auth-context will be updated by firebase and so the user
// will automatically be navigated away from this component
const authenticationMachine = Machine(
  {
    id: 'authentication',
    initial: 'loggedOut',
    context: {

brookslybrand

// taken from https://www.w3resource.com/javascript/form/email-validation.php
const emailReg = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
// taken from https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a
const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;

function mockAuthenticate(email, password, ms = 1500) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) resolve(email);

brookslybrand

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

brookslybrand

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

brookslybrand

brookslybrand

const incrementTime = assign({
  time: (context, e) => context.time + 1
});

// Guard to check if the max count was reached
function maxCountReached(context, event) {
  return context.time >= 3;
}

const timerMachine = Machine(