51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
|
import React, { useState } from "react";
|
||
|
|
import { useDispatch, useSelector } from "react-redux";
|
||
|
|
import { addProject } from "../../../redux/projectsTrackerSlice";
|
||
|
|
|
||
|
|
import "./ModalCreate.scss";
|
||
|
|
|
||
|
|
export const ModalCreate = ({ active, setActive, title }) => {
|
||
|
|
const [inputValue, setInputValue] = useState("");
|
||
|
|
|
||
|
|
const projectInfo = useSelector(addProject);
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
|
||
|
|
function createName() {
|
||
|
|
let newItem = {
|
||
|
|
name: inputValue,
|
||
|
|
count: 0,
|
||
|
|
};
|
||
|
|
dispatch(addProject(newItem));
|
||
|
|
// console.log(newItem);
|
||
|
|
setActive(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={active ? "modal-project active" : "modal-project"}
|
||
|
|
onClick={() => setActive(false)}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="modal-project__content"
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
>
|
||
|
|
<div className="title-project">
|
||
|
|
<h4>{title}</h4>
|
||
|
|
<div className="input-container">
|
||
|
|
<input
|
||
|
|
className="name-project"
|
||
|
|
value={inputValue}
|
||
|
|
onChange={(e) => setInputValue(e.target.value)}
|
||
|
|
></input>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button className="create-project" onClick={createName}>
|
||
|
|
Создать
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ModalCreate;
|