From 14b93d5dbb75b6541a5f57eb926be506fb9067f9 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Thu, 13 Jan 2022 16:08:23 +0700 Subject: [PATCH] made transitional Anchor component for next/cra --- src/components/flow/FlowSwiperHero/index.tsx | 7 +++--- src/components/lab/LabBottomPanel/index.tsx | 5 +++-- src/components/lab/LabHero/index.tsx | 7 +++--- src/components/node/NodeRelatedItem/index.tsx | 7 +++--- src/hooks/auth/useRestorePasswordRedirect.ts | 8 +++---- src/hooks/navigation/useNavigation.ts | 22 +++++++++++++++++++ src/hooks/node/useGotoNode.ts | 6 ++--- 7 files changed, 44 insertions(+), 18 deletions(-) create mode 100644 src/hooks/navigation/useNavigation.ts diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index 93e6ecd7..9e1a165d 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -12,6 +12,7 @@ import { useHistory } from 'react-router'; import classNames from 'classnames'; import { IFlowNode } from '~/types'; import { useWindowSize } from '~/hooks/dom/useWindowSize'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]); @@ -21,13 +22,13 @@ interface Props { export const FlowSwiperHero: FC = ({ heroes }) => { const { innerWidth } = useWindowSize(); + const { push } = useNavigation(); const [controlledSwiper, setControlledSwiper] = useState(undefined); const [currentIndex, setCurrentIndex] = useState(heroes.length); const preset = useMemo(() => (innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), [ innerWidth, ]); - const history = useHistory(); const onNext = useCallback(() => { controlledSwiper?.slideNext(1); @@ -63,9 +64,9 @@ export const FlowSwiperHero: FC = ({ heroes }) => { const onClick = useCallback( (sw: SwiperClass) => { - history.push(URLS.NODE_URL(heroes[sw.realIndex]?.id)); + push(URLS.NODE_URL(heroes[sw.realIndex]?.id)); }, - [history, heroes] + [push, heroes] ); if (!heroes.length) { diff --git a/src/components/lab/LabBottomPanel/index.tsx b/src/components/lab/LabBottomPanel/index.tsx index c8fb98b7..2b7fbd76 100644 --- a/src/components/lab/LabBottomPanel/index.tsx +++ b/src/components/lab/LabBottomPanel/index.tsx @@ -10,6 +10,7 @@ import { Grid } from '~/components/containers/Grid'; import { useHistory } from 'react-router'; import { URLS } from '~/constants/urls'; import { Placeholder } from '~/components/placeholders/Placeholder'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; type Props = { node: INode; @@ -19,8 +20,8 @@ type Props = { }; const LabBottomPanel: FC = ({ node, hasNewComments, commentCount, isLoading }) => { - const history = useHistory(); - const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [history, node.id]); + const { push } = useNavigation(); + const onClick = useCallback(() => push(URLS.NODE_URL(node.id)), [push, node.id]); return ( diff --git a/src/components/lab/LabHero/index.tsx b/src/components/lab/LabHero/index.tsx index 761f4997..23f4b911 100644 --- a/src/components/lab/LabHero/index.tsx +++ b/src/components/lab/LabHero/index.tsx @@ -7,6 +7,7 @@ import { INode } from '~/types'; import { getPrettyDate } from '~/utils/dom'; import { URLS } from '~/constants/urls'; import { useHistory } from 'react-router-dom'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; interface IProps { node?: Partial; @@ -14,10 +15,10 @@ interface IProps { } const LabHero: FC = ({ node, isLoading }) => { - const history = useHistory(); + const { push } = useNavigation(); const onClick = useCallback(() => { - history.push(URLS.NODE_URL(node?.id)); - }, [history, node]); + push(URLS.NODE_URL(node?.id)); + }, [push, node]); if (!node || isLoading) { return ( diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx index 7005d1f0..a3194033 100644 --- a/src/components/node/NodeRelatedItem/index.tsx +++ b/src/components/node/NodeRelatedItem/index.tsx @@ -5,9 +5,9 @@ import { INode } from '~/types'; import { PRESETS, URLS } from '~/constants/urls'; import { RouteComponentProps, withRouter } from 'react-router'; import { getURL, getURLFromString } from '~/utils/dom'; -import { Avatar } from '~/components/common/Avatar'; import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString'; import { Square } from '~/components/common/Square'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; type IProps = RouteComponentProps & { item: Partial; @@ -29,11 +29,12 @@ const getTitleLetters = (title?: string): string => { : words[0].substr(0, 2).toUpperCase(); }; -const NodeRelatedItemUnconnected: FC = memo(({ item, history }) => { +const NodeRelatedItemUnconnected: FC = memo(({ item }) => { + const { push } = useNavigation(); const [is_loaded, setIsLoaded] = useState(false); const [width, setWidth] = useState(0); const ref = useRef(null); - const onClick = useCallback(() => history.push(URLS.NODE_URL(item.id)), [item, history]); + const onClick = useCallback(() => push(URLS.NODE_URL(item.id)), [item, push]); const thumb = useMemo( () => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''), diff --git a/src/hooks/auth/useRestorePasswordRedirect.ts b/src/hooks/auth/useRestorePasswordRedirect.ts index 0f7cfd2a..8dff4565 100644 --- a/src/hooks/auth/useRestorePasswordRedirect.ts +++ b/src/hooks/auth/useRestorePasswordRedirect.ts @@ -1,11 +1,11 @@ import { useEffect } from 'react'; -import { useHistory } from 'react-router'; import { useModal } from '~/hooks/modal/useModal'; import { Dialog } from '~/constants/modal'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; /** redirects to the password redirect modal */ export const useRestorePasswordRedirect = () => { - const history = useHistory(); + const { push } = useNavigation(); const { showModal } = useModal(); useEffect(() => { @@ -15,7 +15,7 @@ export const useRestorePasswordRedirect = () => { return; } - history.push('/'); + push('/'); showModal(Dialog.RestorePassword, { code: match[1] }); - }, [showModal, history]); + }, [showModal, push]); }; diff --git a/src/hooks/navigation/useNavigation.ts b/src/hooks/navigation/useNavigation.ts new file mode 100644 index 00000000..a5877d12 --- /dev/null +++ b/src/hooks/navigation/useNavigation.ts @@ -0,0 +1,22 @@ +import { useCallback } from 'react'; +import { CONFIG } from '~/utils/config'; +import { useRouter } from 'next/router'; +import { useHistory } from 'react-router'; + +export const useNavigation = () => { + const nextRouter = useRouter(); + const craHistory = useHistory(); + + const push = useCallback( + (url: string) => { + if (CONFIG.isNextEnvironment) { + nextRouter.push(url); + } else { + craHistory.push(url); + } + }, + [craHistory, nextRouter] + ); + + return { push }; +}; diff --git a/src/hooks/node/useGotoNode.ts b/src/hooks/node/useGotoNode.ts index 1d38e8eb..5a8eebe9 100644 --- a/src/hooks/node/useGotoNode.ts +++ b/src/hooks/node/useGotoNode.ts @@ -1,10 +1,10 @@ import { INode } from '~/types'; -import { useHistory } from 'react-router'; import { useCallback } from 'react'; import { URLS } from '~/constants/urls'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; // useGotoNode returns fn, that navigates to node export const useGotoNode = (id: INode['id']) => { - const history = useHistory(); - return useCallback(() => history.push(URLS.NODE_URL(id)), [history, id]); + const { push } = useNavigation(); + return useCallback(() => push(URLS.NODE_URL(id)), [push, id]); };