From 01f254b9f32676c224d72064fdea80b8612936eb Mon Sep 17 00:00:00 2001
From: Mirlan <m.maksitaliev@gmail.com>
Date: Wed, 21 Oct 2020 20:03:51 +0600
Subject: [PATCH] fix(#481): get icon name from sport type (#188)

---
 .../components/SportTypeFilter/index.tsx            |  3 +--
 .../components/SportTypeFilter/styled.tsx           | 13 ++++++++++---
 src/requests/getSportList.tsx                       |  9 ++++++---
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/features/HeaderFilters/components/SportTypeFilter/index.tsx b/src/features/HeaderFilters/components/SportTypeFilter/index.tsx
index 08c35e36..506f5864 100644
--- a/src/features/HeaderFilters/components/SportTypeFilter/index.tsx
+++ b/src/features/HeaderFilters/components/SportTypeFilter/index.tsx
@@ -52,11 +52,10 @@ export const SportTypeFilter = () => {
                 map(sportList, ({
                   id,
                   lexic,
-                  name,
                 }) => (
                   <CustomOption
                     key={id}
-                    image={name}
+                    sport={id}
                     onClick={() => onSelect(id)}
                     role='option'
                   >
diff --git a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx b/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
index 7877645b..eb398abb 100644
--- a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
@@ -1,6 +1,9 @@
 import styled from 'styled-components/macro'
 
-import { devices } from 'config/devices'
+import toLower from 'lodash/toLower'
+
+import { devices, SportTypes } from 'config'
+
 import { DropdownButton } from '../TournamentFilter/styled'
 
 export const Wrapper = styled.div`
@@ -36,7 +39,11 @@ export const SportList = styled.ul`
   }
 `
 
-export const CustomOption = styled.li<{ image: string }>`
+type CustomOptionProps = {
+  sport: SportTypes,
+}
+
+export const CustomOption = styled.li<CustomOptionProps>`
   width: 100%;
   height: 48px;
   display: flex;
@@ -50,7 +57,7 @@ export const CustomOption = styled.li<{ image: string }>`
     content: '';
     width: 58px;
     height: 100%;
-    background-image: url(/images/${({ image }) => `${image}.svg`});
+    background-image: ${({ sport }) => `url(/images/${toLower(SportTypes[sport])}.svg)`};
     background-position: center;
     background-repeat: no-repeat;
   }
diff --git a/src/requests/getSportList.tsx b/src/requests/getSportList.tsx
index 56d5c30f..7778907f 100644
--- a/src/requests/getSportList.tsx
+++ b/src/requests/getSportList.tsx
@@ -1,12 +1,15 @@
-import { DATA_URL, PROCEDURES } from 'config'
+import {
+  DATA_URL,
+  PROCEDURES,
+  SportTypes,
+} from 'config'
 import { callApi, getResponseData } from 'helpers'
 
 const proc = PROCEDURES.get_sport_list
 
 export type SportList = Array<{
-  id: number,
+  id: SportTypes,
   lexic: number,
-  name: string,
 }>
 
 export const getSportList = (): Promise<SportList> => {