fix bug in protected routes components

routing is now relative and zustand is used
to share state between components

package.json

@@ -41,7 +41,8 @@
     "react-feather": "^2.0.10",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.26.2",
-    "vite-express": "0.16.0"
+    "vite-express": "0.16.0",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",

src/App.tsx

@@ -17,12 +17,16 @@ const App = () => {
     <Routes>
       <Route element={<ProtectedRoute />}>
         <Route path='/' element={<TeamOverview />} />
-        <Route path='/teammedlemmer' element={<TeamMembers />} />
-        <Route path='/teammedlemmer/:principalName' element={<UserProfile />} />
-        <Route path='/:teamId' element={<TeamDetail />} />
-        <Route path='/:teamId/:shortName' element={<SharedBucketDetail />} />
-        <Route path='/opprett-team' element={<ProtectedAuthorizedUserRoute component={<CreateTeamForm />} />} />
-        <Route path='/opprett-team/kvittering' element={<ProtectedAuthorizedUserRoute component={<TeamCreated />} />} />
+        <Route path='teammedlemmer' element={<TeamMembers />}>
+          <Route path=':principalName' element={<UserProfile />} />
+        </Route>
+        <Route path='opprett-team' element={<ProtectedAuthorizedUserRoute />}>
+          <Route path='' element={<CreateTeamForm />} />
+          <Route path='kvittering' element={<TeamCreated />} />
+        </Route>
+        <Route path=':teamId' element={<TeamDetail />}>
+          <Route path=':shortName' element={<SharedBucketDetail />} />
+        </Route>
         <Route path='/not-found' element={<NotFound />} />
       </Route>
     </Routes>

src/components/ProtectedAuthorizedUserRoute.tsx

@@ -1,29 +1,43 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import NotFound from '../pages/NotFound/NotFound.tsx'
 import { User } from '../services/userProfile'
 import { isAuthorizedToCreateTeam } from '../services/createTeam'
-import { Effect } from 'effect'
+import { Effect, Option as O } from 'effect'
 import { isDaplaAdmin } from '../utils/services'
+import { option } from '../utils/utils'
+import { Skeleton } from '@mui/material'
+import PageLayout from './PageLayout/PageLayout.tsx'
+import { Outlet } from 'react-router-dom'
+import { useUserProfileStore } from '../services/store.ts'
 
-export interface Props {
-  component: React.ReactElement
-}
+const ProtectedAuthorizedUserRoute = () => {
+  // O.none() here represents the loading state
+  const [oIsAuthorized, setIsAuthorized] = useState<O.Option<boolean>>(O.none())
+  const maybeUser: O.Option<User> = useUserProfileStore((state) => state.loggedInUser)
 
-const ProtectedAuthorizedUserRoute = ({ component }: Props) => {
-  const [isAuthorized, setIsAuthorized] = useState(false)
   useEffect(() => {
-    const userProfileItem = localStorage.getItem('userProfile')
-    if (!userProfileItem) return
+    Effect.gen(function* () {
+      const user: User = yield* O.match(maybeUser, {
+        onNone: () => Effect.fail(new Error('User not logged in!')),
+        onSome: (user) => Effect.succeed(user),
+      })
 
-    const user = JSON.parse(userProfileItem) as User
-    if (!user) return
+      const daplaAdmin: boolean = yield* Effect.promise(() => isDaplaAdmin(user.principal_name))
 
-    Effect.promise(() => isDaplaAdmin(user.principal_name))
-      .pipe(Effect.runPromise)
-      .then((isDaplaAdmin: boolean) => setIsAuthorized(isAuthorizedToCreateTeam(isDaplaAdmin, user.job_title)))
+      yield* Effect.sync(() => setIsAuthorized(O.some(isAuthorizedToCreateTeam(daplaAdmin, user.job_title))))
+    }).pipe(Effect.runPromise)
   }, [])
 
-  return isAuthorized ? component : <NotFound />
+  return option(
+    oIsAuthorized,
+    () => (
+      <PageLayout
+        title='Opprett Team'
+        content={<Skeleton variant='rectangular' animation='wave' width={800} height={600} />}
+      />
+    ),
+    (isAuthorized) => (isAuthorized ? <Outlet /> : <NotFound />)
+  )
 }
 
 export default ProtectedAuthorizedUserRoute

src/components/ProtectedRoute.tsx

@@ -5,11 +5,13 @@ import { fetchUserInformationFromAuthToken } from '../utils/services'
 import { Cause, Effect, Option as O } from 'effect'
 import { customLogger } from '../utils/logger.ts'
 import { ApiError } from '../utils/services.ts'
+import { useUserProfileStore } from '../services/store.ts'
 
 import { User } from '../services/userProfile.ts'
 
 const ProtectedRoute = () => {
   const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const setUser = useUserProfileStore((state) => state.setUser)
   const navigate = useNavigate()
   const from = location.pathname
 
@@ -20,8 +22,8 @@ const ProtectedRoute = () => {
         Effect.flatMap((x) => (x instanceof ApiError ? Effect.fail(x) : Effect.succeed(x))),
         Effect.map(JSON.stringify)
       )
-      yield* Effect.logInfo(`UserProfile set in localStorage: ${userProfile}`)
       yield* Effect.sync(() => localStorage.setItem('userProfile', userProfile))
+      yield* Effect.sync(() => setUser(userProfile))
       yield* Effect.sync(() => setIsAuthenticated(true))
     }).pipe(Effect.provide(customLogger))
 
@@ -34,7 +36,10 @@ const ProtectedRoute = () => {
       onSome: (userProfile) =>
         // invalidate cached user profile if 'job_title' field is missing
         userProfile.job_title
-          ? Effect.sync(() => setIsAuthenticated(true))
+          ? Effect.zip(
+              Effect.sync(() => setIsAuthenticated(true)),
+              Effect.sync(() => setUser(userProfile))
+            )
           : Effect.zipRight(
               Effect.logInfo("'job_title' field missing, invalidating UserProfile cache"),
               fetchUserProfile()