Minor Update

Split App into components

Author: svwoodhouse

Class Notes/my-app/src/components/Cockpit/Cockpit.css

@@ -0,0 +1,11 @@
+.Cockpit {
+    text-align: center;
+  }
+  
+  .red {
+    color: red;
+  }
+  
+  .bold {
+    font-weight: bold;
+  }

Class Notes/my-app/src/components/Cockpit/Cockpit.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  background-color: ${props => props.alt ? 'red' : 'green'};
+  color: white;
+  font: inherit;
+  border: 1px solid blue;
+  padding: 8px;
+  cursor: pointer;
+  
+  &:hover {
+    background-color: ${props => props.alt ? 'salmon' : 'lightgreen'};
+    color: black;
+  }
+`;
+
+const cockpit = (props) => {
+    const classes = [];
+    if (props.persons.length <= 2) {
+      classes.push('red'); // classes = ['red']
+    }
+    if (props.persons.length <= 1) {
+      classes.push('bold'); // classes = ['red', 'bold']
+    }
+
+return(
+    <div>
+        <h1>Hi, I'm a React App</h1>
+        <p className={classes.join(' ')}>This is really working!</p>
+        <StyledButton 
+            alt={props.showPersons} 
+            onClick={props.clicked}>
+            Toggle Persons
+        </StyledButton>
+    </div>
+)}
+
+export default cockpit;

Class Notes/my-app/src/components/Persons/Persons.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Person from './Person/Person';
+
+const persons = (props) => props.persons.map((person, index) => {
+        return (
+          <Person
+            click={() => props.clicked(index)}
+            name={person.name}
+            age={person.age}
+            key={person.id}
+            changed={event => props.changed(event, person.id)}/>);
+        });
+
+export default persons;

Class Notes/my-app/src/containers/App.js

@@ -1,22 +1,9 @@
 import React, { Component } from 'react';
-import styled from 'styled-components';
 
 import './App.css';
-import Person from '../components/Persons/Person/Person';
-
-const StyledButton = styled.button`
-  background-color: ${props => props.alt ? 'red' : 'green'};
-  color: white;
-  font: inherit;
-  border: 1px solid blue;
-  padding: 8px;
-  cursor: pointer;
-  
-  &:hover {
-    background-color: ${props => props.alt ? 'salmon' : 'lightgreen'};
-    color: black;
-  }
-`;
+import Persons from '../components/Persons/Persons';
+import Cockpit from '../components/Cockpit/Cockpit';
+
 
 class App extends Component {
   state = {
@@ -61,35 +48,16 @@ class App extends Component {
   };
 
   render() {
-    const style = {
-      backgroundColor: 'green',
-      color: 'white',
-      font: 'inherit',
-      border: '1px solid blue',
-      padding: '8px',
-      cursor: 'pointer',
-      ':hover': {
-        backgroundColor: 'lightgreen',
-        color: 'black'
-      }
-    };
 
     let persons = null;
 
     if (this.state.showPersons) {
       persons = (
         <div>
-          {this.state.persons.map((person, index) => {
-            return (
-              <Person
-                click={() => this.deletePersonHandler(index)}
-                name={person.name}
-                age={person.age}
-                key={person.id}
-                changed={event => this.nameChangedHandler(event, person.id)}
-              />
-            );
-          })}
+          <Persons 
+          persons={this.state.persons}
+          clicked={this.deletePersonHandler}
+          changed={this.nameChangedHandler} />
         </div>
       );
 
@@ -100,21 +68,12 @@ class App extends Component {
       // };
     }
 
-    const classes = [];
-    if (this.state.persons.length <= 2) {
-      classes.push('red'); // classes = ['red']
-    }
-    if (this.state.persons.length <= 1) {
-      classes.push('bold'); // classes = ['red', 'bold']
-    }
-
     return (
       <div className="App">
-        <h1>Hi, I'm a React App</h1>
-        <p className={classes.join(' ')}>This is really working!</p>
-        <StyledButton alt={this.state.showPersons} onClick={this.togglePersonsHandler}>
-          Toggle Persons
-        </StyledButton>
+        <Cockpit
+          showPersons={this.state.showPersons}
+          persons={this.state.persons}
+          clicked={this.togglePersonsHandler} />
         {persons}
       </div>
     );