ReactHomeWorks/phonebook/src/App.js

import './App.css';
import { useEffect, useState } from 'react';

let countries = {
  "AF": "Afghanistan",
  "AX": "Åland Islands",
  "AL": "Albania",
  "DZ": "Algeria",
  "AS": "American Samoa",
  "AD": "AndorrA",
  "AO": "Angola",
  "AI": "Anguilla",
  "AQ": "Antarctica",
  "AG": "Antigua and Barbuda",
  "AR": "Argentina",
  "AM": "Armenia",
  "AW": "Aruba",
  "AU": "Australia",
  "AT": "Austria",
  "AZ": "Azerbaijan",
  "BS": "Bahamas",
  "BH": "Bahrain",
  "BD": "Bangladesh",
  "BB": "Barbados",
  "BY": "Belarus",
  "BE": "Belgium",
  "BZ": "Belize",
  "BJ": "Benin",
  "BM": "Bermuda",
  "BT": "Bhutan",
  "BO": "Bolivia",
  "BA": "Bosnia and Herzegovina",
  "BW": "Botswana",
  "BV": "Bouvet Island",
  "BR": "Brazil",
  "IO": "British Indian Ocean Territory",
  "BN": "Brunei Darussalam",
  "BG": "Bulgaria",
  "BF": "Burkina Faso",
  "BI": "Burundi",
  "KH": "Cambodia",
  "CM": "Cameroon",
  "CA": "Canada",
  "CV": "Cape Verde",
  "KY": "Cayman Islands",
  "CF": "Central African Republic",
  "TD": "Chad",
  "CL": "Chile",
  "CN": "China",
  "CX": "Christmas Island",
  "CC": "Cocos (Keeling) Islands",
  "CO": "Colombia",
  "KM": "Comoros",
  "CG": "Congo",
  "CD": "Congo, Democratic Republic",
  "CK": "Cook Islands",
  "CR": "Costa Rica",
  "CI": "Cote D\"Ivoire",
  "HR": "Croatia",
  "CU": "Cuba",
  "CY": "Cyprus",
  "CZ": "Czech Republic",
  "DK": "Denmark",
  "DJ": "Djibouti",
  "DM": "Dominica",
  "DO": "Dominican Republic",
  "EC": "Ecuador",
  "EG": "Egypt",
  "SV": "El Salvador",
  "GQ": "Equatorial Guinea",
  "ER": "Eritrea",
  "EE": "Estonia",
  "ET": "Ethiopia",
  "FK": "Falkland Islands (Malvinas)",
  "FO": "Faroe Islands",
  "FJ": "Fiji",
  "FI": "Finland",
  "FR": "France",
  "GF": "French Guiana",
  "PF": "French Polynesia",
  "TF": "French Southern Territories",
  "GA": "Gabon",
  "GM": "Gambia",
  "GE": "Georgia",
  "DE": "Germany",
  "GH": "Ghana",
  "GI": "Gibraltar",
  "GR": "Greece",
  "GL": "Greenland",
  "GD": "Grenada",
  "GP": "Guadeloupe",
  "GU": "Guam",
  "GT": "Guatemala",
  "GG": "Guernsey",
  "GN": "Guinea",
  "GW": "Guinea-Bissau",
  "GY": "Guyana",
  "HT": "Haiti",
  "HM": "Heard Island and Mcdonald Islands",
  "VA": "Holy See (Vatican City State)",
  "HN": "Honduras",
  "HK": "Hong Kong",
  "HU": "Hungary",
  "IS": "Iceland",
  "IN": "India",
  "ID": "Indonesia",
  "IR": "Iran",
  "IQ": "Iraq",
  "IE": "Ireland",
  "IM": "Isle of Man",
  "IL": "Israel",
  "IT": "Italy",
  "JM": "Jamaica",
  "JP": "Japan",
  "JE": "Jersey",
  "JO": "Jordan",
  "KZ": "Kazakhstan",
  "KE": "Kenya",
  "KI": "Kiribati",
  "KP": "Korea (North)",
  "KR": "Korea (South)",
  "XK": "Kosovo",
  "KW": "Kuwait",
  "KG": "Kyrgyzstan",
  "LA": "Laos",
  "LV": "Latvia",
  "LB": "Lebanon",
  "LS": "Lesotho",
  "LR": "Liberia",
  "LY": "Libyan Arab Jamahiriya",
  "LI": "Liechtenstein",
  "LT": "Lithuania",
  "LU": "Luxembourg",
  "MO": "Macao",
  "MK": "Macedonia",
  "MG": "Madagascar",
  "MW": "Malawi",
  "MY": "Malaysia",
  "MV": "Maldives",
  "ML": "Mali",
  "MT": "Malta",
  "MH": "Marshall Islands",
  "MQ": "Martinique",
  "MR": "Mauritania",
  "MU": "Mauritius",
  "YT": "Mayotte",
  "MX": "Mexico",
  "FM": "Micronesia",
  "MD": "Moldova",
  "MC": "Monaco",
  "MN": "Mongolia",
  "MS": "Montserrat",
  "MA": "Morocco",
  "MZ": "Mozambique",
  "MM": "Myanmar",
  "NA": "Namibia",
  "NR": "Nauru",
  "NP": "Nepal",
  "NL": "Netherlands",
  "AN": "Netherlands Antilles",
  "NC": "New Caledonia",
  "NZ": "New Zealand",
  "NI": "Nicaragua",
  "NE": "Niger",
  "NG": "Nigeria",
  "NU": "Niue",
  "NF": "Norfolk Island",
  "MP": "Northern Mariana Islands",
  "NO": "Norway",
  "OM": "Oman",
  "PK": "Pakistan",
  "PW": "Palau",
  "PS": "Palestinian Territory, Occupied",
  "PA": "Panama",
  "PG": "Papua New Guinea",
  "PY": "Paraguay",
  "PE": "Peru",
  "PH": "Philippines",
  "PN": "Pitcairn",
  "PL": "Poland",
  "PT": "Portugal",
  "PR": "Puerto Rico",
  "QA": "Qatar",
  "RE": "Reunion",
  "RO": "Romania",
  "RU": "Russian Federation",
  "RW": "Rwanda",
  "SH": "Saint Helena",
  "KN": "Saint Kitts and Nevis",
  "LC": "Saint Lucia",
  "PM": "Saint Pierre and Miquelon",
  "VC": "Saint Vincent and the Grenadines",
  "WS": "Samoa",
  "SM": "San Marino",
  "ST": "Sao Tome and Principe",
  "SA": "Saudi Arabia",
  "SN": "Senegal",
  "RS": "Serbia",
  "ME": "Montenegro",
  "SC": "Seychelles",
  "SL": "Sierra Leone",
  "SG": "Singapore",
  "SK": "Slovakia",
  "SI": "Slovenia",
  "SB": "Solomon Islands",
  "SO": "Somalia",
  "ZA": "South Africa",
  "GS": "South Georgia and the South Sandwich Islands",
  "ES": "Spain",
  "LK": "Sri Lanka",
  "SD": "Sudan",
  "SR": "Suriname",
  "SJ": "Svalbard and Jan Mayen",
  "SZ": "Swaziland",
  "SE": "Sweden",
  "CH": "Switzerland",
  "SY": "Syrian Arab Republic",
  "TW": "Taiwan, Province of China",
  "TJ": "Tajikistan",
  "TZ": "Tanzania",
  "TH": "Thailand",
  "TL": "Timor-Leste",
  "TG": "Togo",
  "TK": "Tokelau",
  "TO": "Tonga",
  "TT": "Trinidad and Tobago",
  "TN": "Tunisia",
  "TR": "Turkey",
  "TM": "Turkmenistan",
  "TC": "Turks and Caicos Islands",
  "TV": "Tuvalu",
  "UG": "Uganda",
  "UA": "Ukraine",
  "AE": "United Arab Emirates",
  "GB": "United Kingdom",
  "US": "United States",
  "UM": "United States Minor Outlying Islands",
  "UY": "Uruguay",
  "UZ": "Uzbekistan",
  "VU": "Vanuatu",
  "VE": "Venezuela",
  "VN": "Viet Nam",
  "VG": "Virgin Islands, British",
  "VI": "Virgin Islands, U.S.",
  "WF": "Wallis and Futuna",
  "EH": "Western Sahara",
  "YE": "Yemen",
  "ZM": "Zambia",
  "ZW": "Zimbabwe"
}

const MySelect = ({ options = countries, value = 'YE', onChange }) => {
  return (
      <select
          defaultValue={value}
          onChange={(e) => onChange(e.target.value)}
      >
        {Object.entries(options).map(country => {
          return (
              <option
                  value={country[0]}
              >
                {country[1]}
              </option>
          )
        })}
      </select>
  )
}

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' },
  { name: 'Bob', phone: '111' },
  { name: 'Marshall', phone: '313' }
]

const PhoneBook = ({ people = defaultPeople}) => {
  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() {
  const [code, setCode] = useState("UA")

  return (
      <div className="App">
        <MySelect
            options={countries}
            value={code}
            onChange={item => setCode(item)}
        />
        <h2>{code}</h2>
        <PhoneBook />
      </div>
  );
}

export default App;