Create cohorts page for teachers

[Haroogle]

Create basic layout for page

-Link should be /cohorts see issue 99 -Store state for students and cohorts here. Get this data using client.js . Use client.get('/users') and client.get('/cohorts') No longer need to store state for components JSX should look something like below (use Grid-layout) Note: Sidebar navigation may be future design, for now, navigation will exist in the main Header(Grey and purple sections go into orange section)

see 112 113 111

[dogezen]

@Haroogle

This needs more details since if I were to take this issue as the work I am to do, I wouldn't know:

a) how/where to add the link to the /cohorsts? do you mean to create a Route for this and for this Rotue to be added to the App.js? Is this route going to be protected by authentication, if so, how do I ensure it is? b) the component you just describe, the Cohort Page: where should the code for this live? what folder in my repository and what should the component name be called? Do I need to pass any props to it? if so, what props? c) the HEADER: is this a separate HEADER to the existing HEADER in the src/components folder? d) unclear what you mean by placeholder and how this should look like? Do you want just a box, or a

tag, or a grid-layout with everyhting laid out already? e) "each own css page"? does this mean I need to create multiple components? if so, which ones?

[dogezen]

Gray and Purple sections can go into the Organge Header section: the app already has a HEADER so it makes sense to just add those links/buttons in the HEADER section (ignoring the wireframe design).

Don't place the state for hte cohorts, students, etc in the App.js, that's too far up in the component tree. If I visit a profile page or login page, I would not expect the state for cohorts, students to be loaded / available, so app.js is not the right place to fetch this data from, also because you can only fetch it if I am logged in.

Store the state in the /cohorts CohortsPage and fetch it from API when this page loads.

[Auenc]

So we won't be using fetch to get our data as we have the utils/client.js file that will do the fetching for us (it will handing getting the auth token and putting it on each request).

Additionally, we don't want to use http://localhost:4000 explicitly. This is something else that the client.js does for us. It will load the API URL from environment variables. This means that when you make requests locally, it'll point to localhost:4000 but when the app is deployed, it will point to the production server.

If you can update your issue to reflect that (just so when someone comes to do the work, they know not to use fetch, and that they don't need to specify the URL (other than stuff like /users etc)

[Auenc]

Looks good to me!