becca-bailey

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

becca-bailey

type AAndB = {
  a: string;
  b: string;
};

type Neither = {
  someOtherProp: string;
};

type Props = AAndB | Neither;

becca-bailey

var todos = []

function addTodo(task) {
    todos.push({
        task: task,
        completed: false,
    });
}

addTodo("Feed my cat");

becca-bailey

it("can add an alert", () => {
  const TestComponent = () => {
    return (
      <AlertProvider>
        <Layout>
          <ComponentWithAlert />
        </Layout>
      </AlertProvider>
    );
  };

becca-bailey

class Layout extends React.Component {
  render() {
    return (
      <AlertContext.Consumerr>
        {({ alert }) => (
          <React.Fragment>
            {alert && <FancyAlertMessage alert={alert} />
            {this.props.children}
          </React.Fragment>
        )}

becca-bailey

const AlertContext = React.createContext<IAlertContext>({
  alert: undefined,
  showAlert: (alert) => {},
});
// Here we are creating a context with default values

class AlertProvider extends React.Component {
  state = {
    alert: undefined
  };

becca-bailey

<AlertProvider> // This context provides a way to display alerts and access alerts
  <Layout> // This layout container can access the alert to display in the header
    <Router>
      <Route exact path="/" component={Home} /> // This route can create an alert to show in the layout
    </Router>
  </Layout>
</AlertProvider>

becca-bailey

<AlertProvider> // This context provides a way to display alerts and access alerts
  <Layout> // This layout container can access the alert to display in the header
    <Router>
      <Route exact path="/" component={Home} /> // This route can create an alert to show in the layout
    </Router>
  </Layout>
</Router>

becca-bailey

class SimpleComponentWithAlert extends React.Component {
  render() {
    const myAlert = { message: "This is my alert", type: "error" };
    return (
      <AlertManager>
        {({ alert, showAlert }) => (
          <div>
            {alert && <FancyAlertMessage alert={alert} />}
            <button onClick={() => showAlert(myAlert)}>Show Alert</button>
          </div>

becca-bailey

class AlertManager extends React.Component {
  state = {
    alert: undefined
  };

  render() {
    const { alert } = this.state;
    const { children } = this.props;
    return children({ alert, showAlert: this.showAlert });
  }