Organize the app state (front-end) using Context API

[mar-bi]

Additional resources:
#246 (comment)

[spences10]

Hi, what states are there that need to be managed?

[mar-bi]

For now we have the state of components stored in the container components.
Like this:

There are almost 2 different purposes for data stored there:

1. presentational (to show or not some UI),
2. for handling app data (user search queries, data from API).

[spences10]

Ok, so can we break it into two different contexts?

In layouts?

Just bear in mind that in Gatsby v2 layouts is being removed, I can't remember the structure now as I'm currently in react-static land 🙃

Anyway I think the general idea is that you split your contexts by grouping them so:

import React from 'react'
// Context is made up of two things
// Provider - Single as close to top level as possible
// Consumer - Multiple have multiple consumers
export const PresentationalContext = React.createContext()

export class PresentationalProvider extends React.Component {
  state = {
    item1: 1,
    item2: 2
  }

  // add function here
  functionHere = () => {
    this.setState({
      item1: 2,
      item2: 3
    })
  }
  render() {
    return (
      <PresentationalContext.Provider
        value={{
          ...this.state,
          functionHere: this.functionHere
        }}
      >
        {this.props.children}
      </PresentationalContext.Provider>
    )
  }
}

and the same for the app data, then when you need the data you wrap the consumer around the main component of where you want to use the data.