Ott 253 login error message (#66)

src/config/colors.tsx

@@ -1,5 +0,0 @@
-export const SPORT_COLORS = {
-  basketball: '#f1903b',
-  football: '#00a435',
-  hockey: '#5eb1ff',
-}

src/config/index.tsx

@@ -2,4 +2,5 @@ export * from './routes'
 export * from './pages'
 export * from './authKeys'
 export * from './procedures'
-export * from './colors'
+export * from './sportTypes'
+export * from './profileTypes'

src/config/profileTypes.tsx

@@ -0,0 +1,11 @@
+export enum ProfileTypes {
+  TOURNAMENTS = 1,
+  TEAMS = 2,
+  PLAYERS = 3,
+}
+
+export const PROFILE_NAMES = {
+  [ProfileTypes.TOURNAMENTS]: 'tournaments',
+  [ProfileTypes.TEAMS]: 'teams',
+  [ProfileTypes.PLAYERS]: 'players',
+} as const

src/config/routes.tsx

@@ -1,62 +1,2 @@
 export const API_ROOT = 'https://api-staging.instat.tv'
 export const DATA_URL = `${API_ROOT}/data`
-
-export const LOGOS_FALLBACKS = {
-  basketball: {
-    players: 'https://basketball.instatscout.com/images/player-no-photo.png',
-    teams: 'https://basketball.instatscout.com/images/team-no-photo.png',
-    tournaments: 'https://basketball.instatscout.com/images/tournaments/180/no-photo.png',
-  },
-
-  football: {
-    players: 'https://football.instatscout.com/images/player-no-photo.png',
-    teams: 'https://football.instatscout.com/images/team-no-photo.png',
-    tournaments: 'https://football.instatscout.com/images/tournament-no-photo.png',
-  },
-
-  hockey: {
-    players: 'https://hockey.instatscout.com/images/player-no-photo.png',
-    teams: 'https://hockey.instatscout.com/images/team-no-photo.png',
-    tournaments: 'https://hockey.instatscout.com/images/tournaments/180/no-photo.png',
-  },
-} as const
-
-export const LOGOS_URLS = {
-  basketball: {
-    players: 'https://basketball.instatscout.com/images/players/180',
-    teams: 'https://basketball.instatscout.com/images/teams/180',
-    tournaments: 'https://basketball.instatscout.com/images/tournaments/180',
-  },
-
-  football: {
-    players: 'https://instatscout.com/images/players/180',
-    teams: 'https://instatscout.com/images/teams/180',
-    tournaments: 'https://instatscout.com/images/tournaments/180',
-  },
-
-  hockey: {
-    players: 'https://hockey.instatscout.com/images/players/180',
-    teams: 'https://hockey.instatscout.com/images/teams/180',
-    tournaments: 'https://hockey.instatscout.com/images/tournaments/180',
-  },
-} as const
-
-export const FAV_SPORT_URLS = {
-  basketball: {
-    players: '/basketball/players',
-    teams: '/basketball/teams',
-    tournaments: '/basketball/tournaments',
-  },
-
-  football: {
-    players: '/football/players',
-    teams: '/football/teams',
-    tournaments: '/football/tournaments',
-  },
-
-  hockey: {
-    players: '/hockey/players',
-    teams: '/hockey/teams',
-    tournaments: '/hockey/tournaments',
-  },
-} as const

src/config/sportTypes.tsx

@@ -0,0 +1,11 @@
+export enum SportTypes {
+  FOOTBALL = 1,
+  HOCKEY = 2,
+  BASKETBALL = 3,
+}
+
+export const SPORT_NAMES = {
+  [SportTypes.BASKETBALL]: 'basketball',
+  [SportTypes.FOOTBALL]: 'football',
+  [SportTypes.HOCKEY]: 'hockey',
+}

src/features/Common/Input/styled.tsx

@@ -90,7 +90,11 @@ export const Column = styled.div`
   flex-direction: column;
 `
 
-export const Error = styled(T9n)`
+type ErrorProps = {
+  marginBottom?: number,
+}
+
+export const Error = styled(T9n)<ErrorProps>`
   min-height: 16px;
   margin-top: 5px;
   font-style: normal;
@@ -99,4 +103,10 @@ export const Error = styled(T9n)`
   line-height: 16px;
   letter-spacing: -0.078px;
   color: #E64646;
+
+  ${({ marginBottom }) => (
+    marginBottom
+      ? `margin-bottom: ${marginBottom}px`
+      : ''
+  )}
 `

src/features/HeaderFilters/components/TournamentFilter/helpers.tsx

@@ -1,35 +1,47 @@
 import map from 'lodash/map'
 
-import type { Tournaments } from 'requests'
+import { Tournaments } from 'requests'
 
-import { LOGOS_FALLBACKS } from 'config'
+import { ProfileTypes } from 'config'
-import { getLogo, SPORT_TYPES } from 'helpers'
+import {
+  getProfileLogo,
+  getSportColor,
+  getSportLexic,
+  getProfileFallbackLogo,
+} from 'helpers'
 
 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 { c_sport, id } = tournament
+    const profileType = ProfileTypes.TOURNAMENTS
-    const sportType = SPORT_TYPES[c_sport]
+    const { c_sport: sportType, id } = tournament
+    const color = getSportColor(sportType)
+    const sportLexic = getSportLexic(sportType)
     const name = tournament[`name_${suffix}` as Name]
     const shortName = tournament[`short_name_${suffix}` as ShortName] || name
     const country = tournament.country?.[`name_${suffix}` as Name]
 
-    const logo = getLogo({
+    const logo = getProfileLogo({
       id,
+      profileType,
+      sportType,
+    })
+    const fallbackImage = getProfileFallbackLogo({
+      profileType,
       sportType,
-      type: 'tournaments',
     })
 
     return {
+      color,
       country,
-      fallbackImage: LOGOS_FALLBACKS[sportType].tournaments,
+      fallbackImage,
       id,
       logo,
       name,
       shortName,
-      sportType,
+      sportLexic,
     }
   })
 )

