Merge pull request #50 from gabrielduete/feat/adjust-layout-rerender

feat: adjust layout rerender

pages/[id].page.tsx

@@ -1,26 +1,38 @@
 import Head from 'next/head'
+import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 import ErrorCase from '~/src/components/ErrorCase'
 import SkeletonText from '~/src/components/SkeletonText'
 import { usePagesStoraged } from '~/src/contexts/ContextPages'
+import { formatedTitle } from '~/src/helpers/formateTitle'
+import { getPaths } from '~/src/helpers/getPaths'
 import { renderBlock } from '~/src/helpers/notionConverter'
 import { Block } from '~/src/helpers/notionConverter/notionConverter.types'
 import Layout from '~/src/layout'
 
 const Content = () => {
+  const router = useRouter()
+
   const [content, setContent] = useState([] as Block[])
   const [isLoading, setIsLoading] = useState(false)
   const [hasError, setHasError] = useState(false)
 
-  const { idPage } = usePagesStoraged()
+  const { pages } = usePagesStoraged()
+
+  const paths = getPaths({ pages })
+  const titlePath = formatedTitle(router.query.id?.toString() || '')
+  const actualPath = paths?.find(path => path?.title === titlePath)
+  const id = actualPath?.id
 
   const fetchData = useCallback(async () => {
+    if (!id) return
+
     setIsLoading(true)
     try {
-      const response = await fetch(`http://localhost:8080/${idPage}`)
+      const response = await fetch(`http://localhost:8080/${id}`)
 
       if (!response.ok) {
-        throw new Error(`COUND NOT GET PAGE ID: ${idPage}`)
+        throw new Error(`COUND NOT GET PAGE ID: ${id}`)
       }
 
       const data = await response.json()
@@ -32,7 +44,7 @@ const Content = () => {
     } finally {
       setIsLoading(false)
     }
-  }, [idPage])
+  }, [id])
 
   useEffect(() => {
     fetchData()

pages/index.page.tsx

@@ -1,42 +1,22 @@
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
 import type { NextPage } from 'next'
-import { useEffect } from 'react'
 import { useGlitch } from 'react-powerglitch'
-import Equalizer from '~/src/components/Equalizer'
-import { SoundClickButton, SoundGlitch } from '~/src/utils/sounds'
 
 import * as S from './styles'
 
 const Home: NextPage = () => {
   const glitch = useGlitch()
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      SoundGlitch()
-    }, 2090)
-
-    return () => clearInterval(timer)
-  }, [])
-
-  const redirectToAbout = () => {
-    SoundClickButton()
-
-    window.open('/about', '_self', 'noreferrer')
-  }
-
   return (
     <>
       <S.Wrapper>
         <S.Content>
           <S.Title ref={glitch.ref}>sandevistan</S.Title>
-          <S.Link onClick={redirectToAbout}>
+          <S.Link onClick={() => window.open('/about', '_self', 'noreferrer')}>
             explore <ArrowRightAltIcon />
           </S.Link>
         </S.Content>
       </S.Wrapper>
-      <S.WrapperEqualizer>
-        <Equalizer />
-      </S.WrapperEqualizer>
     </>
   )
 }

pages/styles.ts

@@ -17,12 +17,6 @@ export const Wrapper = styled.section`
   gap: var(--spacing-xmedium);
 `
 
-export const WrapperEqualizer = styled.footer`
-  position: absolute;
-  right: var(--spacing-medium);
-  bottom: var(--spacing-medium);
-`
-
 export const Content = styled.div`
   display: flex;
   align-items: center;