Expose 'audience' to entire app using React Context

[DomVinyard]

Multiple parts of our application needs to know when the audience level (5/10/Adult) changes. The TopicCard and RelationCards need to know which content to render, the header needs to know which level to display. It's likely in the future other parts of the application will need to know this too.

One option would be to move the logic into App.js and then pass it down as props to every component, but instead we are going to set the audience level using the React Context API so it is available throughout the application.

This is a good intro to the React Context API: https://www.youtube.com/watch?v=t9WmZFnE6Hg

• Note to assignees, please tag everybody to review this PR and ask all reviewers to watch the video above (or some other material) to understand this PR before approving

Acceptance Criteria

• Create a new context called AudienceContext
• AudienceContext should have one piece of state called [audience, setAudience]
• AudienceContext should expose both the setter (setAudience) and the getter (audience)
• Header should be updated to read and write its values to AudienceContext
• TopicPage should be updated to read its value from AudienceContext
• When Audience changes, localstorage should be updated from inside AudienceContext

Example

We should be able to access the data from any part of the application:

import React, { useContext } from 'react';
import AudienceContext from './AudienceContext';

function MyComponent() {
  const { audience } = useContext(AudienceContext);

  return (
    <div>
      <p>The audience is currently set to {audience}</p>
    </div>
  );
}

[MariamM110]

A more updated and useful article to read
https://beta.reactjs.org/reference/react/useContext