refactor: Extract handleFinish and handleMouseEvent logic to utility …

…functions

- Moved `handleFinish` and `handleMouseEvent` logic to a separate `timerHandler.ts` utility file.
- Updated `Timer.tsx` to use these utility functions, improving code modularity and readability.

src/pages/Timer.tsx

@@ -2,12 +2,12 @@ import { useEffect } from 'react';
 import { themes } from '../config/timer/themes';
 import { useTimer } from '../hooks/useTimer';
 import { useLocalStorage } from 'usehooks-ts';
+import { handleFinish, handleMouseEvent } from '../utils/timerHandler';
 import UnitToggleButton from '../components/Button/UnitToggleButton';
 import TimerDisplay from '../components/Display/TimerDisplay';
 import QuoteDisplay from '../components/Display/QuoteDisplay';
 import ControlButtons from '../components/Button/ControlButtons';
 import ThemeSwitchButtons from '../components/Button/ThemeSwitchButtons';
-import alarmSound from '../assets/alarmSound.mp3';
 
 const Timer: React.FC = () => {
  const [theme, setTheme] = useLocalStorage<string>('theme', 'classic');
@@ -33,42 +33,11 @@ const Timer: React.FC = () => {
  initialTime: storedTime,
  unit: storedIsMinutes ? 'minutes' : 'seconds',
  maxTime: 60,
- onFinish: () => {
- handleFinish();
- },
+ onFinish: () => handleFinish(),
  });
 
- const handleFinish = () => {
- const audio = new Audio(alarmSound);
- audio
- .play()
- .then(() => {
- setTimeout(() => {
- window.alert('Timer finished!');
- audio.pause();
- audio.currentTime = 0;
- }, 0);
- })
- .catch((error) => {
- console.error('Failed to play the sound:', error);
- });
- };
-
  const progress = count / currentUnit.denominator;
 
- const handleMouseEvent = (e: React.MouseEvent) => {
- const rect = e.currentTarget.getBoundingClientRect();
- const x = e.clientX - rect.left - rect.width / 2;
- const y = e.clientY - rect.top - rect.height / 2;
- const radians = Math.atan2(y, x);
- let degrees = radians * (180 / Math.PI) + 90;
- if (degrees < 0) degrees += 360;
-
- const roundedDegrees = Math.round(degrees / 6) * 6;
- const newTime = roundedDegrees / 6;
- setTime(newTime);
- };
-
  useEffect(() => {
  setStoredTime(totalTime);
  }, [totalTime]);
@@ -85,7 +54,11 @@ const Timer: React.FC = () => {
  isRunning={isRunning}
  currentTheme={currentTheme}
  />
- <TimerDisplay progress={progress} currentTheme={currentTheme} handleMouseEvent={handleMouseEvent}>
+ <TimerDisplay
+ progress={progress}
+ currentTheme={currentTheme}
+ handleMouseEvent={(e) => handleMouseEvent(e, setTime)}
+ >
  <QuoteDisplay currentTheme={currentTheme} />
  </TimerDisplay>
  <ControlButtons

src/utils/timerHandler.ts

@@ -0,0 +1,30 @@
+import alarmSound from '../assets/alarmSound.mp3';
+
+export const handleFinish = () => {
+ const audio = new Audio(alarmSound);
+ audio
+ .play()
+ .then(() => {
+ setTimeout(() => {
+ window.alert('Timer finished!');
+ audio.pause();
+ audio.currentTime = 0;
+ }, 0);
+ })
+ .catch((error) => {
+ console.error('Failed to play the sound:', error);
+ });
+};
+
+export const handleMouseEvent = (e: React.MouseEvent, setTime: (time: number) => void) => {
+ const rect = e.currentTarget.getBoundingClientRect();
+ const x = e.clientX - rect.left - rect.width / 2;
+ const y = e.clientY - rect.top - rect.height / 2;
+ const radians = Math.atan2(y, x);
+ let degrees = radians * (180 / Math.PI) + 90;
+ if (degrees < 0) degrees += 360;
+
+ const roundedDegrees = Math.round(degrees / 6) * 6;
+ const newTime = roundedDegrees / 6;
+ setTime(newTime);
+};