Merge pull request #23 from Vizzuality/client/feature/story-layers

Fix outro fly
Vizzuality · Nov 30, 2023 · 071972d · 071972d
2 parents cd1ca44 + 54d7c62
commit 071972d
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 319 deletions.
diff --git 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
@@ -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 } from '@/store';
 
 import { StepLayoutItem, StepLayoutOutroStepComponent } from '@/types/generated/strapi.schemas';
 
@@ -24,7 +24,7 @@ type MediaStepLayoutProps = {
 const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
   const { push } = useRouter();
 
-  const resetBbox = useResetRecoilState(tmpBboxAtom);
+  const setIsFlyingBack = useSetRecoilState(isFlyingBackAtom);
 
   const { content, title } = step as StepLayoutOutroStepComponent;
   const containerRef = useRef<HTMLDivElement>(null);
@@ -49,7 +49,10 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
 
   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
@@ -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,
 };

diff --git a/cms/config/middlewares.ts b/cms/config/middlewares.ts
@@ -20,7 +20,7 @@ export default [
     name: 'strapi::cors',
     config: {
       enabled: true,
-      origin: ['http://localhost:3000', 'http://localhost:1337']
+      origin: ['http://localhost:3000', 'http://localhost:1337', 'http://localhost:8000']
     }
   },
   'strapi::poweredBy',

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