Merge pull request #137 from amlidos/WishDetails-Edit-Hometown

Wish Details - Edit Hometown [Closes #81]

ui/src/services/WishDetailsService.js

@@ -12,6 +12,11 @@ const makeAWish = async(wish) => {
   return response.data;
 }
 
+const editAWish = async(id, wish) => {
+  let response = await axios.put(`${expressDomain}/wishes/${id}`, wish);
+  return response.data;
+}
+
 export const getWishes = async (types) => {
   let typeParams = types && types.length ? `?types=${types.toString()}` : '';
   // TODO query param options
@@ -22,5 +27,6 @@ export const getWishes = async (types) => {
 export default {
   getWishDetails,
   makeAWish,
+  editAWish,
   getWishes
 }

ui/src/services/WishDetailsService.test.js

@@ -53,6 +53,25 @@ describe('Wish details service', () => {
     expect(axios.post).toHaveBeenCalledWith(`${expressDomain}/wishes`, wish);
   })
 
+  it('should edit a wish when required', async () => {
+    const wish = {
+      "child": {
+        "firstName": "test2",
+        "lastName": "test2",
+        "age": "4",
+        "hometown": "Not Atlanta",
+        "illness": "sick"
+      },
+      "type": "go",
+      "details": "to disneyland"
+    }
+
+    axios.put = jest.fn(() => Promise.resolve({ data: wish }));
+    const response = await WishDetailsService.editAWish(wishId, wish);
+    expect(axios.put).toHaveBeenCalledWith(`${expressDomain}/wishes/${wishId}`, wish);
+    expect(response.child.hometown).toEqual('Not Atlanta')
+  });
+
   it('should get wishes', async () => {
     await WishDetailsService.getWishes();
     expect(axios.get).toHaveBeenCalledWith(`${expressDomain}/wishes`);

ui/src/wishDetails/WishDetails.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
 import WishDetailsService from '../services/WishDetailsService'
 import Rocket from '../assets/images/icn_To_Go_Rocket_White_Inside_130x130.png'
 import Alien from '../assets/images/icn_To_Meet_Alien_White_Inside_130x130.png'
@@ -10,6 +9,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCamera } from '@fortawesome/free-solid-svg-icons'
 import WishHeader from '../wishList/wishHeader'
 
+const styles = {
+  link:{
+    color: '#000000',
+    textDecoration: 'underline'
+  }
+}
+
 export default class WishDetails extends Component {
   constructor(props) {
     super(props)
@@ -36,6 +42,24 @@ export default class WishDetails extends Component {
     }
   }
 
+  updateHometownField(hometown) {
+    this.setState(prevState => ({
+      ...prevState,
+      wishDetails: {
+        ...prevState.wishDetails,
+        child: {
+          ...prevState.wishDetails.child,
+          hometown: hometown
+        }
+      }
+    }));
+  }
+  // () => this.updateHometown({child: wishDetails.child, type: wishDetails.type, details: wishDetails.details}
+  updateHometown = async (wish) => {
+    const { id } = this.props.match.params
+    return await WishDetailsService.editAWish(id, wish);
+  }
+
   async componentDidMount() {
     const { id } = this.props.match.params
     const wishDetails = await WishDetailsService.getWishDetails(id)
@@ -68,15 +92,25 @@ export default class WishDetails extends Component {
     return image
   }
 
+  goToWishSummary(wish) {
+    this.updateHometown(wish).then(() => this.props.history.push('/wish-summary'))
+  }
+
   render() {
-    const { child, details, sponsor } = this.state.wishDetails
+    const { child, details, sponsor, type } = this.state.wishDetails
     const { name, age, hometown } = child
 
+    const wish = {
+      child: child,
+      type: type,
+      details: details
+    }
+
     return (
       <div className="wish-details-page">
         <WishHeader />
         <div className="back-to-summary-link-container">
-          <Link to="/wish-summary">Back to Summary</Link>
+          <span style={styles.link} data-test="go-to-summary-link" onClick={() => this.goToWishSummary(wish)} to="">Back to Summary</span>
         </div>
         <div className="wishDetails containerHorizontal evenSpacing">
           <div>
@@ -95,7 +129,7 @@ export default class WishDetails extends Component {
             </div>
             <div>
               <label>Hometown: </label>
-              <span>{hometown}</span>
+              <input data-test="hometown-input" placeholder="enter your hometown" type="text" onBlur={() => this.updateHometown(wish)} onChange={(e) => this.updateHometownField(e.target.value)} value={hometown}/>
             </div>
             <h3>Illness Summary</h3>
             <textarea readOnly value={child.illness}></textarea>

ui/src/wishDetails/WishDetails.test.js

@@ -5,8 +5,29 @@ import Rocket from '../assets/images/icn_To_Go_Rocket_White_Inside_130x130.png'
 import Alien from '../assets/images/icn_To_Meet_Alien_White_Inside_130x130.png'
 import Astronaut from '../assets/images/icn_To_Be_Astronaut_White_Inside_130x130.png'
 import Telescope from '../assets/images/icn_To_See_Telescope_White_Inside_130x130.png'
+import axios from 'axios';
 
 jest.mock('../services/WishDetailsService', () => ({
+  editAWish: jest.fn(() => {
+    return ({
+      _id: 'mock child id',
+      child: {
+        name: 'child name',
+        hometown: 'Round Rock',
+        illness: '',
+        age: ''
+      },
+      type: '',
+      details: '',
+      sponser: {
+        name: '',
+        logo: '',
+        links: []
+      },
+      createdAt: '',
+      updatedAt: ''
+    })
+  }),
   getWishDetails: jest.fn(() => {
     return {
       id: '',
@@ -32,7 +53,7 @@ jest.mock('../services/WishDetailsService', () => ({
 describe('Initial Render', () => {
   let wishInfo
   beforeEach(() => {
-    wishInfo = shallow(<WishDetails childId={'a child id string'} />)
+    wishInfo = shallow(<WishDetails childId={'a child id string'} match={{params: {id: 1}}} />)
     wishInfo.instance().setState({
       id: '',
       wishDetails: {
@@ -61,6 +82,35 @@ describe('Initial Render', () => {
     expect(wishInfo.exists('.wishInfo'))
   })
 
+  it('should allow the hometown field to be edited', async () => {
+    const hometownInput = wishInfo.find('[data-test="hometown-input"]')
+    const instance = wishInfo.instance();
+    const updateHometownSpy = jest.spyOn(instance, 'updateHometown')
+    const goToWishSummarySpy = jest.spyOn(instance, 'goToWishSummary')
+
+    let event = {
+      target: {
+        value: 'Round Rock'
+      }
+    }
+    hometownInput.simulate('change', event)
+    expect(instance.state.wishDetails.child.hometown).toEqual('Round Rock');
+
+    const wish = {
+      child: instance.state.wishDetails.child,
+      type: instance.state.wishDetails.type,
+      details: instance.state.wishDetails.details
+    }
+
+    hometownInput.simulate('blur', event)
+    axios.put = jest.fn(() => Promise.resolve({ data: wish }));
+    expect(updateHometownSpy).toHaveBeenCalled()
+
+    const goToSummaryLink = wishInfo.find('[data-test="go-to-summary-link"]')
+    goToSummaryLink.simulate('click', event)
+    expect(goToWishSummarySpy).toHaveBeenCalled()
+  })
+
   describe('Getting image for wish type', () => {
     it('should return rocket image for type GO', () => {
       let currentWishState = wishInfo.instance().state.wishDetails