From 982ba0e256da62628362b93a750327fe51bd8f94 Mon Sep 17 00:00:00 2001
From: Yutsuo <yutsuo@gmail.com>
Date: Tue, 28 Jan 2020 13:05:32 -0300
Subject: [PATCH] update

---
 02/src/App.css           |   8 ++++
 02/src/App.js            | 101 ++++++++++++++++++++++-----------------
 02/src/Person/Person.css |   6 +++
 02/src/Person/Person.js  |  45 ++++++++++++-----
 4 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/02/src/App.css b/02/src/App.css
index 49316133..6ef85c8f 100644
--- a/02/src/App.css
+++ b/02/src/App.css
@@ -1,3 +1,11 @@
 .App {
   text-align: center;
 }
+
+.red {
+  color:red;
+}
+
+.bold {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/02/src/App.js b/02/src/App.js
index 8ccf5d9f..968a9201 100644
--- a/02/src/App.js
+++ b/02/src/App.js
@@ -1,7 +1,6 @@
-import React from 'react';
-import './App.css';
-import Person from './Person/Person';
-
+import React from "react";
+import "./App.css";
+import Person from "./Person/Person";
 
 /*// ## Functional code generated by creat-react-app ##
 function App() {
@@ -77,26 +76,28 @@ class App extends React.Component {
   // If you need to change it, use the setState() method.
   state = {
     character: [
-      { id: 1, name: 'char1', ilvl: '100' },
-      { id: 2, name: 'char2', ilvl: '110' },
-      { id: 3, name: 'char3', ilvl: '120' }
+      { id: 1, name: "char1", ilvl: "100" },
+      { id: 2, name: "char2", ilvl: "110" },
+      { id: 3, name: "char3", ilvl: "120" }
     ],
-    somethingElse: 'something something',
+    somethingElse: "something something",
     showOrHide: false
-  }
+  };
 
-deleteCharacterHandler = (index) => {
-  const characterCopy = [...this.state.character]; //<- it's a copy so you don't change the state, but a copy of it
-  // const characters = this.state.character.slice();  //<- this works, too, but use spread [...] instead
+  deleteCharacterHandler = index => {
+    const characterCopy = [...this.state.character]; //<- it's a copy so you don't change the state, but a copy of it
+    // const characters = this.state.character.slice();  //<- this works, too, but use spread [...] instead
 
-  characterCopy.splice(index, 1); // <- deletes the item from the copy of the state.character object
-  console.log('deleted character: ', this.state.character[index]);
-  this.setState({character: characterCopy}); //<- state alterations should be made by this function alone (setState())
-}
+    characterCopy.splice(index, 1); // <- deletes the item from the copy of the state.character object
+    console.log("deleted character: ", this.state.character[index]);
+    this.setState({ character: characterCopy }); //<- state alterations should be made by this function alone (setState())
+  };
 
   nameChangedHandler = (event, id) => {
     // find the index during input event
-    const charIndex = this.state.character.findIndex(c => {return c.id === id});
+    const charIndex = this.state.character.findIndex(c => {
+      return c.id === id;
+    });
 
     // copy the state item to manipulate it, state can't be directly changed.
     const char = { ...this.state.character[charIndex] };
@@ -109,25 +110,26 @@ deleteCharacterHandler = (index) => {
     characters[charIndex] = char;
 
     // change the state
-    this.setState( {character:characters} );
-  }
+    this.setState({ character: characters });
+  };
 
   showOrHide = () => {
-    const doesShow = this.state.showOrHide
+    const doesShow = this.state.showOrHide;
     // showOrHide was set to start false, but here when changing state it will
     // become the opposite. So if it's true it will be false and vice-versa
-    this.setState({showOrHide: !doesShow})
-  }
+    this.setState({ showOrHide: !doesShow });
+  };
 
   render() {
     //inline CSS directives
     const style = {
-      backgroundColor: 'white',
-      font: 'inherit',
-      border: '1px solid blue',
-      padding: '8px',
-      margin: '10px',
-      cursor: 'pointer'
+      backgroundColor: "green",
+      color: "white",
+      font: "inherit",
+      border: "1px solid blue",
+      padding: "8px",
+      margin: "10px",
+      cursor: "pointer"
     };
 
     let persons = null;
@@ -137,31 +139,42 @@ deleteCharacterHandler = (index) => {
         <div>
           {this.state.character.map((char, index) => {
             return (
-            <Person 
-            click={() => this.deleteCharacterHandler(index)} 
-            name={char.name} 
-            ilvl={char.ilvl} 
-            key={char.id} 
-            changed={(event) => this.nameChangedHandler(event, char.id)}
-            />)
+              <Person
+                click={() => this.deleteCharacterHandler(index)}
+                name={char.name}
+                ilvl={char.ilvl}
+                key={char.id}
+                changed={event => this.nameChangedHandler(event, char.id)}
+              />
+            );
           })}
         </div>
-      )
+      );
+
+      style.backgroundColor = "red";
+    }
+
+    let classes = [];
+    if (this.state.character.length <= 2) {
+      classes.push('red');
+    }
+    if (this.state.character.length <= 1) {
+      classes.push('bold');
     }
 
     return (
-      <div className='App'>
+      <div className="App">
         <h1>Hi, I'm a React App, I'm cute.</h1>
-        <p>Created using OOP code</p>
-        <button 
+        <p className={classes.join(' ')}>Created using OOP code</p>
+        <p style={{color: 'blue'}}>And this is a little test in styling</p>
+        <button
           style={style} // <- putting in the CSS directives set above
-          onClick={() => console.log('\"CLICK\"')} >
+          onClick={() => console.log('"CLICK"')}
+        >
           Click Me
         </button>
-        <button
-          style={style}
-          onClick={this.showOrHide} >
-          {this.state.showOrHide ? 'HIDE IT' : 'SHOW IT'}
+        <button style={style} onClick={this.showOrHide}>
+          {this.state.showOrHide ? "HIDE IT" : "SHOW IT"}
         </button>
         {persons}
       </div>
diff --git a/02/src/Person/Person.css b/02/src/Person/Person.css
index 77eb792b..50c81e0f 100644
--- a/02/src/Person/Person.css
+++ b/02/src/Person/Person.css
@@ -5,4 +5,10 @@
     box-shadow: 0 2px 3px #ccc;
     padding: 16px;
     text-align: center;
+}
+
+@media (min-width: 500px) {
+    .Person {
+        width: 450px;
+    }
 }
\ No newline at end of file
diff --git a/02/src/Person/Person.js b/02/src/Person/Person.js
index 1b0d68cb..b71793fc 100644
--- a/02/src/Person/Person.js
+++ b/02/src/Person/Person.js
@@ -1,16 +1,35 @@
-import React from 'react';
-import './Person.css';
+import React from "react";
+// import './Person.css';
+import styled from "styled-components";
 
-const person = (props) => {
-    return (
-        <div className="Person">
-            <p>I'm {props.name} and my ilvl is {props.ilvl} and ready to raid!</p>
-            <p>{props.children}</p>
-            <input type="text" onChange={props.changed} defaultValue={props.name} />
-            <button onClick={props.click}>delete</button>
-            {console.log('props:', props)}
-        </div>
-    )
+const StyledDiv = styled.div`
+  width: 500px;
+  margin: 16px auto;
+  border: 1px solid #eee;
+  color: green;
+  box-shadow: 0 2px 3px #ccc;
+  padding: 16px;
+  text-align: center;
+
+  @media (min-width: 500px) {
+    width: 450px;
+  }
+`;
+
+const person = props => {
+  return (
+    // <div className="Person">
+    <StyledDiv>
+      <p>
+        I'm {props.name} and my ilvl is {props.ilvl} and ready to raid!
+      </p>
+      <p>{props.children}</p>
+      <input type="text" onChange={props.changed} defaultValue={props.name} />
+      <button onClick={props.click}>delete</button>
+      {console.log("props:", props)}
+    </StyledDiv>
+    // </div>
+  );
 };
 
-export default person;
\ No newline at end of file
+export default person;