Ott 511 profile link and name components (#200)
* Ott 511 profile link and name components part 1 (#195) * refactor(#511): replaced profile links to ProfileLink component * test(#511): added tests to getProfileUrl helper * Ott 511 profile link and name components part 2 (#197) * feat(#511): added Name component for displaying names * refactor(#511): added using name as alt text in ProfileLogo * refactor(#511): used Name in UserFavorites * refactor(#511): used Name in header tournaments filter * refactor(#511): used Name in search result * fix(#515): pr fix * fix(#515): renamed prop name * Ott 511 profile link and name components part 3 (#199) * refactor(#511): replaced names to Name in MatchProfile * refactor(#511): replaced names in match cards to Name * refactor(#511): replaced names in ProfileCard * refactor(#511): pr fixkeep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan
5 years ago
committed by
GitHub
parent
6e63d05404
commit
8245c56b0b
@ -1,26 +0,0 @@ |
|||||||
import map from 'lodash/map' |
|
||||||
|
|
||||||
import { Tournaments } from 'requests' |
|
||||||
|
|
||||||
import { ProfileTypes } from 'config' |
|
||||||
|
|
||||||
type Name = 'name_rus' | 'name_eng' |
|
||||||
type ShortName = 'short_name_rus' | 'short_name_eng' |
|
||||||
|
|
||||||
export const normalizeTournaments = (tournaments: Tournaments, suffix: string) => ( |
|
||||||
map(tournaments, (tournament) => { |
|
||||||
const profileType = ProfileTypes.TOURNAMENTS |
|
||||||
const { id, sport: sportType } = tournament |
|
||||||
const name = tournament[`name_${suffix}` as Name] |
|
||||||
const shortName = tournament[`short_name_${suffix}` as ShortName] || name |
|
||||||
const country = tournament.country?.[`name_${suffix}` as Name] |
|
||||||
return { |
|
||||||
country, |
|
||||||
id, |
|
||||||
name, |
|
||||||
profileType, |
|
||||||
shortName, |
|
||||||
sportType, |
|
||||||
} |
|
||||||
}) |
|
||||||
) |
|
||||||
@ -0,0 +1,36 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
import styled from 'styled-components/macro' |
||||||
|
|
||||||
|
import { useLexicsStore } from 'features/LexicsStore' |
||||||
|
|
||||||
|
export type ObjectWithName = { |
||||||
|
[key: string]: any, |
||||||
|
name_eng?: string, |
||||||
|
name_rus?: string, |
||||||
|
} |
||||||
|
|
||||||
|
type Props = { |
||||||
|
className?: string, |
||||||
|
nameObj: ObjectWithName, |
||||||
|
prefix?: string, |
||||||
|
} |
||||||
|
|
||||||
|
const NameStyled = styled.span`` |
||||||
|
|
||||||
|
export const useName = ( |
||||||
|
nameObj: ObjectWithName, |
||||||
|
prefix: string = 'name_', |
||||||
|
): string => { |
||||||
|
const { suffix } = useLexicsStore() |
||||||
|
return nameObj?.[`${prefix}${suffix}`] |
||||||
|
} |
||||||
|
|
||||||
|
export const Name = ({ |
||||||
|
className, |
||||||
|
nameObj, |
||||||
|
prefix, |
||||||
|
}: Props) => { |
||||||
|
const name = useName(nameObj, prefix) |
||||||
|
return <NameStyled className={className}>{name}</NameStyled> |
||||||
|
} |
||||||
@ -1,7 +1,9 @@ |
|||||||
import { ProfileTypes } from 'config' |
import { ProfileTypes } from 'config' |
||||||
|
|
||||||
|
import type { ObjectWithName } from 'features/Name' |
||||||
|
|
||||||
export type ProfileCardProps = { |
export type ProfileCardProps = { |
||||||
infoItems: Array<string>, |
infoItems: Array<string>, |
||||||
name: string, |
|
||||||
profileType: ProfileTypes, |
profileType: ProfileTypes, |
||||||
|
titleObj: ObjectWithName | null, |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,22 @@ |
|||||||
|
import { ProfileTypes, SportTypes } from 'config' |
||||||
|
import { getProfileUrl } from '..' |
||||||
|
|
||||||
|
it('returns correct profile urls', () => { |
||||||
|
expect(getProfileUrl({ |
||||||
|
id: 1, |
||||||
|
profileType: ProfileTypes.PLAYERS, |
||||||
|
sportType: SportTypes.FOOTBALL, |
||||||
|
})).toBe('/football/players/1') |
||||||
|
|
||||||
|
expect(getProfileUrl({ |
||||||
|
id: 2, |
||||||
|
profileType: ProfileTypes.TEAMS, |
||||||
|
sportType: SportTypes.BASKETBALL, |
||||||
|
})).toBe('/basketball/teams/2') |
||||||
|
|
||||||
|
expect(getProfileUrl({ |
||||||
|
id: 3, |
||||||
|
profileType: ProfileTypes.TOURNAMENTS, |
||||||
|
sportType: SportTypes.HOCKEY, |
||||||
|
})).toBe('/hockey/tournaments/3') |
||||||
|
}) |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import type { ReactNode, MouseEvent } from 'react' |
||||||
|
import React from 'react' |
||||||
|
import { Link } from 'react-router-dom' |
||||||
|
|
||||||
|
import { ProfileTypes, SportTypes } from 'config' |
||||||
|
|
||||||
|
import { getProfileUrl } from './helpers' |
||||||
|
|
||||||
|
type Props = { |
||||||
|
children: ReactNode, |
||||||
|
className?: string, |
||||||
|
id: number, |
||||||
|
onClick?: (e: MouseEvent<HTMLAnchorElement>) => void, |
||||||
|
profileType: ProfileTypes, |
||||||
|
sportType: SportTypes, |
||||||
|
target?: string, |
||||||
|
} |
||||||
|
|
||||||
|
export const ProfileLink = ({ |
||||||
|
children, |
||||||
|
className, |
||||||
|
id, |
||||||
|
onClick, |
||||||
|
profileType, |
||||||
|
sportType, |
||||||
|
target, |
||||||
|
}: Props) => { |
||||||
|
const url = getProfileUrl({ |
||||||
|
id, |
||||||
|
profileType, |
||||||
|
sportType, |
||||||
|
}) |
||||||
|
return ( |
||||||
|
<Link |
||||||
|
to={url} |
||||||
|
className={className} |
||||||
|
target={target} |
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</Link> |
||||||
|
) |
||||||
|
} |
||||||
@ -1,36 +0,0 @@ |
|||||||
import map from 'lodash/map' |
|
||||||
|
|
||||||
import { getProfileUrl } from 'helpers' |
|
||||||
import type { UserFavorites } from 'requests' |
|
||||||
|
|
||||||
type Names = 'name_eng' | 'name_rus' |
|
||||||
type ShortNames = 'short_name_eng' | 'short_name_rus' |
|
||||||
type FirstNames = 'firstname_eng' | 'firstname_rus' |
|
||||||
type LastNames = 'lastname_eng' | 'firstname_rus' |
|
||||||
type NickNames = 'nickname_eng' | 'nickname_rus' |
|
||||||
|
|
||||||
export const normalizeUserFavorites = (favorites: UserFavorites, suffix: string) => { |
|
||||||
const nameField = `name_${suffix}` as Names |
|
||||||
const shortNameField = `short_name_${suffix}` as ShortNames |
|
||||||
const firtsNameField = `firstname_${suffix}` as FirstNames |
|
||||||
const lastNameField = `lastname_${suffix}` as LastNames |
|
||||||
const nickNameField = `nickname_${suffix}` as NickNames |
|
||||||
|
|
||||||
return map(favorites, (item) => ({ |
|
||||||
countryName: item.info.country?.[nameField], |
|
||||||
firstname: item.info[firtsNameField], |
|
||||||
id: item.id, |
|
||||||
lastname: item.info[lastNameField], |
|
||||||
name: item.info[nameField], |
|
||||||
nickname: item.info[nickNameField], |
|
||||||
profileUrl: getProfileUrl({ |
|
||||||
id: item.id, |
|
||||||
profileType: item.type, |
|
||||||
sportType: item.sport, |
|
||||||
}), |
|
||||||
shortName: item.info[shortNameField], |
|
||||||
sport: item.sport, |
|
||||||
teamName: item.info.team?.[nameField], |
|
||||||
type: item.type, |
|
||||||
})) |
|
||||||
} |
|
||||||
Loading…
Reference in new issue