From 8c89dfc93febed164bde1290fa3500461c153727 Mon Sep 17 00:00:00 2001
From: tudor <7089284+tudddorrr@users.noreply.github.com>
Date: Mon, 28 Oct 2024 23:12:46 +0000
Subject: [PATCH] always show latest created alias

---
 src/components/PlayerAliases.tsx              | 26 ++++++++++++++-----
 .../__tests__/PlayerAliases.test.tsx          |  8 +++---
 src/pages/PlayerProfile.tsx                   |  2 +-
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/PlayerAliases.tsx b/src/components/PlayerAliases.tsx
index 43f16fc2..8753fd57 100644
--- a/src/components/PlayerAliases.tsx
+++ b/src/components/PlayerAliases.tsx
@@ -3,6 +3,8 @@ import Tippy from '@tippyjs/react'
 import useSortedItems from '../utils/useSortedItems'
 import { PlayerAlias } from '../entities/playerAlias'
 import taloIcon from '../assets/talo-service.svg'
+import clsx from 'clsx'
+import { useCallback, useMemo } from 'react'
 
 type PlayerAliasesProps = {
   aliases: PlayerAlias[]
@@ -11,9 +13,9 @@ type PlayerAliasesProps = {
 export default function PlayerAliases({
   aliases
 }: PlayerAliasesProps) {
-  const sortedAliases = useSortedItems(aliases, 'updatedAt')
+  const sortedAliases = useSortedItems(aliases, 'createdAt')
 
-  const getIcon = (alias: PlayerAlias) => {
+  const getIcon = useCallback((alias: PlayerAlias) => {
     /* v8ignore next */
     switch (alias.service) {
       case 'steam': return <IconBrandSteam size={16} />
@@ -22,18 +24,28 @@ export default function PlayerAliases({
       case 'talo': return <img src={taloIcon} alt='Talo' className='w-[16px] h-[16px]' />
       default: return <IconQuestionMark size={16} />
     }
-  }
+  }, [])
 
-  if (aliases.length === 0) return 'None'
+  const alias = useMemo(() => {
+    return sortedAliases.at(0)
+  }, [sortedAliases])
+
+  if (!alias) return 'None'
 
   return (
     <div className='space-y-2'>
       <div className='flex items-center'>
-        <Tippy content={<p className='capitalize'>{sortedAliases[0].service}</p>}>
-          <span className='p-1 rounded-full bg-gray-900'>{getIcon(sortedAliases[0])}</span>
+        <Tippy
+          content={
+            <p className={clsx({ 'capitalize': !alias.service.includes('_') && !alias.service.includes('-') })}>
+              {alias.service}
+            </p>
+          }
+        >
+          <span className='p-1 rounded-full bg-gray-900'>{getIcon(alias)}</span>
         </Tippy>
 
-        <span className='ml-2 text-sm'>{sortedAliases[0].identifier}</span>
+        <span className='ml-2 text-sm'>{alias.identifier}</span>
       </div>
 
       {sortedAliases.length > 1 &&
diff --git a/src/components/__tests__/PlayerAliases.test.tsx b/src/components/__tests__/PlayerAliases.test.tsx
index 61f24c27..5fdfe655 100644
--- a/src/components/__tests__/PlayerAliases.test.tsx
+++ b/src/components/__tests__/PlayerAliases.test.tsx
@@ -14,11 +14,11 @@ describe('<PlayerAliases />', () => {
     expect(screen.getByText(aliases[0].identifier)).toBeInTheDocument()
   })
 
-  it('should render the first alias and an indicator for how many more', () => {
+  it('should render the latest alias and an indicator for how many more', () => {
     const aliases: PlayerAlias[] = [
-      playerAliasMock({ service: PlayerAliasService.STEAM, identifier: 'yxre12' }),
-      playerAliasMock({ service: PlayerAliasService.USERNAME, identifier: 'ryet12' }),
-      playerAliasMock({ service: PlayerAliasService.EPIC, identifier: 'epic_23rd' })
+      playerAliasMock({ service: PlayerAliasService.STEAM, identifier: 'yxre12', createdAt: '2024-10-28 10:00:00' }),
+      playerAliasMock({ service: PlayerAliasService.USERNAME, identifier: 'ryet12', createdAt: '2024-10-27 10:00:00' }),
+      playerAliasMock({ service: PlayerAliasService.EPIC, identifier: 'epic_23rd', createdAt: '2024-10-26 10:00:00' })
     ]
 
     render(<PlayerAliases aliases={aliases} />)
diff --git a/src/pages/PlayerProfile.tsx b/src/pages/PlayerProfile.tsx
index a752c9a6..4cccff9f 100644
--- a/src/pages/PlayerProfile.tsx
+++ b/src/pages/PlayerProfile.tsx
@@ -54,7 +54,7 @@ export default function PlayerProfile() {
   const [player] = usePlayer()
   const navigate = useNavigate()
 
-  const sortedAliases = useSortedItems(player?.aliases ?? [], 'updatedAt')
+  const sortedAliases = useSortedItems(player?.aliases ?? [], 'createdAt')
 
   const activeGame = useRecoilValue(activeGameState) as SelectedActiveGame
   const user = useRecoilValue(userState) as AuthedUser