import React, {useEffect, useState} from 'react';
import { useId } from "react-id-generator";
import axios from 'axios'
import './sidePanel.css';
import FolderItem from '../folderItem'
import add from './img/add.svg';
import all from './img/all.svg';
import close from './img/close.svg';
const SidePanel = ({}) => {
const [itemId] = useId();
const [selected, changeSelected] = useState(false);
const [selectedColor, selectColor] = useState(1);
const [colors, setColor] = useState([]);
const [lists, setLists] = useState([]);
const [inputValue, setInputValue] = useState('');
useEffect (() => {
axios.get('http://localhost:3001/lists?_expand=color').then(({ data }) => {
setLists(data);
});
axios.get('http://localhost:3001/colors').then(({ data }) => {
setColor(data);
});
if(Array.isArray(colors) && colors.id){
selectColor(colors[0].id)
}
}, [])
const onAddList = (obj) => {
const newList = [
...lists,
obj
]
setLists(newList);
}
const onClose = () => {
changeSelected(false);
setInputValue('');
selectColor(colors[0].id);
}
const addList = (e) => {
e.preventDefault();
if(!inputValue) {
alert('Введите название папки!');
return;
}
axios.post('http://localhost:3001/lists', { name: inputValue,colorId: selectedColor})
.then(({data}) => {
const color = colors.filter(c => c.id === selectedColor)[0].name;
const obj = { ...data, color: {name: color}}
onAddList(obj);
onClose();
});
}
let modalClass = "folder-modal";
if(selected){
modalClass += " show"
}
return (
<div className="side-panel">
<div className="side-panel__button-all ">
<button>
<img src={all}></img>
Все задачи
</button>
</div>
<FolderItem items={lists} color={colors} onRemove={list => {
console.log(list);
}}/>
<div className="side-panel__button-all-folder ">
<button
onClick={() => changeSelected(true)}>
<img src={add}></img>
Добавить папку
</button>
</div>
<div className={modalClass}>
<img onClick={onClose} className="close" src={close}></img>
<input
value={inputValue}
onChange={(e) => {
setInputValue(e.target.value)
}}
type="text"
placeholder="Название папки"></input>
<div className="folder-cyrcle__color-block flex">
{/* Рендерим цвета */}
{colors.map((color) => (
<div
key={color.id}
onClick={() => selectColor(color.id)}
className={selectedColor === color.id ? `cypcle cypcle-${color.name} selected` : `cypcle cypcle-${color.name}`}>
</div>
))}
</div>
<button
onClick={(e) => {
addList(e);
}}
className="folder-modal__button">
Добавить
</button>
</div>
</div>
)
}
export default SidePanel;<button
onClick={(e) => {
addList(e);
}}
className="folder-modal__button">
Добавить
</button>const addList = () => {
if(!inputValue) {
alert('Введите название папки!');
return;
}
axios.post('http://localhost:3001/lists', { name: inputValue,colorId: selectedColor})
.then(({data}, e) => {
e.preventDefault();
const color = colors.filter(c => c.id === selectedColor)[0].name;
const obj = { ...data, color: {name: color}}
onAddList(obj);
onClose();
});
}
