diff --git a/pages/[id].page.tsx b/pages/[id].page.tsx index 5bee4d0..45df287 100644 --- a/pages/[id].page.tsx +++ b/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() diff --git a/pages/index.page.tsx b/pages/index.page.tsx index 30a467a..3da505f 100644 --- a/pages/index.page.tsx +++ b/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 ( <> sandevistan - + window.open('/about', '_self', 'noreferrer')}> explore - - - ) } diff --git a/pages/styles.ts b/pages/styles.ts index 0041c5e..961b78f 100644 --- a/pages/styles.ts +++ b/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; diff --git a/public/assets/sounds/bg-sound.MP3 b/public/assets/sounds/bg-sound.MP3 deleted file mode 100644 index b5e3e15..0000000 Binary files a/public/assets/sounds/bg-sound.MP3 and /dev/null differ diff --git a/public/assets/sounds/glitch-sound.MP3 b/public/assets/sounds/glitch-sound.MP3 deleted file mode 100644 index 1e3998e..0000000 Binary files a/public/assets/sounds/glitch-sound.MP3 and /dev/null differ diff --git a/public/assets/sounds/sound-button-click.MP3 b/public/assets/sounds/sound-button-click.MP3 deleted file mode 100644 index 56be4e5..0000000 Binary files a/public/assets/sounds/sound-button-click.MP3 and /dev/null differ diff --git a/src/components/Equalizer/Equalizer.data.ts b/src/components/Equalizer/Equalizer.data.ts deleted file mode 100644 index 77b3b20..0000000 --- a/src/components/Equalizer/Equalizer.data.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const settings = { - url: '/assets/sounds/bg-sound.MP3', - loop: true, - volume: 3, -} - -export const STATUS_SOUND = { - PLAYING: 'PLAYING', - PAUSED: 'PAUSED', -} as const diff --git a/src/components/Equalizer/Equalizer.spec.tsx b/src/components/Equalizer/Equalizer.spec.tsx deleted file mode 100644 index eae44e4..0000000 --- a/src/components/Equalizer/Equalizer.spec.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { render, screen, fireEvent } from '@testing-library/react' -import Equalizer from '.' - -describe('', () => { - const lineId = 'equalizer_line' - - it('should render line when isOpen is true', () => { - render() - - expect(screen.getByTestId(lineId)).toBeInTheDocument() - }) - - it('should render closedLine when isOpen is false', () => { - render() - - fireEvent.click(screen.getByTestId(lineId)) - - expect(screen.getByTestId('equalizer_closedLine')).toBeInTheDocument() - }) -}) diff --git a/src/components/Equalizer/index.tsx b/src/components/Equalizer/index.tsx deleted file mode 100644 index 4caea97..0000000 --- a/src/components/Equalizer/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useEffect, useState } from 'react' -import Sound from 'react-sound' -import LOCALSTORAGES from '~/src/enums/localstorages' - -import { STATUS_SOUND, settings } from './Equalizer.data' -import * as S from './styles' - -export type StatusSound = 'PLAYING' | 'PAUSED' - -const Equalizer = () => { - const [status, setStatus] = useState('PLAYING') - - const isPlaying = status === STATUS_SOUND.PLAYING - - useEffect(() => { - const storedStatus = localStorage.getItem( - LOCALSTORAGES.BG_SOUND - ) as StatusSound - - storedStatus && setStatus(storedStatus) - }, []) - - const toggleStatus = () => { - const newStatus: StatusSound = isPlaying - ? STATUS_SOUND.PAUSED - : STATUS_SOUND.PLAYING - - localStorage.setItem(LOCALSTORAGES.BG_SOUND, newStatus) - setStatus(newStatus) - } - - return ( - - - - {isPlaying ? ( - <> - - - - - ) : ( - - )} - - ) -} - -export default Equalizer diff --git a/src/components/Equalizer/styles.ts b/src/components/Equalizer/styles.ts deleted file mode 100644 index 05d0082..0000000 --- a/src/components/Equalizer/styles.ts +++ /dev/null @@ -1,141 +0,0 @@ -import styled from 'styled-components' - -export const Wrapper = styled.div` - cursor: pointer; - height: 20px; - - display: flex; - align-items: flex-end; - width: auto; -` - -export const Line = styled.div` - width: var(--spacing-basic-small); - background-color: var(--white); - margin: 0 2px; - animation: equalizer 1.9s steps(20, end) infinite; - - :nth-child(1) { - animation-duration: 1.9s; - } - - :nth-child(2) { - animation-duration: 2s; - } - - :nth-child(3) { - animation-duration: 1.7s; - } - - @keyframes equalizer { - 0% { - height: 60%; - } - - 4% { - height: 50%; - } - - 8% { - height: 40%; - } - - 12% { - height: 30%; - } - - 16% { - height: 20%; - } - - 20% { - height: 30%; - } - - 24% { - height: 40%; - } - - 28% { - height: 10%; - } - - 32% { - height: 40%; - } - - 36% { - height: 60%; - } - - 40% { - height: 20%; - } - - 44% { - height: 40%; - } - - 48% { - height: 70%; - } - - 52% { - height: 30%; - } - - 56% { - height: 10%; - } - - 60% { - height: 30%; - } - - 64% { - height: 50%; - } - - 68% { - height: 60%; - } - - 72% { - height: 70%; - } - - 76% { - height: 80%; - } - - 80% { - height: 70%; - } - - 84% { - height: 60%; - } - - 88% { - height: 50%; - } - - 92% { - height: 60%; - } - - 96% { - height: 70%; - } - - 100% { - height: 80%; - } - } -` - -export const ClosedLine = styled.div` - width: 27px; - height: 2px; - background-color: var(--white); -` diff --git a/src/contexts/ContextPages/index.tsx b/src/contexts/ContextPages/index.tsx index 0732682..ee6c7ff 100644 --- a/src/contexts/ContextPages/index.tsx +++ b/src/contexts/ContextPages/index.tsx @@ -3,23 +3,18 @@ import { createContext, useContext, useEffect, + useMemo, useState, } from 'react' import { Block } from '~/src/helpers/notionConverter/notionConverter.types' type PagesStoraged = { - idPage: string - setIdPage: (idPages: string) => void pages: Block[] isLoading: boolean hasError: boolean } const initialContextValue: PagesStoraged = { - idPage: '', - setIdPage: () => { - console.log() - }, pages: [], isLoading: false, hasError: false, @@ -30,7 +25,6 @@ export const PagesStoragedContext = export const usePagesStoraged = () => { const context = useContext(PagesStoragedContext) - return context } @@ -42,7 +36,6 @@ export const PagesStoregedProvider = ({ const [isLoading, setIsLoading] = useState(false) const [hasError, setHasError] = useState(false) const [pages, setPages] = useState([] as Block[]) - const [idPage, setIdPage] = useState('') useEffect(() => { const fetchData = async () => { @@ -55,7 +48,6 @@ export const PagesStoregedProvider = ({ } const data = await response.json() - setPages(data.results) } catch (error) { console.error('Error fetching data:', error) @@ -68,13 +60,14 @@ export const PagesStoregedProvider = ({ fetchData() }, []) - const contextValue: PagesStoraged = { - pages, - idPage, - setIdPage, - isLoading, - hasError, - } + const contextValue = useMemo( + () => ({ + pages, + isLoading, + hasError, + }), + [pages, isLoading, hasError] + ) return ( diff --git a/src/enums/localstorages.ts b/src/enums/localstorages.ts deleted file mode 100644 index 3b9b067..0000000 --- a/src/enums/localstorages.ts +++ /dev/null @@ -1,5 +0,0 @@ -const LOCALSTORAGES = { - BG_SOUND: 'BG_SOUND', -} - -export default LOCALSTORAGES diff --git a/src/helpers/formateTitle.ts b/src/helpers/formateTitle.ts new file mode 100644 index 0000000..cfd6b33 --- /dev/null +++ b/src/helpers/formateTitle.ts @@ -0,0 +1,3 @@ +export const formatedTitle = (title: string, withHyphens?: boolean) => { + return withHyphens ? title.replaceAll(' ', '-') : title.replaceAll('-', ' ') +} diff --git a/src/layout/components/NavBar/helpers/getPaths.ts b/src/helpers/getPaths.ts similarity index 100% rename from src/layout/components/NavBar/helpers/getPaths.ts rename to src/helpers/getPaths.ts diff --git a/src/layout/components/NavBar/Desktop/index.tsx b/src/layout/components/NavBar/Desktop/index.tsx index c4a1b9e..bb8c14d 100644 --- a/src/layout/components/NavBar/Desktop/index.tsx +++ b/src/layout/components/NavBar/Desktop/index.tsx @@ -1,46 +1,36 @@ import { useRouter } from 'next/router' -import { useState } from 'react' -import Equalizer from '~/src/components/Equalizer' -import { usePagesStoraged } from '~/src/contexts/ContextPages' -import { SoundClickButton } from '~/src/utils/sounds' +import { memo, useState } from 'react' +import { formatedTitle } from '../../../../helpers/formateTitle' +import { getPaths } from '../../../../helpers/getPaths' import { NavBarProps } from '../Navbar.types' -import { titleWithHyphens } from '../helpers/formateTitle' -import { getPaths } from '../helpers/getPaths' import * as S from './styles' const DesktopNavBar = ({ pages }: NavBarProps) => { const router = useRouter() const [isOpen, setIsOpen] = useState(true) - const { setIdPage } = usePagesStoraged() - const closeNavBar = () => { - SoundClickButton() setIsOpen(!isOpen) } - const goToContent = (id: string, title: string) => { - setIdPage(id) - router.push(titleWithHyphens(title)) - } - const paths = getPaths({ pages }) return ( <> - {paths?.map(({ title, id }) => ( - goToContent(id, title)}> + {paths?.map(({ title }) => ( + router.push(formatedTitle(title, true))} + > {title} ))} - -
@@ -50,4 +40,4 @@ const DesktopNavBar = ({ pages }: NavBarProps) => { ) } -export default DesktopNavBar +export default memo(DesktopNavBar) diff --git a/src/layout/components/NavBar/Mobile/index.tsx b/src/layout/components/NavBar/Mobile/index.tsx index a9d189c..48b62f0 100644 --- a/src/layout/components/NavBar/Mobile/index.tsx +++ b/src/layout/components/NavBar/Mobile/index.tsx @@ -1,21 +1,14 @@ import { useRouter } from 'next/router' import React, { useState } from 'react' -import { usePagesStoraged } from '~/src/contexts/ContextPages' +import { formatedTitle } from '../../../../helpers/formateTitle' +import { getPaths } from '../../../../helpers/getPaths' import { NavBarProps } from '../Navbar.types' -import { titleWithHyphens } from '../helpers/formateTitle' -import { getPaths } from '../helpers/getPaths' import * as S from './styles' const MobileNavBar = ({ pages }: NavBarProps) => { const router = useRouter() const [isOpen, setIsOpen] = useState(false) - const { setIdPage } = usePagesStoraged() - - const goToContent = (id: string, title: string) => { - setIdPage(id) - router.push(titleWithHyphens(title)) - } const paths = getPaths({ pages }) @@ -27,7 +20,10 @@ const MobileNavBar = ({ pages }: NavBarProps) => { {paths?.map(({ title, id }) => { return ( - goToContent(id, title)}> + router.push(formatedTitle(title, true))} + > {title} ) diff --git a/src/layout/components/NavBar/helpers/formateTitle.ts b/src/layout/components/NavBar/helpers/formateTitle.ts deleted file mode 100644 index ff8a6d7..0000000 --- a/src/layout/components/NavBar/helpers/formateTitle.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const titleWithHyphens = (title: string) => { - return title.replaceAll(' ', '-') -} diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 2fd74f0..fe3d6c0 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react' +import { ReactNode, memo } from 'react' import ErrorCase from '../components/ErrorCase' import { usePagesStoraged } from '../contexts/ContextPages' @@ -25,11 +25,13 @@ const Layout = ({ children }: LayoutProps) => { ) } + const LayoutBaseMemorized = memo(LayoutBase) + if (isLoading) return if (hasError) return ( - + @@ -38,11 +40,11 @@ const Layout = ({ children }: LayoutProps) => { hasMargin={true} /> - + ) - return ( - + const MemorizedContent = memo(() => ( + @@ -50,8 +52,12 @@ const Layout = ({ children }: LayoutProps) => { {children} - - ) + + )) + + MemorizedContent.displayName = 'MemorizedContent' + + return } export default Layout diff --git a/src/utils/sounds.ts b/src/utils/sounds.ts deleted file mode 100644 index 02f6da1..0000000 --- a/src/utils/sounds.ts +++ /dev/null @@ -1,23 +0,0 @@ -const pathSounds = '/assets/sounds/' - -export const settingsSound = { - url: `${pathSounds}bg-sound.MP3`, - playbackRate: 2, - volume: 3, -} - -export const SoundClickButton = () => { - const audio = new Audio(`${pathSounds}sound-button-click.MP3`) - - audio.volume = 0.3 - - audio.play() -} - -export const SoundGlitch = () => { - const audio = new Audio(`${pathSounds}glitch-sound.MP3`) - - audio.volume = 0.3 - - audio.play() -}