123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467 |
- 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;
|