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 2625dd8..bde56e1 100644 --- a/app/assets/stylesheets/kudos/components/_kudo.scss +++ b/app/assets/stylesheets/kudos/components/_kudo.scss @@ -21,6 +21,30 @@ top: 1em; } +.kudo__update { + position: absolute; + right: 1em; + text-align: right; + top: 4.25rem; +} + +.kudo__edit-button { + @extend .btn; + height: 25px; + padding: 0; + text-align: center; + width: 50px; +} + +.kudo__edit-button--save { + @extend .btn-primary; +} + +.kudo__input { + border: 1px solid $dark-border-color; + border-radius: 0 0 4px 4px; +} + .kudo__receiver { // text-align: center; } 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/app/controllers/kudos_controller.rb b/app/controllers/kudos_controller.rb index 2fcb371..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) @@ -71,6 +71,16 @@ def create end end + def update + kudo = Kudo.find_by!(id: params[:kudo][:id], giver_id: current_user.id) + + 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 + end + end + private def basic_user_info_by_id(id) @@ -84,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 diff --git a/client/app/bundles/KudosApp/actions/actionCreators.jsx b/client/app/bundles/KudosApp/actions/actionCreators.jsx index 78e947d..dc971d5 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,34 @@ const createKudo = (receiverEmail, messageBody, onSuccess = null, onFailure = nu } } +const editKudo = ( id, message, onSuccess = null, onFailure = null ) => { + return dispatch => { + dispatch(updatedKudo( id, message )) + dispatch(resetErrorMessage()); + + return request({ + method: 'PATCH', + url: '/kudos/'+id, + responseType: 'json', + data: { + kudo: { + id: id, + body: message, + } + }, + }).then(res => { + if (onSuccess) { + onSuccess(res); + } + }).catch(err => { + if (onFailure) { + onFailure(err); + } + dispatch(serverRejectedKudo(err)) + }) + } +} + const initialize = ({ id, name }) => { return { type: actionTypes.INITIALIZE, @@ -106,6 +142,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 594d55c..0a2a608 100644 --- a/client/app/bundles/KudosApp/components/Kudo.jsx +++ b/client/app/bundles/KudosApp/components/Kudo.jsx @@ -3,18 +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'); + _.bindAll(this, 'formatTimestamp', 'likedBySelf', 'formatLikeText', 'postedByActiveUser', 'makeEditable', 'setMessage', "update"); 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 ? this.props.kudo.likes.length : 0)), + body: this.props.kudo.body, + editing: false }; if (this.likedBySelf(this.props.kudo.likes, this.props.giverId)) { @@ -25,12 +28,11 @@ 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')}` + 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`; @@ -49,6 +51,25 @@ 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); + } + + makeEditable(e) { + this.setState({editing: true}); + } + + setMessage(e) { + this.setState({body: e.target.value}) + } + + update(e) { + this.setState({editing: false}); + 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) }); @@ -61,6 +82,21 @@ export default class Kudo extends React.Component { } render() { + + const Edit = () => + + const Save = () => + return

Kudos, {this.props.kudo.receiver}!

@@ -68,7 +104,15 @@ export default class Kudo extends React.Component {
- {this.props.kudo.body} + {this.state.editing ? ( +