From 5c5c224617ad16a61e45cfbbe579dc80218f74a3 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Tue, 6 Jun 2017 16:56:35 -0700
Subject: [PATCH 01/14] determine who can edit #7

---
 .../app/bundles/KudosApp/components/Kudo.jsx   | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/app/bundles/KudosApp/components/Kudo.jsx b/client/app/bundles/KudosApp/components/Kudo.jsx
index 594d55c..6a46238 100644
--- a/client/app/bundles/KudosApp/components/Kudo.jsx
+++ b/client/app/bundles/KudosApp/components/Kudo.jsx
@@ -9,14 +9,18 @@ export default class Kudo extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText');
+    _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText', 'postedByActiveUser');
     this.state = {
       likeAction: this.props.likeKudo(this.props.id),
       timestamp: this.formatTimestamp(this.props.kudo.given_at),
       thumbColor: grey400,
-      likeText: this.formatLikeText(this.props.kudo.likes.length)
+      likeText: this.formatLikeText(this.props.kudo.likes.length),
+      editMsg: this.postedByActiveUser() ? "Edit" : ""
     };
 
+    console.log("here's the props");
+    console.log(this.props);
+
     if (this.likedBySelf(this.props.kudo.likes, this.props.giverId)) {
       this.state.thumbColor = lightBlue400;
       this.state.likeAction = this.props.unlikeKudo(this.props.id);
@@ -25,7 +29,6 @@ export default class Kudo extends React.Component {
 
   formatTimestamp(t) {
     let ts = moment(t);
-    console.log("Parsed Zone:", ts);
     return `At ${ts.format('h:mm a')} on ${ts.format('MMM D, YYYY')}`
   }
 
@@ -49,6 +52,12 @@ export default class Kudo extends React.Component {
     return match
   }
 
+  postedByActiveUser() {
+    let user = this.props.giverId;
+    let poster = this.props.kudo.giver_id;
+    return (user == poster);
+  }
+
   componentWillReceiveProps(props) {
     if (this.props.kudo.likes != props.kudo.likes) {
       this.setState({ likeText: this.formatLikeText(props.kudo.likes.length) });
@@ -79,6 +88,9 @@ export default class Kudo extends React.Component {
       <div className="kudo__timestamp">
         {this.state.timestamp}
       </div>
+      <div className="editable">
+        <a href='#'>{this.state.editMsg}</a>
+      </div>
     </div>
   }
 

From e74703374bd7df2e3bb4ed0fc7e20f6a7a76ebf6 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Wed, 7 Jun 2017 16:40:25 -0700
Subject: [PATCH 02/14] scaffolding to attach updates to the store

---
 .../KudosApp/actions/actionCreators.jsx       | 43 +++++++++++++++++++
 .../app/bundles/KudosApp/components/Kudo.jsx  | 31 ++++++++-----
 .../KudosApp/constants/appConstants.jsx       |  1 +
 3 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/client/app/bundles/KudosApp/actions/actionCreators.jsx b/client/app/bundles/KudosApp/actions/actionCreators.jsx
index 78e947d..80da3e0 100644
--- a/client/app/bundles/KudosApp/actions/actionCreators.jsx
+++ b/client/app/bundles/KudosApp/actions/actionCreators.jsx
@@ -11,6 +11,14 @@ const postedKudo = (receiverEmail, messageBody) => {
   }
 }
 
+const updatedKudo = ( kudoId, newMessage ) => {
+  return {
+    type: actionTypes.UPDATED_KUDO,
+    kudoId,
+    newMessage
+  }
+}
+
 const serverReceivedKudo = (res) => {
   const receiverId = res.data.kudo.receiver_id
   const messageBody = res.data.kudo.body
@@ -95,6 +103,41 @@ const createKudo = (receiverEmail, messageBody, onSuccess = null, onFailure = nu
   }
 }
 
+const editKudo = ({ id, message }) => {
+  // stub
+  return dispatch => {
+    dispatch(updatedKudo( id, message ))
+    dispatch(resetErrorMessage());
+
+    return request({
+      method: 'PATCH',
+      url: '/kudos.json',
+      responseType: 'json',
+      // headers: {
+      //   'X-CSRF-Token': Config.getCSRFToken(),
+      // },
+      data: {
+        kudo: {
+          id: id,
+          body: messageBody,
+        }
+      },
+    }).then(res => {
+      console.log(res)
+      if (onSuccess) {
+        onSuccess(res);
+      }
+      dispatch(serverReceivedKudo(res));
+    }).catch(err => {
+      console.log(err)
+      if (onFailure) {
+        onFailure(err);
+      }
+      dispatch(serverRejectedKudo(err))
+    })
+  }
+}
+
 const initialize = ({ id, name }) => {
   return {
     type: actionTypes.INITIALIZE,
diff --git a/client/app/bundles/KudosApp/components/Kudo.jsx b/client/app/bundles/KudosApp/components/Kudo.jsx
index 6a46238..1de6933 100644
--- a/client/app/bundles/KudosApp/components/Kudo.jsx
+++ b/client/app/bundles/KudosApp/components/Kudo.jsx
@@ -9,18 +9,16 @@ export default class Kudo extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText', 'postedByActiveUser');
+    _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText', 'postedByActiveUser', 'makeEditable');
     this.state = {
       likeAction: this.props.likeKudo(this.props.id),
+      updateAction: () => true, // placeholder, initialize from props
       timestamp: this.formatTimestamp(this.props.kudo.given_at),
       thumbColor: grey400,
       likeText: this.formatLikeText(this.props.kudo.likes.length),
-      editMsg: this.postedByActiveUser() ? "Edit" : ""
+      editing: false
     };
 
-    console.log("here's the props");
-    console.log(this.props);
-
     if (this.likedBySelf(this.props.kudo.likes, this.props.giverId)) {
       this.state.thumbColor = lightBlue400;
       this.state.likeAction = this.props.unlikeKudo(this.props.id);
@@ -29,11 +27,11 @@ export default class Kudo extends React.Component {
 
   formatTimestamp(t) {
     let ts = moment(t);
-    return `At ${ts.format('h:mm a')} on ${ts.format('MMM D, YYYY')}`
+    return `At ${ts.format('h:mm a')} on ${ts.format('MMM D, YYYY')}`;
   }
 
   formatLikeText(numLikes) {
-    if (numLikes == 0) {
+    if (numLikes === 0) {
       return "";
     }
     return `${numLikes} ${numLikes === 1 ? 'person likes': 'people like'} this`;
@@ -58,6 +56,10 @@ export default class Kudo extends React.Component {
     return (user == poster);
   }
 
+  makeEditable(e) {
+    this.setState({editing: true});
+  }
+
   componentWillReceiveProps(props) {
     if (this.props.kudo.likes != props.kudo.likes) {
       this.setState({ likeText: this.formatLikeText(props.kudo.likes.length) });
@@ -70,6 +72,17 @@ export default class Kudo extends React.Component {
   }
 
   render() {
+
+    const Edit = () => <div className="edit-kudo-button">
+      <button type='button' className="btn" onClick={this.makeEditable}>
+        <i className="fa fa-pencil-square-o fa-2x" aria-hidden="true"></i>
+      </button>
+    </div>
+
+    const Save = () => <div className="save-kudo-button">
+      <button type='button' className='btn' onClick={this.props.updateAction}>Save</button>
+    </div>
+
     return <div className="kudo">
       <h4 className="list-group-item-heading">Kudos, {this.props.kudo.receiver}!</h4>
       <div className="kudo__receiver">
@@ -88,9 +101,7 @@ export default class Kudo extends React.Component {
       <div className="kudo__timestamp">
         {this.state.timestamp}
       </div>
-      <div className="editable">
-        <a href='#'>{this.state.editMsg}</a>
-      </div>
+      {this.postedByActiveUser() ? (this.state.editing ? <Save /> : <Edit />) : (null)}
     </div>
   }
 
diff --git a/client/app/bundles/KudosApp/constants/appConstants.jsx b/client/app/bundles/KudosApp/constants/appConstants.jsx
index a0ce1eb..b9a2ad6 100644
--- a/client/app/bundles/KudosApp/constants/appConstants.jsx
+++ b/client/app/bundles/KudosApp/constants/appConstants.jsx
@@ -5,6 +5,7 @@ import mirrorCreator from 'mirror-creator';
 
 const actionTypes = mirrorCreator([
   'POSTED_KUDO',
+  'UPDATED_KUDO',
   'INITIALIZE',
   'SERVER_RECEIVED_KUDO',
   'SERVER_REJECTED_KUDO',

From 94fd911ec69a5211d2398214dd091dc0f2002f64 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Wed, 7 Jun 2017 17:43:06 -0700
Subject: [PATCH 03/14] update handler & route #7

---
 app/controllers/kudos_controller.rb                   | 11 +++++++++++
 .../app/bundles/KudosApp/actions/actionCreators.jsx   |  6 +-----
 config/routes.rb                                      |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/controllers/kudos_controller.rb b/app/controllers/kudos_controller.rb
index 2fcb371..5df0be4 100644
--- a/app/controllers/kudos_controller.rb
+++ b/app/controllers/kudos_controller.rb
@@ -71,6 +71,17 @@ def create
     end
   end
 
+  def update
+    kudo = Kudo.find_by(id: kudo_params[:id])
+    kudo.body = kudo_params[:body]
+
+    if kudo.save
+      render json: { kudo: kudo }, status: :created
+    else
+      render json: { error: kudo.errors.messages.values.flatten.to_sentence }, status: :unprocessable_entity
+    end
+  end
+
   private
 
   def basic_user_info_by_id(id)
diff --git a/client/app/bundles/KudosApp/actions/actionCreators.jsx b/client/app/bundles/KudosApp/actions/actionCreators.jsx
index 80da3e0..1824316 100644
--- a/client/app/bundles/KudosApp/actions/actionCreators.jsx
+++ b/client/app/bundles/KudosApp/actions/actionCreators.jsx
@@ -103,8 +103,7 @@ const createKudo = (receiverEmail, messageBody, onSuccess = null, onFailure = nu
   }
 }
 
-const editKudo = ({ id, message }) => {
-  // stub
+const editKudo = ({ id, message, onSuccess = null, onFailure = null }) => {
   return dispatch => {
     dispatch(updatedKudo( id, message ))
     dispatch(resetErrorMessage());
@@ -113,9 +112,6 @@ const editKudo = ({ id, message }) => {
       method: 'PATCH',
       url: '/kudos.json',
       responseType: 'json',
-      // headers: {
-      //   'X-CSRF-Token': Config.getCSRFToken(),
-      // },
       data: {
         kudo: {
           id: id,
diff --git a/config/routes.rb b/config/routes.rb
index 26a8200..746afb3 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 Rails.application.routes.draw do
-  resources :kudos, only: [:index, :create], constraints: { format: :json }, defaults: { format: :json }
+  resources :kudos, only: [:index, :create, :update], constraints: { format: :json }, defaults: { format: :json }
 
   get 'kudos_app', to: 'kudos_app#index'
   # Auth

From 7ee00c265223d9bccbc6772e5560bdf359da5b70 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Thu, 8 Jun 2017 14:18:21 -0700
Subject: [PATCH 04/14] Textarea support for editable message

---
 .../app/bundles/KudosApp/components/Kudo.jsx  | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/client/app/bundles/KudosApp/components/Kudo.jsx b/client/app/bundles/KudosApp/components/Kudo.jsx
index 1de6933..09f030b 100644
--- a/client/app/bundles/KudosApp/components/Kudo.jsx
+++ b/client/app/bundles/KudosApp/components/Kudo.jsx
@@ -3,19 +3,21 @@ import _ from 'lodash';
 import moment from 'moment';
 import { grey400, lightBlue400 } from 'material-ui/styles/colors';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
+import Textarea from 'react-textarea-autosize';
 import ThumbUp from 'material-ui/svg-icons/action/thumb-up';
 
 export default class Kudo extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText', 'postedByActiveUser', 'makeEditable');
+    _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText', 'postedByActiveUser', 'makeEditable', 'setMessage');
     this.state = {
       likeAction: this.props.likeKudo(this.props.id),
-      updateAction: () => true, // placeholder, initialize from props
+      updateAction: () => console.log("Saved"), // placeholder, initialize from props
       timestamp: this.formatTimestamp(this.props.kudo.given_at),
       thumbColor: grey400,
       likeText: this.formatLikeText(this.props.kudo.likes.length),
+      body: this.props.kudo.body,
       editing: false
     };
 
@@ -71,6 +73,10 @@ export default class Kudo extends React.Component {
     }
   }
 
+  setMessage(e) {
+    this.setState({body: e.target.value})
+  }
+
   render() {
 
     const Edit = () => <div className="edit-kudo-button">
@@ -80,7 +86,7 @@ export default class Kudo extends React.Component {
     </div>
 
     const Save = () => <div className="save-kudo-button">
-      <button type='button' className='btn' onClick={this.props.updateAction}>Save</button>
+      <button type='button' className='btn' onClick={this.state.updateAction}>Save</button>
     </div>
 
     return <div className="kudo">
@@ -89,10 +95,18 @@ export default class Kudo extends React.Component {
         <img src={this.props.kudo.receiver_avatar} alt={this.props.kudo.receiver} className="kudo__avatar" />
       </div>
       <div className="kudo__message">
+      {this.state.editing ? (
+        <Textarea
+          minRows={2}
+          value={this.state.body}
+          onChange={this.setMessage}
+        />
+      ) : (
         <blockquote className="blockquote">
           {this.props.kudo.body}
           <footer className="blockquote-footer">{this.props.kudo.giver}</footer>
         </blockquote>
+      )}
       </div>
       <FloatingActionButton onClick={this.state.likeAction} mini={true} backgroundColor={this.state.thumbColor}>
         <ThumbUp/>

From ce4ac7fce43589afc1a44b0159cc48d3b6ea3837 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Fri, 9 Jun 2017 11:21:19 -0700
Subject: [PATCH 05/14] edit functionality works & is persisted #7

---
 app/controllers/kudos_controller.rb           |  2 +-
 .../KudosApp/actions/actionCreators.jsx       | 14 ++++++++++---
 .../app/bundles/KudosApp/components/Kudo.jsx  | 21 ++++++++++++-------
 .../bundles/KudosApp/components/KudosList.jsx | 12 +++++++----
 .../containers/KudosListContainer.jsx         |  4 +++-
 5 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/app/controllers/kudos_controller.rb b/app/controllers/kudos_controller.rb
index 5df0be4..7bea293 100644
--- a/app/controllers/kudos_controller.rb
+++ b/app/controllers/kudos_controller.rb
@@ -95,6 +95,6 @@ def basic_user_info_by_id(id)
   end
 
   def kudo_params
-    params.require(:kudo).permit(:body, :receiver_email)
+    params.require(:kudo).permit(:body, :receiver_email, :id)
   end
 end
diff --git a/client/app/bundles/KudosApp/actions/actionCreators.jsx b/client/app/bundles/KudosApp/actions/actionCreators.jsx
index 1824316..4861dd6 100644
--- a/client/app/bundles/KudosApp/actions/actionCreators.jsx
+++ b/client/app/bundles/KudosApp/actions/actionCreators.jsx
@@ -12,6 +12,9 @@ const postedKudo = (receiverEmail, messageBody) => {
 }
 
 const updatedKudo = ( kudoId, newMessage ) => {
+  console.log("Updated Kudo Action")
+  console.log("Kudo ID:", kudoId)
+  console.log("New Message:", newMessage)
   return {
     type: actionTypes.UPDATED_KUDO,
     kudoId,
@@ -103,22 +106,26 @@ const createKudo = (receiverEmail, messageBody, onSuccess = null, onFailure = nu
   }
 }
 
-const editKudo = ({ id, message, onSuccess = null, onFailure = null }) => {
+const editKudo = ( id, message, onSuccess = null, onFailure = null ) => {
+  console.log("In the edit kudo handler");
+  console.log("Id is", id);
+  console.log("Message is", message);
   return dispatch => {
     dispatch(updatedKudo( id, message ))
     dispatch(resetErrorMessage());
 
     return request({
       method: 'PATCH',
-      url: '/kudos.json',
+      url: '/kudos/'+id,
       responseType: 'json',
       data: {
         kudo: {
           id: id,
-          body: messageBody,
+          body: message,
         }
       },
     }).then(res => {
+      console.log("Made the Edit! Here's the Response:")
       console.log(res)
       if (onSuccess) {
         onSuccess(res);
@@ -145,6 +152,7 @@ const initialize = ({ id, name }) => {
 export {
   initialize,
   createKudo,
+  editKudo,
   addLike,
   removeLike,
   failedLike
diff --git a/client/app/bundles/KudosApp/components/Kudo.jsx b/client/app/bundles/KudosApp/components/Kudo.jsx
index 09f030b..ae93175 100644
--- a/client/app/bundles/KudosApp/components/Kudo.jsx
+++ b/client/app/bundles/KudosApp/components/Kudo.jsx
@@ -10,10 +10,9 @@ export default class Kudo extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText', 'postedByActiveUser', 'makeEditable', 'setMessage');
+    _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText', 'postedByActiveUser', 'makeEditable', 'setMessage', "update");
     this.state = {
       likeAction: this.props.likeKudo(this.props.id),
-      updateAction: () => console.log("Saved"), // placeholder, initialize from props
       timestamp: this.formatTimestamp(this.props.kudo.given_at),
       thumbColor: grey400,
       likeText: this.formatLikeText(this.props.kudo.likes.length),
@@ -62,6 +61,18 @@ export default class Kudo extends React.Component {
     this.setState({editing: true});
   }
 
+  setMessage(e) {
+    this.setState({body: e.target.value})
+  }
+
+  update(e) {
+    console.log("Trying to save!");
+    console.log("ID:", this.props.kudo.id);
+    console.log("Old Message:", this.props.kudo.body);
+    console.log("New Message:", this.state.body);
+    this.props.updateKudo(this.props.kudo.id, this.state.body);
+  }
+
   componentWillReceiveProps(props) {
     if (this.props.kudo.likes != props.kudo.likes) {
       this.setState({ likeText: this.formatLikeText(props.kudo.likes.length) });
@@ -73,10 +84,6 @@ export default class Kudo extends React.Component {
     }
   }
 
-  setMessage(e) {
-    this.setState({body: e.target.value})
-  }
-
   render() {
 
     const Edit = () => <div className="edit-kudo-button">
@@ -86,7 +93,7 @@ export default class Kudo extends React.Component {
     </div>
 
     const Save = () => <div className="save-kudo-button">
-      <button type='button' className='btn' onClick={this.state.updateAction}>Save</button>
+      <button type='button' className='btn' onClick={this.update}>Save</button>
     </div>
 
     return <div className="kudo">
diff --git a/client/app/bundles/KudosApp/components/KudosList.jsx b/client/app/bundles/KudosApp/components/KudosList.jsx
index 6ef49fb..040160e 100644
--- a/client/app/bundles/KudosApp/components/KudosList.jsx
+++ b/client/app/bundles/KudosApp/components/KudosList.jsx
@@ -7,9 +7,10 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 
 injectTapEventPlugin();
 
-const List = ({ giverId, kudos, likeKudo, unlikeKudo }) => {
+const List = ({ giverId, kudos, likeKudo, unlikeKudo, updateKudo }) => {
+  console.log("Trying to Render the List");
   return <div className="kudos-list">
-    { kudos.length > 0 ? kudos.map(kudo => <Kudo id={kudo.id} giverId={giverId} key={kudo.id} kudo={kudo} likeKudo={likeKudo} unlikeKudo={unlikeKudo}/>) : 'No kudos' }
+    { kudos.length > 0 ? kudos.map(kudo => <Kudo id={kudo.id} giverId={giverId} key={kudo.id} kudo={kudo} likeKudo={likeKudo} unlikeKudo={unlikeKudo} updateKudo={updateKudo}/>) : 'No kudos' }
   </div>
 }
 
@@ -25,11 +26,14 @@ export default class KudosList extends React.Component {
     totalKudos: PropTypes.number.isRequired,
     fetchPage: PropTypes.func.isRequired,
     likeKudo: PropTypes.func.isRequired,
-    unlikeKudo: PropTypes.func.isRequired
+    unlikeKudo: PropTypes.func.isRequired,
+    updateKudo: PropTypes.func.isRequired
   }
 
   constructor(props, context) {
     super(props, context);
+    console.log("List Props");
+    console.log(props);
     _.bindAll(this, 'areMoreKudos', 'handleScroll');
   }
 
@@ -56,7 +60,7 @@ export default class KudosList extends React.Component {
   render() {
     return <div className="kudos-list__container">
       <TabBarContainer />
-      <List giverId={this.props.id} kudos={this.props.kudos} likeKudo={this.props.likeKudo} unlikeKudo={this.props.unlikeKudo} />
+      <List giverId={this.props.id} kudos={this.props.kudos} likeKudo={this.props.likeKudo} unlikeKudo={this.props.unlikeKudo} updateKudo={this.props.updateKudo} />
       {this.props.isFetchingKudos ? <Spinner /> : null}
     </div>
   }
diff --git a/client/app/bundles/KudosApp/containers/KudosListContainer.jsx b/client/app/bundles/KudosApp/containers/KudosListContainer.jsx
index 028c5c9..e01819d 100644
--- a/client/app/bundles/KudosApp/containers/KudosListContainer.jsx
+++ b/client/app/bundles/KudosApp/containers/KudosListContainer.jsx
@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import request from 'axios'
-import { addLike, failedLike, removeLike } from '../actions/actionCreators';
+import { bindActionCreators } from 'redux';
+import { addLike, failedLike, removeLike, editKudo } from '../actions/actionCreators';
 import { fetchPage } from '../actions/tabActions';
 import KudosList from '../components/KudosList'
 import _ from 'lodash'
@@ -39,6 +40,7 @@ function mergeProps(stateProps, { dispatch }, ownProps) {
   return Object.assign({
     likeKudo: thumbKudo(dispatch, true, id, name),
     unlikeKudo: thumbKudo(dispatch, false, id, name),
+    updateKudo: bindActionCreators(editKudo, dispatch),
     fetchPage: () => dispatch(fetchPage(currentTab, kudos.length))
   }, ownProps, _.omit(stateProps, ['currentTab']))
 }

From 4ef4566ed1c0eb1ae0a31636c0056f49d1548625 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Fri, 9 Jun 2017 11:31:00 -0700
Subject: [PATCH 06/14] remove debug logging

---
 client/app/bundles/KudosApp/actions/actionCreators.jsx | 7 -------
 client/app/bundles/KudosApp/components/Kudo.jsx        | 4 ----
 client/app/bundles/KudosApp/components/KudosList.jsx   | 3 ---
 3 files changed, 14 deletions(-)

diff --git a/client/app/bundles/KudosApp/actions/actionCreators.jsx b/client/app/bundles/KudosApp/actions/actionCreators.jsx
index 4861dd6..e289ef8 100644
--- a/client/app/bundles/KudosApp/actions/actionCreators.jsx
+++ b/client/app/bundles/KudosApp/actions/actionCreators.jsx
@@ -12,9 +12,6 @@ const postedKudo = (receiverEmail, messageBody) => {
 }
 
 const updatedKudo = ( kudoId, newMessage ) => {
-  console.log("Updated Kudo Action")
-  console.log("Kudo ID:", kudoId)
-  console.log("New Message:", newMessage)
   return {
     type: actionTypes.UPDATED_KUDO,
     kudoId,
@@ -107,9 +104,6 @@ const createKudo = (receiverEmail, messageBody, onSuccess = null, onFailure = nu
 }
 
 const editKudo = ( id, message, onSuccess = null, onFailure = null ) => {
-  console.log("In the edit kudo handler");
-  console.log("Id is", id);
-  console.log("Message is", message);
   return dispatch => {
     dispatch(updatedKudo( id, message ))
     dispatch(resetErrorMessage());
@@ -125,7 +119,6 @@ const editKudo = ( id, message, onSuccess = null, onFailure = null ) => {
         }
       },
     }).then(res => {
-      console.log("Made the Edit! Here's the Response:")
       console.log(res)
       if (onSuccess) {
         onSuccess(res);
diff --git a/client/app/bundles/KudosApp/components/Kudo.jsx b/client/app/bundles/KudosApp/components/Kudo.jsx
index ae93175..84257d7 100644
--- a/client/app/bundles/KudosApp/components/Kudo.jsx
+++ b/client/app/bundles/KudosApp/components/Kudo.jsx
@@ -66,10 +66,6 @@ export default class Kudo extends React.Component {
   }
 
   update(e) {
-    console.log("Trying to save!");
-    console.log("ID:", this.props.kudo.id);
-    console.log("Old Message:", this.props.kudo.body);
-    console.log("New Message:", this.state.body);
     this.props.updateKudo(this.props.kudo.id, this.state.body);
   }
 
diff --git a/client/app/bundles/KudosApp/components/KudosList.jsx b/client/app/bundles/KudosApp/components/KudosList.jsx
index 040160e..1809b8b 100644
--- a/client/app/bundles/KudosApp/components/KudosList.jsx
+++ b/client/app/bundles/KudosApp/components/KudosList.jsx
@@ -8,7 +8,6 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 const List = ({ giverId, kudos, likeKudo, unlikeKudo, updateKudo }) => {
-  console.log("Trying to Render the List");
   return <div className="kudos-list">
     { kudos.length > 0 ? kudos.map(kudo => <Kudo id={kudo.id} giverId={giverId} key={kudo.id} kudo={kudo} likeKudo={likeKudo} unlikeKudo={unlikeKudo} updateKudo={updateKudo}/>) : 'No kudos' }
   </div>
@@ -32,8 +31,6 @@ export default class KudosList extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    console.log("List Props");
-    console.log(props);
     _.bindAll(this, 'areMoreKudos', 'handleScroll');
   }
 

From b6d50b304d3707b182b31ef1688740549d2ec975 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Fri, 9 Jun 2017 11:40:36 -0700
Subject: [PATCH 07/14] immediately reflect edit change on save #7

---
 client/app/bundles/KudosApp/components/Kudo.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/app/bundles/KudosApp/components/Kudo.jsx b/client/app/bundles/KudosApp/components/Kudo.jsx
index 84257d7..7aa54b6 100644
--- a/client/app/bundles/KudosApp/components/Kudo.jsx
+++ b/client/app/bundles/KudosApp/components/Kudo.jsx
@@ -15,7 +15,7 @@ export default class Kudo extends React.Component {
       likeAction: this.props.likeKudo(this.props.id),
       timestamp: this.formatTimestamp(this.props.kudo.given_at),
       thumbColor: grey400,
-      likeText: this.formatLikeText(this.props.kudo.likes.length),
+      likeText: this.formatLikeText((this.props.kudo.likes ? this.props.kudo.likes.length : 0)),
       body: this.props.kudo.body,
       editing: false
     };
@@ -66,6 +66,7 @@ export default class Kudo extends React.Component {
   }
 
   update(e) {
+    this.setState({editing: false});
     this.props.updateKudo(this.props.kudo.id, this.state.body);
   }
 
@@ -106,7 +107,7 @@ export default class Kudo extends React.Component {
         />
       ) : (
         <blockquote className="blockquote">
-          {this.props.kudo.body}
+          {this.state.body}
           <footer className="blockquote-footer">{this.props.kudo.giver}</footer>
         </blockquote>
       )}

From e657b5c985e83338094651efc6298f51412415f8 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Fri, 9 Jun 2017 11:54:09 -0700
Subject: [PATCH 08/14] additionally authorize edits in the controller

---
 app/controllers/kudos_controller.rb | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/controllers/kudos_controller.rb b/app/controllers/kudos_controller.rb
index 7bea293..c78f5bf 100644
--- a/app/controllers/kudos_controller.rb
+++ b/app/controllers/kudos_controller.rb
@@ -73,6 +73,12 @@ def create
 
   def update
     kudo = Kudo.find_by(id: kudo_params[:id])
+
+    if kudo.giver_id != current_user.id
+      render json: { error: 'Only the original poster can edit Kudos' }, status: :unauthorized
+      return
+    end
+
     kudo.body = kudo_params[:body]
 
     if kudo.save

From 9b6b8a5b4507fcfb35db3303f756ff520dad4938 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Fri, 9 Jun 2017 14:11:15 -0700
Subject: [PATCH 09/14] don't create additional temp kudo when editing

---
 client/app/bundles/KudosApp/actions/actionCreators.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/app/bundles/KudosApp/actions/actionCreators.jsx b/client/app/bundles/KudosApp/actions/actionCreators.jsx
index e289ef8..2aa0f58 100644
--- a/client/app/bundles/KudosApp/actions/actionCreators.jsx
+++ b/client/app/bundles/KudosApp/actions/actionCreators.jsx
@@ -123,7 +123,6 @@ const editKudo = ( id, message, onSuccess = null, onFailure = null ) => {
       if (onSuccess) {
         onSuccess(res);
       }
-      dispatch(serverReceivedKudo(res));
     }).catch(err => {
       console.log(err)
       if (onFailure) {

From 5d3883b0974dc7a91c210dcc5dd45b7793999faa Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Fri, 9 Jun 2017 14:11:30 -0700
Subject: [PATCH 10/14] basic styling

---
 .../stylesheets/kudos/components/_kudo.scss   | 26 ++++++++++++
 .../app/bundles/KudosApp/components/Kudo.jsx  | 42 +++++++++++--------
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/kudos/components/_kudo.scss b/app/assets/stylesheets/kudos/components/_kudo.scss
index 2625dd8..cbeed61 100644
--- a/app/assets/stylesheets/kudos/components/_kudo.scss
+++ b/app/assets/stylesheets/kudos/components/_kudo.scss
@@ -21,6 +21,32 @@
   top: 1em;
 }
 
+.kudo__update {
+  position: absolute;
+  right: 1em;
+  text-align: right;
+  top: 4.25rem;
+}
+
+.edit-button {
+  @extend .btn;
+  height: 25px;
+  padding: 0;
+  text-align: center;
+  width: 50px;
+}
+
+.save-button {
+  @extend .btn;
+  @extend .btn-primary;
+}
+
+.kudo__input {
+  border: 1px solid #aaa;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 .kudo__receiver {
   // text-align: center;
 }
diff --git a/client/app/bundles/KudosApp/components/Kudo.jsx b/client/app/bundles/KudosApp/components/Kudo.jsx
index 7aa54b6..5e07143 100644
--- a/client/app/bundles/KudosApp/components/Kudo.jsx
+++ b/client/app/bundles/KudosApp/components/Kudo.jsx
@@ -83,15 +83,19 @@ export default class Kudo extends React.Component {
 
   render() {
 
-    const Edit = () => <div className="edit-kudo-button">
-      <button type='button' className="btn" onClick={this.makeEditable}>
-        <i className="fa fa-pencil-square-o fa-2x" aria-hidden="true"></i>
+    const Edit = () => <button
+      type='button'
+      className="btn update-button edit-button"
+      onClick={this.makeEditable}>
+        Edit
       </button>
-    </div>
 
-    const Save = () => <div className="save-kudo-button">
-      <button type='button' className='btn' onClick={this.update}>Save</button>
-    </div>
+    const Save = () => <button
+      type='button'
+      className='btn save-button edit-button btn-primary'
+      onClick={this.update}>
+        Save
+      </button>
 
     return <div className="kudo">
       <h4 className="list-group-item-heading">Kudos, {this.props.kudo.receiver}!</h4>
@@ -99,27 +103,31 @@ export default class Kudo extends React.Component {
         <img src={this.props.kudo.receiver_avatar} alt={this.props.kudo.receiver} className="kudo__avatar" />
       </div>
       <div className="kudo__message">
-      {this.state.editing ? (
-        <Textarea
-          minRows={2}
-          value={this.state.body}
-          onChange={this.setMessage}
-        />
-      ) : (
         <blockquote className="blockquote">
-          {this.state.body}
+          {this.state.editing ? (
+            <Textarea
+              className="kudo__input"
+              value={this.state.body}
+              onChange={this.setMessage}
+            />
+          ) : (
+            this.state.body
+          )}
           <footer className="blockquote-footer">{this.props.kudo.giver}</footer>
         </blockquote>
-      )}
       </div>
       <FloatingActionButton onClick={this.state.likeAction} mini={true} backgroundColor={this.state.thumbColor}>
         <ThumbUp/>
       </FloatingActionButton>
       <div>{this.state.likeText}</div>
+      {this.postedByActiveUser ? (
+        <div className="kudo__update">
+          {this.state.editing ? <Save /> : <Edit />}
+        </div>
+      ) : (null)}
       <div className="kudo__timestamp">
         {this.state.timestamp}
       </div>
-      {this.postedByActiveUser() ? (this.state.editing ? <Save /> : <Edit />) : (null)}
     </div>
   }
 

From 7c1259c2e22a72b1ab94dc8aeed1955aef0c053f Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Mon, 19 Jun 2017 10:52:10 -0700
Subject: [PATCH 11/14] code style updates

---
 .../stylesheets/kudos/components/_give-kudo.scss       |  2 +-
 app/assets/stylesheets/kudos/components/_kudo.scss     | 10 ++++------
 app/assets/stylesheets/kudos/utils/_variables.scss     |  1 +
 client/app/bundles/KudosApp/actions/actionCreators.jsx |  2 --
 client/app/bundles/KudosApp/components/Kudo.jsx        |  8 ++++----
 5 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/kudos/components/_give-kudo.scss b/app/assets/stylesheets/kudos/components/_give-kudo.scss
index 84f5c45..2fe2102 100644
--- a/app/assets/stylesheets/kudos/components/_give-kudo.scss
+++ b/app/assets/stylesheets/kudos/components/_give-kudo.scss
@@ -61,7 +61,7 @@
     display: block;
     position: absolute;
     width: 50%;
-    border: 1px solid #aaa;
+    border: 1px solid $dark-border-color;
     border-top: none;
     background-color: #fff;
     border-bottom-left-radius: 4px;
diff --git a/app/assets/stylesheets/kudos/components/_kudo.scss b/app/assets/stylesheets/kudos/components/_kudo.scss
index cbeed61..bde56e1 100644
--- a/app/assets/stylesheets/kudos/components/_kudo.scss
+++ b/app/assets/stylesheets/kudos/components/_kudo.scss
@@ -28,7 +28,7 @@
   top: 4.25rem;
 }
 
-.edit-button {
+.kudo__edit-button {
   @extend .btn;
   height: 25px;
   padding: 0;
@@ -36,15 +36,13 @@
   width: 50px;
 }
 
-.save-button {
-  @extend .btn;
+.kudo__edit-button--save {
   @extend .btn-primary;
 }
 
 .kudo__input {
-  border: 1px solid #aaa;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border: 1px solid $dark-border-color;
+  border-radius: 0 0 4px 4px;
 }
 
 .kudo__receiver {
diff --git a/app/assets/stylesheets/kudos/utils/_variables.scss b/app/assets/stylesheets/kudos/utils/_variables.scss
index 732a04c..44442a3 100644
--- a/app/assets/stylesheets/kudos/utils/_variables.scss
+++ b/app/assets/stylesheets/kudos/utils/_variables.scss
@@ -1 +1,2 @@
 $spacer: 2rem;
+$dark-border-color: #aaa;
diff --git a/client/app/bundles/KudosApp/actions/actionCreators.jsx b/client/app/bundles/KudosApp/actions/actionCreators.jsx
index 2aa0f58..dc971d5 100644
--- a/client/app/bundles/KudosApp/actions/actionCreators.jsx
+++ b/client/app/bundles/KudosApp/actions/actionCreators.jsx
@@ -119,12 +119,10 @@ const editKudo = ( id, message, onSuccess = null, onFailure = null ) => {
         }
       },
     }).then(res => {
-      console.log(res)
       if (onSuccess) {
         onSuccess(res);
       }
     }).catch(err => {
-      console.log(err)
       if (onFailure) {
         onFailure(err);
       }
diff --git a/client/app/bundles/KudosApp/components/Kudo.jsx b/client/app/bundles/KudosApp/components/Kudo.jsx
index 5e07143..0a2a608 100644
--- a/client/app/bundles/KudosApp/components/Kudo.jsx
+++ b/client/app/bundles/KudosApp/components/Kudo.jsx
@@ -54,7 +54,7 @@ export default class Kudo extends React.Component {
   postedByActiveUser() {
     let user = this.props.giverId;
     let poster = this.props.kudo.giver_id;
-    return (user == poster);
+    return (user === poster);
   }
 
   makeEditable(e) {
@@ -85,14 +85,14 @@ export default class Kudo extends React.Component {
 
     const Edit = () => <button
       type='button'
-      className="btn update-button edit-button"
+      className="kudo__edit-button"
       onClick={this.makeEditable}>
         Edit
       </button>
 
     const Save = () => <button
       type='button'
-      className='btn save-button edit-button btn-primary'
+      className='kudo__edit-button kudo__edit-button--save'
       onClick={this.update}>
         Save
       </button>
@@ -120,7 +120,7 @@ export default class Kudo extends React.Component {
         <ThumbUp/>
       </FloatingActionButton>
       <div>{this.state.likeText}</div>
-      {this.postedByActiveUser ? (
+      {this.postedByActiveUser() ? (
         <div className="kudo__update">
           {this.state.editing ? <Save /> : <Edit />}
         </div>

From f5eb43cff32d28a05c6b7649a1b1baa3aa5a8b13 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Mon, 19 Jun 2017 13:53:08 -0700
Subject: [PATCH 12/14] more declarative update function

---
 app/controllers/kudos_controller.rb | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/app/controllers/kudos_controller.rb b/app/controllers/kudos_controller.rb
index c78f5bf..68ad3d3 100644
--- a/app/controllers/kudos_controller.rb
+++ b/app/controllers/kudos_controller.rb
@@ -72,16 +72,9 @@ def create
   end
 
   def update
-    kudo = Kudo.find_by(id: kudo_params[:id])
+    kudo = Kudo.find_by!(id: params[:kudo][:id], giver_id: current_user.id)
 
-    if kudo.giver_id != current_user.id
-      render json: { error: 'Only the original poster can edit Kudos' }, status: :unauthorized
-      return
-    end
-
-    kudo.body = kudo_params[:body]
-
-    if kudo.save
+    if kudo.update!(body: kudo_params[:body])
       render json: { kudo: kudo }, status: :created
     else
       render json: { error: kudo.errors.messages.values.flatten.to_sentence }, status: :unprocessable_entity
@@ -101,6 +94,6 @@ def basic_user_info_by_id(id)
   end
 
   def kudo_params
-    params.require(:kudo).permit(:body, :receiver_email, :id)
+    params.require(:kudo).permit(:body, :receiver_email)
   end
 end

From 8e218463206cc478dd0f06d901a5a6d5dcfd73e8 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Mon, 19 Jun 2017 15:19:11 -0700
Subject: [PATCH 13/14] refactor to reduce line length

---
 .../app/bundles/KudosApp/components/KudosList.jsx  | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/app/bundles/KudosApp/components/KudosList.jsx b/client/app/bundles/KudosApp/components/KudosList.jsx
index 1809b8b..e837d8c 100644
--- a/client/app/bundles/KudosApp/components/KudosList.jsx
+++ b/client/app/bundles/KudosApp/components/KudosList.jsx
@@ -9,7 +9,19 @@ injectTapEventPlugin();
 
 const List = ({ giverId, kudos, likeKudo, unlikeKudo, updateKudo }) => {
   return <div className="kudos-list">
-    { kudos.length > 0 ? kudos.map(kudo => <Kudo id={kudo.id} giverId={giverId} key={kudo.id} kudo={kudo} likeKudo={likeKudo} unlikeKudo={unlikeKudo} updateKudo={updateKudo}/>) : 'No kudos' }
+    { kudos.length > 0 ? (
+      kudos.map(kudo => <
+        Kudo id={kudo.id}
+        giverId={giverId}
+        key={kudo.id}
+        kudo={kudo}
+        likeKudo={likeKudo}
+        unlikeKudo={unlikeKudo}
+        updateKudo={updateKudo}
+        />)
+    ) : (
+      'No kudos'
+    )}
   </div>
 }
 

From c162249169ba73ccb268f84354d4ed258d6d7e39 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Fri, 18 Aug 2017 16:14:22 -0700
Subject: [PATCH 14/14] remove receiver email from strong params

---
 app/controllers/kudos_controller.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/controllers/kudos_controller.rb b/app/controllers/kudos_controller.rb
index 68ad3d3..b3345a3 100644
--- a/app/controllers/kudos_controller.rb
+++ b/app/controllers/kudos_controller.rb
@@ -47,7 +47,7 @@ def index
   #   :body           [body of kudo]
   def create
     giver_id = current_user.id
-    receiver_email = kudo_params[:receiver_email]
+    receiver_email = params[:kudo][:receiver_email]
 
     unless (receiver = User.find_by(email: receiver_email))
       if !(/@factual.com$/ =~ receiver_email)
@@ -94,6 +94,6 @@ def basic_user_info_by_id(id)
   end
 
   def kudo_params
-    params.require(:kudo).permit(:body, :receiver_email)
+    params.require(:kudo).permit(:body)
   end
 end