fix($444): remove any request for getSportList and add lexics from sport to lexic store

src/config/lexics/indexLexics.tsx

@@ -1,8 +1,8 @@
 import { paymentLexics } from './payment'
-import { proceduresLexics } from './procedures'
 import { publicLexics } from './public'
 import { highlightsPageLexic } from './highlightsPageLexic'
 import { mailingsLexics } from './mailings'
+import { sportsLexic } from './sportsLexic'
 
 const matchPopupLexics = {
   actions: 1020,
@@ -194,11 +194,11 @@ export const indexLexics = {
   ...highlightsPageLexic,
   ...mailingsLexics,
   ...preferencesPopupLexics,
-  ...proceduresLexics,
   ...matchPopupLexics,
   ...newDevicePopup,
   ...buyMatchPopupLexics,
   ...publicLexics,
   ...paymentLexics,
+  ...sportsLexic,
   ...sportsPopup,
 }

src/config/lexics/procedures.tsx

@@ -1,9 +0,0 @@
-export const proceduresLexics = {
-  3556: 3556,
-  6959: 6959,
-  9759: 9759,
-  9760: 9760,
-  9761: 9761,
-  12980: 12980,
-  20091: 20091,
-}

src/config/lexics/sportsLexic.tsx

@@ -0,0 +1,18 @@
+export const sportsLexic = {
+  1: 1,
+  18: 18,
+  3556: 3556,
+  6959: 6959,
+  9759: 9759,
+  9760: 9760,
+  9761: 9761,
+  12980: 12980,
+  17670: 17670,
+  19816: 19816,
+  19956: 19956,
+  19957: 19957,
+  20000: 20000,
+  20051: 20051,
+  20091: 20091,
+}
+// TODO: убрать хардкод и брать лексики при загрузке из локалсторадж

src/features/App/AuthenticatedApp.tsx

@@ -43,8 +43,8 @@ const Mailings = lazy(() => import('pages/Mailings'))
 const FailedPaymeePage = lazy(() => import('pages/FailedPaymeePage'))
 
 export const AuthenticatedApp = () => {
-  useLexicsConfig(indexLexics)
   useSportList()
+  useLexicsConfig(indexLexics)
   return (
     <StripeElements>
       <NewDevicePopup />

src/features/App/hooks.tsx

@@ -15,7 +15,7 @@ export const useSportList = () => {
   const [sportsList, setSportsList] = useLocalStore<SportsType>({
     defaultValue: {} as Sport,
     key: querieKeys.sportsList,
-    validator: (val) => !!val,
+    validator: Boolean,
   })
 
   useQuery({

src/features/Combobox/styled.tsx

@@ -36,6 +36,7 @@ export const ListOption = styled.li.attrs(() => ({
   padding-left: 24px;
   color: ${({ theme }) => theme.colors.white70};
   background-color: transparent;
+  text-transform: capitalize;
 
   ${({ isHighlighted }) => isHighlighted && css`
     color: ${({ theme }) => theme.colors.white};

src/features/Common/Input/styled.tsx

@@ -129,6 +129,8 @@ const inputStyles = css<InputProps>`
 export const InputStyled = styled.input<InputProps>`
   ${inputStyles}
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  text-transform: capitalize;
+  
   ::placeholder {
     opacity: 0;
   }

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

@@ -16,6 +16,7 @@ import { getSportLexic } from 'helpers'
 
 import { querieKeys } from 'config'
 
+import { getLocalStorageItem } from 'helpers/getLocalStorage'
 import { filterKeys } from '../config'
 import { isValidDate } from '../helpers/isValidDate'
 import type { Match } from '../../../Matches'
@@ -28,7 +29,7 @@ export const useFilters = () => {
     key: filterKeys.DATE,
     validator: isValidDate,
   })
-  const sportList = JSON.parse(localStorage.getItem(querieKeys.sportsList)!)
+  const sportList = getLocalStorageItem(querieKeys.sportsList)
 
   const [selectedSport, setSelectedSport] = useState(['all_sports'])
   const [selectedLeague, setSelectedLeague] = useState<Array<string | number>>(['all_competitions'])

src/features/LexicsStore/helpers/index.tsx

@@ -7,6 +7,9 @@ import map from 'lodash/map'
 import type { Translations } from 'requests'
 
 import type { LexicsId, LexicsConfig } from '../types'
+import { getLocalStorageItem } from '../../../helpers/getLocalStorage'
+import { querieKeys } from '../../../config'
+import { Sport } from '../../../requests/getSportList'
 
 export const getSuffix = (lang: string) => (
   lang === 'ru' ? 'rus' : 'eng'
@@ -47,3 +50,14 @@ export const mapTranslationsToLocalKeys = (
     {} as Translations,
   )
 }
+
+export const getLexicFromSport = () => {
+  const sportList = getLocalStorageItem(querieKeys.sportsList)
+  const sportLexics = Object.values(sportList as Array<Sport>)
+    .reduce((acc:LexicsConfig, cur: Sport) => {
+      acc[cur?.lexic] = cur?.lexic
+      return acc
+    }, {})
+
+  return sportLexics
+}

src/features/LexicsStore/index.tsx

@@ -6,8 +6,11 @@ import {
 } from 'react'
 
 import type { LexicsConfig, LexicsId } from './types'
+
 import { useLexics } from './hooks'
 
+import { getLexicFromSport } from './helpers'
+
 type Context = ReturnType<typeof useLexics>
 type Props = {
   children: ReactNode,
@@ -27,6 +30,6 @@ export const useLexicsConfig = (config: Array<LexicsId> | LexicsConfig) => {
   const { addLexicsConfig } = useLexicsStore()
 
   useEffect(() => {
-    addLexicsConfig(config)
+    addLexicsConfig({ ...config, ...getLexicFromSport() })
   }, [addLexicsConfig, config])
 }

src/features/PreferencesPopup/store/hooks/useSports.tsx

@@ -5,7 +5,11 @@ import without from 'lodash/without'
 import isEmpty from 'lodash/isEmpty'
 
 import type { SportList } from 'requests/getSportList'
-import { getSportList } from 'requests/getSportList'
+import { Sport } from 'requests/getSportList'
+
+import { querieKeys } from 'config'
+
+import { getLocalStorageItem } from 'helpers/getLocalStorage'
 
 export const useSports = () => {
   const [sports, setSports] = useState<SportList>([])
@@ -13,7 +17,9 @@ export const useSports = () => {
 
   const fetchInitialSports = useCallback(() => {
     if (isEmpty(sports)) {
-      getSportList().then(setSports)
+      const sportsList = getLocalStorageItem(querieKeys.sportsList)
+      const sportsArray = Object.values(sportsList as Array<Sport>)
+      setSports(sportsArray)
     }
   }, [sports])
 

src/features/ProfileLink/helpers/index.tsx

@@ -4,6 +4,7 @@ import {
   PROFILE_NAMES,
   querieKeys,
 } from 'config'
+import { getLocalStorageItem } from '../../../helpers/getLocalStorage'
 
 type Args = {
   id: number,
@@ -16,7 +17,7 @@ export const getProfileUrl = ({
   profileType,
   sportType,
 }: Args) => {
-  const sportList = JSON.parse(localStorage.getItem(querieKeys.sportsList)!)
+  const sportList = getLocalStorageItem(querieKeys.sportsList)
 
   return (
     sportList && `/${sportList[sportType]?.name_eng}/${PROFILE_NAMES[profileType]}/${id}`

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

@@ -30,6 +30,7 @@ export const SelectSportPopup = ({
 }: Props) => {
   const sportNames = sportIds?.map((id) => String(getSportLexic(Number(id))))
   sportNames?.unshift('all_sports')
+
   // TODO: переделать на вариант без указания all_sports
   return (
     <>

src/helpers/getLocalStorage/index.tsx

@@ -1,6 +1,6 @@
 export const getLocalStorageItem = (key: string) => {
-  const item = localStorage.getItem(key)!
-  return JSON.parse(item)
+  const item = localStorage.getItem(key)
+  return item ? JSON.parse(item) : ''
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/pages/HighlightsPage/components/FormHighlights/hooks.tsx

@@ -18,7 +18,7 @@ import { useUserFavoritesStore } from 'features/UserFavorites/store'
 
 import type { Match } from 'requests/getMatches/types'
 
-import { getSportList } from 'requests/getSportList'
+import type { Sport } from 'requests/getSportList'
 import { getSounds } from 'requests/getSounds'
 import {
   getSportTeams,
@@ -29,6 +29,8 @@ import { getPlayerMatches } from 'requests/getMatches/getPlayerMatches'
 import { getTeamPlayers, Player } from 'requests/getTeamPlayers'
 import { getSearchItems, PlayerTypeFromSearch } from 'requests'
 
+import { getLocalStorageItem } from 'helpers/getLocalStorage'
+import { querieKeys } from 'config'
 import {
   checkedMatches,
   playerMatchesState,
@@ -36,14 +38,7 @@ import {
   fetchingMatches,
 } from '../../storeHighlightsAtoms'
 
-export type SportType = {
-  id: number,
-  lexic: number,
-  name_eng: string,
-  name_rus: string,
-}
-
-type SportTypeName = SportType & {
+type SportTypeName = Sport & {
   disabled?: boolean,
   name: string,
 }
@@ -263,15 +258,19 @@ export const useHighlightsForm = () => {
   }
 
   useEffect(() => {
-    getSportList()
-      .then((res) => setSports(
-        res
-          ?.filter(({ id }: SportType) => id === 3 || id === 1)
-          .map((sport: SportType) => ({
-            ...sport,
-            name: sport?.name_eng,
-          })),
-      ))
+    const sportsList = getLocalStorageItem(querieKeys.sportsList)
+    const sportsArray = Object.values(sportsList as Array<Sport>)
+      ?.reduce((acc, cur) => {
+        if ([1, 3].includes(cur.id)) {
+          return [
+            ...acc, {
+              ...cur,
+              name: cur.name_eng,
+            }]
+        }
+        return acc
+      }, [] as Array<SportTypeName>)
+    setSports(sportsArray)
 
     getSounds()
       .then((state) => {