hack4impact-calpoly / equestrian-therapy Goto Github PK

Implement the ability to edit timeslot availability for admins in the file: components/popup/timeslotConfirmation.tsx. Keep in mind that admins can edit multiple timeslots at a time.

This may include:

• exploring AWS datastore
• exploring AWS relationships
• making temporary timeslots for now to test, or waiting until assemble popup task is finished

Checklist:

• Update the unavailable dates field for each Timeslots model from the timeslots in TimeslotPopup and send it to the database

Create the frontend for the EnterCode component in the file: enterCode.tsx.

This may include:

• using a form
• using a card
• some form validation
  • all fields must be filled out
• back arrow navigates to /login page

Checklist:

• Make it look like the Figma design
• Implement basic form validation
• Use styled-components for styling
• Make it responsive (mobile size should look like the mobile design)
• Use a prop to pass in the email address and render the correct email in the text

Create the frontend for the AddAvailability component in the file: components/addAvailability.tsx

This may include:

• using a form
• some form validation
  • all fields must be filled out
• use time inputs for the start and end times
• using dropdown menus for job and repeats

Checklist:

• Make it look like the Figma design
• Implement basic form validation
• Use a button for saving and cancelling.
• Use styled-components for styling
• Make it responsive (mobile size should look like the mobile design for the inputs)

Conditionally render either the Calendar component for Desktop devices or the CalendarMobile component for mobile devices. You will need to create the CalendarMobile component in the file /components/calendarMobile.tsx. As of now the CalendarMobile component should only hold the WeeklyViewMobile component, more will be added later.

This may include:

• exploring breakpoints in JS
• referencing articles about querying screen size (such as this one)

Checklist:

• Make it look like the Figma design
• Make the CalendarMobile component and render the WeeklyViewMobile component inside it
• Create a breakpoint of 500px to determine which component is being rendered on our / route
• Use styled-components for any styling

Explore creating pop up windows with react and add the Appointment Information content to the bottom left of the popup. Only worry about the desktop view for this task, on mobile we will not be using a popup

This may include:

• finding a cool horse icon, or using the one from the Figma
• styling the text so it looks nice on both platforms
• using a popup package

Checklist:

• Make it look like the Figma design
• Add the content to a popup
• Find and use a cool horse icon
• Use styled-components for styling

Implement private routing in the file: components/authentication/privateRoute.tsx. In other words, make sure that only users that are logged in can access the main functionality.

This may include:

• Looking at the Amplify docs for fetching the currently authenticated user
• Look up some tutorials on private routing, there are multiple ways to do this

Checklist:

• Redirect users to /login if the user is not logged in
• Redirect users to / if user is logged in
• Wrap all non-authentication routes around the PrivateRoute component
• Test routes while logged in and logged out to make sure they are working as intended

Implement functionality for logging in in the file: login.tsx.

This may include:

• referring to the Amplify docs
• testing using Amplify database
• using React context

Checklist:

• Use Auth from Amplify to sign in account using email and password
• Show error validation if email or password is incorrect
• Navigate to / on login
• Store user somewhere (either in a React context or state)
• Test user sign in

Use Datastore to fetch the timeslots from the database and pass them along where needed in the files: components/calendar.tsx and components/calendarMobile.tsx. You will only need to implement the querying logic in one of the files then can copy it to the other.

This may include:

• Exploring AWS Datastore
• Watching an example, such as this one

Checklist:

• Fetch all of the Timeslots from the database use Datastore in a useEffect on page load
• Copy the logic so that it appears in both mobile and desktop calendar pages. Pass the Timeslots along to the corresponding Timeslots component as a prop
• Update the Timeslots and MobileTimeslots components to accept the timeslots pulled from the database and make sure everything is still working with them after the change.

Make dates that have already past unselectable in the MonthlyView component in the file: components/monthlyView.tsx.

This may include:

• familiarizing yourself with react-calendar

Checklist:

• Get the current date and make dates only selectable if they are equal to or in the future from the current date
• Visually indicate that the date is unselectable
• Keep the styling consistent with how it is currently

Discuss the data structure for the backend with the team and create the models.

• Discuss the data structure with the team
• Make models in Amplify
• Write in the Notion

Update the data models in the Amplify database.

Checklist:

• Install Amplify if you haven't already
• Reference the data models
• Update the data models and deploy in our project

