becca-bailey

POST /externalaccount/create

{
  "customerId": 298991,
  "routingNumber": 123456789,
  "accountNumber": 123456789,
  "firstName": "John",
  "lastName": "Smith",
  "type": "Checking"
}

becca-bailey

{
    "data": {
        "accountNumberMasked": "*************6789",
        "customerId": 298991,
        "customField1": "",
        "customField2": "",
        "customField3": "",
        "customField4": "",
        "customField5": "",
        "externalAccountId": 299101,

becca-bailey

Apprenticeship Reading List

CSS / Animation

• Designing Interface Animation by Val Head (Rosenfeld)
• Animation at Work by Rachel Nabors (A Book Apart Briefs)

Accessibility

• Accessibility for Everyone by Laura Kalbag (A Book Apart)
• A Web for Everyone: Designing Accessible User Experiences by Sarah Horton & Whitney Quesenbery (Rosenfeld)

becca-bailey

Redux Patterns

State

Typically, each component has a state.

class ListItem extends Component {
  constructor() {
    this.state = {

becca-bailey

Styleguides to JavaScript

Popular Styleguides

• Pattern Lab
• Fractal

What is a styleguide?

• Source of truth for CSS + HTML components

becca-bailey

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

  render() {
    return (
      <SimpleComponentWithAlert renderAlert={this.renderAlert} showAlert={this.showAlert} />
    )
  }

becca-bailey

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

  render() {
    const { alert } = this.state;
    const myAlert = {
      message: "This is my alert",
      type: "error"

becca-bailey

it("shows an alert", () => {
  const wrapper = mount(<SimpleComponentWithAlert />);

  wrapper.find('button').simulate('click');

  expect(wrapper.text()).toContain("This is my alert"));
});

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 });
  }

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>