From 38d8433ffe2051bf37fcb79065abcb83d5ef5eee Mon Sep 17 00:00:00 2001
From: Greg Marshall <greg@alley.co>
Date: Wed, 30 Jun 2021 08:54:39 -0500
Subject: [PATCH 1/6] basic requirement

---
 src/exercise/06.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/exercise/06.js b/src/exercise/06.js
index c8d3ac1c2..69ebf0dc6 100644
--- a/src/exercise/06.js
+++ b/src/exercise/06.js
@@ -18,11 +18,18 @@ function UsernameForm({onSubmitUsername}) {
 
   // 🐨 make sure to associate the label to the input.
   // to do so, set the value of 'htmlFor' prop of the label to the id of input
+  const handleSubmit = (event) => {
+    const username = event.target.elements[0].value;
+    onSubmitUsername(username);
+
+    event.preventDefault();
+  };
+
   return (
-    <form>
+    <form onSubmit={handleSubmit}>
       <div>
-        <label>Username:</label>
-        <input type="text" />
+        <label htmlFor="username">Username:</label>
+        <input type="text" id="username" />
       </div>
       <button type="submit">Submit</button>
     </form>

From 7970e3b35f2d7b1ecef76b374b6f8a59a9852ab7 Mon Sep 17 00:00:00 2001
From: Greg Marshall <greg@alley.co>
Date: Wed, 30 Jun 2021 08:59:23 -0500
Subject: [PATCH 2/6] extra credit 1

---
 src/exercise/06.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/exercise/06.js b/src/exercise/06.js
index 69ebf0dc6..ff29dea3f 100644
--- a/src/exercise/06.js
+++ b/src/exercise/06.js
@@ -18,8 +18,9 @@ function UsernameForm({onSubmitUsername}) {
 
   // 🐨 make sure to associate the label to the input.
   // to do so, set the value of 'htmlFor' prop of the label to the id of input
+  const usernameInput = React.useRef(null);
   const handleSubmit = (event) => {
-    const username = event.target.elements[0].value;
+    const username = usernameInput.current.value;
     onSubmitUsername(username);
 
     event.preventDefault();
@@ -29,7 +30,7 @@ function UsernameForm({onSubmitUsername}) {
     <form onSubmit={handleSubmit}>
       <div>
         <label htmlFor="username">Username:</label>
-        <input type="text" id="username" />
+        <input type="text" id="username" ref={usernameInput} />
       </div>
       <button type="submit">Submit</button>
     </form>

From c3ee84e7c80696b21ae6267c58e417bb1a4de3c8 Mon Sep 17 00:00:00 2001
From: Greg Marshall <greg@alley.co>
Date: Wed, 30 Jun 2021 09:05:34 -0500
Subject: [PATCH 3/6] extra credit 2

---
 src/exercise/06.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/exercise/06.js b/src/exercise/06.js
index ff29dea3f..f3c20adb9 100644
--- a/src/exercise/06.js
+++ b/src/exercise/06.js
@@ -19,20 +19,29 @@ function UsernameForm({onSubmitUsername}) {
   // 🐨 make sure to associate the label to the input.
   // to do so, set the value of 'htmlFor' prop of the label to the id of input
   const usernameInput = React.useRef(null);
+  const [error, setError] = React.useState(null);
+
   const handleSubmit = (event) => {
     const username = usernameInput.current.value;
     onSubmitUsername(username);
 
     event.preventDefault();
   };
+  const handleChange = (event) => {
+    const value = event.target.value;
+    const isValid = value === value.toLowerCase();
+
+    setError(isValid ? null : 'Username must be lowercase');
+  };
 
   return (
     <form onSubmit={handleSubmit}>
       <div>
+        <div role="alert" style={{color: 'red'}}>{error}</div>
         <label htmlFor="username">Username:</label>
-        <input type="text" id="username" ref={usernameInput} />
+        <input type="text" id="username" ref={usernameInput} onChange={handleChange} />
       </div>
-      <button type="submit">Submit</button>
+      <button type="submit" disabled={error !== null}>Submit</button>
     </form>
   )
 }

From dc2de9c1c5963df2ef8645fc25d3cd8fa8d6e5e9 Mon Sep 17 00:00:00 2001
From: Greg Marshall <greg@alley.co>
Date: Wed, 30 Jun 2021 09:08:37 -0500
Subject: [PATCH 4/6] extra credit 3

---
 src/exercise/06.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/exercise/06.js b/src/exercise/06.js
index f3c20adb9..39e292912 100644
--- a/src/exercise/06.js
+++ b/src/exercise/06.js
@@ -19,7 +19,7 @@ function UsernameForm({onSubmitUsername}) {
   // 🐨 make sure to associate the label to the input.
   // to do so, set the value of 'htmlFor' prop of the label to the id of input
   const usernameInput = React.useRef(null);
-  const [error, setError] = React.useState(null);
+  const [username, setUsername] = React.useState(null);
 
   const handleSubmit = (event) => {
     const username = usernameInput.current.value;
@@ -28,20 +28,17 @@ function UsernameForm({onSubmitUsername}) {
     event.preventDefault();
   };
   const handleChange = (event) => {
-    const value = event.target.value;
-    const isValid = value === value.toLowerCase();
-
-    setError(isValid ? null : 'Username must be lowercase');
+    const value = event.target.value.toLowerCase();
+    setUsername(value);
   };
 
   return (
     <form onSubmit={handleSubmit}>
       <div>
-        <div role="alert" style={{color: 'red'}}>{error}</div>
         <label htmlFor="username">Username:</label>
-        <input type="text" id="username" ref={usernameInput} onChange={handleChange} />
+        <input type="text" id="username" ref={usernameInput} onChange={handleChange} value={username} />
       </div>
-      <button type="submit" disabled={error !== null}>Submit</button>
+      <button type="submit">Submit</button>
     </form>
   )
 }

From 1fbd0c94e28231fa0ba61680be7ad79716241829 Mon Sep 17 00:00:00 2001
From: Greg Marshall <greg@alley.co>
Date: Wed, 30 Jun 2021 09:11:05 -0500
Subject: [PATCH 5/6] using state username

---
 src/exercise/06.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/exercise/06.js b/src/exercise/06.js
index 39e292912..c6ca40f40 100644
--- a/src/exercise/06.js
+++ b/src/exercise/06.js
@@ -22,7 +22,6 @@ function UsernameForm({onSubmitUsername}) {
   const [username, setUsername] = React.useState(null);
 
   const handleSubmit = (event) => {
-    const username = usernameInput.current.value;
     onSubmitUsername(username);
 
     event.preventDefault();

From c22f163c31d6fc613cd8fec5402272caab650525 Mon Sep 17 00:00:00 2001
From: Greg Marshall <greg@alley.co>
Date: Wed, 30 Jun 2021 09:12:33 -0500
Subject: [PATCH 6/6] removing useRef

---
 src/exercise/06.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/exercise/06.js b/src/exercise/06.js
index c6ca40f40..005663c90 100644
--- a/src/exercise/06.js
+++ b/src/exercise/06.js
@@ -18,7 +18,6 @@ function UsernameForm({onSubmitUsername}) {
 
   // 🐨 make sure to associate the label to the input.
   // to do so, set the value of 'htmlFor' prop of the label to the id of input
-  const usernameInput = React.useRef(null);
   const [username, setUsername] = React.useState(null);
 
   const handleSubmit = (event) => {
@@ -35,7 +34,7 @@ function UsernameForm({onSubmitUsername}) {
     <form onSubmit={handleSubmit}>
       <div>
         <label htmlFor="username">Username:</label>
-        <input type="text" id="username" ref={usernameInput} onChange={handleChange} value={username} />
+        <input type="text" id="username" onChange={handleChange} value={username} />
       </div>
       <button type="submit">Submit</button>
     </form>