feat: added continue button and new styles

Molaryy · Sep 26, 2023 · 1025925 · 1025925
1 parent d82cd61
commit 1025925
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 97 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,10 +3,10 @@ import Navbar from './components/Navbar.tsx'
 
 function App() {
   return (
-    <div>
+    <>
       <Navbar />
       <TimerFormHandler />
-    </div>
+    </>
   )
 }
 

diff --git a/src/components/Form/TimerForm.tsx b/src/components/Form/TimerForm.tsx
@@ -49,68 +49,79 @@ const TimerForm: React.FC<TimerFormProps> = ({
   setPauseTime,
   handlePauseTimer,
   handleResetTimer,
-}) => (
-  <form className='time-form' onSubmit={onSubmit}>
-    <h2 className='work-time-title'>Working time</h2>
-    <label className='work-time'>
-      <InputTime
-        time={workTime[0]}
-        isWorking
-        indexOnChangeToAddValue={0}
-        setWorkTime={setWorkTime}
-        setPauseTime={setPauseTime}
-      />
-      <InputTime
-        time={workTime[1]}
-        isWorking
-        indexOnChangeToAddValue={1}
-        setWorkTime={setWorkTime}
-        setPauseTime={setPauseTime}
-      />
-      <InputTime
-        time={workTime[2]}
-        isWorking
-        indexOnChangeToAddValue={2}
-        setWorkTime={setWorkTime}
-        setPauseTime={setPauseTime}
-      />
-    </label>
-    <h2 className='pause-time-title'>Pause time</h2>
-    <label className='pause-time'>
-      <InputTime
-        time={pauseTime[0]}
-        isWorking={false}
-        indexOnChangeToAddValue={0}
-        setWorkTime={setWorkTime}
-        setPauseTime={setPauseTime}
-      />
-      <InputTime
-        time={pauseTime[1]}
-        isWorking={false}
-        indexOnChangeToAddValue={1}
-        setWorkTime={setWorkTime}
-        setPauseTime={setPauseTime}
-      />
-      <InputTime
-        time={pauseTime[2]}
-        isWorking={false}
-        indexOnChangeToAddValue={2}
-        setWorkTime={setWorkTime}
-        setPauseTime={setPauseTime}
-      />
-    </label>
-    <div className={'buttons-time-form'}>
-      <button className='btn-form' type='submit'>
-        Start
-      </button>
-      <button className='btn-form' type='button' onClick={handlePauseTimer}>
-        Stop
-      </button>
-      <button className='btn-form' type='button' onClick={handleResetTimer}>
-        Reset
-      </button>
-    </div>
-  </form>
-)
+  handleContinueTimer,
+  isWorking,
+  isInPause,
+}) => {
+  const workTitleCss = isWorking ? 'is-working-title' : ''
+  const pauseTitleCss = isInPause ? 'is-in-pause-title' : 'black'
+
+  return (
+    <form className='time-form' onSubmit={onSubmit}>
+      <h2 className={`work-time-title ${workTitleCss}`}>Working</h2>
+      <label className='work-time'>
+        <InputTime
+          time={workTime[0]}
+          isWorking
+          indexOnChangeToAddValue={0}
+          setWorkTime={setWorkTime}
+          setPauseTime={setPauseTime}
+        />
+        <InputTime
+          time={workTime[1]}
+          isWorking
+          indexOnChangeToAddValue={1}
+          setWorkTime={setWorkTime}
+          setPauseTime={setPauseTime}
+        />
+        <InputTime
+          time={workTime[2]}
+          isWorking
+          indexOnChangeToAddValue={2}
+          setWorkTime={setWorkTime}
+          setPauseTime={setPauseTime}
+        />
+      </label>
+      <h2 className={`pause-time-title ${pauseTitleCss}`}>Pause</h2>
+      <label className='pause-time'>
+        <InputTime
+          time={pauseTime[0]}
+          isWorking={false}
+          indexOnChangeToAddValue={0}
+          setWorkTime={setWorkTime}
+          setPauseTime={setPauseTime}
+        />
+        <InputTime
+          time={pauseTime[1]}
+          isWorking={false}
+          indexOnChangeToAddValue={1}
+          setWorkTime={setWorkTime}
+          setPauseTime={setPauseTime}
+        />
+        <InputTime
+          time={pauseTime[2]}
+          isWorking={false}
+          indexOnChangeToAddValue={2}
+          setWorkTime={setWorkTime}
+          setPauseTime={setPauseTime}
+        />
+      </label>
+      <div className={'buttons-time-form'}>
+        <button className='btn-form' type='submit'>
+          Start
+        </button>
+        <button className='btn-form' type='button' onClick={handlePauseTimer}>
+          Stop
+        </button>
+        <button className='btn-form' type='button' onClick={handleContinueTimer}>
+          Continue
+        </button>
+        <button className='btn-form' type='button' onClick={handleResetTimer}>
+          Reset
+        </button>
+      </div>
+    </form>
+  )
+}
 
 export default TimerForm
