Add map to layer

Vizzuality · Aug 22, 2023 · 3a738fc · 3a738fc
1 parent 5ea3270
commit 3a738fc
Show file tree

Hide file tree

Showing 13 changed files with 169 additions and 21 deletions.
diff --git a/client/public/fonts/NotesEsaBol.otf b/client/public/fonts/NotesEsaBol.otf
diff --git a/client/public/fonts/NotesEsaBolIta.otf b/client/public/fonts/NotesEsaBolIta.otf
diff --git a/client/public/fonts/NotesEsaReg.otf b/client/public/fonts/NotesEsaReg.otf
diff --git a/client/public/fonts/NotesEsaRegIta.otf b/client/public/fonts/NotesEsaRegIta.otf
diff --git a/client/src/app/[storyId]/[step]/page.tsx b/client/src/app/[storyId]/[step]/page.tsx
@@ -0,0 +1,22 @@
+import Hydrate from '@/lib/react-query/hydrate';
+
+import { prefetchQueries } from '@/app/prefetch';
+
+import Story from '@/containers/story';
+
+export default async function StoryPage({
+  params,
+}: {
+  params: {
+    storyId: string;
+    step: string;
+  };
+}) {
+  const dehydratedState = await prefetchQueries();
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <Story storyId={params.storyId} step={params.step} />
+    </Hydrate>
+  );
+}
diff --git a/client/src/app/layout-providers.tsx b/client/src/app/layout-providers.tsx
@@ -1,19 +1,43 @@
 'use client';
 
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useCallback, useState } from 'react';
+
+import { MapProvider } from 'react-map-gl';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RecoilRoot } from 'recoil';
 
