From a4bf2117b0cc783859080dfbe7441f0aaeed80c4 Mon Sep 17 00:00:00 2001
From: Davi de Medeiros <davi.demedeiros@here.com>
Date: Tue, 20 Dec 2022 14:10:50 -0300
Subject: [PATCH] refactor Answer component to have a single responsiblity

---
 src/components/Answer/Answer.css       | 13 +++---------
 src/components/Answer/Answer.tsx       | 28 ++++----------------------
 src/components/Challenge/Challenge.tsx | 24 ++++++++++++++++------
 src/components/GameOver/GameOver.css   |  7 +++++++
 src/components/GameOver/GameOver.tsx   | 10 +++++++--
 5 files changed, 40 insertions(+), 42 deletions(-)
 create mode 100644 src/components/GameOver/GameOver.css

diff --git a/src/components/Answer/Answer.css b/src/components/Answer/Answer.css
index f4d3d8c..3b9af31 100644
--- a/src/components/Answer/Answer.css
+++ b/src/components/Answer/Answer.css
@@ -11,17 +11,10 @@
     padding: 0.25rem 0.5rem;
 }
 
-.answer-wrapper button {
-    background-color: var(--text-bg);
+.answer-wrapper .submit {
+    background-color: #008000;
     border: 1px solid var(--text-fg);
     color: var(--color-secondary);
     padding: 0.25rem 1rem;
-}
-
-.answer-wrapper .submit {
-    background-color: #008000;
-}
-
-.answer-wrapper .reset {
-    background-color: #ff0000;
+    width: 10rem;
 }
diff --git a/src/components/Answer/Answer.tsx b/src/components/Answer/Answer.tsx
index a195d88..bf93ef1 100644
--- a/src/components/Answer/Answer.tsx
+++ b/src/components/Answer/Answer.tsx
@@ -3,27 +3,17 @@ import { useRef } from 'react';
 import './Answer.css';
 
 type Props = {
-  disabled: boolean;
   onSubmit: (input: string) => void;
-  onGameOver: () => void;
 };
 
 const INPUT_NAME = 'answer';
-const BUTTON_RESET_LABEL = 'Try again';
-const BUTTON_SUBMIT_LABEL = 'Check answer';
 
-function Answer({ disabled, onSubmit, onGameOver }: Props) {
+function Answer({ onSubmit }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   function handleSubmit(event: React.FormEvent<HTMLFormElement>): void {
     event.preventDefault();
-
-    if (disabled) {
-      onGameOver();
-      return;
-    } else {
-      inputRef.current?.focus();
-    }
+    inputRef.current?.focus();
 
     const formEl = event.currentTarget;
     const data = new FormData(formEl);
@@ -37,23 +27,13 @@ function Answer({ disabled, onSubmit, onGameOver }: Props) {
     formEl.reset();
   }
 
-  const buttonLabel = disabled ? BUTTON_RESET_LABEL : BUTTON_SUBMIT_LABEL;
-  const buttonClassName = disabled ? 'reset' : 'submit';
-
   return (
     <section className="answer-wrapper">
       <form onSubmit={handleSubmit} autoComplete="off">
         <label htmlFor={INPUT_NAME}>
-          <input
-            name={INPUT_NAME}
-            id={INPUT_NAME}
-            disabled={disabled}
-            ref={inputRef}
-            autoFocus
-            placeholder="Type your answer here"
-          />
+          <input name={INPUT_NAME} id={INPUT_NAME} ref={inputRef} autoFocus placeholder="Type your answer here" />
         </label>
-        <button className={buttonClassName}>{buttonLabel}</button>
+        <button className="submit">Check answer</button>
       </form>
     </section>
   );
diff --git a/src/components/Challenge/Challenge.tsx b/src/components/Challenge/Challenge.tsx
index 801996b..94e3498 100644
--- a/src/components/Challenge/Challenge.tsx
+++ b/src/components/Challenge/Challenge.tsx
@@ -50,12 +50,24 @@ function Challenge({ disabled, onHit, onMiss, onGameOver, score }: Props) {
     );
   }
 
-  return (
-    <main className="challenge-wrapper">
-      {!disabled && challenge ? <Question question={challenge.question} /> : <GameOver score={score} />}
-      <Answer onSubmit={handleAnswer} onGameOver={onGameOver} disabled={disabled} />
-    </main>
-  );
+  if (disabled) {
+    return (
+      <main className="challenge-wrapper">
+        <GameOver onGameOver={onGameOver} score={score} />
+      </main>
+    );
+  }
+
+  if (challenge) {
+    return (
+      <main className="challenge-wrapper">
+        <Question question={challenge.question} />
+        <Answer onSubmit={handleAnswer} />
+      </main>
+    );
+  }
+
+  return null;
 }
 
 export default Challenge;
diff --git a/src/components/GameOver/GameOver.css b/src/components/GameOver/GameOver.css
new file mode 100644
index 0000000..b498da8
--- /dev/null
+++ b/src/components/GameOver/GameOver.css
@@ -0,0 +1,7 @@
+.game-over-wrapper .reset {
+    background-color: #ff0000;
+    border: 1px solid var(--text-fg);
+    color: var(--color-secondary);
+    padding: 0.25rem 1rem;
+    width: 10rem;
+}
diff --git a/src/components/GameOver/GameOver.tsx b/src/components/GameOver/GameOver.tsx
index 1f00a78..61db1c0 100644
--- a/src/components/GameOver/GameOver.tsx
+++ b/src/components/GameOver/GameOver.tsx
@@ -1,17 +1,23 @@
+import './GameOver.css';
+
 type Props = {
+  onGameOver: () => void;
   score: number;
 };
 
-function GameOver({ score }: Props) {
+function GameOver({ onGameOver, score }: Props) {
   const compliment = score > 0 ? 'Congratulations' : 'Pity';
   const needsPlural = score === 0 || score > 1;
 
   return (
-    <section>
+    <section className="game-over-wrapper">
       <h1>Game over.</h1>
       <p>
         {compliment}, you made {score} point{needsPlural ? 's' : ''}!
       </p>
+      <button className="reset" onClick={onGameOver} autoFocus>
+        Try again
+      </button>
     </section>
   );
 }