Merge pull request #306 from TaloDev/develop

Release 0.38.1

Author: tudddorrr

package-lock.json

@@ -78,7 +78,7 @@
   "lint-staged": {
     "*.{ts,js,tsx,jsx}": "eslint --fix"
   },
-  "version": "0.38.0",
+  "version": "0.38.1",
   "engines": {
     "node": "20.x"
   },

package.json

@@ -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 &&

src/components/PlayerAliases.tsx

@@ -26,7 +26,7 @@ function Select<T>({ innerRef, onChange, ...props }: SelectProps<T>) {
   const styles: StylesConfig<SelectOption<T>, boolean, GroupBase<SelectOption<T>>> = {
     control: (provided, state) => ({
       ...provided,
-      border: `1px solid ${state.isFocused ? 'transparent' : '#D1D5DB'} !important`,
+      border: `1px solid ${state.isFocused ? 'transparent' : 'rgba(0, 0, 0, 0.3)'} !important`,
       boxShadow: state.isFocused ? 'rgb(255, 255, 255) 0px 0px 0px 0px, rgb(236, 72, 153) 0px 0px 0px 3px, rgba(0, 0, 0, 0) 0px 0px 0px 0px' : 'none',
       paddingTop: '2px',
       paddingBottom: '2px',

src/components/Select.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} />)

src/components/__tests__/PlayerAliases.test.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