BA-1809 [FE] Simplify CurrentProfileProvider

packages/authentication/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/authentication
 
+## 4.0.3
+
+### Patch Changes
+
+- Use jotai global state and cookies to keep track of the current profile. CurrentProfileProvider is removed, use "const { currentProfile, setCurrentProfile } = useCurrentProfile()" to read and modify the current profile, respectively.
+
 ## 4.0.2
 
 ### Patch Changes

packages/authentication/index.ts

@@ -1,5 +1,6 @@
 export * from './modules/access'
 export * from './modules/mfa'
+export * from './modules/profile'
 export * from './modules/user'
 
 export { default as AuthApi } from './services/auth'

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

@@ -5,6 +5,7 @@ import { useState } from 'react'
 import {
   ACCESS_KEY_NAME,
   REFRESH_KEY_NAME,
+  decodeJWT,
   setFormApiErrors,
   setTokenAsync,
 } from '@baseapp-frontend/utils'
@@ -21,11 +22,13 @@ import type {
   LoginMfaRequest,
   LoginRequest,
 } from '../../../types/auth'
+import { User } from '../../../types/user'
 import {
   isLoginChangeExpiredPasswordRedirectResponse,
   isLoginMfaResponse,
 } from '../../../utils/login'
 import { CODE_VALIDATION_INITIAL_VALUES, CODE_VALIDATION_SCHEMA } from '../../mfa/constants'
+import { useCurrentProfile } from '../../profile'
 import { DEFAULT_INITIAL_VALUES, DEFAULT_VALIDATION_SCHEMA } from './constants'
 import type { UseLoginOptions } from './types'
 
