From ddd683d6febd4afea852a4c6e039cede6a15b47a 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/faq/FAQs.tsx              |  4 +-
 src/components/outils/CategoryPage.tsx   |  8 +---
 src/components/outils/ExtraSimulator.tsx | 47 +++++++++++++++++-------
 src/utils/faq.ts                         | 24 ++++++------
 src/utils/notion.ts                      |  3 ++
 5 files changed, 53 insertions(+), 33 deletions(-)

diff --git a/src/components/faq/FAQs.tsx b/src/components/faq/FAQs.tsx
index 45099eb4c..52ba5a418 100644
--- a/src/components/faq/FAQs.tsx
+++ b/src/components/faq/FAQs.tsx
@@ -10,10 +10,10 @@ const FAQs = async ({
 }: {
   filter: string
 } & Omit<FAQSListProps, 'faqs' | 'title' | 'description' | 'link' | 'linkLabel'>) => {
-  const faqs = await getFAQs()
+  const faqs = await getFAQs(filter)
   return (
     <FAQsList
-      faqs={faqs.filter((faq) => faq.pages.includes(filter))}
+      faqs={faqs}
       title='Questions fréquentes'
       description='Explorer la FAQ pour trouver les réponses à vos questions'
       {...rest}
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/faq.ts b/src/utils/faq.ts
index 388dd6fb8..8a6b79ae4 100644
--- a/src/utils/faq.ts
+++ b/src/utils/faq.ts
@@ -5,7 +5,7 @@ import { getAllNotionDB } from './notion'
 import { getRevalidate } from './revalidate'
 
 export const getFAQs = unstable_cache(
-  async (): Promise<FAQ[]> => {
+  async (filter?: string): Promise<FAQ[]> => {
     try {
       const results = await getAllNotionDB<{
         Name: { title: { plain_text: string }[] }
@@ -15,17 +15,19 @@ export const getFAQs = unstable_cache(
       }>('https://api.notion.com/v1/databases/f21b76594988440c98fc153d73ad5730/query')
 
       const contents = await Promise.all(
-        results.map(async (result) => {
-          try {
-            const content = await getNotionContentProps(result.id)
-            return {
-              id: result.id,
-              content,
+        results
+          .filter((result) => result.properties['Page(s)']?.multi_select?.some((select) => select.name === filter))
+          .map(async (result) => {
+            try {
+              const content = await getNotionContentProps(result.id)
+              return {
+                id: result.id,
+                content,
+              }
+            } catch {
+              return { id: null, content: null }
             }
-          } catch {
-            return { id: null, content: null }
-          }
-        })
+          })
       )
 
       return results
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<{