Create Class Flow for Teachers

[h0ethan04]

Description

Flow time!! We're matching mid-fi this sprint, so the arrangement of your data matters now.
This task focuses on implementing and matching mid-fi for the teacher's view class creation flow.

READ ALL INSTRUCTIONS BEFORE STARTING

• Note:
  • When working on the frontend, we want to work from making sure the site is responsive starting from a mobile device (this will make it easier when we modifying the styling for bigger screens)
  • When checking how the frontend looks on a mobile device through chrome's inspect element, be sure to select iPhone SE for test!!!
• Heads up:
  • Feel free to utilize client/src/components/playground/Playground.jsx to test out anything before putting it in their respective pages, or if there currently is no respective page
  • When prompted to log in, you can sign in with the account:
  • email: [email protected]
  • password: 123456

Instructions

This task will focus on the class creation flow. Take a look at the Lo-Fi to Hi-Fi figma (and request access
if you don't already have it). Your task will be as follows:

• There does not currently exist a "create a new class" button or a "drafts" header inside the client/src/components/Bookings/Bookings.jsx: change the existing VStack to conditionally display "History" (if student account) and "Drafts" (if teacher account). Additionally, add a "create new class" button that is only rendered if the user is a teacher account.
• The "drafts" button should have its own onClick handler. Implement both the drafts handler and the other three handlers, changing them from console.logs to fetching data from the backend routes.
• Add an onClick to the class creation button, which opens a modal containing the class creation form.
• On submission of the class creation form (with input and all fields validated) it should open a confirmation modal on top of the form
• on confirmation it should proceed back to the bookings page
• on cancellation from the confirmation modal return to form
• save form as draft should insert the class into the database as a draft (you might need to make a new backend endpoint for this)
• save form as new class should insert the class into the database as a class and show the confirmation page
• if not done already, match the create class form to mid-fi

Notes

If you have any questions regarding design, reach out to Claire from the design team before reaching out to TLs.

Acceptance Criteria

• matches mid-fi design
• option to create class should only appear on teacher accounts
• there is an onClick to the class creation button, which opens a modal containing the class creation form.
• on submission of the class creation form (with input and all fields validated) it should open a confirmation modal on top of the form
• on confirmation it should proceed back to the bookings page
• on cancellation from the confirmation modal return to form
• save form as draft should insert the class into the database as a draft (you might need to make a new backend endpoint for this)
• save form as new class should insert the class into the database as a class and show the confirmation page

Resources

• midfi
• chakra docs

[Priyansh4444]

According to the midf design the classes have a date and the number of people which RSVP'd for that class, for now I don't think our schema has all that information, (side note: events do have this information), so is it fine if i just keep it as placeholder data for now?

[stevem-zhou]

According to the midf design the classes have a date and the number of people which RSVP'd for that class, for now I don't think our schema has all that information, (side note: events do have this information), so is it fine if i just keep it as placeholder data for now?

yea keeping a placeholder is fine for now, we can always add this in later as well.
as long as the flow is working, that's what matters