From e30f16a93c1720d7197e431b82dfd5ab05387340 Mon Sep 17 00:00:00 2001
From: Anthony Lee <antwonlee@gmail.com>
Date: Mon, 27 Nov 2017 12:32:38 -0600
Subject: [PATCH] Add toggling edit state

---
 reactjs/rsvp_app/src/App.js       | 24 ++++++++++++++++++------
 reactjs/rsvp_app/src/Guest.js     | 12 +++++++++---
 reactjs/rsvp_app/src/GuestList.js | 12 ++++++++++--
 reactjs/rsvp_app/yarn.lock        |  4 ++--
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/reactjs/rsvp_app/src/App.js b/reactjs/rsvp_app/src/App.js
index f82b103..e10c86c 100644
--- a/reactjs/rsvp_app/src/App.js
+++ b/reactjs/rsvp_app/src/App.js
@@ -8,32 +8,40 @@ class App extends Component {
     guests: [
       {
         name: "Treasure",
-        isConfirmed: false
+        isConfirmed: false,
+        isEditing: false
       },
       {
         name: "Nick",
-        isConfirmed: true
+        isConfirmed: true,
+        isEditing: false
       },
       {
         name: "Matt",
-        isConfirmed: true
+        isConfirmed: true,
+        isEditing: true
       }
     ]
   }
 
-  toggleConfirmationAt = indexToChange => 
+  toggleGuestPropertyAt = (property, indexToChange) => 
     this.setState({
       guests: this.state.guests.map((guest, index) => {
         if (index === indexToChange) {
           return {
             ...guest,
-            isConfirmed: !guest.isConfirmed
+            isConfirmed: !guest[property]
           };
         }
         return guest;
       })
     });
 
+  toggleConfirmationAt = index =>
+    this.toggleGuestPropertyAt("isConfirmed", index);
+
+  toggleEditingAt = index =>
+    this.toggleGuestPropertyAt("isEditing", index);
 
   getTotalInvited = () => this.state.guests.length;
   // getAttendingGuests = () =>
@@ -74,7 +82,11 @@ class App extends Component {
             </tbody>
           </table>
 
-          <GuestList guests={this.state.guests} />
+          <GuestList 
+            guests={this.state.guests} 
+            toggleConfirmationAt={this.toggleConfirmationAt}
+            toggleEditingAt={this.toggleEditingAt}
+          />
 
         </div>
       </div>
diff --git a/reactjs/rsvp_app/src/Guest.js b/reactjs/rsvp_app/src/Guest.js
index 824b5df..07d54d6 100644
--- a/reactjs/rsvp_app/src/Guest.js
+++ b/reactjs/rsvp_app/src/Guest.js
@@ -5,15 +5,21 @@ const Guest = props =>
     <li>
       <span>{props.name}</span>
       <label>
-        <input type="checkbox" checked={props.isConfirmed} /> Confirmed
+        <input 
+          type="checkbox" 
+          checked={props.isConfirmed}
+          onChange={props.handleConfirmation} /> Confirmed
       </label>
-      <button>edit</button>
+      <button onClick={props.handleToggleEditing}>edit</button>
       <button>remove</button>
     </li>
 
 Guest.propTypes = {
   name: PropTypes.string.isRequired,
-  isConfirmed: PropTypes.bool.isRequired
+  isConfirmed: PropTypes.bool.isRequired,
+  isEditing: PropTypes.bool.isRequired,
+  handleConfirmation: PropTypes.func.isRequired,
+  handleToggleEditing: PropTypes.func.isRequired
 }
 
 export default Guest
diff --git a/reactjs/rsvp_app/src/GuestList.js b/reactjs/rsvp_app/src/GuestList.js
index 3e24093..93451b7 100644
--- a/reactjs/rsvp_app/src/GuestList.js
+++ b/reactjs/rsvp_app/src/GuestList.js
@@ -6,12 +6,20 @@ import Guest from './Guest'
 const GuestList = props => 
   <ul>
     {props.guests.map((guest, index) =>
-      <Guest key={index} name={guest.name} isConfirmed={guest.isConfirmed} />
+      <Guest 
+        key={index} 
+        name={guest.name} 
+        isConfirmed={guest.isConfirmed}
+        isEditing={guest.isEditing}
+        handleConfirmation={() => props.toggleConfirmationAt(index)}
+        handleToggleEditing={() => props.toggleEditingAt(index)} />
     )} 
   </ul>;
 
 GuestList.propTypes = {
-  guests: PropTypes.array.isRequired
+  guests: PropTypes.array.isRequired,
+  toggleConfirmationAt: PropTypes.func.isRequired,
+  toggleEditingAt: PropTypes.func.isRequired
 }
 
 export default GuestList
diff --git a/reactjs/rsvp_app/yarn.lock b/reactjs/rsvp_app/yarn.lock
index 151e91d..3f6a14d 100644
--- a/reactjs/rsvp_app/yarn.lock
+++ b/reactjs/rsvp_app/yarn.lock
@@ -5114,7 +5114,7 @@ react-dev-utils@^4.2.1:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@16.1.1:
+react-dom@^16.1.1:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
   dependencies:
@@ -5170,7 +5170,7 @@ react-scripts@1.0.17:
   optionalDependencies:
     fsevents "1.1.2"
 
-react@16.1.1:
+react@^16.1.1:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f"
   dependencies: