text: import React, { useEffect, useState } from "react";
  
  import { useDispatch, useSelector } from "react-redux";
  import classnames from "classnames";
  import { singleProject, addTask } from "../../actions/projectActions";
  import Task from "../tasks/Task";
  import { clearErrors } from "../../actions/errorActions";
  import { useHistory, Redirect } from "react-router-dom";
  
  const SingleProject = props => {
      //for addTask
      const [newTask, setNewTask] = useState({
          title: "",
          project_id: ""
          //created_by: "1"
      });
  
      //error states for addTasks
      const [errMsg, setErrMsg] = useState(null);
      const [titleErr, setTitleErr] = useState(null);
  
      const error = useSelector(state => state.error);
  
      const project = useSelector(state => state.project.project);
  
      const { id } = project;
  
      const auth = useSelector(state => state.auth); //
      const { isAuthenticated, user_id } = auth;
  
      //will also update once we addTask
      const tasks = useSelector(state => state.project.tasks);
  
      //console.log(tasks);
  
      const { slug } = props.match.params;
  
      const dispatch = useDispatch();
  
      //getItems
      useEffect(() => {
          const project = window.localStorage.getItem("project");
          const tasks = window.localStorage.getItem("tasks");
          //console.log(tasks);
      }, [localStorage]);
  
      //setItems
      useEffect(() => {
          window.localStorage.setItem("project", JSON.stringify(project));
          window.localStorage.setItem("tasks", JSON.stringify(tasks));
      }, [project]);
  
      //dispatch
      useEffect(() => {
          dispatch(singleProject(slug));
      }, []);
  
      //check errors for addTask
      useEffect(() => {
          if (error.id === "ADD_TASK_FAIL") {
              setErrMsg(error.msg.message);
              setTitleErr(error.msg.errors.title && error.msg.errors.title[0]);
          }
      }, [error]);
  
      const history = useHistory();
  
      //new addTask
      const submitNewTask = e => {
          e.preventDefault();
  
          const addedTask = new FormData();
          addedTask.append("title", newTask.title);
          addedTask.append("project_id", id);
          addedTask.append("created_by", user_id);
  
          dispatch(addTask(addedTask, id));
  
          setNewTask({
              title: "",
              project_id: ""
              //created_by: ""
          });
  
          setErrMsg(null);
          setTitleErr(null);
  
          //clears generated by redux
          dispatch(clearErrors());
          //history.push(`/project/${project.slug}`);
      };
  
      if (!isAuthenticated) return <Redirect to="/" />;
  
      return (
          <div className="container py-4">
              <div className="row justify-content-center">
                  <div className="col-md-8">
                      {errMsg && (
                          <p className="alert alert-danger text-center">
                              {errMsg}
                          </p>
                      )}
  
                      <div className="card">
                          <div className="card-header"> {project.name} </div>
                          <div className="card-body">
                              <p> {project.description} </p>
  
                              <button className="btn btn-primary btn-sm">
                                  Mark as completed
                              </button>
  
                              <hr />
  
                              <form onSubmit={submitNewTask}>
                                  {/* <input
                                      type="hidden"
                                      name="created_by"
                                      value={newTask.created_by || ""}
                                      onChange={e =>
                                          setNewTask({
                                              ...newTask,
                                              created_by: e.target.value
                                          })
                                      }
                                  /> */}
  
                                  <div className="input-group">
                                      <input
                                          type="text"
                                          name="title"
                                          className={classnames(
                                              "form-control form-control-lg",
                                              {
                                                  "is-invalid": titleErr
                                              }
                                          )}
                                          placeholder="Task title"
                                          value={newTask.title || ""}
                                          onChange={e =>
                                              setNewTask({
                                                  ...newTask,
                                                  title: e.target.value
                                              })
                                          }
                                      />
                                      <div className="input-group-append">
                                          <button className="btn btn-primary">
                                              Add
                                          </button>
                                      </div>
  
                                      {titleErr && (
                                          <p className="invalid-feedback d-block">
                                              {titleErr}
                                          </p>
                                      )}
                                  </div>
                              </form>
  
                              <ul className="list-group mt-3">
                                  {tasks
                                      ? tasks.map(task => (
                                            <Task key={task.id} task={task} />
                                        ))
                                      : null}
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      );
  };
  
  export default SingleProject;
  