We Should Watch - Update 4
The fourth video in my We Should Watch... update series!
This is a big one! Summary below. If anything in the video is unclear, or you’d just like a deeper dive, let me know and I’ll make a follow-up!
Authorization : I’m handling authorization with NextAuth, and it’s so easy that it feels like cheating. We review the Sign In button, the setup of the component (useSession, signIn(), signOut() from NextAuth) and the integration.
To use NextAuth, we set up an api route with [...nextauth].ts and set up the options we’ll be using for authentication. Since I’m using Prisma, I use the Prisma Connector with NextAuth to connect to my DB. I don’t mention it in the video, but we have a context wrapper around the _app.tsx component so we have access to the user session anywhere within the app.
I’m also connected with SendGrid, so I can send out emails with a sign-in ‘magic link’
Create A Group : The whole point of this app is to make groups that multiple people can be a part of, and add media so you can keep track of what you want to watch together. We review the process of adding groups, with loading states and a confirmation message. We confirm our additions in MongoDB.
In the CreateGroup component, we keep track of the input, and submit to the back-end along with the user email address. The back-end finds the user, creates a group with the current user as the first user associated, then we update the user entry to include the newly created group so we match our records on both ends.
Modal : I updated how I was handling modals, and now the modal exists as its own component, along with a useModal hook so we don’t have to create state in the parent every time we use it. This setup allows awesome reusability!
Add Media To Group : Once we have selected the media we want to add to our group, we click an add button which has a modal pop-up displaying the groups we are associated with. We can click a button on a chosen group to add the media.
We handle all this by first pulling in props from the parent, where we receive what movie we are currently looking at. We pass from the button to an AddToGroup container, which has logic calling to the back end with the current user info, fetching the full data about each of the groups the user is associated with. We map through this data and display the GroupEntry component for each.
The GroupEntry component reviews the media array of the group, and compares it against the movie we are looking at. If we find matching IDs between the two, we return a truthy value. If true, we use that to set a check-mark as the button, and disable it, indicating that the movie already exists in the group and preventing a re-add. Otherwise, we show the + button and allow the user to click.
The button click sends the group id and the media info, creating a media entry if I don’t already have it in my DB (I’ll use this information later) and pushing the media ID into the media array for our chosen group.