Hi Sophie & Srija! Great job on the tickets thus far 🥳 For this ticket, we will keep on with a similar theme: creating endpoints using Prisma & MongoDB! (let me know if you two are getting bored of Prisma 🥲) But this time, we'll be taking inspiration from the work the designers are doing, which is pretty cool! This ticket is due on April 17th at 11:59pm, but please let me know if you like an extension and need more time. Alright, let's get started!
Git Thingy
Make sure to run git checkout master and git pull origin. Hopefully by this point I have merged all previous branches and PRs so there should be a decent amount of changes. Then run yarn install and yarn dev for all the new yarn stuff. Remember to log in given your new temporary accounts with our new auth system.
Once you can locally run the application, please make a branch called meeting-retrieves. Make all changes on this branch.
Minor Thingy
Before moving onto the main part of this ticket, there are a few housekeeping items to take care of. First, we need to update our Meeting interface in the frontend/util/ folder and Meeting schema on Prisma. We need to do this to accommodate for more information we need to store, now that we have a better idea of the information we need to store thanks to the Design team! If you're interested, take a look at the figma file under the "Mid Fidelity" page. Put simply, we should make the following changes to the interface and Prisma schema:
add a "zoomLink" field as a string. This is where we will store the link of the zoom meeting when we create it.
add a "zid" field as a string. This is a unique id assigned to each Zoom meeting. It is useful for querying meetings straight form the Zoom API
add a "type" field as a string. This will specify if the meeting is "Hybrid", "In-Person Only", or "Online Only".
add a "room" field as a string (for now, as this is subject to change).
delete the "date" field.
rename "startTime" to "startDateTime". This convention will make it easier to turn Zoom Meetings into Meeting objects.
rename "fromTime" to "endDateTime".
Please make these changes in frontend/util/models.ts and frontend/prisma/schema.prisma. Once implemented, run yarn prisma db push, which will enforce the models onto our DB again.
GETting Bored of Meetings 🥱
If you took a look at the figma file and the current different views/pages, there a few ways to display meetings:
By month
By week
By day
This is pretty important as for each view, we need to fetch the meetings that correspond to the desired time intervals. So the functions you will be implementing will look similar to the Retrieve / GET routes we've been making already, just with some more complicated logic on Prisma's side and preprocessing of date ranges. Also, try to get comfortable with ISO 8601 UTC time conventions, as that is how we are storing dates in Date() objects as well as preprocessing our date ranges.
For each of the 3 GET routes, please go into the frontend/app/api/retrieve/meetings/ folder and create a new folder for each GET route. So Month, Week, and Day. In each of these new folders, create a file route.ts. Please add your routes to these files respectively.
The workflow to implement these GET functions is the following. First, expect to receive a date string in ISO 8601 UTC time form in the request body. Extract this date and turn it into a Date object. Depending on if you are doing by month, week, or day, the next step will be different. But the idea is to create a start and end date, which refers to, for example, the first of the current month and end of the current month, or the first day of the given week and the end of the given week, etc. To do this, I recommend taking a look at the Date documentation, specifically at getUTCFullYear(), getUTCMonth(), getUTCDay(), and Date.UTC() for creating new Date objects. The logic for "week" specifically is more difficult than the others, but start with getting the day of the week with getUTCDay() and work from there. Ask me if you need help with this one!
Once you have a start and end interval range of Date objects, use them to find all meetings with the properties that they exist within those dates/times. To do this, we have to revisit Prisma documentation (YAY)! I recommend still using findMany(), but this time, we'll be dealing with filtering. I recommend checking this section of the documentation out on the different operators that might be useful to us (there are actually a few examples where they use Dates). Prisma is pretty intuitive, so technically we can treat Date objects in ISO 8601 UTC time as numbers. So try to find operators where you can capture the range of dates/times needed.
Once you have all the meetings applicable from the DB, turn them all into Meeting objects based on our interface, and then you can simply return the list of meetings in a similar fashion as how we do it in frontend/app/api/retrieve/admin/route.ts (with all that try/catch response stuff). Let me know if you need me to clarify anything!
Already Bored of Testing?
Last step as usual is testing. The testing is a little more comprehensive than usual. Take a look at our new Create a Meeting page. We are mostly using this to test creating meetings on Zoom, but we should also use it to create Meeting objects and adding them to our database based on the user inputs provided in the 3 fields. So navigate to frontend/app/createmeeting/page.tsx to make the following changes:
Create a button under the fields.
Hook this button up to the handleClick() function that will look like the CreateMeeting function in frontend/app/test/page.tsx. All you need to do is change the fields provided to not only have it reflect the new schema we changed but also to the useState variables. Make sure startDateTime and endDateTime are in ISO 8601 UTC time. The rest of the fields can be whatever.
Once you confirm that this button works and see the new meetings visually in our MongoDB, we can proceed to the next step, which is creating 3 buttons in frontend/app/createmeeting/page.tsx. Under the 'Meetings' section, please create 3 buttons, each calling Month, Week, and Day separately. Also, create corresponding handleClick() functions where you call the routes individually. For the request body, please supply the current date by making a new date object Date() and using toISOString(). Console.log() the list of meetings returned.
A Not so Boring Submission
For submission (as in your PR), please make meetings on random dates in April and all dates during the week of 4/14. Take a screenshot of the meetings in MongoDB and the list of the printed meetings in the console from each button. Add these to the PR and write a 2-3 sentence description of your implementation!
Hi Sophie & Srija! Great job on the tickets thus far 🥳 For this ticket, we will keep on with a similar theme: creating endpoints using Prisma & MongoDB! (let me know if you two are getting bored of Prisma 🥲) But this time, we'll be taking inspiration from the work the designers are doing, which is pretty cool! This ticket is due on April 17th at 11:59pm, but please let me know if you like an extension and need more time. Alright, let's get started!
Git Thingy
Make sure to run
git checkout masterandgit pull origin. Hopefully by this point I have merged all previous branches and PRs so there should be a decent amount of changes. Then runyarn installandyarn devfor all the new yarn stuff. Remember to log in given your new temporary accounts with our new auth system.Once you can locally run the application, please make a branch called
meeting-retrieves. Make all changes on this branch.Minor Thingy
Before moving onto the main part of this ticket, there are a few housekeeping items to take care of. First, we need to update our Meeting interface in the
frontend/util/folder and Meeting schema on Prisma. We need to do this to accommodate for more information we need to store, now that we have a better idea of the information we need to store thanks to the Design team! If you're interested, take a look at the figma file under the "Mid Fidelity" page. Put simply, we should make the following changes to the interface and Prisma schema:Please make these changes in
frontend/util/models.tsandfrontend/prisma/schema.prisma. Once implemented, runyarn prisma db push, which will enforce the models onto our DB again.GETting Bored of Meetings 🥱
If you took a look at the figma file and the current different views/pages, there a few ways to display meetings:
This is pretty important as for each view, we need to fetch the meetings that correspond to the desired time intervals. So the functions you will be implementing will look similar to the Retrieve / GET routes we've been making already, just with some more complicated logic on Prisma's side and preprocessing of date ranges. Also, try to get comfortable with ISO 8601 UTC time conventions, as that is how we are storing dates in Date() objects as well as preprocessing our date ranges.
For each of the 3 GET routes, please go into the
frontend/app/api/retrieve/meetings/folder and create a new folder for each GET route. SoMonth,Week, andDay. In each of these new folders, create a fileroute.ts. Please add your routes to these files respectively.The workflow to implement these GET functions is the following. First, expect to receive a date string in ISO 8601 UTC time form in the request body. Extract this date and turn it into a Date object. Depending on if you are doing by month, week, or day, the next step will be different. But the idea is to create a start and end date, which refers to, for example, the first of the current month and end of the current month, or the first day of the given week and the end of the given week, etc. To do this, I recommend taking a look at the Date documentation, specifically at
getUTCFullYear(),getUTCMonth(),getUTCDay(), andDate.UTC()for creating new Date objects. The logic for "week" specifically is more difficult than the others, but start with getting the day of the week withgetUTCDay()and work from there. Ask me if you need help with this one!Once you have a start and end interval range of Date objects, use them to find all meetings with the properties that they exist within those dates/times. To do this, we have to revisit Prisma documentation (YAY)! I recommend still using findMany(), but this time, we'll be dealing with filtering. I recommend checking this section of the documentation out on the different operators that might be useful to us (there are actually a few examples where they use Dates). Prisma is pretty intuitive, so technically we can treat Date objects in ISO 8601 UTC time as numbers. So try to find operators where you can capture the range of dates/times needed.
Once you have all the meetings applicable from the DB, turn them all into Meeting objects based on our interface, and then you can simply return the list of meetings in a similar fashion as how we do it in
frontend/app/api/retrieve/admin/route.ts(with all that try/catch response stuff). Let me know if you need me to clarify anything!Already Bored of Testing?
Last step as usual is testing. The testing is a little more comprehensive than usual. Take a look at our new
Create a Meetingpage. We are mostly using this to test creating meetings on Zoom, but we should also use it to create Meeting objects and adding them to our database based on the user inputs provided in the 3 fields. So navigate tofrontend/app/createmeeting/page.tsxto make the following changes:CreateMeetingfunction infrontend/app/test/page.tsx. All you need to do is change the fields provided to not only have it reflect the new schema we changed but also to the useState variables. Make sure startDateTime and endDateTime are in ISO 8601 UTC time. The rest of the fields can be whatever.Once you confirm that this button works and see the new meetings visually in our MongoDB, we can proceed to the next step, which is creating 3 buttons in
frontend/app/createmeeting/page.tsx. Under the 'Meetings' section, please create 3 buttons, each calling Month, Week, and Day separately. Also, create corresponding handleClick() functions where you call the routes individually. For the request body, please supply the current date by making a new date object Date() and usingtoISOString(). Console.log() the list of meetings returned.A Not so Boring Submission
For submission (as in your PR), please make meetings on random dates in April and all dates during the week of 4/14. Take a screenshot of the meetings in MongoDB and the list of the printed meetings in the console from each button. Add these to the PR and write a 2-3 sentence description of your implementation!