From 9c2ad9bee21ea2bc92ee0eac4d12bb7878fa8bdb Mon Sep 17 00:00:00 2001
From: Ibrahim Mkusa <ibrahimmkusa@gmail.com>
Date: Mon, 1 May 2023 22:17:46 -0400
Subject: ex2.11 use data from json-server, employ axios lib

---
 part2/phonebook/src/App.js | 95 +++++++++++++++++++++++++++-------------------
 1 file changed, 55 insertions(+), 40 deletions(-)

(limited to 'part2/phonebook/src')

diff --git a/part2/phonebook/src/App.js b/part2/phonebook/src/App.js
index fd79a34..7edf5a8 100644
--- a/part2/phonebook/src/App.js
+++ b/part2/phonebook/src/App.js
@@ -1,84 +1,99 @@
-// Extract form element into its own component
-import { useState } from 'react'
+/* eslint no-use-before-define: 0 */ // --> OFF
+import { useEffect, useState } from 'react'
+import axios from 'axios'
 
 const ShowPerson = (props) => {
-      const searchTerm = props.searchTerm
-      const persons = props.persons
-      if (searchTerm === undefined)  {
-        return persons.map( (person) => {
-          return (<li key={person.id}>{person.name} {person.phoneNumber}</li>)})
-      } else {
-          const searchedList = persons.filter( (person) =>
-            {return person.name.includes(props.searchTerm)});
-          console.log(searchedList)
-          return searchedList.map( (searched) => {
-            return (<li key={searched.id}>{searched.name} {searched.phoneNumber}</li>)
-          } )
-      }
+  const searchTerm = props.searchTerm
+  const persons = props.persons
+  if (searchTerm === undefined) {
+    return persons.map((person) => {
+      return (<li key={person.id}>{person.name} {person.number}</li>)
+    })
+  } else {
+    const searchedList = persons.filter((person) =>
+    { return person.name.includes(props.searchTerm)
+    });
+      console.log(searchedList)
+      return searchedList.map( (searched) => {
+        return (<li key={searched.id}>{searched.name} {searched.number}</li>)
+    })
   }
+}
 
 const Filter = (props) => {
   return (
-    <p>filter shown with <input value={props.searchTerm} onChange={(event) =>
-      props.setSearchTerm(event.target.value)} /></p>
+    <p>filter shown with <input
+      value={props.searchTerm} onChange={(event) =>
+        props.setSearchTerm(event.target.value)}
+                         />
+    </p>
   )
 }
 
 const App = () => {
-  const [persons, setPersons] = useState([
-    { name: 'Arto Hellas', phoneNumber: '000-000-0000', id: 1 },
-    { name: 'John F Kennedy', phoneNumber: '1-800-NASA', id: 2 },
-    { name: 'Julius K Nyerere', phoneNumber: '1-800-UHURU', id: 3 },
-  ])
+  //const [persons, setPersons] = useState([
+    //{ name: 'Arto Hellas', number: '000-000-0000', id: 1 },
+    //{ name: 'John F Kennedy', number: '1-800-NASA', id: 2 },
+    //{ name: 'Julius K Nyerere', number: '1-800-UHURU', id: 3 }
+  //])
+  const [persons, setPersons] = useState([])
   const [newName, setNewName] = useState('')
-  const [phoneNumber, setPhoneNumber] = useState('')
+  const [number, setPhoneNumber] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
 
+  useEffect(() => {
+    axios
+      .get('http://localhost:3001/persons')
+      .then(response => {
+        console.log('promise fulfilled')
+        setPersons(response.data)
+        console.log(persons)
+      })
+  })
+
   const addContact = (event) => {
     event.preventDefault()
     console.log(newName, persons)
-    if (persons.find(person => person.name === newName)) {
+    if (persons.find(person => person.name === newName)) { // eslint-disable-next-line
       alert(`${newName} is already added to phonebook`)
-    } else  {
+    } else {
       const newPerson = {
         name: newName,
-        id: persons.length + 1,
-        phoneNumber: phoneNumber,
+        id: persons.length + 1, // eslint-disable-next-line
+        number: number
       }
-    setPersons(persons.concat(newPerson))
-  }}
+      setPersons(persons.concat(newPerson))
+    }
+  }
 
   const handleTypedName = (event) => {
-    //console.log(event.target.value)
+    //  console.log(event.target.value)
     setNewName(event.target.value)
-    //console.log(newName)
+    //  console.log(newName)
   }
 
   const handlePhoneNo = (event) => {
     setPhoneNumber(event.target.value)
   }
 
-  
-    
-
   return (
     <div>
       <h2>Phonebook</h2>
-      <Filter searchTerm={searchTerm} setSearchTerm={setSearchTerm}/>
-      
+      <Filter searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
       <h2> add new contact </h2>
       <form onSubmit={addContact}>
         <div>
           <p>name: <input value={newName} onChange={handleTypedName} /></p>
-          <p>number: <input value={phoneNumber} onChange={handlePhoneNo} /></p>
+          <p>number: <input value={number} onChange={handlePhoneNo} /></p>
         </div>
         <div>
-          <button  type="submit">add</button>
+          <button type='submit'>add</button>
         </div>
       </form>
       <h2>Numbers</h2>
-      <ShowPerson searchTerm={searchTerm} persons={persons} 
-        />
+      <ShowPerson
+        searchTerm={searchTerm} persons={persons}
+      />
     </div>
   )
 }
-- 
cgit v1.2.3