+import { RecoilURLSyncNext } from '@/lib/recoil';
+import type { Deserialize, Serialize } from '@/lib/recoil';
+import RecoilDevTools from '@/lib/recoil/devtools';
+
 import { TooltipProvider } from '@/components/ui/tooltip';
 
 export default function Providers({ children }: PropsWithChildren) {
   const [queryClient] = useState(() => new QueryClient());
+  const serialize: Serialize = useCallback((x) => {
+    return x === undefined ? '' : JSON.stringify(x);
+  }, []);
 
+  //Demo of custom deserialization
+  const deserialize: Deserialize = useCallback((x: string) => {
+    return JSON.parse(x);
+  }, []);
   return (
     <QueryClientProvider client={queryClient}>
       <RecoilRoot>
-        <TooltipProvider>{children}</TooltipProvider>
+        <MapProvider>
+          <TooltipProvider>
+            {/* <RecoilURLSyncNext
+              location={{ part: 'queryParams' }}
+              serialize={serialize}
+              deserialize={deserialize}
+            > */}
+            {/* <RecoilDevTools /> */}
+            {children}
+            {/* </RecoilURLSyncNext> */}
+          </TooltipProvider>
+        </MapProvider>
       </RecoilRoot>
     </QueryClientProvider>
   );

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -1,11 +1,11 @@
 import '@/styles/globals.css';
 import '@/styles/mapbox.css';
 
-import { Inter } from 'next/font/google';
-
 import Providers from '@/app/layout-providers';
 
-const inter = Inter({ subsets: ['latin'] });
+import Map from '@/containers/home/map';
+
+import Fonts from '@/components/ui/fonts';
 
 export const metadata = {
   title: 'Create Next App',
@@ -16,7 +16,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <Providers>
       <html lang="en">
-        <body className={inter.className}>{children}</body>
+        <Fonts />
+        <body className="font-notes h-screen w-screen">
+          <Map />
+          {children}
+        </body>
       </html>
     </Providers>
   );

diff --git a/client/src/app/page-providers.tsx b/client/src/app/page-providers.tsx
@@ -2,8 +2,6 @@
 
 import { PropsWithChildren, useCallback } from 'react';
 
-import { MapProvider } from 'react-map-gl';
-
 import { RecoilRoot } from 'recoil';
 
 import { RecoilURLSyncNext } from '@/lib/recoil';
@@ -29,7 +27,7 @@ export default function Providers({ children }: PropsWithChildren) {
       >
         <RecoilDevTools />
 
-        <MapProvider>{children}</MapProvider>
+        {children}
       </RecoilURLSyncNext>
     </RecoilRoot>
   );

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -1,7 +1,5 @@
 import Hydrate from '@/lib/react-query/hydrate';
 
-import Providers from '@/app/page-providers';
-
 import Home from '@/containers/home';
 
 import { prefetchQueries } from './prefetch';
@@ -11,9 +9,7 @@ export default async function HomePage() {
 
   return (
     <Hydrate state={dehydratedState}>
-      <Providers>
-        <Home />
-      </Providers>
+      <Home />
     </Hydrate>
   );
 }
diff --git a/client/src/components/ui/fonts.tsx b/client/src/components/ui/fonts.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { Inter as SansFont } from 'next/font/google';
+import localFont from 'next/font/local';
+import { useServerInsertedHTML } from 'next/navigation';
+
+const sans = SansFont({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
+  weight: ['400'],
+  display: 'swap',
+});
+
+const esaNotes = localFont({
+  src: [
+    {
+      path: '../../../public/fonts/NotesEsaBol.otf',
+      weight: 'bold',
+      style: 'normal',
+    },
+    {
+      path: '../../../public/fonts/NotesEsaBolIta.otf',
+      weight: 'bold',
+      style: 'italic',
+    },
+    {
+      path: '../../../public/fonts/NotesEsaReg.otf',
+      weight: 'normal',
+      style: 'normal',
+    },
+    {
+      path: '../../../public/fonts/NotesEsaRegIta.otf',
+      weight: 'normal',
+      style: 'italic',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-esa-notes',
+});
+
+function Fonts() {
+  useServerInsertedHTML(() => {
+    return (
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+          :root {
+            --font-inter: ${sans.style.fontFamily};
+            --font-esa-notes: ${esaNotes.style.fontFamily};
+          }
+        `,
+        }}
+      />
+    );
+  });
+
+  return null;
+}
+
+export default Fonts;
diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx
@@ -1,24 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+
 import Link from 'next/link';
 
+import { useSetRecoilState } from 'recoil';
+
+import { tmpBboxAtom } from '@/store';
+
 import Datasets from '@/containers/home/datasets';
-import Map from '@/containers/home/map';
 import Sidebar from '@/containers/home/sidebar';
-import SyncStoreHome from '@/containers/home/sync-store';
 
 export default async function Home() {
+  const bbox: [number, number, number, number] = [-50.45, -66.05, 107.79, 85.05];
+  const setBbox = useSetRecoilState(tmpBboxAtom);
+
+  useEffect(() => {
+    setBbox(bbox);
+  }, [setBbox]);
+
   return (
     <>
-      <main className="flex min-h-screen flex-col">
-        <div className="h-screen w-screen">
-          <Map />
+      <main className="w absolute left-0 top-0 flex h-screen flex-col">
+        <div>
           <Sidebar>
             <Link href="/links">Links</Link>
+            <Link href="/story1/1">Story 1</Link>
             <Datasets />
           </Sidebar>
         </div>
       </main>
-
-      <SyncStoreHome />
     </>
   );
 }
diff --git a/client/src/containers/story/index.tsx b/client/src/containers/story/index.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import Link from 'next/link';
+
+import { useSetRecoilState } from 'recoil';
+
+import { tmpBboxAtom } from '@/store';
+
+const Story = ({ storyId, step }: { storyId: string; step: string }) => {
+  const setTmpBbox = useSetRecoilState(tmpBboxAtom);
+
+  useEffect(() => {
+    setTmpBbox([20, 0, 25, 1]);
+  }, [setTmpBbox]);
+
+  return (
+    <div className="absolute left-0 top-0 z-50 bg-white">
+      <h1>
+        {storyId} step {step}
+      </h1>
+      <Link href="/">Back to Home page</Link>
+    </div>
+  );
+};
+
+export default Story;
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -70,6 +70,10 @@ module.exports = {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
       },
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+        notes: ['var(--font-esa-notes)'],
+      },
     },
   },
   plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],