feat: use table for solutions representationHEADmaster

3 files changed, 31 insertions, 18 deletions

diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx
index 2d07608..287ebc0 100644
--- a/src/components/Timer.tsx
+++ b/src/components/Timer.tsx
@@ -63,8 +63,10 @@ const Timer: React.FC<PropTypes> = ({ registerResult, maxCountdown = 15000 }) =>
   }, [mode, maxCountdown]);
 
   const handleKeyPress = (event: KeyboardEvent): void => {
-    event.preventDefault();
-    if (event.keyCode === KEY_CODE && mode === Mode.idle) setMode(Mode.countdown);
+    if (event.keyCode === KEY_CODE && mode === Mode.idle) {
+      event.preventDefault();
+      setMode(Mode.countdown);
+    }
   };
 
   const handleKeyUp = (event: KeyboardEvent): void => {
diff --git a/src/index.tsx b/src/index.tsx
index 1bdd41a..ce6a9d4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import './style.css';
 import './fonts/Bitter-Regular.woff';
@@ -8,18 +8,19 @@ import Timer from './components/Timer';
 
 interface Solution {
   result: string;
-  author: string;
+  timestamp: string;
+  author?: string;
 }
 
 const App: React.FC = () => {
-  const [author, setAuthor] = useState<string>('anonymous');
+  const [author, setAuthor] = useLocalStorage<string>('author', 'anonymous');
   const [solutions, setSolutions] = useLocalStorage<Solution[]>('solutions', []);
 
   const registerResult = (result: string) => {
-    setSolutions([{ author, result }, ...solutions]);
+    setSolutions([{ author, result, timestamp: new Date().toISOString() }, ...solutions]);
   }
 
-  const handleRemoveSolution = (index: number) => {
+  const removeSolution = (index: number) => {
     setSolutions(solutions.filter((_, i) => i !== index));
   }
 
@@ -29,14 +30,22 @@ const App: React.FC = () => {
       <Timer registerResult={registerResult} />
 
       <h2>Results</h2>
-      <ul>
+      <table>
+        <tr>
+          <th>Author</th>
+          <th>Result</th>
+          <th>Timestamp</th>
+          <th>Actions</th>
+        </tr>
         {solutions.map((solution, index) => (
-          <li>
-            {solution.result} by {solution.author} &nbsp;
-            <button onClick={() => handleRemoveSolution(index)}>remove</button>
-          </li>
+          <tr key={solution.timestamp}>
+            <td>{solution.author}</td>
+            <td>{solution.result}</td>
+            <td>{new Date(solution.timestamp).toLocaleString()}</td>
+            <td><button onClick={() => removeSolution(index)}>remove</button></td>
+          </tr>
         ))}
-      </ul>
+      </table>
     </>
   );
 };
diff --git a/src/style.css b/src/style.css
index e4eb8a5..54ea856 100644
--- a/src/style.css
+++ b/src/style.css
@@ -54,9 +54,11 @@ code {
   border-radius: 4px;
   border: 1px solid rgba(255, 255, 255, 0.12);
 }
-
-.SolutionCard {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  padding: 4px;
-  margin: 8px;
+table {
+  width: 100%;
+  border-collapse: collapse;
 }
+table tr:nth-child(2n) {
+  background: #1d2021;
+}
+