refactor: optimizing interfaces

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>
   );
 };

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,

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) {

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,

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;
 }