diff --git a/client/package.json b/client/package.json index d41eb4d..428b4e3 100644 --- a/client/package.json +++ b/client/package.json @@ -50,6 +50,8 @@ "d3-array": "3.2.4", "date-fns": "^3.3.1", "deck.gl": "8.9.19", + "embla-carousel": "^8.3.0", + "embla-carousel-react": "^8.3.0", "eslint": "8.42.0", "eslint-config-next": "13.4.5", "framer-motion": "^10.16.4", diff --git a/client/src/app/(landing)/globe/page.tsx b/client/src/app/(landing)/globe/page.tsx index e9b5aa0..f4dd71a 100644 --- a/client/src/app/(landing)/globe/page.tsx +++ b/client/src/app/(landing)/globe/page.tsx @@ -35,7 +35,7 @@ async function prefetchQueries(searchParams: HomePageProps['searchParams']) { }); // Stories - let categoryId; + let categoryId: string | undefined; // If there is a category in the search params, we need to get the category id to use as a category filter if (searchParams.category) { @@ -43,7 +43,7 @@ async function prefetchQueries(searchParams: HomePageProps['searchParams']) { categoryId = categories?.data?.find((category) => { return `"${category.attributes?.slug}"` === searchParams.category; - })?.id; + })?.attributes?.slug; } const params = getStoriesParams(categoryId ? { category: categoryId } : {}); diff --git a/client/src/app/(landing)/stories/[id]/page.tsx b/client/src/app/(landing)/stories/[id]/page.tsx index 9f33b2d..6e428dd 100644 --- a/client/src/app/(landing)/stories/[id]/page.tsx +++ b/client/src/app/(landing)/stories/[id]/page.tsx @@ -10,32 +10,6 @@ import Story from '@/containers/story'; type StoryPageProps = { params: { id: string } }; -// You can't generate static params for dynamic routes if they are using useSearchParams https://nextjs.org/docs/messages/deopted-into-client-rendering -// The solution is to wrap the component with Suspense -// By doing this, we will have errors related to hydration -// As we use it inside RecoilURLSyncNext, we can't generate static params - -// export async function generateStaticParams() { -// try { -// const { data: storiesData } = await getStories({ -// 'pagination[limit]': 200, -// }); - -// if (!storiesData) { -// throw new Error('Failed to parse storiesData'); -// } - -// console.log('storiesData', storiesData); - -// return storiesData.map((s) => ({ -// id: `${s.id}`, -// })); -// } catch (e) { -// console.error(e); -// return []; -// } -// } - export async function generateMetadata({ params }: StoryPageProps): Promise { try { // read route params diff --git a/client/src/app/layout-providers.tsx b/client/src/app/layout-providers.tsx index 958af46..c4d998f 100644 --- a/client/src/app/layout-providers.tsx +++ b/client/src/app/layout-providers.tsx @@ -5,7 +5,6 @@ import { PropsWithChildren, useState } from 'react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { TooltipProvider } from '@/components/ui/tooltip'; - import { notesESA, openSans } from '@/styles/fonts'; export default function Providers({ children }: PropsWithChildren) { diff --git a/client/src/components/map/constants.ts b/client/src/components/map/constants.ts index 31d8ebd..6d28eef 100644 --- a/client/src/components/map/constants.ts +++ b/client/src/components/map/constants.ts @@ -1,7 +1,22 @@ -import type { ViewState } from 'react-map-gl'; +import { CustomMapProps } from './types'; -export const DEFAULT_VIEW_STATE: Partial = { +export const DEFAULT_VIEW_STATE = { zoom: 2, - latitude: 0, - longitude: 0, + pitch: 0, + bearing: 0, + padding: { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, +}; + +export const DEFAULT_MOBILE_ZOOM = 0.75; + +export const DEFAULT_PROPS: CustomMapProps = { + id: 'default', + initialViewState: DEFAULT_VIEW_STATE, + minZoom: DEFAULT_MOBILE_ZOOM, + maxZoom: 14, }; diff --git a/client/src/components/map/index.tsx b/client/src/components/map/index.tsx index d75a4be..a61e00d 100644 --- a/client/src/components/map/index.tsx +++ b/client/src/components/map/index.tsx @@ -137,7 +137,7 @@ export const MapMapbox: FC = ({ }, [bounds, isFlying]); return ( -
+
| null)[]; handleClick: (id: string | number) => void; + handleClose?: () => void; }; -const Marker = ({ markers, handleClick }: MarkerProps) => { +const Marker = ({ markers, handleClick, handleClose }: MarkerProps) => { const { coordinates } = markers?.[0]?.geometry || {}; + + const isMobile = useIsMobile(); + if (!coordinates?.length) return null; - return ( - -
+ + const MARKER = () => ( +
+ -
- {markers?.map((marker) => { - if (!marker || !marker?.id) return null; - return ( -
e.stopPropagation()} - > -
- -

{marker?.properties?.categoryName}

-
-

{marker?.properties?.title}

-

- {marker?.properties?.location} -

- +
+ {markers?.map((marker) => { + if (!marker || !marker?.id) return null; + return ( +
e.stopPropagation()} + > +
+ +

{marker?.properties?.categoryName}

- ); - })} -
+

{marker?.properties?.title}

+

+ {marker?.properties?.location} +

+ + +
+ ); + })}
+
+ ); + + return isMobile ? ( +
+ +
+ ) : ( + + ); }; diff --git a/client/src/components/map/legend/index.tsx b/client/src/components/map/legend/index.tsx index e2ebe43..b3afc43 100644 --- a/client/src/components/map/legend/index.tsx +++ b/client/src/components/map/legend/index.tsx @@ -1,51 +1,44 @@ +'use client'; + import React, { useMemo, Children, isValidElement } from 'react'; import { ChevronDown } from 'lucide-react'; import { cn } from '@/lib/classnames'; +import { useIsMobile } from '@/hooks/screen-size'; + import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; -import SortableList from './sortable/list'; import { LegendProps } from './types'; -export const Legend: React.FC = ({ - children, - className = '', - sortable, - onChangeOrder, -}: LegendProps) => { +export const Legend: React.FC = ({ children, className = '' }: LegendProps) => { const isChildren = useMemo(() => { return !!Children.count(Children.toArray(children).filter((c) => isValidElement(c))); }, [children]); + const isMobile = useIsMobile(); + return ( isChildren && (
{isChildren && ( -
- {!!sortable?.enabled && !!onChangeOrder ? ( - +
+ + + Legend + + {children} - - ) : Array.isArray(children) && children.length > 1 ? ( - - - Legends - - - {children} - - - ) : ( - children - )} + +
)}
diff --git a/client/src/components/map/legend/item-types/basic/index.tsx b/client/src/components/map/legend/item-types/basic/index.tsx index f9875cf..e3842dd 100644 --- a/client/src/components/map/legend/item-types/basic/index.tsx +++ b/client/src/components/map/legend/item-types/basic/index.tsx @@ -13,7 +13,7 @@ export const LegendTypeBasic: React.FC = ({ }) => { return (
diff --git a/client/src/components/map/legend/item-types/choropleth/index.tsx b/client/src/components/map/legend/item-types/choropleth/index.tsx index 310219f..687c41f 100644 --- a/client/src/components/map/legend/item-types/choropleth/index.tsx +++ b/client/src/components/map/legend/item-types/choropleth/index.tsx @@ -13,7 +13,7 @@ export const LegendTypeChoropleth: React.FC = ({ }) => { return (
diff --git a/client/src/components/map/legend/item-types/gradient/index.tsx b/client/src/components/map/legend/item-types/gradient/index.tsx index 9fc8629..a4ed51c 100644 --- a/client/src/components/map/legend/item-types/gradient/index.tsx +++ b/client/src/components/map/legend/item-types/gradient/index.tsx @@ -13,7 +13,7 @@ export const LegendTypeGradient: React.FC = ({ }) => { return (
diff --git a/client/src/components/map/legend/item-types/header.tsx b/client/src/components/map/legend/item-types/header.tsx index 5ff7f5b..6d30dc6 100644 --- a/client/src/components/map/legend/item-types/header.tsx +++ b/client/src/components/map/legend/item-types/header.tsx @@ -10,7 +10,7 @@ type LegendHeaderProps = { const LegendHeader = ({ title, info }: LegendHeaderProps) => { return ( -
+
{!!title &&
{title}
} {!!info && ( diff --git a/client/src/components/map/legend/item-types/matrix/index.tsx b/client/src/components/map/legend/item-types/matrix/index.tsx index 03d9fa2..374d46c 100644 --- a/client/src/components/map/legend/item-types/matrix/index.tsx +++ b/client/src/components/map/legend/item-types/matrix/index.tsx @@ -10,7 +10,7 @@ export const LegendTypeMatrix: React.FC { return ( -
+

Always diff --git a/client/src/components/map/legend/item-types/switch/index.tsx b/client/src/components/map/legend/item-types/switch/index.tsx index 91a2e29..1ed7b61 100644 --- a/client/src/components/map/legend/item-types/switch/index.tsx +++ b/client/src/components/map/legend/item-types/switch/index.tsx @@ -34,7 +34,7 @@ const LegendTypeSwitch = ({ ); return ( -

+