|
|
@@ -1,5 +1,7 @@
|
|
|
import './App.css';
|
|
|
-import {useState } from 'react';
|
|
|
+import {useState, useEffect } from 'react';
|
|
|
+import React, {useCallback} from 'react'
|
|
|
+import {useDropzone} from 'react-dropzone'
|
|
|
|
|
|
const Dots = ({count,active, onChange}) =>{
|
|
|
let arrImg = [];
|
|
|
@@ -51,11 +53,192 @@ const Gallery = ({images = ['https://kot-pes.com/wp-content/uploads/2018/12/post
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-function App() {
|
|
|
+const countries ={
|
|
|
+ "AF": "Afghanistan",
|
|
|
+ "AX": "Åland Islands",
|
|
|
+ "AL": "Albania",
|
|
|
+ "DZ": "Algeria",
|
|
|
+ "AS": "American Samoa",
|
|
|
+ "AD": "AndorrA",
|
|
|
+ "AO": "Angola",
|
|
|
+ "AI": "Anguilla",
|
|
|
+ "AQ": "Antarctica",
|
|
|
+}
|
|
|
+
|
|
|
+const MySelect = ({options=countries, value='AX', onChange }) => {
|
|
|
+ const newCountry = Object.entries(options);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <select value = {value} onChange = {(e) => onChange(e.target.value)} >
|
|
|
+ {newCountry.map((item) => <option key = {item[0]} value = {item[0]} > {item[1]}</option>)}
|
|
|
+
|
|
|
+ </select>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const PhoneBookEntry = ({data:{name, phone}={name: '', phone: ''},
|
|
|
+ onChange, //по изменению
|
|
|
+ onMoveUp, //сдвинуть вверх
|
|
|
+ onMoveDown,//сдвинуть вниз
|
|
|
+ onDelete, //удалить этот
|
|
|
+ onAddL}) => //добавить под ним еще один
|
|
|
+<>
|
|
|
+
|
|
|
+ <input value={name} onChange={(e) => onChange({'name': e.target.value, phone })} />
|
|
|
+
|
|
|
+ <input value={phone} onChange={(e) =>(onChange({name, 'phone': e.target.value}))} />
|
|
|
+ <button onClick={onMoveUp}>^</button>
|
|
|
+ <button onClick={onMoveDown}>v</button>
|
|
|
+ <button onClick={onDelete}>x</button>
|
|
|
+ <button onClick={onAddL}>+</button>
|
|
|
+</>
|
|
|
+
|
|
|
+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);
|
|
|
+ setKeys(people.map(() => Math.random()));//тут и keys обновить
|
|
|
+ },[people])
|
|
|
+ //обеспечить для PhoneBookEntry:
|
|
|
+ // onChange, onMoveUp, onMoveDown, onDelete
|
|
|
+ const onChange = (newData, i) => { //{name: 'НАМЕ', phone: 'НУМБЕР'}
|
|
|
+ const newPeople = [...ppl];//создаем новый массив ppl на базе старого, заменяем один элемент и делаем setPpl
|
|
|
+ newPeople[i] = newData; //ничего НЕ ДЕЛАЕМ с keys
|
|
|
+ setPpl(newPeople);
|
|
|
+ }
|
|
|
+ const onDelete = (i) => { //фильтрует ppl и keys удаляя i-ый элемент
|
|
|
+ const newPeople = ppl.filter((_, index) => index!==i);
|
|
|
+ setPpl(newPeople);
|
|
|
+
|
|
|
+ const newKeys = keys.filter((_, index) => index!==i);
|
|
|
+ setKeys(newKeys);
|
|
|
+ }
|
|
|
+
|
|
|
+ const onMoveUp = (data, i) => {
|
|
|
+ const newPeople = [...ppl];
|
|
|
+ newPeople.splice(i, 1);
|
|
|
+ newPeople.splice((i-1), 0, data);
|
|
|
+ setPpl(newPeople);
|
|
|
+
|
|
|
+ const newKeys = [...keys];
|
|
|
+ newKeys.splice(i, 1);
|
|
|
+ newKeys.splice(i-1, 0, keys[i]);
|
|
|
+ setKeys(newKeys);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const onMoveDown = (data, i) => {
|
|
|
+ const newPeople = [...ppl];
|
|
|
+ newPeople.splice(i, 1);
|
|
|
+ newPeople.splice((i+1), 0, data);
|
|
|
+ setPpl(newPeople);
|
|
|
+
|
|
|
+ const newkeys = [...keys];
|
|
|
+ newkeys.splice(i, 1);
|
|
|
+ newkeys.splice(i+1, 0, keys[i]);
|
|
|
+ }
|
|
|
+
|
|
|
+ const onAddFirst = () => {
|
|
|
+ const newPeople = [...ppl];
|
|
|
+ newPeople.unshift({'name': '', 'phone': ''});
|
|
|
+ setPpl(newPeople);
|
|
|
+
|
|
|
+ const newKeys =[...keys];
|
|
|
+ newKeys.unshift(Math.random());
|
|
|
+ setKeys(newKeys);
|
|
|
+ }
|
|
|
+
|
|
|
+ const onAddL = () => {
|
|
|
+ const newPeople = [...ppl];
|
|
|
+ newPeople.push({'name': '', 'phone': ''});
|
|
|
+ setPpl(newPeople);
|
|
|
+
|
|
|
+ const newKeys =[...keys];
|
|
|
+ newKeys.push(Math.random());
|
|
|
+ setKeys(newKeys);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(keys, ppl)
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <button onClick={onAddFirst}>+</button>
|
|
|
+ <div className='PhoneBook'>
|
|
|
+
|
|
|
+ {ppl.map((data, i) =><div key={keys[i]} > <PhoneBookEntry data={data} //не забудьте keys
|
|
|
+ onChange={data => onChange(data, i)}
|
|
|
+ onDelete={() => onDelete(i)}
|
|
|
+ onMoveDown={() => onMoveDown(data, i)}
|
|
|
+ onMoveUp={() => onMoveUp(data, i)}
|
|
|
+ onAddL={onAddL}
|
|
|
+
|
|
|
+ />
|
|
|
+ </div> )}
|
|
|
+ </div>
|
|
|
+ <button onClick={() => onSave(ppl)}>Save</button>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function MyDropzone() {
|
|
|
+ const onDrop = useCallback(acceptedFiles => {
|
|
|
+ // Do something with the files
|
|
|
+ }, [])
|
|
|
+ const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
|
|
|
+
|
|
|
return (
|
|
|
- <div className="App">
|
|
|
- <Gallery/>
|
|
|
+ <div {...getRootProps()}>
|
|
|
+ <input {...getInputProps()} onChange={(e) => getFile(e.target.value)}/>
|
|
|
+ {
|
|
|
+ isDragActive ?
|
|
|
+ <p>Drop the files here ...</p> :
|
|
|
+ <p>Drag 'n' drop some files here, or click to select files</p>
|
|
|
+ }
|
|
|
</div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const getFile =(file)=> file;
|
|
|
+
|
|
|
+let fd = new FormData;
|
|
|
+fd.append('photo', );
|
|
|
+
|
|
|
+photo.onchange = async () => {
|
|
|
+ fetch('/upload', {
|
|
|
+ method: "POST",
|
|
|
+ headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
|
|
|
+ body: new FormData(form)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function App() {
|
|
|
+ const [country, setCountry] = useState('AX')
|
|
|
+ return (
|
|
|
+ < >
|
|
|
+ {/* <div className="App">
|
|
|
+ {console.log(country)}
|
|
|
+ <MySelect value={country} onChange = {(w) => setCountry(w)} />
|
|
|
+ <Gallery/>
|
|
|
+ </div> */}
|
|
|
+ <div>
|
|
|
+ <PhoneBook/>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <MyDropzone getFile={getFile}/>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+
|
|
|
);
|
|
|
}
|
|
|
|
