Zoom link #187
Zoom link #187
Conversation
|
Looks good just a few things:
|
| useEffect(() => { | ||
| if (timeSlot) { | ||
| const checkTime = () => { | ||
| const now = new Date(); | ||
| const fiveMinutesBefore = new Date(timeSlot); | ||
| fiveMinutesBefore.setMinutes(timeSlot.getMinutes() - 5); | ||
|
|
||
| setShowZoomLink(now >= fiveMinutesBefore); | ||
| }; | ||
|
|
||
| checkTime(); | ||
| const interval = setInterval(checkTime, 60000); | ||
|
|
||
| return () => clearInterval(interval); | ||
| } | ||
| }, [timeSlot]); | ||
|
|
There was a problem hiding this comment.
you are using dervied state to get the zoomLink, so why not use derived state to also compute setShowZoomLink? This way you subtract a useeffect and usestate hook improving performance
You can do this because of how tanstack query caches the teamroomdataand will update it based on its query key if anything changes
| useEffect(() => { | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const token = urlParams.get("zoom_token"); | ||
|
|
||
| if (token) { | ||
| setZoomToken(token); | ||
| window.history.replaceState({}, document.title, window.location.pathname); | ||
|
|
||
| const storedMeetingParams = sessionStorage.getItem("meetingParams"); | ||
| if (storedMeetingParams) { | ||
| const { startDateAndTime, presentationDuration } = | ||
| JSON.parse(storedMeetingParams); | ||
| createZoomMeeting(token, startDateAndTime, presentationDuration); | ||
| sessionStorage.removeItem("meetingParams"); | ||
| } | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
storing cookies in session storage isnt the safest and we can avoid this by storing it in http only cookies - this way we dont have to get the token via urlsearchparams
you set up your api auth routes very good but in those routes you can set the http only cookies and then fetch them in the frontend after
https://nextjs.org/docs/app/api-reference/functions/cookies
heres some documentation on how to do it
There was a problem hiding this comment.
Can we use NextJS server actions instead? There's a lot of boiler plate with using route handlers.
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
| @@ -0,0 +1,48 @@ | |||
| import { NextResponse } from "next/server"; | |||
|
|
|||
There was a problem hiding this comment.
| if (!process.env.ZOOM_CLIENT_SECRET) throw new Error("Missing environment variable ZOOM_CLIENT_SECRET in .env") |
There was a problem hiding this comment.
| if (!process.env.ZOOM_REDIRECT_URI) throw new Error("Missing environment variable ZOOM_REDIRECT_URI in .env") |
There was a problem hiding this comment.
Throw errors if missing envars
| <div className="flex flex-col gap-2 p-4 text-start"> | ||
| <div className="font-medium">Zoom Link: </div> | ||
| {showZoomLink && zoomLink ? ( | ||
| <a |
There was a problem hiding this comment.
Is it possible to use a tag instead?
|
@riyeur listen to justins comments not mine except about the cookies |
When the admin assigns teams to rooms, a Zoom link is generated by giving access to the app I made on Zoom marketplace to the person's account. This gives us a authorization code which is exchanged for a token, which is then used to create a meeting. Participants don't see the Zoom meeting until 5 minutes before their time.
You'll need to put ZOOM_REDIRECT_URI, ZOOM_CLIENT_ID and ZOOM_CLIENT_SECRET in the env file. These are all on the app on Zoom app marketplace