fix(#481): get icon name from sport type (#188)

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'
                   >

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;
   }

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> => {