@@ -39,6 +42,7 @@ const useLogin = ({
   enableFormApiErrors = true,
 }: UseLoginOptions = {}) => {
   const [mfaEphemeralToken, setMfaEphemeralToken] = useState<string | null>(null)
+  const { setCurrentProfile } = useCurrentProfile()
 
   /*
    * Handles login success  with the auth token in response
@@ -49,6 +53,16 @@ const useLogin = ({
     if (isLoginChangeExpiredPasswordRedirectResponse(response)) {
       return
     }
+    const user = decodeJWT<User>(response.access)
+    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
+      setCurrentProfile({
+        ...user.profile,
+        image: absoluteImagePath,
+      })
+    }
     await setTokenAsync(accessKeyName, response.access, {
       secure: process.env.NODE_ENV === 'production',
     })

packages/authentication/modules/profile/index.ts

@@ -0,0 +1,5 @@
+export { default as useCurrentProfile } from './useCurrentProfile'
+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/__tests__/__mock__/profiles.ts

@@ -0,0 +1,10 @@
+import { faker } from '@faker-js/faker'
+
+export const mockUserProfileFactory = (id: string) => {
+  return {
+    id,
+    name: faker.person.fullName(),
+    image: faker.image.avatar(),
+    urlPath: faker.internet.url(),
+  }
+}

packages/authentication/modules/profile/useCurrentProfile/__tests__/__utils__/InitialProfileProvider/index.tsx

@@ -0,0 +1,25 @@
+import { FC, PropsWithChildren } from 'react'
+
+import { useHydrateAtoms } from 'jotai/utils'
+
+import { MinimalProfile } from '../../../../../../types/profile'
+import { profileAtom } from '../../../index'
+
+export type InitialProfileProp = {
+  initialProfile: MinimalProfile | null
+}
+
+// Use as:
+// <JotaiProvider>
+//   <InitialProfileProvider initialProfile={props.initialProfile}>
+//     // You're component goes here, it is passed the initialProfile
+//   </InitialProfileProvider>
+// </JotaiProvider>
+
+export const InitialProfileProvider: FC<PropsWithChildren & InitialProfileProp> = ({
+  initialProfile,
+  children,
+}) => {
+  useHydrateAtoms([[profileAtom, initialProfile]])
+  return children
+}

packages/authentication/modules/profile/useCurrentProfile/__tests__/useCurrentProfile.test.tsx

@@ -0,0 +1,42 @@
+import { act, renderHook } from '@baseapp-frontend/test'
+import { LOGOUT_EVENT, eventEmitter, removeCookie, setCookie } from '@baseapp-frontend/utils'
+
+import useCurrentProfile from '..'
+import { CURRENT_PROFILE_KEY } from '../constants'
+import { mockUserProfileFactory } from './__mock__/profiles'
+
+jest.mock('@baseapp-frontend/utils', () => ({
+  ...jest.requireActual('@baseapp-frontend/utils'),
+  removeCookie: jest.fn(),
+  setCookie: jest.fn(),
+}))
+
+describe('useCurrentProfile', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('changes current profile state and sets cookie', () => {
+    const profile1 = mockUserProfileFactory('profile-id-1')
+    const profile2 = mockUserProfileFactory('profile-id-2')
+    const { result } = renderHook(() => useCurrentProfile())
+
+    act(() => result.current.setCurrentProfile(profile1))
+    expect(result.current.currentProfile!.id).toEqual('profile-id-1')
+    expect(setCookie).toHaveBeenCalledWith(CURRENT_PROFILE_KEY, profile1, { stringfyValue: true })
+
+    act(() => result.current.setCurrentProfile(profile2))
+    expect(result.current.currentProfile!.id).toEqual('profile-id-2')
+    expect(setCookie).toHaveBeenCalledWith(CURRENT_PROFILE_KEY, profile1, { stringfyValue: true })
+  })
+
+  it('erases current profile when user logs out', async () => {
+    const profile = mockUserProfileFactory('user-profile-1')
+    const { result } = renderHook(() => useCurrentProfile())
+    act(() => result.current.setCurrentProfile(profile))
+
+    act(() => eventEmitter.emit(LOGOUT_EVENT))
+    expect(result.current.currentProfile).toEqual(null)
+    expect(removeCookie).toHaveBeenCalledWith(CURRENT_PROFILE_KEY)
+  })
+})

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

@@ -0,0 +1 @@
+export const CURRENT_PROFILE_KEY = 'CurrentProfile'

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

@@ -0,0 +1,80 @@
+'use client'
+
+import { useCallback, useEffect } from 'react'
+
+import {
+  LOGOUT_EVENT,
+  ServerSideRenderingOption,
+  eventEmitter,
+  getCookie,
+  removeCookie,
+  setCookie,
+} from '@baseapp-frontend/utils'
+
+import { atom, useAtom } from 'jotai'
+
+import { MinimalProfile } from '../../../types/profile'
+import { CURRENT_PROFILE_KEY } from './constants'
+
+export const getProfileFromCookie = ({ noSSR = true }: ServerSideRenderingOption = {}) => {
+  const settings =
+    getCookie<MinimalProfile | undefined>(CURRENT_PROFILE_KEY, { noSSR, parseJSON: true }) ?? null
+
+  return settings
+}
+
+const initialProfile = getProfileFromCookie()
+
+export const profileAtom = atom<MinimalProfile | null>(initialProfile)
+
+/**
+ * By using `useCurrentProfile` with the `noSSR` option set to `false`, causes Next.js to dynamically render the affected pages, instead of statically rendering them.
+ */
+const useCurrentProfile = ({ noSSR = true }: ServerSideRenderingOption = {}) => {
+  const [currentProfile, setProfile] = useAtom(profileAtom)
+  const isSSR = typeof window === typeof undefined
+
+  const setCurrentProfile = (newProfile: MinimalProfile | null) => {
+    if (newProfile === null) {
+      setProfile(() => {
+        removeCookie(CURRENT_PROFILE_KEY)
+        return null
+      })
+    } else {
+      setProfile(() => {
+        setCookie(CURRENT_PROFILE_KEY, newProfile, { stringfyValue: true })
+        return newProfile
+      })
+    }
+  }
+
+  const updateProfileIfActive = (newProfile: MinimalProfile) => {
+    if (currentProfile?.id === newProfile.id) {
+      setCurrentProfile(newProfile)
+    }
+  }
+
+  const removeCurrentProfile = useCallback(() => setCurrentProfile(null), [])
+
+  useEffect(() => {
+    eventEmitter.on(LOGOUT_EVENT, removeCurrentProfile)
+    return () => {
+      eventEmitter.off(LOGOUT_EVENT, removeCurrentProfile)
+    }
+  }, [])
+
+  if (isSSR) {
+    return {
+      currentProfile: getProfileFromCookie({ noSSR }),
+      setCurrentProfile,
+      updateProfileIfActive,
+    }
+  }
+  return {
+    currentProfile,
+    setCurrentProfile,
+    updateProfileIfActive,
+  }
+}
+
+export default useCurrentProfile

packages/authentication/modules/user/useUpdateUser/index.ts

@@ -4,6 +4,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import UserApi, { USER_API_KEY } from '../../../services/user'
 import type { User, UserUpdateParams } from '../../../types/user'
+import { useCurrentProfile } from '../../profile'
 import type { UseUpdateUserOptions } from './types'
 
 const useUpdateUser = <TUser extends Pick<User, 'id'>>({
@@ -13,6 +14,7 @@ const useUpdateUser = <TUser extends Pick<User, 'id'>>({
   ApiClass = UserApi,
 }: UseUpdateUserOptions<TUser> = {}) => {
   const queryClient = useQueryClient()
+  const { setCurrentProfile } = useCurrentProfile()
 
   const mutation = useMutation({
     mutationFn: (params: UserUpdateParams<TUser>) => ApiClass.updateUser<TUser>(params),
@@ -23,6 +25,7 @@ const useUpdateUser = <TUser extends Pick<User, 'id'>>({
       } catch (e) {
         // silently fail
         // eslint-disable-next-line no-console
+        setCurrentProfile(null)
         console.error(e)
       }
       options?.onSettled?.(data, error, variables, context)

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -15,6 +15,7 @@
   "dependencies": {
     "@hookform/resolvers": "catalog:",
     "@tanstack/react-query": "catalog:",
+    "jotai": "catalog:",
     "js-cookie": "catalog:",
     "react-hook-form": "catalog:",
     "zod": "catalog:"
@@ -28,6 +29,7 @@
     "@baseapp-frontend/eslint-plugin": "workspace:*",
     "@baseapp-frontend/test": "workspace:*",
     "@baseapp-frontend/tsconfig": "workspace:*",
+    "@faker-js/faker": "catalog:test",
     "@testing-library/jest-dom": "catalog:test",
     "@testing-library/react": "catalog:test",
     "@testing-library/user-event": "catalog:test",

packages/authentication/types/profile.ts

@@ -0,0 +1,6 @@
+export type MinimalProfile = {
+  id: string
+  name: string | null
+  image: string | null
+  urlPath: string | null
+}

packages/authentication/types/user.ts

@@ -1,23 +1,22 @@
+import { MinimalProfile } from './profile'
+
 export interface User {
   id: number
   email: string
   isEmailVerified: boolean
   newEmail: string
   isNewEmailConfirmed: boolean
   referralCode: string
-  avatar: {
-    fullSize: string
-    small: string
-  }
   firstName: string
   lastName: string
+  profile: MinimalProfile
   phoneNumber: string
   preferredLanguage: string
 }
 
 export interface UserUpdateParams<TUser extends Partial<User>> {
   userId: TUser['id']
-  data: Partial<Omit<TUser, 'avatar' | 'id'>> & {
+  data: Partial<Omit<TUser, 'id'>> & {
     avatar?: File | string
   }
 }

packages/components/.storybook/__mocks__/nextFontMock.ts

@@ -1,10 +1,3 @@
-module.exports = {
-  Public_Sans: () => ({
-    className: 'mock-public-sans',
-    style: {},
-  }),
-  Barlow: () => ({
-    className: 'mock-barlow',
-    style: {},
-  }),
-}
+module.exports = require('@baseapp-frontend/test/__mocks__/nextFontMock.ts')
+
+export {}

packages/components/.storybook/decorators/withProviders.tsx

@@ -6,8 +6,8 @@ import { NotificationProvider } from '@baseapp-frontend/utils'
 
 import type { StoryContext, StoryFn } from '@storybook/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Provider as JotaiProvider } from 'jotai'
 
-import CurrentProfileProvider from '../../modules/profiles/context/CurrentProfileProvider'
 import '../../styles/tailwind/globals.css'
 import defaultTheme from '../__mocks__/theme'
 
@@ -34,19 +34,19 @@ const withProviders = (Story: StoryFn, context: StoryContext) => {
   }, [mockData, resolveMostRecentOperation, queueOperationResolver, mockResolvers])
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <RelayTestProvider environment={environment}>
-        <React.Suspense fallback={<LoadingState />}>
-          <ThemeProvider {...defaultTheme}>
-            <NotificationProvider>
-              <CurrentProfileProvider>
+    <JotaiProvider>
+      <QueryClientProvider client={queryClient}>
+        <RelayTestProvider environment={environment}>
+          <React.Suspense fallback={<LoadingState />}>
+            <ThemeProvider {...defaultTheme}>
+              <NotificationProvider>
                 <Story />
-              </CurrentProfileProvider>
-            </NotificationProvider>
-          </ThemeProvider>
-        </React.Suspense>
-      </RelayTestProvider>
-    </QueryClientProvider>
+              </NotificationProvider>
+            </ThemeProvider>
+          </React.Suspense>
+        </RelayTestProvider>
+      </QueryClientProvider>
+    </JotaiProvider>
   )
 }
 

packages/components/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @baseapp-frontend/components
 
+## 0.0.24
+
+### Patch Changes
+
+- Remove `useCurrentProfile` from the package.
+- Use mocks from `@baseapp-frontend/test`.
+
+- Updated dependencies
+  - @baseapp-frontend/authentication@4.0.3
+
 ## 0.0.23
 
 ### Patch Changes