fix(#2341): fix name for sport and not multiple choice sports

src/features/SportsFilter/components/SelectSport/index.tsx

@@ -1,4 +1,5 @@
 import { T9n } from 'features/T9n'
+import type { SportsType } from 'features/SportsFilter'
 
 import { ScSportsFilter, ScArrow } from './styled'
 
@@ -6,15 +7,17 @@ type SportsFilterProps = {
   onModalOpen: () => void,
   open: boolean,
   sport: Array<string>,
+  sports: SportsType,
 }
 
 export const SelectSport = ({
   onModalOpen,
   open,
   sport,
+  sports,
 }: SportsFilterProps) => (
   <ScSportsFilter onClick={onModalOpen} opacity={sport[0] === 'all_sports' ? 0.5 : 1}>
-    <T9n t={sport[0]} />
+    <T9n t={sports[sport[0] as keyof typeof sports]} />
     &nbsp;
     {sport.length > 1 ? `+ ${sport.length - 1}` : ''}
     <ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />

src/features/SportsFilter/components/SelectSportPopup/index.tsx

@@ -1,4 +1,6 @@
 import { T9n } from 'features/T9n'
+import type { SportsType } from 'features/SportsFilter'
+
 import { getSportLexic } from 'helpers/getSportLexic'
 
 import {
@@ -10,21 +12,13 @@ import {
   ScSportName,
 } from './styled'
 
-const sports = {
-  all_sports: 'all_sports',
-  basketball: 'basketball',
-  football: 'football_popup',
-  handball: 'handball',
-  hockey: 'hockey_popup',
-  volleyball: 'volleyball',
-}
-
 type Props = {
   isOpen: boolean,
   onModalClose: () => void,
   onSportClick: (sport: string) => void,
   selectedSport: Array<string>,
   sportIds: Array<string>,
+  sports: SportsType,
 }
 export const SelectSportPopup = ({
   isOpen,
@@ -32,6 +26,7 @@ export const SelectSportPopup = ({
   onSportClick,
   selectedSport,
   sportIds,
+  sports,
 }: Props) => {
   const sportNames = sportIds
   && Array.from(sportIds)

src/features/SportsFilter/index.tsx

@@ -5,6 +5,17 @@ import { useHeaderFiltersStore } from 'features/HeaderFilters'
 import { SelectSport } from './components/SelectSport'
 import { SelectSportPopup } from './components/SelectSportPopup'
 
+const sports = {
+  all_sports: 'all_sports',
+  basketball: 'basketball',
+  football: 'football_popup',
+  handball: 'handball',
+  hockey: 'hockey_popup',
+  volleyball: 'volleyball',
+}
+
+export type SportsType = typeof sports
+
 export const SportsFilter = () => {
   const {
     isShowTournament,
@@ -19,22 +30,7 @@ export const SportsFilter = () => {
   const onSportClick = (sport: string) => {
     if (!isShowTournament) return
 
-    if (sport === 'all_sports') {
-      setSelectedLeague(['all_competitions'])
-      setSelectedSport([sport])
-    }
-
-    if (selectedSport.indexOf(sport) === -1) {
-      setSelectedSport((prev) => [
-        ...prev.filter((item) => item !== 'all_sports'),
-        sport,
-      ])
-    } else {
-      setSelectedSport((prev) => [
-        ...prev.filter((item) => item !== 'all_sports'
-        && item !== sport),
-      ])
-    }
+    setSelectedSport([sport])
     setSelectedLeague(['all_competitions'])
     setIsShowTournament(true)
     setIsOpen(false)
@@ -58,6 +54,7 @@ export const SportsFilter = () => {
         onModalOpen={onModalOpen}
         open={isOpen}
         sport={selectedSport}
+        sports={sports}
       />
       <SelectSportPopup
         onSportClick={onSportClick}
@@ -65,6 +62,7 @@ export const SportsFilter = () => {
         onModalClose={onModalClose}
         selectedSport={selectedSport}
         sportIds={sportIds}
+        sports={sports}
       />
     </>
   )