Snippets

array mutations

Array mutations returning a new array

Adding item to an array (list, item)
return [...list, item];

Remove item from index (list, index)
return list
.slice(0,index).concat(list.slice(index+1));

return [...list.slice(0, index),
...list.slice(index+1)];

Incrementing array (list, index)
return [...list.slice(0, index),list[index]+1, ...list.slice(index+1)];

async_fetch

class Country extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loading: true, error: null, country: null};
    }
    
    componentDidMount() {
        this.props.promise.then(
            value => this.setState({loading: false, country: value}),
            error => this.setState({loading: false, error: error}));
    }
    
    render() {
        if (this.state.loading) {
            return <span>Loading...</span>;
        }
        else if (this.state.error !== null) {
            return <span>Error: {this.state.error.message}</span>;
        }
        else {
            var iso = this.state.country.iso;
            var name = this.state.country.name;
            
            return (
                <span className="country">
                    <span className={"flag-icon flag-icon-"+iso}/>
                    <span className="country-name">{name}</span>
                </span>
            );
        }
    }
}

babel

// same as setting in babel plugins
<script
  type="text/babel"
  data-plugins="transform-class-properties"
  src="./js/app.js"
></script>

object mutations

Object mutations

Toggle todo, (todo)
return Object.assign({}, ...todo, completed: !todo.completed};
If objects have same properties, the rightmost will override the previous source. The first args is returned with merged sources.

react

// component did update() alternative for es6
class EmbedModal extends React.Component {
  constructor(props) {
    super(props);
    // Operations usually carried out in componentWillMount go here
  }
}

//class property initializers for es7
class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}


//dynamically setting setState using template strings
class Form extends React.Component {
  onChange(inputName, e) {
    this.setState({
      [`${inputName}Value`]: e.target.value,
    });
  }
}

redux_principles

1. Redux is a state tree for the application.
2. State is read-only. Any change you make fires an action (javascript object) {type: ACTION_NAME, ...action}.
3. Pure fuctions with no side effects meaning they don't fetch anything, the value that is returned is always the same given the same input. Mindful of pure functions.
4. Reducer function: state mutation functions are pure functions: (state, action) => state

How to view and change what's in store?
Redux Store methods
store.getState();
store.dispatch({type: 'SOME_ACTION', action});
store.getState();
Cb that will be called once an action has been dispatched. Doesn't fire the first time so the intial call won't be logged.
store.subscribe(() => {
  document.body.innerText = store.getStore();
});

utils

//Building a range using JS
//Array(5) will build an array with undefined slots but can't be iterated on using array funcs.
`Array.from({length: 5}, (v, i) => i);`
or
`[...Array(5).keys()]`
or
`Array.apply(null, Array(5))
or
`Array.from(Array(5)).map((v,i) => i)`