Add functionality for the monthly and weekly views to work together in the files: components/weeklyView.tsx and components/monthlyView.tsx.

This may include:

• Referring to the documentation for React Calendar
• Referring to the documentation for Full Calendar

Checklist:

• Clicking on a day in the monthly calendar navigates to the corresponding week in the weekly calendar
• Navigating to a different month on the weekly calendar navigates to the corresponding month in the monthly calendar

Create the frontend for the Success component in the file: success.tsx. This page should work for confirming the success for creating an account and creating a new password.

This may include:

• using a card
• back to login button navigates to /login page
• using a URL parameter (useParams())

Checklist:

• Make it look like the Figma design
• Use styled-components for styling
• Make it responsive (mobile size should look like the mobile design)
• Use a URL parameter to make the text change based on where it came from (create account or reset password)

Create the frontend for the CreateAccount component in the file: createAccount.tsx

This may include:

• using a form
• using a card
• some form validation
  • email format
  • all fields must be filled out
• already have an account link navigates to /login page

Checklist:

• Make it look like the Figma design
• Implement basic form validation
• Use a button for the form submission
• Use useNavigate to move to the success page in the onSubmit function
• Pass along the current page name createAccount as a url parameter to the success page: /success
• Use styled-components for styling
• Make it responsive (mobile size should look like the mobile design)

Customize the content of the verification email that users receive when confirming their account sign up. You can find this in the Amplify Studio -> Authentication -> 2. Configure sign up -> Verification message settings. The email should at least include the verification code, the name of the nonprofit (PET or Partners in Equestrian Therapy) , and the PET logo.

This may include:

• Looking at verification emails you have received from other services
• Referencing this reddit comment
• Embedding HTML into the email body

Checklist:

• Change the email subject
• Update the email body
• Make sure that the name of the nonprofit, the verification code, and the PET logo are used in the email
• Deploy the changes to our project and run amplify pull before making your pull request (will need the Amplify CLI installed)

Add conditional rendering for the color of a timeslot based on the availability of that timeslot in the file: components/weeklyView.tsx. Desktop Only

This may include:

• referencing the timeslot data model
• creating fake bookings in our database or locally to test

Checklist:

• Make it look like the Figma design
• For each timeslot and each day, check if there is a booking in that timeslots two booking arrays for both volunteers and riders
• If the current user is a rider and a timeslot already has a rider booking on that day, conditionally show the booking as unavailable with the lighter grey/blue color.
• If the current user is an admin and the timeslot is currently disabled, conditionally show the booking as disabled with the lighter grey/blue color.
• Otherwise, maintain the darker blue color
• Make sure you properly index into the timeslot object to access this data, the riderBookings array will contain booking objects with the date field which will need to be checked.
• Use styled-components for styling

