FIx types

Vizzuality · Dec 19, 2023 · dc5226c · dc5226c
1 parent b6a55ee
commit dc5226c
Show file tree

Hide file tree

Showing 14 changed files with 1,485 additions and 3,489 deletions.
diff --git a/client/src/containers/map/markers/story-markers/index.tsx b/client/src/containers/map/markers/story-markers/index.tsx
@@ -11,6 +11,7 @@ import { stepAtom } from '@/store/stories';
 import { useGetStoriesId } from '@/types/generated/story';
 
 import StoryMarkerMedia from './marker';
+import { StoryStepMap } from '@/types/story';
 // import Carousel from './carousel';
 // import { Dialog, DialogContent } from '@/components/ui/dialog';
 
@@ -33,12 +34,9 @@ const StoryMarkers = () => {
     populate: 'deep',
   });
   // const [currentMedia, setCurrentMedia] = useState<number>();
-
   const markers: StoryMarker[] = useMemo(() => {
-    return (
-      storyData?.data?.attributes?.steps?.data?.[step]?.attributes?.layout[0].map?.markers || []
-    );
-  }, [step, storyData?.data?.attributes?.steps?.data]);
+    return (storyData?.data?.attributes?.steps?.[step]?.map as StoryStepMap)?.markers || [];
+  }, [step, storyData?.data?.attributes?.steps]);
 
   // const medias = useMemo(() => {
   //   return markers?.map((marker) => ({

diff --git a/client/src/containers/story/steps/index.tsx b/client/src/containers/story/steps/index.tsx
@@ -8,19 +8,17 @@ import { cn } from '@/lib/classnames';
 import { stepAtom } from '@/store/stories';
 
 import {
-  StepLayoutMediaStepComponentMedia,
   StepLayoutOutroStepComponentMedia,
   StoryCategory,
   StoryStepsItem,
 } from '@/types/generated/strapi.schemas';
 
 import MapStepLayout from './layouts/map-step';
-import MediaStepLayout from './layouts/media-step';
 import OutroStepLayout from './layouts/outro-step';
 import { getStepType } from './utils';
 
 type StepProps = PropsWithChildren<{
-  media?: StepLayoutMediaStepComponentMedia | StepLayoutOutroStepComponentMedia;
+  media?: StepLayoutOutroStepComponentMedia;
   step: StoryStepsItem;
   category?: StoryCategory;
   index: number;
@@ -31,7 +29,7 @@ const Step = ({ step, category, index }: StepProps) => {
   const type = getStepType(step);
 
   const STEP_COMPONENT = useMemo(() => {
-    const stepLayout = step?.attributes?.layout?.[0];
+    const stepLayout = step;
     if (!type || !stepLayout) return null;
 
     switch (type) {
@@ -45,8 +43,7 @@ const Step = ({ step, category, index }: StepProps) => {
           />
         );
       }
-      case 'media-step':
-        return <MediaStepLayout step={step} />;
+
       case 'outro-step':
         return (
           <OutroStepLayout
@@ -58,14 +55,7 @@ const Step = ({ step, category, index }: StepProps) => {
       default:
         return null;
     }
-  }, [
-    step?.attributes?.layout,
-    type,
-    currentStep,
-    index,
-    category?.data?.id,
-    category?.data?.attributes,
-  ]);
+  }, [step, type, currentStep, index, category?.data?.id, category?.data?.attributes]);
 
   return (
     <div className="pointer-events-none h-screen w-full ">

diff --git a/client/src/containers/story/steps/layouts/map-step.tsx b/client/src/containers/story/steps/layouts/map-step.tsx
@@ -8,7 +8,7 @@ import { useScrollToItem } from '@/lib/scroll';
 
 import {
   StepLayoutMapStepComponent,
-  StepLayoutItem,
+  StoryStepsItem,
   StoryCategoryDataAttributes,
 } from '@/types/generated/strapi.schemas';
 
@@ -21,7 +21,7 @@ const Legend = dynamic(() => import('@/containers/map/legend'), {
 });
 
 type MapStepLayoutProps = {
-  step: StepLayoutItem;
+  step: StoryStepsItem;
   category: StoryCategoryDataAttributes | undefined;
   stepIndex: number;
   showContent?: boolean;
@@ -78,30 +78,34 @@ const MapStepLayout = ({ step, category, showContent, stepIndex }: MapStepLayout
         </div>
         <div className="">
           <div className="flex h-fit min-h-full flex-col items-end justify-center space-y-6 pb-6">
-            {card?.map((item) => (
-              <div
-                key={item?.id}
-                onClick={handleClickCard}
-                className={cn(
-                  'pointer-events-auto cursor-pointer overflow-hidden rounded border border-gray-800 bg-[#335e6f] bg-opacity-50 p-8 backdrop-blur transition-all duration-300 ease-in-out',
-                  showContent ? 'opacity-100' : 'opacity-0'
-                )}
-              >
-                <div className="w-[400px] space-y-1">
-                  {item?.title && <h2 className="font-notes text-2xl font-bold">{item?.title}</h2>}
-                  {!!item?.content && (
-                    <div className="font-open-sans space-y-4">
-                      {item.content.split('\n').map((p, i) => (
-                        <p key={i} className="text-sm">
-                          {p}
-                        </p>
-                      ))}
-                    </div>
+            {card?.map((item) => {
+              return (
+                <div
+                  key={item?.id}
+                  onClick={handleClickCard}
+                  className={cn(
+                    'pointer-events-auto cursor-pointer overflow-hidden rounded border border-gray-800 bg-[#335e6f] bg-opacity-50 p-8 backdrop-blur transition-all duration-300 ease-in-out',
+                    showContent ? 'opacity-100' : 'opacity-0'
                   )}
-                  {!!item?.widget && <Chart options={item?.widget} />}
+                >
+                  <div className="w-[400px] space-y-1">
+                    {item?.title && (
+                      <h2 className="font-notes text-2xl font-bold">{item?.title}</h2>
+                    )}
+                    {!!item?.content && (
+                      <div className="font-open-sans space-y-4">
+                        {item.content.split('\n').map((p, i) => (
+                          <p key={i} className="text-sm">
+                            {p}
+                          </p>
+                        ))}
+                      </div>
+                    )}
+                    {!!item?.widget && <Chart options={item?.widget} />}
+                  </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         </div>
       </div>

diff --git a/client/src/containers/story/steps/layouts/media-step.tsx b/client/src/containers/story/steps/layouts/media-step.tsx
diff --git a/client/src/containers/story/steps/layouts/outro-step.tsx b/client/src/containers/story/steps/layouts/outro-step.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
@@ -80,13 +80,13 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
 
   const isVideo = mediaType.includes('video');
 
-  const handlePlayVideo = useCallback(
-    (e: React.MouseEvent<HTMLVideoElement, MouseEvent>, action: 'play' | 'pause') => {
-      if (action === 'play') e.currentTarget.play();
-      else e.currentTarget.pause();
-    },
-    []
-  );
+  // const handlePlayVideo = useCallback(
+  //   (e: React.MouseEvent<HTMLVideoElement, MouseEvent>, action: 'play' | 'pause') => {
+  //     if (action === 'play') e.currentTarget.play();
+  //     else e.currentTarget.pause();
+  //   },
+  //   []
+  // );
 
   const scale = useTransform(scrollYProgress, [0.5, 0.7], ['1', '2']);
   const scaleContent = useTransform(scrollYProgress, [0.5, 0.7], ['1', '0.75']);