fix: session redirect bug (#47)

Signed-off-by: Petr Bulánek <[email protected]>
i-am-bee · Nov 4, 2024 · 3da1547 · 3da1547
1 parent eca500e
commit 3da1547
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 18 deletions.
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -15,13 +15,19 @@
  */
 
 import { ModalProvider } from '@/layout/providers/ModalProvider';
+import { UserProfileInitializer } from '@/store/user-profile/UserProfileInitializer';
 import { PropsWithChildren } from 'react';
 import { QueryProvider } from '../../layout/providers/QueryProvider';
+import { ensureSession } from '../auth/rsc';
+
+export default async function MainLayout({ children }: PropsWithChildren) {
+  const session = await ensureSession();
 
-export default function MainLayout({ children }: PropsWithChildren) {
   return (
-    <QueryProvider>
-      <ModalProvider>{children}</ModalProvider>
-    </QueryProvider>
+    <UserProfileInitializer userProfile={session.userProfile}>
+      <QueryProvider>
+        <ModalProvider>{children}</ModalProvider>
+      </QueryProvider>
+    </UserProfileInitializer>
   );
 }
diff --git a/src/app/auth/rsc.tsx b/src/app/auth/rsc.tsx
@@ -15,7 +15,7 @@
  */
 
 import 'server-only';
-import { defaultUserProfileState } from '@/store/user-profile';
+import { dummyUserProfileState } from '@/store/user-profile';
 import { JWT } from 'next-auth/jwt';
 import { redirect } from 'next/navigation';
 import { cache } from 'react';
@@ -33,7 +33,7 @@ export const ensureSession = async () => {
       user: {
         access_token: DUMMY_JWT_TOKEN,
       },
-      userProfile: defaultUserProfileState,
+      userProfile: dummyUserProfileState,
     };
 
   const session = await getSession();

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,7 +22,6 @@ import { StoreProvider } from '@/store/StoreProvider';
 import type { Metadata } from 'next';
 import { PropsWithChildren, ReactNode } from 'react';
 import { IncludeGlobalStyles } from './IncludeGlobalStyles';
-import { ensureSession } from './auth/rsc';
 
 const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME!;
 
@@ -31,12 +30,10 @@ export const metadata: Metadata = {
   icons: { icon: '//www.ibm.com/favicon.ico' },
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
   modal,
 }: PropsWithChildren<{ modal: ReactNode }>) {
-  const session = await ensureSession();
-
   return (
     // suppressHydrationWarning is added because of ThemeProvider
     <html lang="en" suppressHydrationWarning>
@@ -47,7 +44,7 @@ export default async function RootLayout({
         </script>
       </head>
       <body>
-        <StoreProvider userProfile={session.userProfile}>
+        <StoreProvider>
           <ThemeProvider>
             <ToastProvider>
               <ProgressBarProvider>

diff --git a/src/layout/shell/UserProfile.tsx b/src/layout/shell/UserProfile.tsx
@@ -20,7 +20,7 @@ import { ExternalLink } from '@/components/ExternalLink/ExternalLink';
 import { Link } from '@/components/Link/Link';
 import { CurrentUserAvatar } from '@/components/UserAvatar/UserAvatar';
 import { useModal } from '@/layout/providers/ModalProvider';
-import { useUserProfile } from '@/store/user-profile';
+import { dummyUserProfileState, useUserProfile } from '@/store/user-profile';
 import { PRIVACY_URL, TOU_TEXT } from '@/utils/constants';
 import { isNotNull } from '@/utils/helpers';
 import { Button, Popover, PopoverContent } from '@carbon/react';
@@ -45,7 +45,7 @@ export function UserProfile() {
   const name = useUserProfile((state) => state.name);
   const email = useUserProfile((state) => state.email);
 
-  const isDummyUser = userId === '';
+  const isDummyUser = userId === dummyUserProfileState.id;
 
   useOnClickOutside(ref, () => {
     setOpen(false);

diff --git a/src/store/user-profile/UserProfileInitializer.tsx b/src/store/user-profile/UserProfileInitializer.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2024 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { isNotNull } from '@/utils/helpers';
+import { ReactNode } from 'react';
+import { useUserProfile, useUserProfileActions } from '.';
+import { UserProfileState } from './types';
+
+export function UserProfileInitializer({
+  userProfile,
+  children,
+}: {
+  userProfile: UserProfileState;
+  children: ReactNode;
+}) {
+  const userId = useUserProfile((state) => state.id) as string | undefined;
+  const { setUserProfile } = useUserProfileActions();
+
+  setUserProfile(userProfile);
+
+  return isNotNull(userId) ? children : null;
+}
diff --git a/src/store/user-profile/index.ts b/src/store/user-profile/index.ts
@@ -19,20 +19,21 @@ import { useStore } from '..';
 import { StoreSelector } from '../types';
 import { UserProfileSlice, UserProfileState } from './types';
 
-export const defaultUserProfileState: UserProfileState = {
+export const dummyUserProfileState: UserProfileState = {
   id: '',
   name: 'Test User',
   firstName: 'Test',
   lastName: 'User',
   email: '[email protected]',
-  metadata: {},
 };
 
 export const userProfileSlice = (initialState?: Partial<UserProfileState>) =>
   lens<UserProfileSlice>((set, get) => ({
-    ...defaultUserProfileState,
+    ...({} as UserProfileState),
     ...initialState,
-    actions: {},
+    actions: {
+      setUserProfile: (userProfile) => set(userProfile),
+    },
   }));
 
 export const useUserProfile: StoreSelector<UserProfileState> = (selector) =>

diff --git a/src/store/user-profile/types.ts b/src/store/user-profile/types.ts
@@ -30,6 +30,8 @@ export type UserProfileState = {
   metadata?: UserMetadata;
 };
 
-export type UserProfileAction = {};
+export type UserProfileAction = {
+  setUserProfile: (userProfile: UserProfileState) => void;
+};
 
 export type UserProfileSlice = StoreSlice<UserProfileState, UserProfileAction>;