Fix outro fly

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(
   //   {

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<HTMLDivElement>(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('/');
     }
   });

client/src/store/index.ts

@@ -115,6 +115,11 @@ export const markerAtom = atom<MapboxGeoJSONFeature | null>({
   default: null,
 });
 
+export const isFlyingBackAtom = atom<boolean>({
+  key: 'is-flying-back',
+  default: false,
+});
+
 export const DEFAULT_SETTINGS = {
   expand: true,
 };

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",

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