diff --git a/src/components/Form/TimerFormHandler.tsx b/src/components/Form/TimerFormHandler.tsx
@@ -31,6 +31,12 @@ function TimerFormHandler() {
     setPauseTime(['00', '00', '00'])
   }
 
+  const handleContinueTimer = (): void => {
+    setIsWorkTimerRunning(workTime.toString() != storeWorkTime?.toString())
+    setIsPauseTimerRunning(pauseTime.toString() != storePauseTime?.toString())
+    !startPauseSound ? setStartSongWork(true) : setStartSongWork(false)
+  }
+
   useEffect(() => {
     const hoursInSeconds: number = parseInt(isWorkTimerRunning ? workTime[0] : pauseTime[0]) * 3600
     const minutesInSeconds: number = parseInt(isWorkTimerRunning ? workTime[1] : pauseTime[1]) * 60
@@ -78,6 +84,9 @@ function TimerFormHandler() {
         setPauseTime={setPauseTime}
         handlePauseTimer={handlePauseTimer}
         handleResetTimer={handleResetTimer}
+        handleContinueTimer={handleContinueTimer}
+        isWorking={isWorkTimerRunning}
+        isInPause={isPauseTimerRunning}
       />
       {startPauseSound ? <audio controls src={pauseSound} autoPlay hidden /> : <></>}
     </>

diff --git a/src/styles/App.scss b/src/styles/App.scss
@@ -4,22 +4,43 @@ body {
   padding: 0;
   margin: 0;
   font-family: 'Poppins', sans-serif;
-  background-color: #252323;
+  background-color: #b9b0b0;
 }
 
 .time-form {
   margin-top: 15rem;
   margin-left: 10rem;
-  width: 400px;
+  width: 420px;
   height: 400px;
-  background-color: white;
+  background-color: #ffffff;
   border-radius: 10px;
+  box-shadow: 0 15px 15px;
+}
+
+.work-time-title {
+  position: absolute;
+  margin-left: 3.5rem;
+}
+
+.pause-time-title {
+  position: absolute;
+  margin-left: 15.5rem;
+}
+
+.is-working-title {
+  transition: all 0.3s ease 0s;
+  color: #ffaf00;
+}
+
+.is-in-pause-title {
+  transition: all 0.3s ease 0s;
+  color: #0fbcce;
 }
 
 .work-time {
   position: absolute;
   margin-top: 4rem;
-  margin-left: 20px;
+  margin-left: 40px;
   width: 150px;
 }
 
@@ -45,32 +66,27 @@ body {
 
 .buttons-time-form {
   .btn-form {
+    width: 60px;
+    height: 35px;
+    margin-left: 30px;
+    margin-top: 20rem;
+    padding: 0 15px;
+    display: inline-block;
     border-radius: 10px;
     transition: all 0.3s ease 0s;
-    display: inline-block;
-    padding: 0 15px;
+    border: none;
+    color: #252323;
   }
   .btn-form:hover {
     color: #fcfcfc;
     background-color: #000000;
   }
-}
-
-.btn-form {
-  margin-top: 20rem;
-  width: 80px;
-  height: 35px;
-  margin-left: 40px;
-}
-
-.pause-time-title {
-  position: absolute;
-  margin-left: 14.5rem;
-}
-
-.work-time-title {
-  position: absolute;
-  margin-left: 1rem;
+  .btn-form:nth-child(3) {
+    width: 84px;
+  }
+  .btn-form:nth-child(4) {
+    width: 65px;
+  }
 }
 
 input {

diff --git a/src/types.ts b/src/types.ts
@@ -1,11 +1,14 @@
-import { Dispatch, FormEvent, SetStateAction } from 'react';
+import { Dispatch, FormEvent, SetStateAction } from 'react'
 
 export type TimerFormProps = {
-  onSubmit: (event: FormEvent) => void;
-  workTime: string[];
-  setWorkTime: Dispatch<SetStateAction<string[]>>;
-  pauseTime: string[];
-  setPauseTime: Dispatch<SetStateAction<string[]>>;
-  handlePauseTimer: () => void;
-  handleResetTimer: () => void;
-};
+  onSubmit: (event: FormEvent) => void
+  workTime: string[]
+  setWorkTime: Dispatch<SetStateAction<string[]>>
+  pauseTime: string[]
+  setPauseTime: Dispatch<SetStateAction<string[]>>
+  handlePauseTimer: () => void
+  handleResetTimer: () => void
+  handleContinueTimer: () => void
+  isWorking: boolean
+  isInPause: boolean
+}