feat(#465): display gender in search result (#167)

* feat(#465): display gender in search result

* refactor(#465): pr fix

src/config/lexics/indexLexics.tsx

@@ -12,6 +12,8 @@ export const indexLexics = {
   full_game: 13028,
   game_finished: 13026,
   game_time: 13029,
+  gender_female: 9648,
+  gender_male: 9647,
   goals: 13030,
   hide_score: 12982,
   highlights: 13033,

src/features/Gender/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import styled from 'styled-components/macro'
+
+import { Gender } from 'requests'
+
+import { T9n } from 'features/T9n'
+
+type Props = {
+  className?: string,
+  type: Gender,
+}
+
+const lexics = {
+  [Gender.MALE]: 'gender_male',
+  [Gender.FEMALE]: 'gender_female',
+}
+
+const GenderStyled = styled(T9n)<Props>`
+  ${({ type }) => (
+    type === Gender.MALE
+      ? 'color: #1D4289;'
+      : 'color: #8D2F2F;'
+  )}
+`
+
+export const GenderComponent = ({ className, type }: Props) => (
+  <GenderStyled
+    className={className}
+    type={type}
+    t={lexics[type]}
+  />
+)

src/features/ItemsList/index.tsx

@@ -4,6 +4,8 @@ import map from 'lodash/map'
 
 import { SportTypes } from 'config'
 
+import { Gender } from 'requests'
+
 import { SportName } from 'features/Common'
 
 import { useItemsList } from './hooks'
@@ -16,6 +18,7 @@ import {
   StyledLink,
   TeamOrCountry,
   Wrapper,
+  GenderComponent,
 } from './styled'
 
 type SearchItemsListProps = {
@@ -23,6 +26,7 @@ type SearchItemsListProps = {
   list: Array<{
     color: string,
     fallbackImage: string,
+    gender?: Gender,
     id: number,
     logo: string,
     name: string,
@@ -42,6 +46,7 @@ export const ItemsList = ({ close, list }: SearchItemsListProps) => {
     <Wrapper ref={ref}>
       {map(list, ({
         fallbackImage,
+        gender,
         id,
         logo,
         name,
@@ -62,6 +67,7 @@ export const ItemsList = ({ close, list }: SearchItemsListProps) => {
               <SportName sport={sportType} />
               <TeamOrCountry>{teamOrCountry}</TeamOrCountry>
             </ItemInfo>
+            {gender && <GenderComponent type={gender} /> }
           </StyledLink>
         </Item>
       ))}

src/features/ItemsList/styled.tsx

@@ -2,6 +2,8 @@ import { Link } from 'react-router-dom'
 
 import styled from 'styled-components/macro'
 
+import { GenderComponent as GenderBase } from 'features/Gender'
+
 export const Wrapper = styled.ul`
   margin: 0;
   padding: 0;
@@ -15,13 +17,14 @@ export const Item = styled.li`
 `
 
 export const StyledLink = styled(Link)`
+  position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   height: 56px;
   background-color: #666;
 
-  :focus-within, 
+  :focus-within,
   :hover {
     background-color: #999;
     outline: none;
@@ -29,6 +32,7 @@ export const StyledLink = styled(Link)`
 `
 
 export const ItemInfo = styled.div`
+  width: 76%;
   line-height: 17px;
 `
 
@@ -36,6 +40,9 @@ export const Name = styled.div`
   font-size: 16px;
   font-weight: bold;
   color: #ccc;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `
 
 export const TeamOrCountry = styled.span`
@@ -55,3 +62,15 @@ export const Logo = styled.img`
   width: 24px;
   height: 24px;
 `
+
+export const GenderComponent = styled(GenderBase)`
+  position: absolute;
+  top: 50%;
+  right: 24px;
+  display: inline-block;
+  width: 18px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  line-height: 21px;
+  text-align: center;
+`

src/features/LexicsStore/hooks/index.tsx

@@ -48,5 +48,5 @@ export const useLexics = () => {
     lang,
     suffix: getSuffix(lang),
     translate,
-  }
+  } as const
 }

src/features/Search/hooks/useNormalizedItems.tsx

@@ -40,6 +40,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
     return {
       color: getSportColor(sportType),
       fallbackImage,
+      gender: player.gender,
       id,
       logo,
       name: `${firstName} ${lastName}`,
@@ -73,6 +74,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
     return {
       color: getSportColor(sportType),
       fallbackImage,
+      gender: team.gender,
       id,
       logo,
       name,
@@ -106,6 +108,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
     return {
       color: getSportColor(sportType),
       fallbackImage,
+      gender: tournament.gender,
       id,
       logo,
       name,

src/requests/getSearchItems.tsx

@@ -7,7 +7,10 @@ import { callApi, getResponseData } from 'helpers'
 
 const proc = PROCEDURES.get_players_teams_tournaments
 
-type Gender = 1 | 2
+export enum Gender {
+  MALE = 1,
+  FEMALE = 2,
+}
 
 type Player = {
   firstname_eng: string,