src/features/HeaderFilters/components/TournamentList/index.tsx

@@ -2,9 +2,6 @@ import React from 'react'
 
 import map from 'lodash/map'
 
-import { SPORT_COLORS } from 'config'
-import type { SportType } from 'features/Search/config'
-
 import { useItemsList } from 'features/ItemsList/hooks'
 import {
   Logo,
@@ -19,12 +16,13 @@ import {
 import { ListItem } from './styled'
 
 type Tournament = {
+  color: string,
   country?: string,
   fallbackImage: string,
   id: number,
   logo: string,
   name: string,
-  sportType: SportType,
+  sportLexic: string,
 }
 
 type TournamentListProps = {
@@ -41,12 +39,13 @@ export const TournamentList = ({ onSelect, tournaments }: TournamentListProps) =
   return (
     <Wrapper ref={ref}>
       {map(tournaments, ({
+        color,
         country,
         fallbackImage,
         id,
         logo,
         name,
-        sportType,
+        sportLexic,
       }) => (
         <ListItem key={id} onClick={() => onSelect(id)}>
           <LogoWrapper>
@@ -59,8 +58,8 @@ export const TournamentList = ({ onSelect, tournaments }: TournamentListProps) =
           <ItemInfo>
             <Name>{name}</Name>
             <SportName
-              color={SPORT_COLORS[sportType]}
+              color={color}
-              t={sportType}
+              t={sportLexic}
             />
             <TeamOrCountry>{country}</TeamOrCountry>
           </ItemInfo>

src/features/HeaderFilters/store/hooks/index.tsx

@@ -9,6 +9,7 @@ import debounce from 'lodash/debounce'
 import format from 'date-fns/format'
 import startOfDay from 'date-fns/startOfDay'
 
+import { SportTypes } from 'config'
 import { getMatches } from 'requests'
 
 export enum MatchStatuses {
@@ -17,18 +18,12 @@ export enum MatchStatuses {
   Soon = 3,
 }
 
-export enum SportTypes {
-  Football = 1,
-  Basketball = 3,
-  Hockey = 2,
-}
-
 const dateFormat = 'dd/MM/yyyy HH:mm:ss'
 
 export const useFilters = () => {
   const [selectedDate, setSelectedDate] = useState(new Date())
   const [selectedMatchStatus, setSelectedMatchStatus] = useState<MatchStatuses>(MatchStatuses.Live)
-  const [selectedSportType, setSelectedSportTypes] = useState<SportTypes>(SportTypes.Football)
+  const [selectedSportType, setSelectedSportTypes] = useState<SportTypes>(SportTypes.FOOTBALL)
   const [selectedTournamentId, setSelectedTournamentId] = useState<number | null>(null)
   const fetchMatches = useCallback(debounce(getMatches, 300), [])
 

src/features/HomePage/index.tsx

@@ -10,7 +10,7 @@ import {
   TournamentFilter,
   HeaderFiltersStore,
 } from 'features/HeaderFilters'
-import { UserSportFav } from 'features/UserSportFav'
+import { UserFavorites } from 'features/UserFavorites'
 
 import {
   FilterWrapper,
@@ -19,7 +19,7 @@ import {
 export const HomePage = () => (
   <HeaderFiltersStore>
     <MainWrapper>
-      <UserSportFav />
+      <UserFavorites />
       <Header>
         <FilterWrapper>
           <Search />

src/features/ItemsList/index.tsx

@@ -2,9 +2,6 @@ import React from 'react'
 
 import map from 'lodash/map'
 
-import { SPORT_COLORS } from 'config'
-import type { SportType } from 'features/Search/config'
-
 import { useItemsList } from './hooks'
 import {
   Logo,
@@ -20,12 +17,13 @@ import {
 
 type SearchItemsListProps = {
   list: Array<{
+    color: string,
     fallbackImage: string,
     id: number,
     logo: string,
     name: string,
     profileUrl: string,
-    sportType: SportType,
+    sportLexic: string,
     teamOrCountry?: string,
   }>,
 }
@@ -39,12 +37,13 @@ export const ItemsList = ({ list }: SearchItemsListProps) => {
   return (
     <Wrapper ref={ref}>
       {map(list, ({
+        color,
         fallbackImage,
         id,
         logo,
         name,
         profileUrl,
-        sportType,
+        sportLexic,
         teamOrCountry,
       }) => (
         <Item key={id}>
@@ -59,8 +58,8 @@ export const ItemsList = ({ list }: SearchItemsListProps) => {
             <ItemInfo>
               <Name>{name}</Name>
               <SportName
-                color={SPORT_COLORS[sportType]}
+                color={color}
-                t={sportType}
+                t={sportLexic}
               />
               <TeamOrCountry>{teamOrCountry}</TeamOrCountry>
             </ItemInfo>

src/features/Login/index.tsx

@@ -39,8 +39,6 @@ const LoginForm = () => {
           <T9n t='step_title_login' />
         </BlockTitle>
 
-        {requestError && <Error t={requestError} />}
-
         <Input
           id={formIds.email}
           type='email'
@@ -62,6 +60,7 @@ const LoginForm = () => {
         />
 
         <ButtonsBlock>
+          <Error t={requestError || ''} marginBottom={8} />
           <ButtonSolid type='submit'>
             <T9n t='login' />
           </ButtonSolid>

src/features/Search/config/index.tsx

@@ -1,11 +1,3 @@
 export const SEARCH_DELAY = 1500 // Задержка поиска в мс
 
 export const MIN_CHARACTERS_LENGTH = 3 // Минимальное число символов для поиска
-
-export type SportType = 'football' | 'basketball' | 'hockey'
-
-export const SPORT_TYPES = {
-  1: 'football',
-  2: 'hockey',
-  3: 'basketball',
-} as const

src/features/Search/hooks/useNormalizedItems.tsx

@@ -1,12 +1,15 @@
 import map from 'lodash/map'
 
-import type { SearchItems } from 'requests'
+import { SearchItems } from 'requests'
-import { LOGOS_FALLBACKS } from 'config'
+import { ProfileTypes } from 'config'
-import { getLogo } from 'helpers'
+import {
+  getProfileLogo,
+  getSportColor,
+  getSportLexic,
+  getProfileFallbackLogo,
+} from 'helpers'
 import { useLexicsStore } from 'features/LexicsStore'
 
-import { SPORT_TYPES } from '../config'
-
 type Firstname = 'firstname_eng' | 'firstname_rus'
 type Lastname = 'lastname_eng' | 'lastname_rus'
 type Name = 'name_eng' | 'name_rus'
@@ -17,81 +20,95 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
   } = useLexicsStore()
 
   const players = map(searchItems.players, (player) => {
-    const type = 'players'
+    const { id, sport: sportType } = player
+    const profileType = ProfileTypes.PLAYERS
 
     const firstName = player[`firstname_${suffix}` as Firstname]
     const lastName = player[`lastname_${suffix}` as Lastname]
     const teamName = player.team?.[`name_${suffix}` as Name]
 
-    const sportType = SPORT_TYPES[player.sport]
+    const sportLexic = getSportLexic(sportType)
-
-    const { id } = player
 
-    const logo = getLogo({
+    const logo = getProfileLogo({
       id,
+      profileType,
+      sportType,
+    })
+    const fallbackImage = getProfileFallbackLogo({
+      profileType,
       sportType,
-      type,
     })
 
     return {
-      fallbackImage: LOGOS_FALLBACKS[sportType].players,
+      color: getSportColor(sportType),
+      fallbackImage,
       id,
       logo,
       name: `${firstName} ${lastName}`,
       profileUrl: `/players/${id}`,
-      sportType,
+      sportLexic,
       teamOrCountry: teamName,
     }
   })
 
   const teams = map(searchItems.teams, (team) => {
+    const { id, sport: sportType } = team
+    const profileType = ProfileTypes.TEAMS
     const name = team[`name_${suffix}` as Name]
 
-    const sportType = SPORT_TYPES[team.sport]
+    const sportLexic = getSportLexic(sportType)
-
-    const { id } = team
 
-    const logo = getLogo({
+    const logo = getProfileLogo({
       id,
+      profileType,
+      sportType,
+    })
+    const fallbackImage = getProfileFallbackLogo({
+      profileType,
       sportType,
-      type: 'teams',
     })
 
     const country = team.country?.[`name_${suffix}` as Name]
 
     return {
-      fallbackImage: LOGOS_FALLBACKS[sportType].teams,
+      color: getSportColor(sportType),
+      fallbackImage,
       id,
       logo,
       name,
       profileUrl: `/teams/${id}`,
-      sportType,
+      sportLexic,
       teamOrCountry: country,
     }
   })
 
   const tournaments = map(searchItems.tournaments, (tournament) => {
+    const profileType = ProfileTypes.TOURNAMENTS
+    const { id, sport: sportType } = tournament
     const name = tournament[`name_${suffix}` as Name]
 
-    const sportType = SPORT_TYPES[tournament.sport]
+    const sportLexic = getSportLexic(sportType)
-
-    const { id } = tournament
 
-    const logo = getLogo({
+    const logo = getProfileLogo({
       id,
+      profileType,
+      sportType,
+    })
+    const fallbackImage = getProfileFallbackLogo({
+      profileType,
       sportType,
-      type: 'tournaments',
     })
 
     const country = tournament.country?.[`name_${suffix}` as Name]
 
     return {
-      fallbackImage: LOGOS_FALLBACKS[sportType].tournaments,
+      color: getSportColor(sportType),
+      fallbackImage,
       id,
       logo,
       name,
       profileUrl: `/tournaments/${id}`,
-      sportType,
+      sportLexic,
       teamOrCountry: country,
     }
   })

src/features/UserFavorites/TooltipBlock/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import {
+import { SportTypes } from 'config'
-  getSportName,
+import { getSportColor, getSportLexic } from 'helpers'
-  getSportColor,
+import { T9n } from 'features/T9n'
-} from './hooks'
+
 import {
   TooltipBlockWrapper,
   TooltipBlockItem,
@@ -11,14 +11,13 @@ import {
   TooltipBlockItemThin,
 } from './styled'
 
-type TTooltipBlock = {
+type TooltipBlockProps = {
   countryName?: string,
   date?: string,
   playerFirstName?: string,
   playerLastName?: string,
   playerTeamName?: string,
-  sport: number,
+  sport: SportTypes,
-  suffix: string,
   teamName?: string,
 }
 
@@ -28,9 +27,8 @@ export const TooltipBlock = ({
   playerLastName,
   playerTeamName,
   sport,
-  suffix,
   teamName,
-}: TTooltipBlock) => (
+}: TooltipBlockProps) => (
   <TooltipBlockWrapper>
     <TooltipBlockItem>
       {playerFirstName && playerLastName && `${playerFirstName} ${playerLastName}`}
@@ -40,7 +38,7 @@ export const TooltipBlock = ({
     </TooltipBlockItem>
     <TooltipBlockItemThin>
       <TooltipBlockItemThinUpperCase color={getSportColor(sport)}>
-        {getSportName(sport, suffix)}
+        <T9n t={getSportLexic(sport)} />
       </TooltipBlockItemThinUpperCase>{' '}
       {playerTeamName || countryName}
     </TooltipBlockItemThin>

src/features/UserFavorites/TooltipBlock/styled.tsx

@@ -15,18 +15,18 @@ export const TooltipBlockWrapper = styled.div`
   }
 `
 
-export type TTooltipProps = {
+type TooltipProps = {
   color?: string,
 }
 
-export const TooltipStyles = css<TTooltipProps>`
+export const TooltipStyles = css<TooltipProps>`
   display: block;
   font-family: Montserrat, Tahoma, sans-serif;
   font-size: 14px;
   line-height: 18px;
   color: ${({ color }) => (color ? `${color}` : '#2c2d2e')};
   font-weight: 600;
-  
+
   &:hover {
     background-color: rgba(255, 255, 255, 0.7);
   }

src/features/UserFavorites/helpers.tsx

@@ -0,0 +1,41 @@
+import map from 'lodash/map'
+
+import { getProfileLogo, 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],
+    profileLogo: getProfileLogo({
+      id: item.id,
+      profileType: item.type,
+      sportType: item.sport,
+    }),
+    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,
+  }))
+}

src/features/UserFavorites/hooks/index.tsx

@@ -0,0 +1,36 @@
+import {
+  useEffect,
+  useState,
+  useMemo,
+} from 'react'
+
+import type { UserFavorites } from 'requests'
+import { modifyUserFavorites, getUserFavorites } from 'requests'
+import { useLexicsStore } from 'features/LexicsStore'
+
+import { normalizeUserFavorites } from '../helpers'
+
+type Args = Parameters<typeof modifyUserFavorites>[0]
+
+export const useUserFavorites = () => {
+  const { suffix } = useLexicsStore()
+  const [userFavorites, setUserFavorites] = useState<UserFavorites>([])
+
+  useEffect(() => {
+    getUserFavorites().then(setUserFavorites)
+  }, [])
+
+  const addRemoveFavorite = (args: Args) => {
+    modifyUserFavorites(args).then(setUserFavorites)
+  }
+
+  const memoizedUserFavorites = useMemo(
+    () => normalizeUserFavorites(userFavorites, suffix),
+    [userFavorites, suffix],
+  )
+
+  return {
+    addRemoveFavorite,
+    userFavorites: memoizedUserFavorites,
+  }
+}

src/features/UserFavorites/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import map from 'lodash/map'
+
+import { handleImageError } from 'helpers'
+
+import { useUserFavorites } from './hooks'
+import { TooltipBlock } from './TooltipBlock'
+import {
+  StyledLink,
+  UserSportFavItemLogoWrapper,
+  UserSportFavXWrapper,
+  UserSportFavImgWrapper,
+  UserSportFavStar,
+  UserSportFavLogoWrapper,
+  UserSportFavWrapper,
+} from './styled'
+
+export const UserFavorites = () => {
+  const { addRemoveFavorite, userFavorites } = useUserFavorites()
+
+  return (
+    <UserSportFavWrapper>
+      <UserSportFavLogoWrapper height={12} width={52} />
+      <UserSportFavStar />
+      {
+        map(userFavorites, (item) => (
+          <UserSportFavItemLogoWrapper key={`${item.type}_${item.sport}_${item.id}`}>
+            <UserSportFavXWrapper
+              onClick={() => addRemoveFavorite({
+                action: 2,
+                id: item.id,
+                sport: item.sport,
+                type: item.type,
+              })}
+            />
+            <TooltipBlock
+              countryName={item.countryName}
+              teamName={item.name}
+              playerTeamName={item.teamName}
+              playerFirstName={item.firstname}
+              playerLastName={item.lastname}
+              sport={item.sport}
+            />
+            <StyledLink to={item.profileUrl} target='_blank'>
+              <UserSportFavImgWrapper
+                src={item.profileLogo}
+                alt={item.name}
+                onError={(e) => handleImageError({
+                  e,
+                  sport: item.sport,
+                  type: item.type,
+                })}
+              />
+            </StyledLink>
+          </UserSportFavItemLogoWrapper>
+        ))
+      }
+    </UserSportFavWrapper>
+  )
+}

src/features/UserSportFav/TooltipBlock/hooks/index.tsx

@@ -1,27 +0,0 @@
-import { SPORT_COLORS } from 'config'
-
-export const getSportName = (sport: number, suffix: string): string => {
-  switch (sport) {
-    case 1:
-      return suffix === 'eng' ? 'Football' : 'Футбол'
-    case 2:
-      return suffix === 'eng' ? 'Hockey' : 'Хоккей'
-    case 3:
-      return suffix === 'eng' ? 'Basketball' : 'Баскетбол'
-    default:
-      return ''
-  }
-}
-
-export const getSportColor = (sport: number): string => {
-  switch (sport) {
-    case 1:
-      return SPORT_COLORS.football
-    case 2:
-      return SPORT_COLORS.hockey
-    case 3:
-      return SPORT_COLORS.basketball
-    default:
-      return ''
-  }
-}

src/features/UserSportFav/hooks/index.tsx

@@ -1,132 +0,0 @@
-import {
-  useEffect,
-  useState,
-  useMemo,
-} from 'react'
-
-import map from 'lodash/map'
-
-import {
-  LOGOS_URLS,
-  FAV_SPORT_URLS,
-} from 'config'
-import {
-  SPORT_TYPES,
-  DATA_TYPES,
-} from 'helpers'
-import {
-  modifyUserSportFavs,
-  ModifyUserSportFavsArgs,
-  getUserSportFavs,
-  UserSportFavItem,
-} from 'requests'
-import { useLexicsStore } from 'features/LexicsStore'
-
-type TNames = 'name_eng' | 'name_rus'
-type TShortNames = 'short_name_eng' | 'short_name_rus'
-type TFirstNames = 'firstname_eng' | 'firstname_rus'
-type TLastNames = 'lastname_eng' | 'firstname_rus'
-type TNickNames = 'nickname_eng' | 'nickname_rus'
-
-export type TMemoizedUserSportFavItem = {
-  countryName?: string,
-  firstname?: string,
-  id: number,
-  lastname?: string,
-  name?: string,
-  nickname?: string,
-  shortName?: string,
-  sport: number,
-  teamName?: string,
-  type: number,
-}
-
-type TMakeUrlArgs = {
-  id: number,
-  sport: number,
-  type: number,
-}
-
-export const useUserSportFavs = () => {
-  const { suffix } = useLexicsStore()
-  const [userSportFavItems, setUserSportFavItems] = useState<Array<UserSportFavItem>>([])
-
-  const nameField = `name_${suffix}` as TNames
-  const shortNameField = `short_name_${suffix}` as TShortNames
-  const firtsNameField = `firstname_${suffix}` as TFirstNames
-  const lastNameField = `lastname_${suffix}` as TLastNames
-  const nickNameField = `nickname_${suffix}` as TNickNames
-
-  useEffect(() => {
-    getUserSportFavs().then(setUserSportFavItems)
-  }, [])
-
-  const addRemoveSportFav = ({
-    action,
-    id,
-    sport,
-    type,
-  }: ModifyUserSportFavsArgs) => {
-    // при добавлении дубликата userSportFavItem back возвращает {}
-    modifyUserSportFavs({
-      action,
-      id,
-      sport,
-      type,
-    }).then((userSportFavs) => Array.isArray(userSportFavs) && setUserSportFavItems(userSportFavs))
-  }
-
-  const memoizedUserSportFavItems = useMemo(() => map(userSportFavItems, (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],
-    shortName: item.info[shortNameField],
-    sport: item.sport,
-    teamName: item.info.team?.[nameField],
-    type: item.type,
-  })),
-  [
-    firtsNameField,
-    lastNameField,
-    userSportFavItems,
-    nameField,
-    nickNameField,
-    shortNameField,
-  ])
-
-  return {
-    addRemoveSportFav,
-    userSportFavItems: memoizedUserSportFavItems,
-  }
-}
-
-export const makePicUrl = (arg: TMakeUrlArgs) => (
-  // @ts-expect-error
-  `${LOGOS_URLS[SPORT_TYPES[arg.sport]][DATA_TYPES[arg.type]]}/${arg.id}.png`
-)
-
-export const makeProfileUrl = (arg: TMakeUrlArgs) => (
-  // @ts-expect-error
-  `${FAV_SPORT_URLS[SPORT_TYPES[arg.sport]][DATA_TYPES[arg.type]]}/${arg.id}`
-)
-
-export const userSportFavs = (
-  userSportFavItems: Array<TMemoizedUserSportFavItem>,
-) => userSportFavItems?.length > 0 && map(
-  userSportFavItems, (fav) => ({
-    ...fav,
-    pic_url: makePicUrl({
-      id: fav.id,
-      sport: fav.sport,
-      type: fav.type,
-    }),
-    profile_url: makeProfileUrl({
-      id: fav.id,
-      sport: fav.sport,
-      type: fav.type,
-    }),
-  }),
-)

src/features/UserSportFav/index.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-
-import map from 'lodash/map'
-
-import { useLexicsStore } from 'features/LexicsStore'
-import { handleImageError } from 'helpers'
-
-import {
-  useUserSportFavs,
-  userSportFavs,
-} from './hooks'
-import { TooltipBlock } from './TooltipBlock'
-import {
-  StyledLink,
-  UserSportFavItemLogoWrapper,
-  UserSportFavXWrapper,
-  UserSportFavImgWrapper,
-  UserSportFavStar,
-  UserSportFavLogoWrapper,
-  UserSportFavWrapper,
-} from './styled'
-
-export const UserSportFav = () => {
-  const { addRemoveSportFav, userSportFavItems } = useUserSportFavs()
-
-  const { suffix } = useLexicsStore()
-
-  const userSportFavList = userSportFavs(userSportFavItems)
-
-  return (
-    <UserSportFavWrapper>
-      <UserSportFavLogoWrapper height={12} width={52} />
-      <UserSportFavStar />
-      {userSportFavList && map(userSportFavList, (item) => (
-        <UserSportFavItemLogoWrapper key={`${item.type}_${item.sport}_${item.id}`}>
-          <UserSportFavXWrapper
-            onClick={() => addRemoveSportFav({
-              action: 2,
-              id: item.id,
-              sport: item.sport,
-              type: item.type,
-            })}
-          />
-          <TooltipBlock
-            countryName={item.countryName}
-            teamName={item.name}
-            playerTeamName={item.teamName}
-            playerFirstName={item.firstname}
-            playerLastName={item.lastname}
-            sport={item.sport}
-            suffix={suffix}
-          />
-          <StyledLink to={item.profile_url} target='_blank'>
-            <UserSportFavImgWrapper
-              src={item.pic_url}
-              alt={item.name}
-              onError={(e) => handleImageError({
-                e,
-                sport: item.sport,
-                type: item.type,
-              })}
-            />
-          </StyledLink>
-        </UserSportFavItemLogoWrapper>
-      ))}
-    </UserSportFavWrapper>
-  )
-}

src/helpers/getLogo/__tests__/index.tsx

@@ -1,23 +0,0 @@
-import { getLogo } from '..'
-
-describe('getLogo helper', () => {
-  it('returns logo url', () => {
-    expect(getLogo({
-      id: 1,
-      sportType: 'football',
-      type: 'players',
-    })).toBe('https://instatscout.com/images/players/180/1.png')
-
-    expect(getLogo({
-      id: 1,
-      sportType: 'basketball',
-      type: 'teams',
-    })).toBe('https://basketball.instatscout.com/images/teams/180/1.png')
-
-    expect(getLogo({
-      id: 1,
-      sportType: 'hockey',
-      type: 'tournaments',
-    })).toBe('https://hockey.instatscout.com/images/tournaments/180/1.png')
-  })
-})

src/helpers/getLogo/index.tsx

@@ -1,23 +0,0 @@
-import type { SportType } from 'features/Search/config'
-
-const IMAGES_URLS = {
-  basketball: 'https://basketball.instatscout.com/images',
-  football: 'https://instatscout.com/images',
-  hockey: 'https://hockey.instatscout.com/images',
-}
-
-type GetLogoArgs = {
-  id: number,
-  size?: number,
-  sportType: SportType,
-  type: 'players' | 'teams' | 'tournaments',
-}
-
-export const getLogo = ({
-  id,
-  size = 180,
-  sportType,
-  type,
-}: GetLogoArgs) => (
-  `${IMAGES_URLS[sportType]}/${type}/${size}/${id}.png`
-)

src/helpers/getProfileFallbackLogo/index.tsx

@@ -0,0 +1,33 @@
+import { SportTypes, ProfileTypes } from 'config'
+
+const FALLBACK_LOGOS = {
+  [SportTypes.BASKETBALL]: {
+    [ProfileTypes.PLAYERS]: 'https://basketball.instatscout.com/images/player-no-photo.png',
+    [ProfileTypes.TEAMS]: 'https://basketball.instatscout.com/images/team-no-photo.png',
+    [ProfileTypes.TOURNAMENTS]: 'https://basketball.instatscout.com/images/tournaments/180/no-photo.png',
+  },
+
+  [SportTypes.FOOTBALL]: {
+    [ProfileTypes.PLAYERS]: 'https://football.instatscout.com/images/player-no-photo.png',
+    [ProfileTypes.TEAMS]: 'https://football.instatscout.com/images/team-no-photo.png',
+    [ProfileTypes.TOURNAMENTS]: 'https://football.instatscout.com/images/tournament-no-photo.png',
+  },
+
+  [SportTypes.HOCKEY]: {
+    [ProfileTypes.PLAYERS]: 'https://hockey.instatscout.com/images/player-no-photo.png',
+    [ProfileTypes.TEAMS]: 'https://hockey.instatscout.com/images/team-no-photo.png',
+    [ProfileTypes.TOURNAMENTS]: 'https://hockey.instatscout.com/images/tournaments/180/no-photo.png',
+  },
+}
+
+type Args = {
+  profileType: ProfileTypes,
+  sportType: SportTypes,
+}
+
+export const getProfileFallbackLogo = ({
+  profileType,
+  sportType,
+}: Args) => (
+  FALLBACK_LOGOS[sportType][profileType]
+)

src/helpers/getProfileLogo/__tests__/index.tsx

@@ -0,0 +1,25 @@
+import { SportTypes, ProfileTypes } from 'config'
+
+import { getProfileLogo } from '..'
+
+describe('getLogo helper', () => {
+  it('returns logo url', () => {
+    expect(getProfileLogo({
+      id: 1,
+      profileType: ProfileTypes.PLAYERS,
+      sportType: SportTypes.FOOTBALL,
+    })).toBe('https://instatscout.com/images/players/180/1.png')
+
+    expect(getProfileLogo({
+      id: 1,
+      profileType: ProfileTypes.TEAMS,
+      sportType: SportTypes.BASKETBALL,
+    })).toBe('https://basketball.instatscout.com/images/teams/180/1.png')
+
+    expect(getProfileLogo({
+      id: 1,
+      profileType: ProfileTypes.TOURNAMENTS,
+      sportType: SportTypes.HOCKEY,
+    })).toBe('https://hockey.instatscout.com/images/tournaments/180/1.png')
+  })
+})

src/helpers/getProfileLogo/index.tsx

@@ -0,0 +1,27 @@
+import {
+  SportTypes,
+  ProfileTypes,
+  PROFILE_NAMES,
+} from 'config'
+
+const IMAGES_URLS = {
+  [SportTypes.BASKETBALL]: 'https://basketball.instatscout.com/images',
+  [SportTypes.FOOTBALL]: 'https://instatscout.com/images',
+  [SportTypes.HOCKEY]: 'https://hockey.instatscout.com/images',
+}
+
+type GetLogoArgs = {
+  id: number,
+  profileType: ProfileTypes,
+  size?: number,
+  sportType: SportTypes,
+}
+
+export const getProfileLogo = ({
+  id,
+  profileType,
+  size = 180,
+  sportType,
+}: GetLogoArgs) => (
+  `${IMAGES_URLS[sportType]}/${PROFILE_NAMES[profileType]}/${size}/${id}.png`
+)

src/helpers/getProfileUrl/index.tsx

@@ -0,0 +1,20 @@
+import {
+  SportTypes,
+  ProfileTypes,
+  SPORT_NAMES,
+  PROFILE_NAMES,
+} from 'config'
+
+type Args = {
+  id: number,
+  profileType: ProfileTypes,
+  sportType: SportTypes,
+}
+
+export const getProfileUrl = ({
+  id,
+  profileType,
+  sportType,
+}: Args) => (
+  `${SPORT_NAMES[sportType]}/${PROFILE_NAMES[profileType]}/${id}`
+)

src/helpers/getSportColor/index.tsx

@@ -0,0 +1,9 @@
+import { SportTypes } from 'config'
+
+const colors = {
+  [SportTypes.BASKETBALL]: '#f1903b',
+  [SportTypes.FOOTBALL]: '#00a435',
+  [SportTypes.HOCKEY]: '#5eb1ff',
+}
+
+export const getSportColor = (sport: SportTypes) => colors[sport]

src/helpers/getSportLexic/index.tsx

@@ -0,0 +1,9 @@
+import { SportTypes } from 'config'
+
+const lexics = {
+  [SportTypes.FOOTBALL]: 'football',
+  [SportTypes.HOCKEY]: 'hockey',
+  [SportTypes.BASKETBALL]: 'basketball',
+}
+
+export const getSportLexic = (sport: SportTypes) => lexics[sport]

src/helpers/handleImg/index.tsx

@@ -1,29 +1,23 @@
 import { BaseSyntheticEvent } from 'react'
 
-import { LOGOS_FALLBACKS } from 'config'
+import {
+  SportTypes,
+  ProfileTypes,
+} from 'config'
+import { getProfileFallbackLogo } from 'helpers/getProfileFallbackLogo'
 
-export type imageErrorArgs = {
+type Args = {
   e: BaseSyntheticEvent,
-  sport: number,
+  sport: SportTypes,
-  type: number,
+  type: ProfileTypes,
 }
 
-export const SPORT_TYPES = {
+export const handleImageError = (arg: Args): void => {
-  1: 'football',
-  2: 'hockey',
-  3: 'basketball',
-} as const
-
-export const DATA_TYPES = {
-  1: 'tournaments',
-  2: 'teams',
-  3: 'players',
-} as const
-
-export const handleImageError = (arg: imageErrorArgs): void => {
   // eslint-disable-next-line no-param-reassign
   arg.e.target.onError = ''
-  // @ts-expect-error
   // eslint-disable-next-line no-param-reassign
-  arg.e.target.src = LOGOS_FALLBACKS[SPORT_TYPES[arg.sport]][DATA_TYPES[arg.type]]
+  arg.e.target.src = getProfileFallbackLogo({
+    profileType: arg.type,
+    sportType: arg.sport,
+  })
 }

src/helpers/index.tsx

@@ -1,5 +1,9 @@
 export * from './callApi'
 export * from './callApi/getResponseData'
 export * from './token'
-export * from './getLogo'
+export * from './getProfileLogo'
+export * from './getProfileFallbackLogo'
+export * from './getProfileUrl'
+export * from './getSportColor'
+export * from './getSportLexic'
 export * from './handleImg'

src/requests/getMatches.tsx

@@ -1,4 +1,8 @@
-import { DATA_URL, PROCEDURES } from 'config'
+import {
+  DATA_URL,
+  PROCEDURES,
+  SportTypes,
+} from 'config'
 import { callApi, getResponseData } from 'helpers'
 
 import { MatchStatuses } from 'features/HeaderFilters'
@@ -48,7 +52,7 @@ export type Team = {
 type Args = {
   date: string,
   matchStatus: MatchStatuses,
-  sportType: number,
+  sportType: SportTypes,
   tournamentId: number,
 }
 

src/requests/getSearchItems.tsx

@@ -1,12 +1,14 @@
-import { DATA_URL, PROCEDURES } from 'config'
+import {
+  DATA_URL,
+  PROCEDURES,
+  SportTypes,
+} from 'config'
 import { callApi, getResponseData } from 'helpers'
 
 const proc = PROCEDURES.get_players_teams_tournaments
 
 type Gender = 1 | 2
 
-type Sport = 1 | 2 | 3
-
 type Player = {
   firstname_eng: string,
   firstname_rus: string,
@@ -14,7 +16,7 @@ type Player = {
   id: number,
   lastname_eng: string,
   lastname_rus: string,
-  sport: Sport,
+  sport: SportTypes,
   team?: {
     id: number,
     name_eng: string,
@@ -32,7 +34,7 @@ type Team = {
   id: number,
   name_eng: string,
   name_rus: string,
-  sport: Sport,
+  sport: SportTypes,
 }
 
 type Tournament = {
@@ -45,7 +47,7 @@ type Tournament = {
   id: number,
   name_eng: string,
   name_rus: string,
-  sport: Sport,
+  sport: SportTypes,
 }
 
 export type SearchItems = {

src/requests/getSportTournaments.tsx

@@ -1,6 +1,9 @@
-import { DATA_URL, PROCEDURES } from 'config'
+import {
+  DATA_URL,
+  PROCEDURES,
+  SportTypes,
+} from 'config'
 import { callApi, getResponseData } from 'helpers'
-import { SportTypes } from 'features/HeaderFilters'
 
 const proc = PROCEDURES.get_tournament_list
 

src/requests/getUserSportFavs.tsx

@@ -1,44 +1,46 @@
-import { DATA_URL, PROCEDURES } from 'config'
+import {
+  DATA_URL,
+  PROCEDURES,
+  SportTypes,
+  ProfileTypes,
+} from 'config'
 import { callApi, getResponseData } from 'helpers'
 
 const proc = PROCEDURES.get_user_favorites
 
-export type UserSportFavItem = {
+type ObjectWithName = {
+  name_eng: string,
+  name_rus: string,
+}
+
+type Info = {
+  country?: ObjectWithName,
+  date?: string,
+  firstname_eng?: string,
+  firstname_rus?: string,
+  lastname_eng?: string,
+  lastname_rus?: string,
+  name_eng?: string,
+  name_rus?: string,
+  nickname_eng?: string,
+  nickname_rus?: string,
+  short_name_eng?: string,
+  short_name_rus?: string,
+  team?: ObjectWithName,
+  team1?: ObjectWithName,
+  team2?: ObjectWithName,
+}
+
+type UserFavorite = {
   id: number,
-  info: {
+  info: Info,
-    country?: {
+  sport: SportTypes,
-      name_eng: string,
+  type: ProfileTypes,
-      name_rus: string,
-    },
-    date?: string,
-    firstname_eng?: string,
-    firstname_rus?: string,
-    lastname_eng?: string,
-    lastname_rus?: string,
-    name_eng?: string,
-    name_rus?: string,
-    nickname_eng?: string,
-    nickname_rus?: string,
-    short_name_eng?: string,
-    short_name_rus?: string,
-    team?: {
-      name_eng: string,
-      name_rus: string,
-    },
-    team1?: {
-      name_eng: string,
-      name_rus: string,
-    },
-    team2?: {
-      name_eng: string,
-      name_rus: string,
-    },
-  },
-  sport: number,
-  type: number,
 }
 
-export const getUserSportFavs = (): Promise<Array<UserSportFavItem>> => {
+export type UserFavorites = Array<UserFavorite>
+
+export const getUserFavorites = (): Promise<UserFavorites> => {
   const config = {
     body: {
       params: {},

src/requests/modifyUserSportFavs.tsx

@@ -1,23 +1,31 @@
-import { DATA_URL, PROCEDURES } from 'config'
+import isArray from 'lodash/isArray'
+
+import {
+  DATA_URL,
+  PROCEDURES,
+  SportTypes,
+  ProfileTypes,
+} from 'config'
 import { callApi, getResponseData } from 'helpers'
-import { UserSportFavItem } from './getUserSportFavs'
+
+import { UserFavorites } from './getUserSportFavs'
 
 const proc = PROCEDURES.save_user_favorite
 
-export type ModifyUserSportFavsArgs = {
+type Args = {
   action: number,
   id: number,
-  sport: number,
+  sport: SportTypes,
-  type: number,
+  type: ProfileTypes,
 }
 
-// при добавлении дубликата userSportFavItem back возвращает {}
+// при добавлении дубликата back возвращает {}
-export const modifyUserSportFavs = ({
+export const modifyUserFavorites = async ({
   action,
   id,
   sport,
   type,
-}: ModifyUserSportFavsArgs): Promise<Array<UserSportFavItem> | {}> => {
+}: Args): Promise<UserFavorites> => {
   const config = {
     body: {
       params: {
@@ -30,8 +38,10 @@ export const modifyUserSportFavs = ({
     },
   }
 
-  return callApi({
+  const data = await callApi({
     config,
     url: DATA_URL,
   }).then(getResponseData(proc))
+
+  return isArray(data) ? data : []
 }