Create Session ID for Users

[kylama]

Completed Creating Session ID for Users

Team Member Name: Kyla

Summary

Added a component to be added to the layout of every page that calls a session hook to use an existing session ID if it exists or to create a new one if not. This ID is then accessible by any component in the tree.

Code Changes

• hooks/useSession.ts: Created a hook that checks if there is an existing user session ID. If it doesn't exist, a unique UUID is created and saved to the browser's storage.
• components/AnalyticsProvider.tsx: Created a component that calls the custom useSession hook and shares the returned session ID, allowing it be accessed by any component in the tree.
• layout.tsx: Imported AnalyticsProvider and wrapped the NavBar and {children} in an AnalyticsProvider component.

Type of Change

• New Feature
• Bug Fix
• Documentation
• Other: (Fill In)

Checklist

• I have reviewed my own code.
• I have removed unnecessary comments and print statements from my code.
• I have tested my code.

Testing

To test, I checked if the session ID was stored in the browser storage when I visited the app on my browser. I also checked if a different session ID was stored if the tab was closed and the page was reopened.

To test if it could be accessed by components on the page, I created a test button component that printed the session ID in the console and added it to the homepage. I clicked this button to see if the correct session ID was printed in the console, and the functionality is demonstrated in the video linked below. I deleted the button and restored the homepage before pushing.

Video

https://drive.google.com/file/d/1iZGqOJcsffgZD9oq6OAynj4N8-qVw4Vw/view?usp=sharing