BA-hotfix: current profile fixes

packages/authentication/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @baseapp-frontend/authentication
 
+## 4.0.4
+
+### Patch Changes
+
+- Make sure the log out listener is loaded only once on `useCurrentProfile`.
+- Fix `useLogin` adding optional chaining to a problematic expression.
+- Move `InitialProfileProviderForTesting` around.
+
+
 ## 4.0.3
 
 ### Patch Changes

packages/authentication/modules/access/useLogin/index.ts

@@ -57,7 +57,7 @@ const useLogin = ({
     if (user) {
       // TODO: handle the absolute image path on the backend
       const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL?.replace('/v1', '')
-      const absoluteImagePath = user.profile.image ? `${baseUrl}${user.profile.image}` : null
+      const absoluteImagePath = user?.profile?.image ? `${baseUrl}${user.profile.image}` : null
       setCurrentProfile({
         ...user.profile,
         image: absoluteImagePath,

packages/authentication/modules/profile/index.ts

@@ -1,5 +1,4 @@
 export { default as useCurrentProfile } from './useCurrentProfile'
+export { default as InitialProfileProviderForTesting } from './useCurrentProfile/InitialProfileProviderForTesting'
+export * from './useCurrentProfile/constants'
 export type { MinimalProfile } from '../../types/profile'
-
-export { InitialProfileProvider } from './useCurrentProfile/__tests__/__utils__/InitialProfileProvider'
-export type { InitialProfileProp } from './useCurrentProfile/__tests__/__utils__/InitialProfileProvider'

packages/authentication/modules/profile/useCurrentProfile/InitialProfileProviderForTesting/index.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react'
+
+import { useHydrateAtoms } from 'jotai/utils'
+
+import { profileAtom } from '..'
+import { InitialProfileProviderForTestingProps } from './types'
+
+/**
+ * InitialProfileProviderForTesting component.
+ *
+ * This component is used to provide an initial profile state for testing purposes.
+ * It uses the `useHydrateAtoms` hook from `jotai/utils` to set the initial state of the `profileAtom`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <JotaiProvider>
+ *   <InitialProfileProviderForTesting initialProfile={props.initialProfile}>
+ *     // Your component goes here, it is passed the initialProfile
+ *   </InitialProfileProviderForTesting>
+ * </JotaiProvider>
+ * ```
+ */
+const InitialProfileProviderForTesting: FC<InitialProfileProviderForTestingProps> = ({
+  initialProfile,
+  children,
+}) => {
+  useHydrateAtoms([[profileAtom, initialProfile]])
+  return children
+}
+
+export default InitialProfileProviderForTesting

packages/authentication/modules/profile/useCurrentProfile/InitialProfileProviderForTesting/types.ts

@@ -0,0 +1,7 @@
+import { type PropsWithChildren } from 'react'
+
+import { type MinimalProfile } from '../../../../types/profile'
+
+export interface InitialProfileProviderForTestingProps extends PropsWithChildren {
+  initialProfile: MinimalProfile | null
+}

packages/authentication/modules/profile/useCurrentProfile/index.ts

@@ -27,6 +27,17 @@
 
 export const profileAtom = atom<MinimalProfile | null>(initialProfile)
 
+profileAtom.onMount = (setAtom) => {
+  const removeCurrentProfile = () => {
+    setAtom(null)
+    removeCookie(CURRENT_PROFILE_KEY)
+  }
+  eventEmitter.on(LOGOUT_EVENT, removeCurrentProfile)
+  return () => {
+    eventEmitter.off(LOGOUT_EVENT, removeCurrentProfile)
+  }
+}
+
 /**
  * By using `useCurrentProfile` with the `noSSR` option set to `false`, causes Next.js to dynamically render the affected pages, instead of statically rendering them.
  */
@@ -54,14 +65,14 @@
     }
   }
 
   const removeCurrentProfile = useCallback(() => setCurrentProfile(null), [])
 
   useEffect(() => {
     eventEmitter.on(LOGOUT_EVENT, removeCurrentProfile)
     return () => {
       eventEmitter.off(LOGOUT_EVENT, removeCurrentProfile)
     }
   }, [])
 
   if (isSSR) {
     return {

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @baseapp-frontend/components
 
+## 0.0.25
+
+### Patch Changes
+
+- Use `InitialProfileProviderForTesting`.
+- Updated dependencies
+  - @baseapp-frontend/authentication@4.0.4
+
 ## 0.0.24
 
 ### Patch Changes

packages/components/modules/navigations/Header/AccountMenu/AccountPopover/CurrentUser/index.tsx

@@ -1,12 +1,12 @@
 import { FC } from 'react'
 
-import { User, useJWTUser } from '@baseapp-frontend/authentication'
-import { JWTContent, joinWithSeparator } from '@baseapp-frontend/utils'
+import { useJWTUser } from '@baseapp-frontend/authentication'
+import { joinWithSeparator } from '@baseapp-frontend/utils'
 
 import { Box, Typography } from '@mui/material'
 
 const CurrentUser: FC = () => {
-  const { user } = useJWTUser<User & JWTContent>()
+  const { user } = useJWTUser()
 
   if (!user) {
     return null

packages/components/modules/navigations/Header/AccountMenu/AccountPopover/__tests__/__utils__/withProviders/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { InitialProfileProp, InitialProfileProvider } from '@baseapp-frontend/authentication'
+import { InitialProfileProviderForTesting } from '@baseapp-frontend/authentication'
 import { ThemeProvider } from '@baseapp-frontend/design-system'
 import { RelayTestProvider } from '@baseapp-frontend/graphql'
 import { NotificationProvider } from '@baseapp-frontend/utils'
@@ -16,13 +16,9 @@ const queryClient = new QueryClient()
 
 const withProviders =
   (Component: FC<AccountPopoverProps>) =>
-  ({
-    environment,
-    initialProfile,
-    ...props
-  }: WithProvidersOptions & AccountPopoverProps & InitialProfileProp) => (
+  ({ environment, initialProfile, ...props }: WithProvidersOptions & AccountPopoverProps) => (
     <JotaiProvider>
-      <InitialProfileProvider initialProfile={initialProfile}>
+      <InitialProfileProviderForTesting initialProfile={initialProfile}>
         <QueryClientProvider client={queryClient}>
           <RelayTestProvider environment={environment}>
             <ThemeProvider {...defaultTheme}>
@@ -32,7 +28,7 @@ const withProviders =
             </ThemeProvider>
           </RelayTestProvider>
         </QueryClientProvider>
-      </InitialProfileProvider>
+      </InitialProfileProviderForTesting>
     </JotaiProvider>
   )
 

packages/components/modules/navigations/Header/AccountMenu/AccountPopover/__tests__/__utils__/withProviders/types.ts

@@ -1,5 +1,8 @@
+import type { MinimalProfile } from '@baseapp-frontend/authentication'
+
 import type { RelayMockEnvironment } from 'relay-test-utils/lib/RelayModernMockEnvironment'
 
 export type WithProvidersOptions = {
   environment: RelayMockEnvironment
+  initialProfile: MinimalProfile | null
 }

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,