Merge pull request #48 from gabrielduete/feat/use-context-paths-in-mo…

…bile-menu

feat: use context paths in mobile-menu

src/layout/components/NavBar/Desktop/index.tsx

@@ -5,15 +5,15 @@ import {
   PagesStoregedProvider,
   usePagesStoraged,
 } from '~/src/contexts/ContextPages'
-import { ChildPageBlock } from '~/src/helpers/notionConverter/notionConverter.types'
 import { SoundClickButton } from '~/src/utils/sounds'
 
+import { titleWithHyphens } from '../helpers/formateTitle'
+import { getPaths } from '../helpers/getPaths'
 import * as S from './styles'
 
 const DesktopNavBar = () => {
   const router = useRouter()
   const [isOpen, setIsOpen] = useState(true)
-
   const { setIdPage, pages } = usePagesStoraged()
 
   const closeNavBar = () => {
@@ -22,26 +22,11 @@ const DesktopNavBar = () => {
   }
 
   const goToContent = (id: string, title: string) => {
-    const titleWithHyphens = title.replaceAll(' ', '-')
-
     setIdPage(id)
-
-    router.push(titleWithHyphens)
+    router.push(titleWithHyphens(title))
   }
 
-  const childPageBlocks = pages?.filter(
-    (block): block is ChildPageBlock => block.type === 'child_page'
-  )
-
-  const paths = childPageBlocks
-    ?.map(({ id, child_page }) => {
-      const title = child_page?.title
-
-      // @NOTE: Disable eslint to use assertion, because typescript is not recognizing that title is not undefined
-      // eslint-disable-next-line
-      return { id, title: title! }
-    })
-    .filter(page => page.title !== undefined)
+  const paths = getPaths({ pages })
 
   return (
     <PagesStoregedProvider>

src/layout/components/NavBar/Mobile/index.tsx

@@ -1,19 +1,35 @@
+import { useRouter } from 'next/router'
 import React, { useState } from 'react'
+import { usePagesStoraged } from '~/src/contexts/ContextPages'
 
-import { navBarMock } from '../Navbar.mock'
+import { titleWithHyphens } from '../helpers/formateTitle'
+import { getPaths } from '../helpers/getPaths'
 import * as S from './styles'
 
 const MobileNavBar = () => {
+  const router = useRouter()
   const [isOpen, setIsOpen] = useState(false)
+  const { setIdPage, pages } = usePagesStoraged()
+
+  const goToContent = (id: string, title: string) => {
+    setIdPage(id)
+    router.push(titleWithHyphens(title))
+  }
+
+  const paths = getPaths({ pages })
 
   return (
     <S.Container>
       <S.IconOpen onClick={() => setIsOpen(true)} />
       <S.WrapperContent isOpen={isOpen}>
         <S.IconClose onClick={() => setIsOpen(false)} />
         <S.WrapperLinks>
-          {navBarMock.map(({ name }, idx) => {
-            return <S.Link key={idx}>{name}</S.Link>
+          {paths.map(({ title, id }) => {
+            return (
+              <S.Link key={id} onClick={() => goToContent(id, title)}>
+                {title}
+              </S.Link>
+            )
           })}
         </S.WrapperLinks>
       </S.WrapperContent>

src/layout/components/NavBar/helpers/formateTitle.ts

@@ -0,0 +1,3 @@
+export const titleWithHyphens = (title: string) => {
+  return title.replaceAll(' ', '-')
+}

src/layout/components/NavBar/helpers/getPaths.ts

@@ -0,0 +1,26 @@
+import {
+  Block,
+  ChildPageBlock,
+} from '~/src/helpers/notionConverter/notionConverter.types'
+
+type getPathsParams = {
+  pages: Block[]
+}
+
+export const getPaths = ({ pages }: getPathsParams) => {
+  const childPageBlocks = pages?.filter(
+    (block): block is ChildPageBlock => block.type === 'child_page'
+  )
+
+  const filtredPaths = childPageBlocks
+    ?.map(({ id, child_page }) => {
+      const title = child_page?.title
+
+      // @NOTE: Disable eslint to use assertion, because typescript is not recognizing that title is not undefined
+      // eslint-disable-next-line
+      return { id, title: title! }
+    })
+    .filter(page => page.title !== undefined)
+
+  return filtredPaths
+}