fix: add storybook and fix the factory repo

src/sections/account/Account.tsx

@@ -1,16 +1,18 @@
 import { useTranslation } from 'react-i18next'
 import { Tabs } from '@iqss/dataverse-design-system'
 import { AccountHelper, AccountPanelTabKey } from './AccountHelper'
-import { createUserRepository } from './api-token-section/CreateUserRepositoryFactory'
+import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
+import { ApiTokenSection } from './api-token-section/ApiTokenSection'
 import styles from './Account.module.scss'
 
 const tabsKeys = AccountHelper.ACCOUNT_PANEL_TABS_KEYS
 
 interface AccountProps {
   defaultActiveTabKey: AccountPanelTabKey
+  userRepository: UserJSDataverseRepository
 }
 
-export const Account = ({ defaultActiveTabKey }: AccountProps) => {
+export const Account = ({ defaultActiveTabKey, userRepository }: AccountProps) => {
   const { t } = useTranslation('account')
 
   return (
@@ -33,7 +35,9 @@ export const Account = ({ defaultActiveTabKey }: AccountProps) => {
           <div className={styles['tab-container']}></div>
         </Tabs.Tab>
         <Tabs.Tab eventKey={tabsKeys.apiToken} title={t('tabs.apiToken')}>
-          <div className={styles['tab-container']}>{createUserRepository.create()}</div>
+          <div className={styles['tab-container']}>
+            <ApiTokenSection repository={userRepository} />
+          </div>
         </Tabs.Tab>
       </Tabs>
     </section>

src/sections/account/AccountFactory.tsx

@@ -2,6 +2,9 @@ import { ReactElement } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { AccountHelper } from './AccountHelper'
 import { Account } from './Account'
+import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
+
+const userRepository = new UserJSDataverseRepository()
 
 export class AccountFactory {
   static create(): ReactElement {
@@ -13,5 +16,5 @@ function AccountWithSearchParams() {
   const [searchParams] = useSearchParams()
   const defaultActiveTabKey = AccountHelper.defineSelectedTabKey(searchParams)
 
-  return <Account defaultActiveTabKey={defaultActiveTabKey} />
+  return <Account defaultActiveTabKey={defaultActiveTabKey} userRepository={userRepository} />
 }

src/sections/account/api-token-section/ApiTokenSection.tsx

@@ -20,12 +20,7 @@ export const ApiTokenSection = ({ repository }: ApiTokenSectionProps) => {
   const { t } = useTranslation('account', { keyPrefix: 'apiToken' })
   const [currentApiTokenInfo, setCurrentApiTokenInfo] = useState<TokenInfo>()
 
-  const { error, apiTokenInfo, isLoading } = useGetApiToken(repository)
-
-  const getError =
-    error !== 'There was an error when reading the resource. Reason was: [404] Token not found.'
-      ? error
-      : null
+  const { error: getError, apiTokenInfo, isLoading } = useGetApiToken(repository)
 
   useEffect(() => {
     setCurrentApiTokenInfo(apiTokenInfo)

src/sections/account/api-token-section/useGetCurrentApiToken.tsx

@@ -31,7 +31,12 @@ export const useGetApiToken = (repository: UserRepository): UseGetApiTokenResult
         err instanceof Error && err.message
           ? err.message
           : 'Something went wrong getting the current api token. Try again later.'
-      setError(errorMessage)
+      setError(
+        errorMessage ===
+          'There was an error when reading the resource. Reason was: [404] Token not found.'
+          ? null
+          : errorMessage
+      )
     } finally {
       setIsLoading(false)
     }
@@ -40,6 +45,5 @@ export const useGetApiToken = (repository: UserRepository): UseGetApiTokenResult
   useEffect(() => {
     void fetchTokenInfo()
   }, [fetchTokenInfo])
-
   return { isLoading, error, apiTokenInfo }
 }

src/stories/account/Account.stories.tsx

@@ -4,6 +4,9 @@ import { WithI18next } from '../WithI18next'
 import { WithLayout } from '../WithLayout'
 import { WithLoggedInUser } from '../WithLoggedInUser'
 import { AccountHelper } from '../../sections/account/AccountHelper'
+import { AccountPageMockUserRepository } from './AccountPageMockUserRepository'
+import { AccountPageMockLoadingUserRepository } from './AccountPageMockLoadingUserRepository'
+import { AccountPageMockErrorUserRepository } from './AccountPageMockErrorUserRepository'
 
 const meta: Meta<typeof Account> = {
   title: 'Pages/Account',
@@ -14,9 +17,33 @@ const meta: Meta<typeof Account> = {
     chromatic: { delay: 15000, pauseAnimationAtEnd: true }
   }
 }
+
 export default meta
 type Story = StoryObj<typeof Account>
 
-export const APITokenTab: Story = {
-  render: () => <Account defaultActiveTabKey={AccountHelper.ACCOUNT_PANEL_TABS_KEYS.apiToken} />
+export const APITokenTabDefault: Story = {
+  render: () => (
+    <Account
+      defaultActiveTabKey={AccountHelper.ACCOUNT_PANEL_TABS_KEYS.apiToken}
+      userRepository={new AccountPageMockUserRepository()}
+    />
+  )
+}
+
+export const APITokenTabLoading: Story = {
+  render: () => (
+    <Account
+      defaultActiveTabKey={AccountHelper.ACCOUNT_PANEL_TABS_KEYS.apiToken}
+      userRepository={new AccountPageMockLoadingUserRepository()}
+    />
+  )
+}
+
+export const APITokenTabError: Story = {
+  render: () => (
+    <Account
+      defaultActiveTabKey={AccountHelper.ACCOUNT_PANEL_TABS_KEYS.apiToken}
+      userRepository={new AccountPageMockErrorUserRepository()}
+    />
+  )
 }

src/stories/account/AccountPageMockErrorUserRepository.ts

@@ -0,0 +1,46 @@
+import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
+import { TokenInfo } from '@/users/domain/models/TokenInfo'
+import { User } from '@/users/domain/models/User'
+import { FakerHelper } from '@tests/component/shared/FakerHelper'
+
+export class AccountPageMockErrorUserRepository extends UserJSDataverseRepository {
+  getAuthenticated(): Promise<User> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject('Something went wrong getting authentication. Try again later.')
+      }, FakerHelper.loadingTimout())
+    })
+  }
+
+  removeAuthenticated(): Promise<void> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject('Something went wrong removing authentication. Try again later.')
+      }, FakerHelper.loadingTimout())
+    })
+  }
+
+  getCurrentApiToken(): Promise<TokenInfo> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject('Something went wrong getting the current api token. Try again later.')
+      }, FakerHelper.loadingTimout())
+    })
+  }
+
+  recreateApiToken(): Promise<TokenInfo> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject('Something went wrong creating the api token. Try again later.')
+      }, FakerHelper.loadingTimout())
+    })
+  }
+
+  deleteApiToken(): Promise<void> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject('Something went wrong revoking the api token. Try again later.')
+      }, FakerHelper.loadingTimout())
+    })
+  }
+}

