diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx index 56bed3c..00c09a4 100644 --- a/src/components/Buttons.tsx +++ b/src/components/Buttons.tsx @@ -1,13 +1,13 @@ import { Button } from '@nextui-org/react' -import { useState, useEffect } from 'react' +import React, { useState, useEffect, useCallback } from 'react' import type { ButtonProps } from '@/utils/props' import type { ButtonColor } from '@/utils/types' -const CustomButton: React.FC = ({ label, link }) => { - const [status, setStatus] = useState(0) +const CustomButton: React.FC = React.memo(({ label, link }) => { + const [status, setStatus] = useState() const [isLoading, setIsLoading] = useState(false) - const checkLinkStatus = async (): Promise => { + const checkLinkStatus = useCallback(async (): Promise => { if (link) { try { setIsLoading(true) @@ -20,13 +20,13 @@ const CustomButton: React.FC = ({ label, link }) => { setIsLoading(false) } } - } + }, [link]) useEffect(() => { void checkLinkStatus() - }, [link]) + }, [checkLinkStatus]) - const getColor = (): ButtonColor => { + const getColor = useCallback((): ButtonColor => { switch (true) { case isLoading: return 'default' @@ -37,15 +37,15 @@ const CustomButton: React.FC = ({ label, link }) => { default: return 'default' } - } + }, [isLoading, status]) - const handleClick = () => { + const handleClick = useCallback(() => { if (status === 200 && link) { window.open(link) } else { console.error('A hivatkozás nem elérhető.') } - } + }, [status, link]) return ( ) -} +}) -export const PdfButton: React.FC = ({ label, link }) => ( - +export const PdfButton: React.FC = React.memo( + ({ label, link }) => ) -export const ZipButton: React.FC = ({ label, link }) => ( - +export const ZipButton: React.FC = React.memo( + ({ label, link }) => ) diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx index 97d606a..46da86f 100644 --- a/src/components/ThemeSwitcher.tsx +++ b/src/components/ThemeSwitcher.tsx @@ -6,16 +6,7 @@ export const ThemeSwitcher = () => { const { theme, setTheme } = useTheme() const toggle = () => { - switch (theme) { - case 'dark': - setTheme('light') - break - case 'light': - setTheme('dark') - break - default: - break - } + setTheme(theme === 'light' ? 'dark' : 'light') } return (