Create component - Students List (Reusable) && Student List Item

[Haroogle]

Create a {StudentList} component to display rendered students list items depending on selected cohort (Map an array of students checking cohort id to render only people from the same cohort )

• State for students and setStudents should be set to an empty array originally and be updated every time with client

Import client from './utils/client'. set response to client.get('/users') and render

Example of data received as responce to the fetch request for 1 user

{
    "id":2,
    "cohortId":1,
    "role":"STUDENT",
    "firstName":"name1",
    "lastName":"surname1",
    "email":"test1@test.com",
    "biography":"Here i am, coding like a hurricane",
    "githubUrl":null,
    "profileUrl":"https://images.unsplash.com/photo-1573865526739-10659fec78a5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80"
}

• State should only include filtered users who are not teachers. it will be passes as Props to {StudentsList} from {Cohort}

Create student list item component {StudentItem}

• Contains student profile pic(see img attached) and name

• Create a Link to student profile when clicked on {Studentitem} to /users/id

• Conditional render for more button(dependent on user having "teacher" role)

• Create CSS file to organise layout of {StudentsList} {StudentItem} as a grid. and so some styling. HTML will be produced by react.

  • Add add student button. It will call the {AddStudentToCohortPopUp} component. see issue 120

[dogezen]

• What are the names of the components you will create?

• What PROPS do these components need?

• What state will they store?

• How will they obtain the data for the list of students? do you need a fetch for that data? if so, where will that be?

• What HTML / CSS will you use for this? Is it going to be a

  or a
  with a grid to implement the student list?

  Create student list item: I'd need a wireframe of some sort to know a) where to place the img and name? how the link might look like? and what mroe buttons to render. Also, what is the URL I need to go to when I click the user's profile link?

  With the create add student button, you mention "Add a student to the currently selected cohort": how will you do this? Or is this just to explain what this button will be used for in the future?

[dogezen]

1) make sure it's clear that you will have to filter the list of /users fetched from the API to only keep those that are NOT teachers and those that are NOT part of the cohort?

2) the feature about the adding a student to a cohort, I would imagine for that to work that I need to know a) who the student is and b) what cohort to add them to (maybe via 2 dropdowns?); Maybe this could be split out in a separate issue that you work on after this one is completed.

Finally, I am assuming the wireframes for cohorts above are just the same, but for the student list right?

[Auenc]

I think the only thing missing now is that you're missing examples of the data that the API will return. This will help whenever it comes to doing the work as you will know exactly what properties you need to use in the data to filter the users.

[Auenc]

I think it would be best if you format the snippet so it's a little more readable, but that's not a blocking thing. I think this is good to go!