phonebook done. happy new year!

hw21-select-n-phonebook/src/App.js

@@ -1,4 +1,3 @@
-import logo from './logo.svg';
 import './App.css';
 import { useEffect, useState } from 'react';
 
@@ -260,58 +259,143 @@ const MySelect = ({ options = countries, value = 'YE', onChange }) => {
   )
 }
 
-// const PhoneBookEntry = ({ data: { name, phone } = { name: '', phone: '' },
-//   onChange,  //по изменению
-//   onMoveUp,  //сдвинуть вверх
-//   onMoveDown,//сдвинуть вниз
-//   onDelete,  //удалить этот
-//   onAdd }) => //добавить под ним еще один
-//   <>
-//     //тут отдавать в наружный onChange такой же объект как и data
-//     <input value={name} onChange={....} />
-//     //тут отдавать в наружный onChange такой же объект как и data
-//     <input value={phone} onChange={....} />
-//     <button onClick={onMoveUp}>^</button>
-//     <button onClick={onMoveDown}>v</button>
-//     <button onClick={onDelete}>x</button>
-//     <button onClick={onAdd}>+</button>
-//   </>
+const PhoneBookEntry = ({ 
+  data: { name, phone } = { name: '', phone: '' },
+  key='',
+  onChange,  //по изменению
+  onMoveUp,  //сдвинуть вверх
+  onMoveDown,//сдвинуть вниз
+  onDelete,  //удалить этот
+  onAdd }) =>
+  <>
+    <input value={name} onChange={(e) => onChange({name:e.target.value, phone})} />
+    <input type="number" value={phone} onChange={(e) => onChange({name, phone:e.target.value})} />
+    <button onClick={() => onMoveUp()}>^</button>
+    <button onClick={()=>onMoveDown()}>v</button>
+    <button onClick={() => onDelete({name, phone, key})}>x</button>
+    <button onClick={() => onAdd()}>+</button>
+    <br/>
+  </>
 
-// const defaultPeople = [{ name: 'John', phone: '102' },
-// { name: 'Paul', phone: '103' }]
-// const PhoneBook = ({ people = defaultPeople,
-//   onSave }) => {
-//   const [ppl, setPpl] = useState(people)
-//   const [keys, setKeys] = useState(people.map(() => Math.random()))
-//   //    const keys  = useRef(people.map(() => Math.random()))
-//   //должно меняться соответственно элементам списка - сдвигаться удаляться и тп
-//   useEffect(() => {
-//     setPpl(people)
-//     //тут и keys обновить
-//   }, [people])
-//   //обеспечить для PhoneBookEntry:
-//   //   onChange, onMoveUp, onMoveDown, onDelete
-//   const onChange = (newData, i) => { //{name: 'НАМЕ', phone: 'НУМБЕР'}
-//     //создаем новый массив ppl на базе старого, заменяем один элемент и делаем setPpl
-//     //ничего НЕ ДЕЛАЕМ с keys
-//   }
-//   const onDelete = (i) => { //фильтрует ppl и keys удаляя i-ый элемент
-//   }
-//   console.log(keys, ppl)
-//   return (
-//     <>
-//       <button onClick={.....}>+</button> //ДОБАВЛЯЕТ В НАЧАЛО СПИСКА
-//       <div className='PhoneBook'>
-//                 //по любым изменениям обновляем массив целиком на базе старого
-//         //меняя один или несколько элементов
-//         {ppl.map(data => <PhoneBookEntry data={data} key={ }  //не забудьте keys
-//           onChange={data => onChange(data, И)}
-//           onDelete={() => onDelete(i)} />)}
-//       </div>
-//       <button onClick={() => onSave(ppl)}>Save</button>
-//     </>
-//   )
-// }
+const defaultPeople = [
+  { name: 'John', phone: '102' },
+  { name: 'Paul', phone: '103' },
+  { name: 'Bob', phone: '111' },
+  { name: 'Marshall', phone: '313' }
+]
+
+const PhoneBook = ({ people = defaultPeople,
+  onSave }) => {
+  const [ppl, setPpl] = useState(people)
+  const [keys, setKeys] = useState(people.map(() => Math.random()))
+  const [name, setName] = useState('')
+  const [phone, setPhone] = useState('')
+
+  useEffect(() => {
+    setPpl(people)
+    setKeys(keys)
+  }, [keys, people])
+
+  const onChange = (newData, i) => {
+    let newPpl = []
+    ppl.forEach((item, index) => {
+      if(index === i) {
+        newPpl.push(newData)
+      } else {
+        newPpl.push(item)
+      }
+    })
+    setPpl(newPpl)
+  }
+
+  const onAdd = (newData, i) => {
+    let newArr = []
+    ppl.forEach(item => newArr.push(item))
+    
+    i === 'start'? newArr.unshift(newData) : newArr.splice(i+1, 0, newData)  
+
+    setPpl(newArr)
+    keys.splice(i ,0, Math.random())
+  }
+
+  const onDelete = (i) => {
+    setPpl(ppl.filter((item)=> item.name !== i.name && item.phone !== i.phone ))
+    keys.splice(i.key,1)
+  }
+
+  const onMoveUp = (index) => {
+    let newArr = []
+    ppl.forEach(item => newArr.push(item))
+
+    let temp = newArr[index]
+    let tempKey = keys[index]
+
+    if(index === 0) {
+      newArr[index] = newArr[newArr.length - 1]
+      newArr[newArr.length - 1] = temp
+
+      keys[index] = keys[0]
+      keys[0] = tempKey
+
+    } else {
+      newArr[index] = newArr[index - 1]
+      newArr[index - 1] = temp
+
+      keys[index] = keys[index - 1]
+      keys[index - 1] = tempKey
+    }
+    setPpl(newArr)
+  }
+
+  const onMoveDown = (index) => {
+    let newArr = []
+    ppl.forEach(item => newArr.push(item))
+
+    let temp = newArr[index]
+    let tempKey = keys[index]
+
+    if(index === newArr.length - 1) {
+      newArr[index] = newArr[0]
+      newArr[0] = temp
+
+      keys[index] = keys[0]
+      keys[0] = tempKey
+
+    } else {
+      newArr[index] = newArr[index + 1]
+      newArr[index + 1] = temp
+
+      keys[index] = keys[index + 1]
+      keys[index + 1] = tempKey
+    }
+    setPpl(newArr)
+  }
+
+  console.log('keys',keys)
+  console.log('people',ppl)
+
+  return (
+    <>
+      <input placeholder='name to add' value={name} onChange={e => setName(e.target.value)}/>
+      <input type="number" placeholder='phone to add' value={phone} onChange={e => setPhone(e.target.value)}/>
+      <button onClick = {() => onAdd({name, phone}, 'start')}>+</button>
+
+      <div className='PhoneBook'>
+        {ppl.map((data,index) => <PhoneBookEntry 
+                                    data={data}
+                                    key={index}
+                                    onChange={(data) => onChange(data, index)}
+                                    onDelete={() => onDelete(data)}
+                                    onAdd={() => onAdd({name, phone}, index)}
+                                    onMoveDown={() => onMoveDown(index)}
+                                    onMoveUp={() => onMoveUp(index)}
+                                  />)
+        }
+      </div>
+      <button onClick={() => console.log(ppl)}>Save</button>
+    </>
+  )
+}
 
 
 function App() {
@@ -325,6 +409,7 @@ function App() {
         onChange={item => setCode(item)}
       />
       <h2>{code}</h2>
+      <PhoneBook />
     </div>
   );
 }