From b83bf3c73d1f313c688e3110cad705cc11d90a3a Mon Sep 17 00:00:00 2001 From: Rakov Date: Mon, 9 Oct 2023 11:30:28 +0300 Subject: [PATCH] fix(repeat method): fix repeat method --- src/components/Ads/hooks.tsx | 4 +- src/features/AuthStore/hooks/useAuth.tsx | 9 ++- .../MatchCard/CardFrontside/hooks.tsx | 13 +++- src/features/MatchesSlider/index.tsx | 71 ++++++++++--------- src/features/MatchesTimeline/hooks.tsx | 6 +- .../getMatches/getTimelineMatches.tsx | 11 ++- 6 files changed, 68 insertions(+), 46 deletions(-) diff --git a/src/components/Ads/hooks.tsx b/src/components/Ads/hooks.tsx index 4ec84537..d4e72c5d 100644 --- a/src/components/Ads/hooks.tsx +++ b/src/components/Ads/hooks.tsx @@ -9,9 +9,9 @@ import { isMobileDevice, querieKeys } from 'config' import { getAds } from 'requests' import { isMatchPage } from 'helpers/isMatchPage' -import { useLang } from 'features/LexicsStore/hooks/useLang' import { useAuthStore } from 'features/AuthStore' +import { useLexicsStore } from 'features/LexicsStore' import { DeviceType, PageType, @@ -31,7 +31,7 @@ export const useAds = ({ tournamentId, }: Props) => { const [ads, setAds] = useRecoilState(adsStore) - const { lang } = useLang() + const { lang } = useLexicsStore() const { user } = useAuthStore() useQuery({ diff --git a/src/features/AuthStore/hooks/useAuth.tsx b/src/features/AuthStore/hooks/useAuth.tsx index 9df50ad4..bb8aa585 100644 --- a/src/features/AuthStore/hooks/useAuth.tsx +++ b/src/features/AuthStore/hooks/useAuth.tsx @@ -111,10 +111,12 @@ export const useAuth = () => { token && await fetchUserInfo() return Promise.resolve() } + await fetchUserInfo() return Promise.resolve() } storeUser(loadedUser) + await fetchUserInfo() markUserLoaded() return loadedUser // eslint-disable-next-line react-hooks/exhaustive-deps @@ -167,8 +169,9 @@ export const useAuth = () => { setPage(history.location.pathname) userManager.signinRedirectCallback() - .then((loadedUser) => { + .then(async (loadedUser) => { storeUser(loadedUser) + await fetchUserInfo() if (refreshToken) writeRefreshToken(refreshToken) @@ -297,10 +300,6 @@ export const useAuth = () => { } catch (error) {} }, [changeLang]) - useEffect(() => { - readToken() && fetchUserInfo() - }, [fetchUserInfo, user]) - // временно отрубили возможность смотреть матчи вирт. юзерам // в связи с переездом бэка useEffect(() => { diff --git a/src/features/MatchCard/CardFrontside/hooks.tsx b/src/features/MatchCard/CardFrontside/hooks.tsx index b8de0f6a..693dc477 100644 --- a/src/features/MatchCard/CardFrontside/hooks.tsx +++ b/src/features/MatchCard/CardFrontside/hooks.tsx @@ -21,11 +21,16 @@ export const useCardPreview = ({ ), [preview, previewURL]) useEffect(() => { + const controller = new AbortController() + const { signal } = controller; + (async () => { if (!currentPreviewURL) return try { - const image = await fetch(String(currentPreviewURL)) + const image = await fetch(String(currentPreviewURL), { + signal, + }) .then(async (result) => ({ blob: await result.blob(), status: result.status, @@ -40,8 +45,10 @@ export const useCardPreview = ({ } })() - return () => URL.revokeObjectURL(previewImage) - + return () => { + URL.revokeObjectURL(previewImage) + controller.abort() + } // добавление previewImage в зависимость вызывает бесконечный цикл // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentPreviewURL]) diff --git a/src/features/MatchesSlider/index.tsx b/src/features/MatchesSlider/index.tsx index f6fb397d..7c9b8ec1 100644 --- a/src/features/MatchesSlider/index.tsx +++ b/src/features/MatchesSlider/index.tsx @@ -37,45 +37,48 @@ export const MatchesSlider = ({ cardSize, matches }: MatchesSliderProps) => { } = useMatchesSlider(matches) const scrollToMatchByIndex = (index: number) => { - const match = slidesRef.current!.querySelectorAll('li')[index] - const offsetLeftCount = match.offsetLeft - - const offsetLeft = offsetLeftCount - PADDING_PARENT - - setTimeout(() => { - slidesRef.current!.scrollBy({ - // @ts-ignore - behavior: 'instant', - left: offsetLeft, - }) - }, 0) + if (slidesRef.current) { + const match = slidesRef.current.querySelectorAll('li')[index] + const offsetLeftCount = match.offsetLeft + + const offsetLeft = offsetLeftCount - PADDING_PARENT + + setTimeout(() => { + slidesRef.current?.scrollBy({ + // @ts-ignore + behavior: 'instant', + left: offsetLeft, + }) + }, 0) + } } // скролл к лайв матчам или сегодняшней дате useEffect(() => { - const matchIndexLive = matches.findIndex(({ live }) => live) - if (matchIndexLive !== -1) { - scrollToMatchByIndex(matchIndexLive) - return - } - - const matchIndex = matches.findIndex((item) => new Date() <= item.date) - if (matchIndex !== -1) { - scrollToMatchByIndex(matchIndex) - return + if (slidesRef.current) { + const matchIndexLive = matches.findIndex(({ live }) => live) + if (matchIndexLive !== -1) { + scrollToMatchByIndex(matchIndexLive) + return + } + + const matchIndex = matches.findIndex((item) => new Date() <= item.date) + if (matchIndex !== -1) { + scrollToMatchByIndex(matchIndex) + return + } + + const slidesRefClientWidth = slidesRef.current.clientWidth + const slidesRefScrollWidth = slidesRef.current.scrollWidth + + setTimeout(() => { + slidesRef.current?.scrollBy({ + // @ts-ignore + behavior: 'instant', + left: slidesRefScrollWidth - slidesRefClientWidth + PADDING_PARENT, + }) + }, 0) } - - const slidesRefClientWidth = slidesRef.current!.clientWidth - const slidesRefScrollWidth = slidesRef.current!.scrollWidth - - setTimeout(() => { - slidesRef.current!.scrollBy({ - // @ts-ignore - behavior: 'instant', - left: slidesRefScrollWidth - slidesRefClientWidth + PADDING_PARENT, - }) - }, 0) - // eslint-disable-next-line react-hooks/exhaustive-deps }, []) diff --git a/src/features/MatchesTimeline/hooks.tsx b/src/features/MatchesTimeline/hooks.tsx index 4b19560d..8035a253 100644 --- a/src/features/MatchesTimeline/hooks.tsx +++ b/src/features/MatchesTimeline/hooks.tsx @@ -54,10 +54,13 @@ export const useTimeline = () => { ), [user]) useEffect(() => { + const controller = new AbortController() + const { signal } = controller; + (async () => { setIsTimelineFetching(true) try { - const timelineFetched = await getTimelineMatches() + const timelineFetched = await getTimelineMatches({ signal }) setTimeline(timelineFetched) const convertedMatches = timelineFetched.online_upcoming[0].matches const preparedMatches = prepareMatchesDto(convertedMatches) @@ -81,6 +84,7 @@ export const useTimeline = () => { setIsTimelineFetching(false) } })() + return () => controller.abort() // eslint-disable-next-line react-hooks/exhaustive-deps }, []) diff --git a/src/requests/getMatches/getTimelineMatches.tsx b/src/requests/getMatches/getTimelineMatches.tsx index c80919d0..779bb477 100644 --- a/src/requests/getMatches/getTimelineMatches.tsx +++ b/src/requests/getMatches/getTimelineMatches.tsx @@ -17,7 +17,15 @@ export type MatchesTimeline = { promo: Array, } -export const getTimelineMatches = (sportId?: number): Promise => { +type getTimelineMatchesProps = { + signal?: AbortSignal, + sportId?: number, +} + +export const getTimelineMatches = ({ + signal, + sportId, +}: getTimelineMatchesProps): Promise => { const getTimezoneOffset = () => { const offset = new Date().getTimezoneOffset() if (offset === 0) return offset @@ -36,6 +44,7 @@ export const getTimelineMatches = (sportId?: number): Promise = } return callApi({ + abortSignal: signal, config, url: url.href, })