final

src/App.js

@@ -27,44 +27,58 @@ class App extends React.Component {
       }).catch(console.log('contact to the server'))       
     }
 
-    // method to check whether param1 (=list) contains param2 (=comparable). 
+    // (part 2) method to check whether param1 (=list) contains param2 (=comparable). 
+    // (part 3 update) this is obsolete due to changes in addPerson()-method
     isUnique = (list,comparable) =>{
       var unique = list.filter(a=> comparable===a.name)
       if(unique.length>0){
-        alert(`Nimi on jo listassa`)
         return false
       }
       return true
-           
     }
+    
+
     // add newName to the persons-list
     addPerson = (event) =>{
         event.preventDefault()
         const newPerson =  
         {
-          name: this.state.newName,       
-          number: this.state.newNumber, 
-          id: this.state.newName.replace(/\s/g, "")}
+          name: this.state.newName.trim(),       
+          number: this.state.newNumber.trim()}
         
-        if (this.isUnique(this.state.persons,this.state.newName) && this.state.newName !== ''){
-          const persons =  this.state.persons.concat(newPerson)  
+      // validating is now transformed to use .do().then().catch()-pattern 
+      if (newPerson.name === '' || newPerson.number === ''){
+        alert('Molemmat tiedot vaaditaan!')
+      }
+      else if (!this.isUnique(this.state.persons, newPerson.name)){
+        alert('Nimi on jo listassa!')
+      }
+      else{
+      personService.create(newPerson)
+      .then((response)=>{
+        const persons =  this.state.persons.concat(response) 
+        console.log(response)
         this.setState({persons, newName: this.state.newName, newNumber:this.state.newNumber})
         
-          personService.create(newPerson)
+            }).catch((error)=>{
+                alert(error.response.data.message)
                 console.log(`person ${newPerson.name} created`)
+              }) 
+
             }
           
           }
     removePerson = (id) => {
-
+      if(window.confirm(`Haluatko varmasti poistaa henkilön?`)){
         personService.remove(id).then(response =>{
             const a = this.state.persons.filter(person =>person.id !== id) 
             this.setState({persons: a})
           }) 
 
+      } else {
+        console.log(`action cancelled`)
+      }
       }
-    
- 
  
   render() {
     return (
@@ -84,12 +98,4 @@ class App extends React.Component {
 }
 
 export default App
-  /*{this.state.persons.map(person => {
-    <Person name={this.person.name}  number = {person.number} rmvFct ={person.removeFunction(person.name)}/>
-   <div>{this.state.persons.map(p=> 
-     <Person name= {p.name}
-             number = {p.number}
-             removeFunction={this.removePerson(p.name)}/>)}
   
\ No newline at end of file
-     </div>
-    */
\ No newline at end of file

src/components/AddPersonsForm.js

@@ -3,20 +3,28 @@ import React from 'react'
 
     const AddPersonsForm = ({handleNameChange, handleNumberChange, addPerson})=>{
       return(
-        <form onSubmit = {addPerson}> 
         <div>
-            nimi: 
-            <input id="nameField" 
+          <form onSubmit = {addPerson}> 
+            <table>
+              <tbody>
+                  <tr>
+                    <td>nimi: </td>
+                    <td><input id="nameField" 
                     onChange= {handleNameChange} />
-          </div>
-          <div>
-            numero: <input id="numberField"
-            onChange= {handleNumberChange} />
-          </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>numero:</td> 
+                    <td><input id="numberField"
+                    onChange= {handleNumberChange} /></td>
+                  </tr>
+                </tbody>
+            </table>
             <div>
               <button type="submit">lisää</button>
             </div>
           </form>
+        </div>
 
       )
     }

src/components/ShowPersons.js

@@ -4,11 +4,17 @@ import React from 'react'
     
       return(
         <div>
+          <table>
+            <tbody>
             {props.persons.map(a => 
-          <li key= {a.name}> {a.name} {a.number} 
-            <button onClick = {function(){removeFunction(a.id)}}>poista</button>
-          </li>)
+            <tr key= {a.name}> 
+              <td>{a.name}</td> 
+              <td>{a.number}</td> 
+              <td><button onClick = {function(){removeFunction(a.id)}}>poista</button></td>
+            </tr>)
             }
+            </tbody>
+          </table>
         </div>
     )}
 

src/services/persons.js

 import axios from 'axios';
-const baseUrl = 'http://localhost:3001/persons'
+const baseUrl = '/api/persons'
+
+//const baseUrl = 'http://localhost:3001/api/persons'
+
 
 const getAll = ()=> {
     const request = axios.get(baseUrl)
@@ -9,6 +12,7 @@ const getAll = ()=> {
 const create = (newPerson) => {
     const request = axios.post(baseUrl, newPerson)
     return request.then(response => response.data)
+    //.then(response => response.data)      
 }
 const remove = (id) => {
     console.log(`${baseUrl}/${id}`)