From 8fc5bb77ef4adc05dc93637e7ce86f654dad5cd1 Mon Sep 17 00:00:00 2001 From: barbara-chaves Date: Tue, 12 Dec 2023 16:18:25 +0100 Subject: [PATCH] Fix timeline, add use client to components --- .../map/layers/animated-tile-layer/index.tsx | 14 +++++++------- .../map/legend/item-types/timeline/index.tsx | 8 ++++---- client/src/containers/home/index.tsx | 17 ++++++++++------- .../src/containers/home/top-stories/index.tsx | 2 +- .../map/markers/home-markers/index.tsx | 2 ++ .../map/markers/story-markers/marker.tsx | 1 + .../map/markers/story-markers/media.tsx | 1 + .../story/steps/controller/controller-item.tsx | 2 ++ .../story/steps/controller/scroll-item.tsx | 1 + client/src/containers/story/steps/index.tsx | 1 + .../containers/story/steps/layouts/map-step.tsx | 1 + 11 files changed, 31 insertions(+), 19 deletions(-) diff --git a/client/src/components/map/layers/animated-tile-layer/index.tsx b/client/src/components/map/layers/animated-tile-layer/index.tsx index db21d25..4e9cc0b 100644 --- a/client/src/components/map/layers/animated-tile-layer/index.tsx +++ b/client/src/components/map/layers/animated-tile-layer/index.tsx @@ -26,7 +26,7 @@ const AnimatedTileLayer = ({ id = '', c }: DeckLayerProps) => { const { minZoom, maxZoom, data } = c; - const { frames = 0, interval = 1000, start, end, autoplay = false, delay = 3000 } = c.timeline; + const { interval = 1000, start, end, autoplay = false, delay = 3000 } = c.timeline; const createLayer = useCallback( (data: { visible: boolean; url: string; opacity: number }, id: string, beforeId: string) => { @@ -43,7 +43,6 @@ const AnimatedTileLayer = ({ id = '', c }: DeckLayerProps) => { index: { x, y, z }, signal, } = tile; - const tileUrl = url.replace('{z}', z).replace('{x}', x).replace('{y}', y); const response = fetch(tileUrl, { signal }); @@ -57,7 +56,7 @@ const AnimatedTileLayer = ({ id = '', c }: DeckLayerProps) => { .then((buffer) => { const apng = parseAPNG(buffer); if (apng instanceof Error) { - throw apng; + return null; } return apng.frames.map((f: any) => { return { @@ -75,6 +74,7 @@ const AnimatedTileLayer = ({ id = '', c }: DeckLayerProps) => { if (!sl) return null; const { id: subLayerId, data, tile, visible, opacity = 1, frame: f } = sl; + if (!tile || !data) return null; const { @@ -124,11 +124,11 @@ const AnimatedTileLayer = ({ id = '', c }: DeckLayerProps) => { if (isPlaying) { return; } - const lastFrame = frames; + const lastFrame = end - start; let newFrame = frame === lastFrame ? 0 : frame + 1; setFrame(newFrame); intervalRef.current = setInterval(() => { - if (newFrame + 1 === lastFrame + 1) { + if (newFrame === lastFrame) { clearInterval(intervalRef.current); setIsPlaying(false); } else { @@ -136,7 +136,7 @@ const AnimatedTileLayer = ({ id = '', c }: DeckLayerProps) => { newFrame++; } }, interval); - }, [frame, frames, interval, isPlaying]); + }, [end, frame, interval, isPlaying, start]); const handleChangeFrame = (_frame: number) => { setIsPlaying(false); @@ -184,7 +184,7 @@ const AnimatedTileLayer = ({ id = '', c }: DeckLayerProps) => { timeline={{ start: start, end: end, - current: frame, + currentFrame: frame, }} onChangeCurrent={handleChangeFrame} onPlay={handlePlay} diff --git a/client/src/components/map/legend/item-types/timeline/index.tsx b/client/src/components/map/legend/item-types/timeline/index.tsx index ec41f2c..2cddce5 100644 --- a/client/src/components/map/legend/item-types/timeline/index.tsx +++ b/client/src/components/map/legend/item-types/timeline/index.tsx @@ -11,7 +11,7 @@ type LegendTypeTimelineProps = { timeline: { start: number; end: number; - current: number; + currentFrame: number; }; onChangeCurrent: (year: number) => void; onPlay: () => void; @@ -40,7 +40,7 @@ export const LegendTypeTimeline: React.FC = ({ ); const lastYear = years[years.length - 1]; - const value = years[timeline?.current]; + const value = years[timeline?.currentFrame]; const yearScale = useCallback( (year: number) => @@ -69,10 +69,10 @@ export const LegendTypeTimeline: React.FC = ({ onChangeCurrent(v)} className={cn('relative flex w-full touch-none select-none items-center', className)} > diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx index 3482a7f..f61cc55 100644 --- a/client/src/containers/home/index.tsx +++ b/client/src/containers/home/index.tsx @@ -2,8 +2,6 @@ import { useEffect } from 'react'; -import Link from 'next/link'; - import { useResetRecoilState, useSetRecoilState } from 'recoil'; import { layersAtom, tmpBboxAtom } from '@/store'; @@ -15,13 +13,13 @@ import { DEFAULT_MAP_BBOX, DEFAULT_MAP_STATE } from '@/constants/map'; import Sidebar from '@/containers/home/sidebar'; import Card from '@/components/ui/card'; -// import GradientLine from '@/components/ui/gradient-line'; +import GradientLine from '@/components/ui/gradient-line'; import Categories from './categories'; import Dashboard from './dashboard'; import { Filters } from './filters'; import Header from './header'; -// import TopStories from './top-stories'; +import TopStories from './top-stories'; export default function Home() { const setTmpBbox = useSetRecoilState(tmpBboxAtom); @@ -51,12 +49,17 @@ export default function Home() {
- View links + + View links + - {/* + - */} +
diff --git a/client/src/containers/home/top-stories/index.tsx b/client/src/containers/home/top-stories/index.tsx index ed2dc6e..90b4403 100644 --- a/client/src/containers/home/top-stories/index.tsx +++ b/client/src/containers/home/top-stories/index.tsx @@ -47,7 +47,7 @@ const topStories = [ const TopStories = () => { return ( -
+
{topStories.map((story) => ( ))} diff --git a/client/src/containers/map/markers/home-markers/index.tsx b/client/src/containers/map/markers/home-markers/index.tsx index a539d06..8944faf 100644 --- a/client/src/containers/map/markers/home-markers/index.tsx +++ b/client/src/containers/map/markers/home-markers/index.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useMemo } from 'react'; import { Layer, Source } from 'react-map-gl'; diff --git a/client/src/containers/map/markers/story-markers/marker.tsx b/client/src/containers/map/markers/story-markers/marker.tsx index d1fad57..b070f5d 100644 --- a/client/src/containers/map/markers/story-markers/marker.tsx +++ b/client/src/containers/map/markers/story-markers/marker.tsx @@ -1,3 +1,4 @@ +'use client'; import { useState } from 'react'; import { Marker } from 'react-map-gl'; diff --git a/client/src/containers/map/markers/story-markers/media.tsx b/client/src/containers/map/markers/story-markers/media.tsx index b03b900..4f0d538 100644 --- a/client/src/containers/map/markers/story-markers/media.tsx +++ b/client/src/containers/map/markers/story-markers/media.tsx @@ -1,3 +1,4 @@ +'use client'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import Image from 'next/image'; diff --git a/client/src/containers/story/steps/controller/controller-item.tsx b/client/src/containers/story/steps/controller/controller-item.tsx index a388515..a19bd40 100644 --- a/client/src/containers/story/steps/controller/controller-item.tsx +++ b/client/src/containers/story/steps/controller/controller-item.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useCallback } from 'react'; import { useRecoilValue } from 'recoil'; diff --git a/client/src/containers/story/steps/controller/scroll-item.tsx b/client/src/containers/story/steps/controller/scroll-item.tsx index 0bbfc41..6848723 100644 --- a/client/src/containers/story/steps/controller/scroll-item.tsx +++ b/client/src/containers/story/steps/controller/scroll-item.tsx @@ -1,3 +1,4 @@ +'use client'; import { PropsWithChildren, useRef } from 'react'; import { useScroll } from 'framer-motion'; diff --git a/client/src/containers/story/steps/index.tsx b/client/src/containers/story/steps/index.tsx index aeb3217..f2c5067 100644 --- a/client/src/containers/story/steps/index.tsx +++ b/client/src/containers/story/steps/index.tsx @@ -1,3 +1,4 @@ +'use client'; import { PropsWithChildren, useMemo } from 'react'; import { useRecoilValue } from 'recoil'; diff --git a/client/src/containers/story/steps/layouts/map-step.tsx b/client/src/containers/story/steps/layouts/map-step.tsx index d01ede9..ba98881 100644 --- a/client/src/containers/story/steps/layouts/map-step.tsx +++ b/client/src/containers/story/steps/layouts/map-step.tsx @@ -1,3 +1,4 @@ +'use client'; import dynamic from 'next/dynamic'; import { InfoIcon } from 'lucide-react';