From a0a7d00d30c9a057219c1dd6c7882c2d7fe21ae3 Mon Sep 17 00:00:00 2001
From: eug-vs <eugene@eug-vs.xyz>
Date: Wed, 4 May 2022 13:15:33 +0300
Subject: feat: register solution in timer

---
 src/components/Timer.tsx | 21 ++++++++++-----------
 src/index.tsx            | 18 ++++++++++++++++--
 2 files changed, 26 insertions(+), 13 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>
     </>
   );
 };
diff --git a/src/index.tsx b/src/index.tsx
index 713039f..9b740f9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,11 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import './style.css';
 
 import Timer from './components/Timer';
 
+interface Solution {
+  result: string;
+  author: string;
+}
+
 const App: React.FC = () => {
-  return (<Timer />);
+  const [author, setAuthor] = useState<string>('anonymous');
+  const [solutions, setSolutions] = useState<Solution[]>([]);
+
+  const registerResult = (result: string) => {
+    setSolutions([...solutions, { author, result }]);
+  }
+
+  return (
+    <Timer registerResult={registerResult} />
+  );
 };
 
 document.body.style.overflow = 'hidden';
-- 
cgit v1.2.3