src/stories/account/AccountPageMockLoadingUserRepository.ts

@@ -0,0 +1,25 @@
+import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
+import { TokenInfo } from '@/users/domain/models/TokenInfo'
+import { User } from '@/users/domain/models/User'
+
+export class AccountPageMockLoadingUserRepository extends UserJSDataverseRepository {
+  getAuthenticated(): Promise<User> {
+    return new Promise(() => {})
+  }
+
+  removeAuthenticated(): Promise<void> {
+    return new Promise(() => {})
+  }
+
+  getCurrentApiToken(): Promise<TokenInfo> {
+    return new Promise(() => {})
+  }
+
+  recreateApiToken(): Promise<TokenInfo> {
+    return new Promise(() => {})
+  }
+
+  deleteApiToken(): Promise<void> {
+    return new Promise(() => {})
+  }
+}

src/stories/account/AccountPageMockUserRepository.ts

@@ -0,0 +1,39 @@
+import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
+import { TokenInfo } from '@/users/domain/models/TokenInfo'
+import { User } from '@/users/domain/models/User'
+
+export class AccountPageMockUserRepository extends UserJSDataverseRepository {
+  getAuthenticated(): Promise<User> {
+    return Promise.resolve({
+      displayName: 'mockDisplayName',
+      persistentId: 'mockPersistentId',
+      firstName: 'mockFirstName',
+      lastName: 'mockLastName',
+      email: 'mockEmail',
+      affiliation: 'mockAffiliation',
+      superuser: true
+    })
+  }
+
+  removeAuthenticated(): Promise<void> {
+    return Promise.resolve()
+  }
+
+  getCurrentApiToken(): Promise<TokenInfo> {
+    return Promise.resolve({
+      apiToken: 'mock api token',
+      expirationDate: new Date()
+    })
+  }
+
+  recreateApiToken(): Promise<TokenInfo> {
+    return Promise.resolve({
+      apiToken: 'updated mock api token',
+      expirationDate: new Date()
+    })
+  }
+
+  deleteApiToken(): Promise<void> {
+    return Promise.resolve()
+  }
+}