Pomodoro mode switcher works

mikumino · Dec 19, 2023 · 3bcb5c8 · 3bcb5c8
1 parent 28f7aa7
commit 3bcb5c8
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 21 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -12,14 +12,19 @@ const App = () => {
 
     const [isPomodoro, setIsPomodoro] = useState(typeof window !== 'undefined' && window.localStorage.getItem('pomodoro') === 'true' ? true : false);
 
+    const handleModeChange = () => {
+        setIsPomodoro(!isPomodoro);
+        localStorage.setItem('pomodoro', isPomodoro ? 'false' : 'true');
+    }
+
     const playAlarm = () => {
         var alarmSound = localStorage.getItem('alarmSound');
         const audio = new Audio(alarmSounds[alarmSound as keyof typeof alarmSounds] || alarmSounds['Classic']);
         audio.volume = typeof window !== 'undefined' ? parseFloat(window.localStorage.getItem('volume') || '1') : 1;
         audio.play();
     }
 
-    return isPomodoro ? <Pomodoro playAlarm={playAlarm} /> : <Flowtime playAlarm={playAlarm} />;
+    return isPomodoro ? <Pomodoro playAlarm={playAlarm} isPomodoro={isPomodoro} handleModeChange={handleModeChange}/> : <Flowtime playAlarm={playAlarm} isPomodoro={isPomodoro} handleModeChange={handleModeChange} />;
 }
 
 export default App;
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -9,7 +9,7 @@ interface ControlsProps {
 
 const Controls = ({ handleStart, handleStop, handleReset, isRunning }: ControlsProps) => {
     return (
-        <div className="flex flex-row items-center justify-center">
+        <div className="flex flex-row items-center justify-center mb-48">
             <button className="btn btn-circle btn-primary mr-4" onClick={handleStart}>
                 {isRunning ? (
                     <FaPause />

diff --git a/src/components/Flowtime.tsx b/src/components/Flowtime.tsx
@@ -1,13 +1,15 @@
 import { useState } from 'react';
 import FLowtimeFocus from './FlowtimeFocus';
 import FlowtimeBreak from './FlowtimeBreak';
+import PomoFlowSwitcher from './PomoFlowSwitcher';
 
 interface FlowtimeProps {
     playAlarm: () => void;
-
+    isPomodoro: boolean;
+    handleModeChange: () => void;
 }
 
-const Flowtime = ({ playAlarm }: FlowtimeProps) => {
+const Flowtime = ({ playAlarm, isPomodoro, handleModeChange }: FlowtimeProps) => {
     const [mode, setMode] = useState<'Focus' | 'Break'>('Focus');
     const [breakTime, setBreakTime] = useState(0);
 
@@ -32,6 +34,7 @@ const Flowtime = ({ playAlarm }: FlowtimeProps) => {
 
     return (
         <div className="flex flex-col items-center justify-center h-screen">
+            <PomoFlowSwitcher isPomodoro={isPomodoro} handleModeChange={handleModeChange} />
             <div className='flex flex-row items-center justify-center mb-7'>
                 <h1 className={`btn mr-2 px-11 ${mode === 'Focus' ? 'btn-primary' : 'btn-disabled'}`}>Focus</h1>
                 <h1 className={`btn px-11 ${mode === 'Break' ? 'btn-primary' : 'btn-disabled'}`}>Break</h1>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -13,7 +13,6 @@ const Navbar = () => {
             <div className="navbar-center">
             </div>
             <div className="navbar-end">
-                <PomoFlowSwitcher />
                 <Settings/>
             </div>
         </div>

diff --git a/src/components/PomoFlowSwitcher.tsx b/src/components/PomoFlowSwitcher.tsx
@@ -1,19 +1,14 @@
 import { useState, useEffect } from 'react'
 
-const PomoFlowSwitcher = () => {
-    const [isPomo, setIsPomo] = useState(typeof window !== 'undefined' && window.localStorage.getItem('pomodoro') === 'true' ? true : false);
-
-    const handleModeChange = () => {
-        console.log('handleModeChange');
-
-        localStorage.setItem('pomodoro', isPomo ? 'false' : 'true');
-        setIsPomo(!isPomo);
-    };
-
+interface PomoFlowSwitcherProps {
+    isPomodoro: boolean;
+    handleModeChange: () => void;
+}
 
+const PomoFlowSwitcher = ({ isPomodoro, handleModeChange }: PomoFlowSwitcherProps) => {
     return (
-        <label className="swap swap-rotate btn btn-ghost">
-            <input type="checkbox" className="theme-controller" value="sunset" checked={isPomo} onChange={handleModeChange} />
+        <label className="swap swap-rotate btn btn-ghost mb-2">
+            <input type="checkbox" className="theme-controller" value="sunset" checked={isPomodoro} onChange={handleModeChange} />
             <span className="swap-off">💧</span>
             <span className="swap-on">🍅</span>
         </label>

diff --git a/src/components/Pomodoro.tsx b/src/components/Pomodoro.tsx
@@ -1,12 +1,15 @@
 import { useState } from "react";
 import PomodoroFocus from "./PomodoroFocus";
 import PomodoroBreak from "./PomodoroBreak";
+import PomoFlowSwitcher from "./PomoFlowSwitcher";
 
 interface PomodoroProps {
     playAlarm: () => void;
+    isPomodoro: boolean;
+    handleModeChange: () => void;
 }
 
-const Pomodoro = ({ playAlarm }: PomodoroProps) => {
+const Pomodoro = ({ playAlarm, isPomodoro, handleModeChange }: PomodoroProps) => {
     const [mode, setMode] = useState<'Focus' | 'Short Break' | 'Long Break'>('Focus');
     const [numIntervals, setNumIntervals] = useState(1);
 
@@ -29,9 +32,10 @@ const Pomodoro = ({ playAlarm }: PomodoroProps) => {
 
     return (
         <div className="flex flex-col items-center justify-center h-screen">
-            <div className='flex flex-row items-center justify-center mb-7'>
-                <h1 className={`btn mr-2 px-11 ${mode === 'Focus' ? 'btn-primary' : 'btn-disabled'}`}>Focus</h1>
-                <h1 className={`btn mr-2 px-11 ${mode === 'Short Break' ? 'btn-primary' : 'btn-disabled'}`}>Short Break</h1>
+            <PomoFlowSwitcher isPomodoro={isPomodoro} handleModeChange={handleModeChange} />
+            <div className='flex flex-row flex-wrap gap-2 items-center justify-center mb-7'>
+                <h1 className={`btn px-11 ${mode === 'Focus' ? 'btn-primary' : 'btn-disabled'}`}>Focus</h1>
+                <h1 className={`btn px-11 ${mode === 'Short Break' ? 'btn-primary' : 'btn-disabled'}`}>Short Break</h1>
                 <h1 className={`btn px-11 ${mode === 'Long Break' ? 'btn-primary' : 'btn-disabled'}`}>Long Break</h1>
             </div>
             {mode === 'Focus' ? (