diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx index 9dc4863..4055e13 100644 --- a/client/src/containers/map/index.tsx +++ b/client/src/containers/map/index.tsx @@ -19,6 +19,7 @@ import { layersInteractiveIdsAtom, // popupAtom, tmpBboxAtom, + isFlyingBackAtom, } from '@/store'; // import { useGetLayers } from '@/types/generated/layer'; @@ -78,16 +79,19 @@ export default function MapContainer() { const bbox = useRecoilValue(bboxAtom); const tmpBbox = useRecoilValue(tmpBboxAtom); - // const layersInteractive = useRecoilValue(layersInteractiveAtom); + const isFlyingBack = useRecoilValue(isFlyingBackAtom); + const layersInteractiveIds = useRecoilValue(layersInteractiveIdsAtom); const setBbox = useSetRecoilState(bboxAtom); const setTmpBbox = useSetRecoilState(tmpBboxAtom); - // const setPopup = useSetRecoilState(popupAtom); const pathname = usePathname(); - const isHomePage = useMemo(() => !pathname.includes('stories'), [pathname]); + const isHomePage = useMemo( + () => !pathname.includes('stories') && !isFlyingBack, + [pathname, isFlyingBack] + ); // const { data: layersInteractiveData } = useGetLayers( // { diff --git a/client/src/containers/story/steps/layouts/outro-step.tsx b/client/src/containers/story/steps/layouts/outro-step.tsx index 608ff12..565fa6d 100644 --- a/client/src/containers/story/steps/layouts/outro-step.tsx +++ b/client/src/containers/story/steps/layouts/outro-step.tsx @@ -5,11 +5,11 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useRouter } from 'next/navigation'; import { useScroll, motion, useTransform } from 'framer-motion'; -import { useResetRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import env from '@/env.mjs'; -import { tmpBboxAtom } from '@/store'; +import { isFlyingBackAtom, layersAtom } from '@/store'; import { StepLayoutItem, StepLayoutOutroStepComponent } from '@/types/generated/strapi.schemas'; @@ -23,8 +23,9 @@ type MediaStepLayoutProps = { const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => { const { push } = useRouter(); + const setLayers = useSetRecoilState(layersAtom); - const resetBbox = useResetRecoilState(tmpBboxAtom); + const setIsFlyingBack = useSetRecoilState(isFlyingBackAtom); const { content, title } = step as StepLayoutOutroStepComponent; const containerRef = useRef(null); @@ -44,12 +45,18 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => { }); useEffect(() => { + // TEMPORARY FIX + setLayers([5]); + if (!showContent) setShow(false); }, [showContent]); useTransform(scrollYProgress, (v) => { if (v > 0.6) { - resetBbox(); + setIsFlyingBack(true); + setTimeout(() => { + setIsFlyingBack(false); + }, 3000); push('/'); } }); diff --git a/client/src/store/index.ts b/client/src/store/index.ts index f795f9d..d251eb3 100644 --- a/client/src/store/index.ts +++ b/client/src/store/index.ts @@ -115,6 +115,11 @@ export const markerAtom = atom({ default: null, }); +export const isFlyingBackAtom = atom({ + key: 'is-flying-back', + default: false, +}); + export const DEFAULT_SETTINGS = { expand: true, }; diff --git a/cms/src/plugins/map-field/package.json b/cms/src/plugins/map-field/package.json index 8ae314b..857377c 100644 --- a/cms/src/plugins/map-field/package.json +++ b/cms/src/plugins/map-field/package.json @@ -20,6 +20,7 @@ "@strapi/typescript-utils": "4.11.2", "@types/react": "^17.0.53", "@types/react-dom": "^18.0.28", + "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "@types/styled-components": "^5.1.26", "react-dom": "^18.2.0", diff --git a/cms/src/plugins/map-field/yarn.lock b/cms/src/plugins/map-field/yarn.lock index 8e14713..0149fda 100644 --- a/cms/src/plugins/map-field/yarn.lock +++ b/cms/src/plugins/map-field/yarn.lock @@ -1540,7 +1540,7 @@ __metadata: languageName: node linkType: hard -"@types/react-router@npm:*": +"@types/react-router@npm:*, @types/react-router@npm:^5.1.20": version: 5.1.20 resolution: "@types/react-router@npm:5.1.20" dependencies: @@ -2475,6 +2475,7 @@ __metadata: "@strapi/typescript-utils": 4.11.2 "@types/react": ^17.0.53 "@types/react-dom": ^18.0.28 + "@types/react-router": ^5.1.20 "@types/react-router-dom": ^5.3.3 "@types/styled-components": ^5.1.26 mapbox-gl: 2.15.0