The Collab Lab reposted this
Week 3 of The Collab Lab completed ✅ This week the team did amazing on both our issues and communication on code reviews and async! We really worked with each other on the issues to bring forth code we could all be proud of and add the ability to share the lists with existing users and filtering the lists! We did that all of these amazing changes after moving our entire codebase to #Typescript! In addition to working on these issues I noticed that a new user could come to our app and essentially navigate the app while logged out. They weren't seeing data but they were able to see the app. It felt like the app was going against the expected norm of how an app with a login and authenticated usage works. So I wanted to try my hand at adding a #Github Issue for our project, and see what kind of solution I could come up with. With the idea initially being that the user information being User or null would be utilized to show and hide the nav bar component. After think about how the app would function and what we want with type handling the code changes ended up: - Making sure the navigation bar is hidden if a user is not logged in (doing a UI perspective of communication of what is and isn't possible). - Redirecting a user to the homepage if they are not logged in back to the home page even if they try to manually navigate to the pages (which automatically takes the user to the homepage on signout). - Created the "page not found" and redirect to homepage functionality if they attempt to navigate to a route that doesn't exist. - Created our protected route component that handles the null type of our user type to ensure that only authenticated users can use the route and will handle the redirection of the page. - Utilizes React Router's Outlet component and useOutletContext to pass the user information and remove the need for prop drilling in nested protected routes across the code base. Below are the links to both the issue proposal & the merged PR: ISSUE: https://lnkd.in/e3MTKc2J PR: https://lnkd.in/e8FaE3us #softwareengineer #softwaredeveloper #thecollablab #reactrouter #react #collabie