From 338f6ee1371a109500a32a4fa11c7b0c3a01c002 Mon Sep 17 00:00:00 2001
From: Xavier Desoindre <xavier.desoindre@hotmail.fr>
Date: Wed, 4 Dec 2024 11:01:36 +0100
Subject: [PATCH] chore: use explicit scroll on extra simulator

---
 src/components/outils/CategoryPage.tsx   |  8 +---
 src/components/outils/ExtraSimulator.tsx | 47 +++++++++++++++++-------
 src/utils/notion.ts                      |  3 ++
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/components/outils/CategoryPage.tsx b/src/components/outils/CategoryPage.tsx
index 33551dc2d..bd9a792d3 100644
--- a/src/components/outils/CategoryPage.tsx
+++ b/src/components/outils/CategoryPage.tsx
@@ -38,13 +38,7 @@ const CategoryPage = ({
         <Category category={category} simulator={simulator} />
         {category.sources && <Sources className={styles.sources} sources={category.sources} tracking={category.name} />}
       </Block>
-      {extraSimulator && (
-        <Block id={extraSimulator.slug} title={extraSimulator.title} description={extraSimulator.description}>
-          <ExtraSimulator tracking={extraSimulator.tracking} slug={extraSimulator.slug} small={extraSimulator.small}>
-            {extraSimulator.simulator}
-          </ExtraSimulator>
-        </Block>
-      )}
+      {extraSimulator && <ExtraSimulator simulator={extraSimulator}>{extraSimulator.simulator}</ExtraSimulator>}
       <Suspense>
         <Examples
           title='Exemples'
diff --git a/src/components/outils/ExtraSimulator.tsx b/src/components/outils/ExtraSimulator.tsx
index 7b7a21148..11abd23b0 100644
--- a/src/components/outils/ExtraSimulator.tsx
+++ b/src/components/outils/ExtraSimulator.tsx
@@ -1,33 +1,54 @@
-import React, { ReactNode, useMemo } from 'react'
+'use client'
+
+import { ReactNode, useEffect, useMemo } from 'react'
+import Block from 'components/layout/Block'
 import Shareable from 'components/shareable/Shareable'
 import { overScreenCategoryValues, overScreenOsezChangerValues } from 'components/shareable/overScreens/Values'
 import styles from './ExtraSimulator.module.css'
 
 const ExtraSimulator = ({
   children,
-  tracking,
-  slug,
-  small,
+  simulator,
 }: {
   children: ReactNode
-  tracking: string
-  slug: string
-  small?: boolean
+  simulator: {
+    slug: string
+    tracking: string
+    title: string
+    description: string
+    simulator: ReactNode
+    small?: boolean
+  }
 }) => {
   const overScreens = useMemo(
     () =>
-      slug === 'osez-changer'
+      simulator.slug === 'osez-changer'
         ? overScreenOsezChangerValues()
-        : overScreenCategoryValues({ id: 2, unit: slug, slug, name: tracking }),
-    [slug, tracking]
+        : overScreenCategoryValues({ id: 2, unit: simulator.slug, slug: simulator.slug, name: simulator.tracking }),
+    [simulator]
   )
 
-  const simulator = (
-    <Shareable slug={slug} tracking={tracking} overScreens={overScreens} small={small}>
+  useEffect(() => {
+    if (window && window.location.hash) {
+      console.log(window.location.hash)
+      const anchor = window.location.hash.replace('#', '')
+      const element = document.getElementById(anchor)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
+  }, [])
+
+  const component = (
+    <Shareable slug={simulator.slug} tracking={simulator.tracking} overScreens={overScreens} small={simulator.small}>
       {children}
     </Shareable>
   )
-  return small ? <div className={styles.container}>{simulator}</div> : simulator
+  return (
+    <Block id={simulator.slug} title={simulator.title} description={simulator.description}>
+      {simulator.small ? <div className={styles.container}>{component}</div> : component}
+    </Block>
+  )
 }
 
 export default ExtraSimulator
diff --git a/src/utils/notion.ts b/src/utils/notion.ts
index 46e7c353c..016459696 100644
--- a/src/utils/notion.ts
+++ b/src/utils/notion.ts
@@ -60,6 +60,9 @@ export const NotionCommandValidation = z
 export type NotionCommand = z.infer<typeof NotionCommandValidation>
 
 export const getAllNotionDB = async <T>(url: string): Promise<{ id: string; properties: T }[]> => {
+  if (!process.env.NOTION_API_KEY) {
+    return []
+  }
   let results: { id: string; properties: T }[] = []
   let axiosResponse:
     | AxiosResponse<{