albert/erettsegi-browser
1
0
Fork 0
mirror of https://github.com/skidoodle/erettsegi-browser.git synced 2025-02-15 05:39:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Refactor button component and theme switcher

Browse source
This commit is contained in:
skidoodle 2024-02-10 18:45:31 +01:00
parent 1a4ad1f97e
commit 66c6e0a439
2 changed files with 16 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/Buttons.tsx
View file

@ -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<ButtonProps> = ({ label, link }) => {
const [status, setStatus] = useState<number>(0)
const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
const [status, setStatus] = useState<number>()
const [isLoading, setIsLoading] = useState<boolean>(false)
const checkLinkStatus = async (): Promise<void> => {
const checkLinkStatus = useCallback(async (): Promise<void> => {
if (link) {
try {
setIsLoading(true)
@ -20,13 +20,13 @@ const CustomButton: React.FC<ButtonProps> = ({ 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<ButtonProps> = ({ 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 (
<Button
@ -58,12 +58,12 @@ const CustomButton: React.FC<ButtonProps> = ({ label, link }) => {
{label}
</Button>
)
}
})
export const PdfButton: React.FC<ButtonProps> = ({ label, link }) => (
<CustomButton label={label} link={link} />
export const PdfButton: React.FC<ButtonProps> = React.memo(
({ label, link }) => <CustomButton label={label} link={link} />
)
export const ZipButton: React.FC<ButtonProps> = ({ label, link }) => (
<CustomButton label={label} link={link} />
export const ZipButton: React.FC<ButtonProps> = React.memo(
({ label, link }) => <CustomButton label={label} link={link} />
)

11
src/components/ThemeSwitcher.tsx
View file

@ -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 (