From e3b60203591808b856801134cb502bfb86aca84b Mon Sep 17 00:00:00 2001
From: Daniel Castillo <dlcastillo3015@gmail.com>
Date: Sat, 7 Oct 2023 10:19:54 -0400
Subject: [PATCH] refactor: optimizing interfaces

---
 src/App.tsx                         | 28 ++++++++++------------------
 src/helpers/useInternalStopwatch.ts |  4 ++--
 src/helpers/useInternalTimer.ts     |  4 ++--
 src/hooks/useUnlimitedStopwatch.ts  |  4 ++--
 src/interfaces/interfaces.ts        | 24 ++++++++++++++++++++----
 5 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0d256da..13733a4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,18 @@
-import { useTimer } from "./hooks";
+import { useCountDown } from "./hooks";
 
 const App = () => {
-  const stopwatch = useTimer(1, 0, 10, 50);
+  const counter = useCountDown(0, 10);
 
   return (
     <div>
-      <p>Stopwatch value: {stopwatch.current.withLeadingZero}</p>
-      <p>Stopwatch value: {stopwatch.current.withoutLeadingZero}</p>
-      <p>Remaining time: {stopwatch.elapsedTime.withLeadingZero}</p>
-      <p>Remaining time: {stopwatch.elapsedTime.withoutLeadingZero}</p>
-      <p>Days: {stopwatch.currentDays}</p>
-      <p>Hours: {stopwatch.currentHours}</p>
-      <p>Minutes: {stopwatch.currentMinutes}</p>
-      <p>Seconds: {stopwatch.currentSeconds}</p>
-      <p>Elapsed seconds: {stopwatch.elapsedSeconds}</p>
-      <p>Remaining seconds: {stopwatch.remainingSeconds}</p>
-      <p>Is the counter paused? {stopwatch.isPaused ? "Yes" : "No"}</p>
-      <p>Has the counter over? {stopwatch.isOver ? "Yes" : "No"}</p>
-      <button onClick={stopwatch.pause}>Pause</button>
-      <button onClick={stopwatch.play}>Play</button>
-      <button onClick={stopwatch.reset}>Reset</button>
-      <button onClick={stopwatch.togglePause}>Toggle Pause</button>
+      <p>Counter value: {counter.current.withLeadingZero}</p>
+      <p>Counter value: {counter.current.withoutLeadingZero}</p>
+      <p>Is the counter paused? {counter.isPaused ? "Yes" : "No"}</p>
+      <p>Has the counter over? {counter.isOver ? "Yes" : "No"}</p>
+      <button onClick={counter.pause}>Pause</button>
+      <button onClick={counter.play}>Play</button>
+      <button onClick={counter.reset}>Reset</button>
+      <button onClick={counter.togglePause}>Toggle Pause</button>
     </div>
   );
 };
diff --git a/src/helpers/useInternalStopwatch.ts b/src/helpers/useInternalStopwatch.ts
index c6a5297..1ecd6e4 100644
--- a/src/helpers/useInternalStopwatch.ts
+++ b/src/helpers/useInternalStopwatch.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { addLeadingZero } from "../helpers";
-import { IStopwatch } from "../interfaces";
+import { IInternal } from "../interfaces";
 
 export const useInternalStopwatch = (
   days: number,
@@ -9,7 +9,7 @@ export const useInternalStopwatch = (
   seconds: number,
   startPaused?: boolean,
   separator?: string
-): IStopwatch => {
+): IInternal => {
   const [time, setTime] = useState({
     days: 0,
     hours: 0,
diff --git a/src/helpers/useInternalTimer.ts b/src/helpers/useInternalTimer.ts
index 9ac16b6..10b0987 100644
--- a/src/helpers/useInternalTimer.ts
+++ b/src/helpers/useInternalTimer.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { addLeadingZero } from "../helpers";
-import { ITimer } from "../interfaces";
+import { IInternal } from "../interfaces";
 
 export const useInternalTimer = (
   days: number,
@@ -9,7 +9,7 @@ export const useInternalTimer = (
   seconds: number,
   startPaused?: boolean,
   separator?: string
-): ITimer => {
+): IInternal => {
   if (days < 0) {
     throw new Error("The days parameter has to be more or equal than 0.");
   } else if (hours < 0 || hours >= 24) {
diff --git a/src/hooks/useUnlimitedStopwatch.ts b/src/hooks/useUnlimitedStopwatch.ts
index 283effb..7f540eb 100644
--- a/src/hooks/useUnlimitedStopwatch.ts
+++ b/src/hooks/useUnlimitedStopwatch.ts
@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 import { addLeadingZero } from "../helpers";
-import { IStopwatch } from "../interfaces";
+import { IUnlimitedStopwatch } from "../interfaces";
 
 export const useUnlimitedStopwatch = (
   startPaused?: boolean,
   separator?: string
-): IStopwatch => {
+): IUnlimitedStopwatch => {
   const [time, setTime] = useState({
     days: 0,
     hours: 0,
diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts
index bcc4e82..0f7bbd5 100644
--- a/src/interfaces/interfaces.ts
+++ b/src/interfaces/interfaces.ts
@@ -9,23 +9,39 @@ interface IBaseCounterStatus {
   currentMinutes: number;
   currentSeconds: number;
   elapsedSeconds: number;
-  remainingSeconds?: number;
+  remainingSeconds: number;
 }
 
 export interface IBaseCounter {
   current: IZero;
   isPaused: boolean;
-  isOver?: boolean;
+  isOver: boolean;
   pause: () => void;
   play: () => void;
   reset: () => void;
   togglePause: () => void;
 }
 
+export interface IInternal extends IBaseCounter, IBaseCounterStatus {}
+
 export interface IStopwatch extends IBaseCounter, IBaseCounterStatus {
-  remainingTime?: IZero;
+  remainingTime: IZero;
 }
 
 export interface ITimer extends IBaseCounter, IBaseCounterStatus {
-  elapsedTime?: IZero;
+  elapsedTime: IZero;
+}
+
+export interface IUnlimitedStopwatch {
+  current: IZero;
+  isPaused: boolean;
+  currentDays: number;
+  currentHours: number;
+  currentMinutes: number;
+  currentSeconds: number;
+  elapsedSeconds: number;
+  pause: () => void;
+  play: () => void;
+  reset: () => void;
+  togglePause: () => void;
 }