From e43cbc2c025b52c6ee7f797fcabb10f180356275 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Mon, 27 Mar 2023 16:31:07 +0700 Subject: [PATCH] fix($444): remove any request for getSportList and add lexics from sport to lexic store --- src/config/lexics/indexLexics.tsx | 4 +-- src/config/lexics/procedures.tsx | 9 ----- src/config/lexics/sportsLexic.tsx | 18 ++++++++++ src/features/App/AuthenticatedApp.tsx | 2 +- src/features/App/hooks.tsx | 2 +- src/features/Combobox/styled.tsx | 1 + src/features/Common/Input/styled.tsx | 2 ++ .../HeaderFilters/store/hooks/index.tsx | 3 +- src/features/LexicsStore/helpers/index.tsx | 14 ++++++++ src/features/LexicsStore/index.tsx | 5 ++- .../store/hooks/useSports.tsx | 10 ++++-- src/features/ProfileLink/helpers/index.tsx | 3 +- .../components/SelectSportPopup/index.tsx | 1 + src/helpers/getLocalStorage/index.tsx | 4 +-- .../components/FormHighlights/hooks.tsx | 35 +++++++++---------- 15 files changed, 75 insertions(+), 38 deletions(-) delete mode 100644 src/config/lexics/procedures.tsx create mode 100644 src/config/lexics/sportsLexic.tsx diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 8ec44532..bb6aea9e 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/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, } diff --git a/src/config/lexics/procedures.tsx b/src/config/lexics/procedures.tsx deleted file mode 100644 index ced0faaa..00000000 --- a/src/config/lexics/procedures.tsx +++ /dev/null @@ -1,9 +0,0 @@ -export const proceduresLexics = { - 3556: 3556, - 6959: 6959, - 9759: 9759, - 9760: 9760, - 9761: 9761, - 12980: 12980, - 20091: 20091, -} diff --git a/src/config/lexics/sportsLexic.tsx b/src/config/lexics/sportsLexic.tsx new file mode 100644 index 00000000..49ea5d81 --- /dev/null +++ b/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: убрать хардкод и брать лексики при загрузке из локалсторадж diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index c77d84ca..9d010011 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/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 ( diff --git a/src/features/App/hooks.tsx b/src/features/App/hooks.tsx index 872eeba0..4a1c33d6 100644 --- a/src/features/App/hooks.tsx +++ b/src/features/App/hooks.tsx @@ -15,7 +15,7 @@ export const useSportList = () => { const [sportsList, setSportsList] = useLocalStore({ defaultValue: {} as Sport, key: querieKeys.sportsList, - validator: (val) => !!val, + validator: Boolean, }) useQuery({ diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx index c68959cb..7b850e4a 100644 --- a/src/features/Combobox/styled.tsx +++ b/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}; diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index 5c339783..38fa2d07 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -129,6 +129,8 @@ const inputStyles = css` export const InputStyled = styled.input` ${inputStyles} opacity: ${({ disabled }) => (disabled ? 0.5 : 1)}; + text-transform: capitalize; + ::placeholder { opacity: 0; } diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 8e2d5b54..714a1603 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/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>(['all_competitions']) diff --git a/src/features/LexicsStore/helpers/index.tsx b/src/features/LexicsStore/helpers/index.tsx index 8c77e285..d60282f2 100644 --- a/src/features/LexicsStore/helpers/index.tsx +++ b/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) + .reduce((acc:LexicsConfig, cur: Sport) => { + acc[cur?.lexic] = cur?.lexic + return acc + }, {}) + + return sportLexics +} diff --git a/src/features/LexicsStore/index.tsx b/src/features/LexicsStore/index.tsx index c80cb47e..d760b63c 100644 --- a/src/features/LexicsStore/index.tsx +++ b/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 type Props = { children: ReactNode, @@ -27,6 +30,6 @@ export const useLexicsConfig = (config: Array | LexicsConfig) => { const { addLexicsConfig } = useLexicsStore() useEffect(() => { - addLexicsConfig(config) + addLexicsConfig({ ...config, ...getLexicFromSport() }) }, [addLexicsConfig, config]) } diff --git a/src/features/PreferencesPopup/store/hooks/useSports.tsx b/src/features/PreferencesPopup/store/hooks/useSports.tsx index 627c7245..cae9a7dd 100644 --- a/src/features/PreferencesPopup/store/hooks/useSports.tsx +++ b/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([]) @@ -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) + setSports(sportsArray) } }, [sports]) diff --git a/src/features/ProfileLink/helpers/index.tsx b/src/features/ProfileLink/helpers/index.tsx index 387a2671..16ac2eae 100644 --- a/src/features/ProfileLink/helpers/index.tsx +++ b/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}` diff --git a/src/features/SportsFilter/components/SelectSportPopup/index.tsx b/src/features/SportsFilter/components/SelectSportPopup/index.tsx index 831d4375..3047f934 100644 --- a/src/features/SportsFilter/components/SelectSportPopup/index.tsx +++ b/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 ( <> diff --git a/src/helpers/getLocalStorage/index.tsx b/src/helpers/getLocalStorage/index.tsx index ef92a1c6..84ca8a06 100644 --- a/src/helpers/getLocalStorage/index.tsx +++ b/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 diff --git a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx index 3428f2c6..0193a10f 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx +++ b/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) + ?.reduce((acc, cur) => { + if ([1, 3].includes(cur.id)) { + return [ + ...acc, { + ...cur, + name: cur.name_eng, + }] + } + return acc + }, [] as Array) + setSports(sportsArray) getSounds() .then((state) => {