From f2bd4b81126839d920ac477ba98d8158e043a5bb Mon Sep 17 00:00:00 2001
From: Yutsuo <yutsuo@gmail.com>
Date: Tue, 14 Jan 2020 13:06:55 -0300
Subject: [PATCH 1/2] 04-ongoing

---
 04/src/App.js        | 17 ++++++++++++++---
 04/src/Char.css      |  7 +++++++
 04/src/Char.js       | 14 ++++++++++++++
 04/src/Validation.js |  7 +++++--
 4 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 04/src/Char.css

diff --git a/04/src/App.js b/04/src/App.js
index 2f0262ac..0a96d484 100644
--- a/04/src/App.js
+++ b/04/src/App.js
@@ -1,12 +1,13 @@
 import React from "react";
 import "./App.css";
 
-import Validation from './Validation'
+import Validation from "./Validation";
+import Char from "./Char";
 
 class App extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { message: "Sup!" };
+    this.state = { message: "" };
   }
 
   handleChange = event => {
@@ -15,17 +16,27 @@ class App extends React.Component {
     this.setState({ message: newMessage });
   };
 
+  handleDelete(index) {
+    let newSplited = [...this.state.splited]
+  }
+
   render() {
     const input = (
       // <input onChange={this.handleChange.bind(this)} /> // --> this works
       <input onChange={event => this.handleChange(event)} /> // --> but this is better
     );
 
+    let splited = this.state.message.split("");
+    console.log("splited", splited);
+
     return (
       <div className="App">
         <h1>{this.state.message}</h1>
         {input}
-        <Validation/>
+        <Validation length={this.state.message.length} />
+        {splited.map((item, index) => {
+          return <Char key={index} string={item} />
+        })}
       </div>
     );
   }
diff --git a/04/src/Char.css b/04/src/Char.css
new file mode 100644
index 00000000..78f6ef3e
--- /dev/null
+++ b/04/src/Char.css
@@ -0,0 +1,7 @@
+.Char {
+  display: inline-block;
+  padding: 16px;
+  text-align: center;
+  margin: 16px;
+  border: 1px solid black;
+}
diff --git a/04/src/Char.js b/04/src/Char.js
index e69de29b..4b1278d4 100644
--- a/04/src/Char.js
+++ b/04/src/Char.js
@@ -0,0 +1,14 @@
+import React from "react";
+import "./Char.css";
+
+class Char extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+  return <div className="Char" onClick={this.props.click} >{this.props.string}</div>;
+  }
+}
+
+export default Char;
diff --git a/04/src/Validation.js b/04/src/Validation.js
index 22ac4fc0..88f1668d 100644
--- a/04/src/Validation.js
+++ b/04/src/Validation.js
@@ -4,13 +4,16 @@ class Validation extends React.Component {
   constructor(props) {
     super(props);
     console.log("Validation:", props);
-    // console.log(this.props.message.lenght);
   }
 
   render() {
       return(
           <div>
-              <p>validation placeholder</p>
+            {this.props.length <= 5 ? 
+              <p>good enough (length: {this.props.length})</p>
+              :
+              <p>TOO MUCH, STAHP (length: {this.props.length})</p>
+            }
           </div>
       )
   }

From 684292b454033d76d38127bdb5c98362d0301750 Mon Sep 17 00:00:00 2001
From: Yutsuo <yutsuo@gmail.com>
Date: Wed, 15 Jan 2020 12:28:18 -0300
Subject: [PATCH 2/2] 04-ongoing

---
 02/src/App.js        |  1 +
 04/src/App.js        | 33 ++++++++++++++++++++++++---------
 04/src/Validation.js | 19 ++++++++++---------
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/02/src/App.js b/02/src/App.js
index 96cfda19..8ccf5d9f 100644
--- a/02/src/App.js
+++ b/02/src/App.js
@@ -74,6 +74,7 @@ const App = props => {
 // ## OOP code ##
 class App extends React.Component {
   // The state should be IMMUTABLE, do not directly change it
+  // If you need to change it, use the setState() method.
   state = {
     character: [
       { id: 1, name: 'char1', ilvl: '100' },
diff --git a/04/src/App.js b/04/src/App.js
index 0a96d484..25286dab 100644
--- a/04/src/App.js
+++ b/04/src/App.js
@@ -10,33 +10,48 @@ class App extends React.Component {
     this.state = { message: "" };
   }
 
-  handleChange = event => {
-    console.log(event.target.value);
+  // handleChange = event => {
+  //   let newMessage = event.target.value;
+  //   this.setState({ message: newMessage });
+  // };
+
+  handleChange(event) {
     let newMessage = event.target.value;
     this.setState({ message: newMessage });
   };
 
   handleDelete(index) {
-    let newSplited = [...this.state.splited]
+    let newMessage = [...this.state.message];
+    let newSplited = newMessage.toString().split(",");
+    newSplited.splice(index, 1);
+    newMessage = newSplited.join("");
+    this.setState({ message: newMessage });
   }
 
   render() {
     const input = (
-      // <input onChange={this.handleChange.bind(this)} /> // --> this works
-      <input onChange={event => this.handleChange(event)} /> // --> but this is better
+      // <input onChange={this.handleChange.bind(this)} value={this.state.message} /> // --> this works
+      <input type="text" onChange={event => this.handleChange(event)} value={this.state.message} /> // --> but this is better
     );
 
     let splited = this.state.message.split("");
-    console.log("splited", splited);
+
+    const charList = splited.map((item, index) => {
+      return (
+        <Char
+          key={index}
+          string={item}
+          click={() => this.handleDelete(index)}
+        />
+      );
+    });
 
     return (
       <div className="App">
         <h1>{this.state.message}</h1>
         {input}
         <Validation length={this.state.message.length} />
-        {splited.map((item, index) => {
-          return <Char key={index} string={item} />
-        })}
+        {charList}
       </div>
     );
   }
diff --git a/04/src/Validation.js b/04/src/Validation.js
index 88f1668d..df48f6ae 100644
--- a/04/src/Validation.js
+++ b/04/src/Validation.js
@@ -6,16 +6,17 @@ class Validation extends React.Component {
     console.log("Validation:", props);
   }
 
+  validation() {
+    let validationMessage = <p>good enough</p>;
+    if (this.props.length >= 5) {
+      validationMessage = <p>TOO MUCH, STAHP</p>;
+      return validationMessage;
+    }
+    return validationMessage;
+  }
+
   render() {
-      return(
-          <div>
-            {this.props.length <= 5 ? 
-              <p>good enough (length: {this.props.length})</p>
-              :
-              <p>TOO MUCH, STAHP (length: {this.props.length})</p>
-            }
-          </div>
-      )
+    return <div>{this.validation()}</div>;
   }
 }