Create components - Cohorts List / Cohort List Item

[lucianosimoni]

Requirements for component - Cohorts List

• Have a Add Cohort Button
• • Updates a local state [renderCohortPopup, setRenderCohortPopup] to true
• Conditional rendering of component Cohort Add Popup #115
• • {renderCohort ? <AddCohortPopup passProp:{ setRenderCohortPopup }> : null}
• • CohortsList must give AddCohortPopup the prop of the local State setRenderCohortPopup
• Map though the Cohorts returned from Database and render the component {CohortListItem} with its necessary prop cohort (is the iterated value out of the map)
• End Point for GET list of Cohorts: /cohorts using import client from './utils/client'
• CSS layout could use flex flex-direction: columns. Optional.

Requirements for component - {CohortListItem}

• All of this is a prop passed by the {CohortsList} component (cohort)
• Have a Picture of the Cohort (using the DiceBear initials)
• Cohort Name (cohort.name)
• Cohort ID (cohort.id)

[dogezen]

• "Calls a form Component" what does this mean? Ie. when I click the add button, do you mean that a form appears with conditional rendering? What state will I need to achieve this?
• These two components, how will they be named? WHat props do they need? Where will the files be? How and where will they be instantiated?
• Need more details of how you will fetch the list of cohorts: a) when, where and how the fetch will be done b) what URL will you send the HTTP request to? c) how will you store the response?

Do you really need a more button? How will it be used? This is unclear.

Map though the Cohorts inside Database and return Cohort List Item - this is not accurate because I will be mapping from local state after a fetch, presumably? or after data has been passed to this component via props...

With regards to the cohort list item: I am unsure if the cohort API on the server has a picture for the cohort. Don;t think we do, you mihgt want to replace that with the cohort initials?

[dogezen]

Please provide also some details about the layout: are you going to use CSS grids?

[Auenc]

with its necessary props

Can you add what an example of that these props are?

If these are the props, perhaps it can be a little more clear (they might not be, I am unsure)

Have a Picture of the Cohort Cohort Name Cohort ID

Map though the Cohorts inside Database and return the component {CohortListItem} with its necessary props

As @dogezen mentioned. This will be happening on the client side, so we won't be mapping through the database.

If you can make these two points more clear, I think this will be ready to do!

[Auenc]

Looks good to me!