feat: register solution in timer

1 files changed, 10 insertions, 11 deletions

diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx
index c3bc555..2d07608 100644
--- a/src/components/Timer.tsx
+++ b/src/components/Timer.tsx
@@ -1,6 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import convertTimeToString from '../utils/convertTimeToString';
 
+interface PropTypes {
+  registerResult: (result: string) => void;
+  maxCountdown?: number;
+}
+
 enum Mode {
   'idle',
   'countdown',
@@ -8,7 +13,7 @@ enum Mode {
   'over',
 };
 
-const helperText = {
+const helperTextMap = {
   [Mode.idle]: (
     <>
       <span>Hold </span>
@@ -27,15 +32,9 @@ const helperText = {
   [Mode.over]: 'You are too late!',
 };
 
-// TODO: add to props
-const registerResult = (result: string): void => {
-  console.log(result)
-};
-
-const Timer: React.FC = () => {
-  const KEY_CODE = 32; // Space key
-  const maxCountdown = 15000;
+const KEY_CODE = 32; // Space key
 
+const Timer: React.FC<PropTypes> = ({ registerResult, maxCountdown = 15000 }) => {
   const [mode, setMode] = useState<Mode>(Mode.idle);
   const [displayTime, setDisplayTime] = useState<string>('00:00:00');
 
@@ -61,7 +60,7 @@ const Timer: React.FC = () => {
     if (mode === Mode.over) {
       setDisplayTime('00:00:00');
     }
-  }, [mode]);
+  }, [mode, maxCountdown]);
 
   const handleKeyPress = (event: KeyboardEvent): void => {
     event.preventDefault();
@@ -94,7 +93,7 @@ const Timer: React.FC = () => {
   return (
     <>
       <b>{ displayTime }</b>
-      <p>{ helperText[mode] }</p>
+      <p>{ helperTextMap[mode] }</p>
     </>
   );
 };