Create the frontend for the WeeklyView component in the file: weeklyView.tsx. This component is ONLY the desktop weekly view within the calendar (don't worry about the monthly view or riders/volunteers buttons, or the mobile version). Place this component inside a new Calendar component in the file: calendar.tsx.

This may include:

• using a calendar package (such as react-calendar)
• using a package to help with dates (such as date-fns)

Checklist:

• Make it look like the Figma design
• Use styled components for styling
• Have the calendar show the current week on default
• Buttons should navigate to previous/next week

Make the blue boxes on the desktop weekly view functional in the files: components/weeklyView.tsx and components/timeslotPopup.

This may include:

• Referring to the documentation for Full Calendar
• Temporarily adding the Timeslots component into timeslotPopup, or wait for the "assemble popup" task to finish

Checklist:

• Clicking on a calendar timeslot should open the timeslotPopup
• Remove the temporary button for the timeslotPopup
• Pass the date of the clicked timeslot to the timeslotPopup, which passes it to the Timeslots component
• Pass the fetched timeslot data to the weekly calendar to have it populate the weekly calendar

Add conditional rendering for the color of a timeslot based on the availability of that timeslot in the file: components/mobile/mobileTimeslot.tsx.

This may include:

• referencing the timeslot data model
• creating fake bookings in our database or locally to test

Checklist:

• Make it look like the Figma design
• For each timeslot and each day, check if there is a booking in that timeslots two booking arrays for both volunteers and riders
• Pass along the whether a timeslot is booked through props from components/mobile/mobileTimeslots.tsx to components/mobile/mobileTimeslot.tsx (note the s, these are different files)
• If the current user is a rider and a timeslot already has a rider booking on that day, conditionally show the booking as unavailable with the lighter grey/blue color.
• If the current user is an admin and the timeslot is currently disabled, conditionally show the booking as disabled with the lighter grey/blue color.
• Otherwise, maintain the darker blue color
• Make sure you properly index into the timeslot object to access this data, the riderBookings array will contain booking objects with the date field which will need to be checked.
• Use styled-components for styling

Create the frontend for the AdminToggle component in the file: components/adminToggle.tsx. This would allow the admins to toggle between the volunteer and rider calendars (or show both)

This may include:

• using conditional rendering

Checklist:

• Make it look like the Figma design (Admin view)
• Use styled-components for styling
• Use state to control which checkmark is filled (Admin view)

Add the cancel and save/book buttons in the file: components/appointmentPopup.tsx. This will only be for the desktop view.

This may include:

• using conditional rendering to render either the "save" or "book" text

Checklist:

• Make it look like the Figma design
• Use styled-components for styling
• Allow for rendering of either save and book for buttons depending on whether the user is an admin or not

Create a TimeslotConfirmation component in the file: components/timeslotConfirmation.tsx. The TimeslotConfirmation will take a prop that indicates whether the user is booking or canceling a timeslot as well as a prop indicating the user type.

This may include:

• reviewing how to conditionally render a message on several possible situations
• looking around the different Figma views to see the different text options per scenario

Checklist:

• Make it look like the Figma design
• Conditionally render the "Save changes" text and message if an admin user is making changes
• On the volunteer/rider views: conditionally render the Confirm Booking text if the user is booking an appointment or the "Confirm Cancelation" message if the user is canceling a booking.
• Make the design responsive so it can be used on the mobile version as well.
• Use styled-components for styling

Assemble all of the pieces of the calendar mobile page in the file: components/mobileCalendar.tsx. Right now the calendarMobile file only holds the weekly view component but we will need to include the MobileTimeslots component as well as adding the schedule header, the current selected date, and the dropdown menu for admins to select between rider/admin info shown and for riders to select between showing all availability or just their booked slots.

This may include:

• Looking at the desktop view toggles as a reference for the dropdown options

Checklist:

• Make it look like the Figma design
• Add the "Schedule" header
• Add the MobileTimeslots component to the page
• Add the current selected date
• Add a dropdown with conditional rendering on the different choices. [Riders, Volunteers, Both] for admin view and [Availability, My Slots] for volunteer and rider views.
• Use styled-components for styling

Create the frontend for the Timeslots component in the file /components/timeslots.tsx and the Timeslot component in the file /components/timeslot.tsx. The Timeslots component will consistent of a mapping of Timeslot components. For now, only focus on the Volunteer/Rider view of the timeslots

This may include:

• hard coding an array of start/end times
• referencing our timeslot data model
• collaborating on the Timeslot component

Checklist:

• Make it look like the Figma design (all the desktop pages labeled "Time Slots")
• Indicate that the Timeslot is selected when pressed on rider/volunteer view.
• Conditional rendering of on/off slider on admin view
• Allow volunteers to select multiple timeslots (but not riders)
• Have a map of Timeslot Components inside the Timeslots component
• Conditional rendering (or filter on the map above) of timeslots for riders and volunteers. Riders should only see timeslots from 10-2 while volunteers can see timeslots from 9-5
• Allow for scrolling due to the increased number of timeslots for volunteers
• Use styled-components for styling

• turning on/off a timeslot and selecting book for timeslots does not need to send a request to the database for now

Create the frontend for the Login component in the file: login.tsx.

This may include:

• using a form
• using a card
• some form validation
  • email validation
  • all fields must be filled out

Checklist:

• Make it look like the Figma design
• Implement basic form validation
• Use styled components for styling
• Make it responsive (Mobile size should look like the mobile design)

Connect the timeslot popup, timeslot confirmation popup, and timeslot success popup in the files: components/popup/timeslotPopup.tsx, components/popup/timeslotConfirmation.tsx, and components/popup/timeslotSuccess.tsx.

This may include:

• using the styled components PopupDiv and PopupBox from our styledComponents.tsx
• passing information to the TimeslotSuccess popup by props

Checklist:

• Make the current TimeslotConfirmation and TimeslotSuccess components into popups (refer to TimeslotPopup for example)
• Save/Book button on TimeslotPopup opens TimeslotConfirmation
• Save/Book button on TimeslotConfirmation opens TimeslotSuccess
• Pass the fetched timeslots data to TimeslotConfirmation

Currently, the show/hide password icon only shows the eye icon with a slash through it. Fix this to render the normal eye when password is shown. This functionality is in the files: components/login.tsx, components/createAccount.tsx, and components/resetPassword.tsx.

This may include:

• conditional rendering using existing states where the password is shown or hidden
• using the existing eye.svg image

Checklist:

• Have the eye icon shown when password is shown, and eye slash icon shown when password is hidden
• Make sure the default is the password is hidden on all pages

Create a user object in our database when someone makes an account on the createAccount page in the file: components/authentication/createAccount.tsx. Currently a user is create in our Cognito user pool upon account creation which handles all authentication requests and tracking, but we would also like to store more information about a user such as their previous bookings so we need to create a corresponding user object in our traditional database to store this info.

This may include:

• exploring AWS datastore

Checklist:

• After the request is sent to create a user through Auth, create a user object that you send to the datastore as well.
• Make sure to store the user's first & last name, email, and userType that they provided on the createAccount form (the bookings array will be empty on account creation)

Standardize some of the styles from last week's frontend tasks (all of the login and authentication pages) and move them to components/styledComponents.tsx

Checklist:

• Identify and move commonly used styled components over (buttons, input fields, headers, etc.)
• Standardize the styles
• Update pages to import the standardized style from components/styledComponents.tsx and use it in the code.
• Make sure everything still works (buttons lead to the correct pages, input fields update, etc.)

Implement functionality for creating an account in the files: createAccount.tsx and enterCode.tsx.

This may include:

• referring to the Amplify docs
• checking ./aws-exports for the sign up attributes
• testing using Amplify database
• working together with person on the reset password backend issue

Checklist:

• Use Auth from Amplify to create an account (in createAccount)
• Navigate to enterCode on sign up
• Use Auth from Amplify to confirm account using code (in enterCode)
• Code should be sent for creating an account only if previous page was createAccount
• Show error validation if user fails to sign up
• Test user sign up and confirm account

Note that Amplify is already initialized in our dev branch so you don't need to do any amplify setup, you just need to copy in the aws-exports.js file that was sent in the cp-pet slack then import and use the Auth component

Rename the file components/adminToggle.tsx to components/calendarToggle.tsx and add conditional rendering for the rider/volunteer toggles. The admin toggles will stay the same but if the user is a volunteer/rider they should be able to see the toggles for "Availability" and "My Slots"

This may include:

• creating a fake user to test the conditional rendering on user type

Checklist:

• Make it look like the Figma design
• Conditionally render the toggles based on the user's userType
• If the user is an Admin, keep the current 3 toggle options
• if the user is a rider of volunteer, render the two toggle options "Availability" and "My Slots"
• Make sure that only one toggle can be selected at once and that "Availability" is selected by default
• Use styled-components for styling

Right now, the validation errors are formatted differently across every page. Our designers have updated designs to include what error messages should look like! Change the validation styling in the files: components/login.tsx, components/forgot-password.

This may include:

• Making a single styled component to import to both components

Checklist:

• Make it look like the Figma design (Log in, Forgot password)
• Use styled-components for styling
• Make it responsive (mobile size should look like the mobile design (Log in, Forgot password)

Create the frontend for the MonthlyView component in the file: monthlyView.tsx. This component is ONLY the desktop monthly view within the calendar (don't worry about the weekly view or riders/volunteers buttons, or the mobile version).

This may include:

• using a calendar package (such as react-calendar)
• using a package to help with dates (such as date-fns)

Checklist:

• Make it look like the Figma design
• Use styled components for styling
• Have the calendar show the current month on default
• Buttons should navigate to previous/next month
• Have dates be disabled if they have already past (so they can't sign up for a timeslot in the past)

Create the frontend for the ResetPassword component in the file: resetPassword.tsx

This may include:

• using a form
• using a card
• some form validation
  • all fields must be filled out

Checklist:

• Make it look like the Figma design
• Implement basic form validation
• Use a button for the form submission
• Use useNavigate to move to the success page in the onSubmit function
• Pass along the current page name resetPassword as a url parameter to the success page: /success
• Use styled-components for styling
• Make it responsive (mobile size should look like the mobile design)

Make the frontend content for the Timeslot Mobile dropdown, in a new TimeslotMobileContent component in the file: components/timeslotMobileContent.tsx.

This may include:

• exploring dropdown menus / conditional rendering of the additional info
• using code from the AppointmentInfo component

Checklist:

• Make it look like the Figma design
• Conditionally render the Status info (status is shown on volunteer/rider but not admin)
• Conditionally render the Volunteers (volunteers and admin view but not rider view)
• Conditionally render either the on/off slider (admin) or the book button (volunteer/rider)
• Allow volunteers to select multiple timeslots (but not riders)
• Use styled-components for styling

• don't worry about the book button or the on/off slider sending requests to the backend yet.

Set up context for user data in the file: App.tsx. Create the context in a new file called: userContext.tsx.

This may include:

• Referencing the React documentation on context
• Referencing our data models to see user data being stored

Checklist:

• Create a context in userContext.tsx with the properties of our user data
• Nest our App.tsx in a user context provider
• Set user context to current user on login

Implement functionality for resetting password in the files: forgotPassword.tsx, enterCode.tsx, and resetPassword.tsx.

This may include:

• referring to the Amplify docs
• checking ./aws-exports for the password attributes
• testing using Amplify database
• working together with person on the sign up backend issue

Checklist:

• Use Auth from Amplify to send a code from email (in forgotPassword)
• Navigate to enterCode after receiving email
• Use Auth from Amplify to confirm account using code (in enterCode)
• Code should be sent for resetting password only if previous page was forgotPassword
• Use Auth from Amplify to create new password
• Show error validation if user fails to create new password or email not found
• Test user sign up and confirm account

Create timeslots on our weeklyView calendar which are reflective of the timeslots in our database. This could either mean:

Creating a CalendarTimeslot component in the file: components/calendarTimeslot.tsx. Explore making the CalendarTimeslot component appear on the weekly calendar view. Maybe you can pass in the padding for the offsets as props as well in some way?

or

Keeping your current logic with styledDivs and having a way to associate each styledDiv with one of the database timeslots so that once it's selected we could open up the popup window for timeslot selection (don't worry about this popup for now but might be good in clarifying the userflow)

This may include:

• reviewing the weekly calendar component
• referencing our data models

Checklist:

• Make it look like the Figma design (The bluish boxes on the weekly calendar which indicate a booking occurred)
• Review the CalendarWeek component to see how a timeslot could be displayed
• Make it reflective of our data models
• Timeslots should be selectable (have an onClick function)
• Use styled-components for styling

Create the frontend for the MobileTimeslots component in the file /components/mobileTimeslots.tsx and the MobileTimeslot component in the file /components/mobileTimeslot.tsx. The MobileTimeslots component will consistent of a mapping of MobileTimeslot components. For now when the dropdown is opened just render/open a blank component

This may include:

• hard coding an array of start/end times
• referencing our timeslot data model
• collaborating on the Timeslot component

Checklist:

• Make it look like the Figma design
• Indicate that the MobileTimeslot is selected when pressed on rider/volunteer view by opening a dropdown menu or rendering a blank component.
• Have a map of MobileTimeslot Components inside the MobileTimeslots component
• Conditional rendering (or filter on the map above) of timeslots for riders and volunteers. Riders should only see timeslots from 10-2 while volunteers can see timeslots from 9-5
• Allow for scrolling due to the increased number of timeslots for volunteers
• Use styled-components for styling

• turning on/off a timeslot and selecting book for timeslots does not need to send a request to the database for now

Add the logo and the MonthlyView and WeeklyView components in a new Calendar component in the file: components/calendar.tsx.
EDIT: We will no longer need a "create" button, this will get updated in the design soon.

This may include:

• working with the person on the conditional rendering of calendar task

Checklist:

• Make it look like the Figma design
• Use styled-components for styling
• Make / navigate to the Calendar component

Pass booking information into the AppointmentInfo component in the file: components/appointmentInfo.tsx. Add conditional rendering for volunteer information also being displayed in the admin/volunteer views.

This may include:

• familiarizing yourself with our data model

Checklist:

• Make sure it looks like the Figma design
• Add conditional rendering for the volunteer information to be displayed if the current user is an admin or volunteer
• Pass in the volunteer booking information via props, you can either pass in the entire volunteer booking object or the first and last name
• Do the same for the volunteer information, but there can be more than one volunteer so you may need to pass in a list of volunteer bookings/names
• Populate the fields with the passed in props, keep in mind that there can be no bookings to pass in
• Make sure the correct data is being passed into the component via props, it should be the booking for the currently selected timeslot and on the current day, this will be found in the timeslot data queried from the database.
• Use styled-components for styling

Create the frontend for the SideBarInfo component in the file: components/sideBarInfo.tsx. This would include the location/weather information (rider/volunteer view).
EDIT: This task is on pause as the current design is a placeholder.

This may include:

• using conditional rendering
• using a weather package

Checklist:

• Make it look like the Figma design (rider/volunteer view)
• Use styled-components for styling
• Display address of PET ranch (Rider/volunteer view)
• Display weather in current location (Rider/volunteer view)

Create the frontend for the ForgotPassword component in the file: forgotPassword.tsx

This may include:

• using a form
• using a card
• some form validation
  • email format
  • all fields must be filled out
• back arrow navigates to /login page

Checklist:

• Make it look like the Figma design
• Implement basic form validation
• Use styled-components for styling
• Make it responsive (mobile size should look like the mobile design)

Implement a Popup modal in the file: components/timeslotPopup.tsx and create a timeslotSuccess component in the file components/timeslotSuccess.tsx which will be rendered inside of the popup modal. This popup modal will be used for the Timeslot selection and Confirmation page as well but just worry about the success message for now.

This may include:

• Using an mui Modal here
• Referencing the popup modal code from The Land Conservancy project

Checklist:

• Make it look like the Figma design
• Use a modal for the popup (highly suggest referencing the links above ^)
• Modal opens when the weekly calendar is clicked (in the future the menu will open when a timeslot is selected but we are still completing the timeslot functionality)
• Clicking the X in the top left should close the modal and show the main calendar page ("/" route)
• Include the text and styling for the success message (see the success page at /success)
• Use styled-components for styling

We know all of the timeslots for volunteers and riders on PET work days. Please create these timeslots in our Amplify studio so we can use them later in the project and show them on our page. You can create the timeslots in Amplify Studio -> Content -> Create Timeslot

This may include:

• Reading the meeting notes where we discussed these timeslot decisions (found at the bottom of our notion page)

• Create all the timeslots shown on our pre-established Timeslots notion page

Implement the ability to add new bookings for riders/volunteers in the file: components/popup/timeslotConfirmation.tsx. Keep in mind that riders can only select one timeslot at a time, while volunteers can select multiple.

This may include:

• exploring AWS datastore
• exploring AWS relationships
• making temporary bookings for now to push to the database, or waiting until assemble popup task is finished

Checklist:

• Create a new booking object for each booking selected from the timeslots in TimeslotPopup and send it to the database
• Create a new booking for the one booking selected from the timeslots in TimeslotPopup and send it to the database

Assemble the timeslots popup in the file: components/popup/timeslotPopup.tsx.

Checklist:

• Make it look like the Figma design
• Add the monthlyView, timeslots, and appointmentInfo components
• Add the date header
• Use styled-components for styling

Update the WeeklyView component to add a mobile view in the file: weeklyView.tsx. This component is ONLY the mobile weekly view within the calendar (don't worry about the timeslots).

This may include:

• using a calendar package (such as react-calendar)
  • EDIT: react-calendar actually doesn't have a weekly view, so feel free to research and find one that would be a better option!
• using a package to help with dates (such as date-fns)
• using media queries

Checklist:

• Make it look like the Figma design
• Use styled components for styling
• Have the calendar show the current week on default
• Buttons should navigate to previous/next week

Implement React Router in App.tsx to route to the correct pages.
(more Pages may need to be determined with org rep in the future)

• install react-router-dom
• add routes to all of the pages needed for the app in App.tsx:
  • /, /login, /create-account, /forgot-password, /enter-code, /reset-password, /success

If a page isn't finished yet you can use a dummy element as the element in the router until the page gets finished