{"size": 2459, "ext": "js", "max_stars_repo_path": "_RESOURCES/react_sandbox/24 - Lifecycle Methods/context.js", "max_stars_repo_name": "magnusmel/React-Front-to-Back", "max_stars_repo_stars_event_min_datetime": "2019-04-01T03:19:29.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-14T23:26:59.000Z", "max_issues_repo_path": "_RESOURCES/react_sandbox/24 - Lifecycle Methods/context.js", "max_issues_repo_name": "magnusmel/React-Front-to-Back", "max_issues_repo_issues_event_min_datetime": "2021-07-20T01:25:18.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T22:39:00.000Z", "max_forks_repo_path": "_RESOURCES/react_sandbox/24 - Lifecycle Methods/context.js", "max_forks_repo_name": "magnusmel/React-Front-to-Back", "max_forks_repo_forks_event_min_datetime": "2019-02-22T03:34:30.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-27T10:34:27.000Z"}
{"max_stars_count": 21, "max_issues_count": 4, "max_forks_count": 28, "avg_line_length": 22.1531531532, "max_line_length": 84, "alphanum_fraction": 0.5786905246}
import React, { Component } from 'react';

const Context = React.createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case 'DELETE_CONTACT':
      return {
        ...state,
        contacts: state.contacts.filter(
          contact => contact.id !== action.payload
        )
      };
    case 'ADD_CONTACT':
      return {
        ...state,
        contacts: [action.payload, ...state.contacts]
      };
    default:
      return state;
  }
};

export class Provider extends Component {
  state = {
    contacts: [
      {
        id: 1,
        name: 'John Doe',
        email: 'john@gmail.com',
        phone: '555-555-5555'
      },
      {
        id: 2,
        name: 'Karen Williams',
        email: 'karen@gmail.com',
        phone: '444-444-4444'
      },
      {
        id: 3,
        name: 'Henry Johnson',
        email: 'henry@gmail.com',
        phone: '333-333-333'
      }
    ],
    dispatch: action => {
      this.setState(state => reducer(state, action));
    }
  };

  // Should be used when state is updated due to a change in props
  // Fired when component is rendered and updated - must return state values or null
  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');

    return null;
    // return {
    //   contacts: [
    //     {
    //       id: 1,
    //       name: 'John Doe',
    //       email: 'jdoe@gmail.com',
    //       phone: '444-444-4444'
    //     }
    //   ]
    // };
  }

  // Fires before mutations are made (eg. before the dom is updated)
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');

    return null;
  }

  // Called when component mounts - Use for async requests
  componentDidMount() {
    console.log('componentDidMount');
  }

  // Calls when component is rendered and updated
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  // Will be removed from React 17
  componentWillMount() {
    console.log('componentWillMount');
  }

  // Will be removed from React 17
  componentWillUpdate() {
    console.log('componentWillUpdate');
  }

  // Will be removed from React 17
  componentWillReceiveProps(nextState, nextProps) {
    console.log('componentWillRecieveProps');
  }

  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export const Consumer = Context.Consumer;
