choose project

src/components/ReportForm/ReportForm.jsx

@@ -18,10 +18,10 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
 import arrow from "assets/icons/arrows/left-arrow.png";
+import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
 import ellipse from "assets/icons/ellipse.png";
 import remove from "assets/icons/remove.svg";
-import arrowDown from "assets/icons/arrows/selectArrow.png";
 
 import {
   getCorrectDate,
@@ -41,7 +41,6 @@ const ReportForm = () => {
   const editReport = useSelector(getEditReport);
   const dispatch = useDispatch();
 
-
   useEffect(() => {
     initListeners();
     getProjectList();
@@ -54,10 +53,10 @@ const ReportForm = () => {
       ? new Date(reportDate ? reportDate._d : editReport.created_at)
       : new Date()
   );
-  const [projectList, setProjectList] = useState([])
+  const [projectList, setProjectList] = useState([]);
-  const [projectLoader, setProjectLoader] = useState(false)
+  const [projectLoader, setProjectLoader] = useState(false);
-  const [selectedProject, setSelectedProject] = useState('Выберите проект')
+  const [selectedProject, setSelectedProject] = useState("Выберите проект");
-  const [openSelectProject, setOpenSelectProject] = useState(false)
+  const [openSelectProject, setOpenSelectProject] = useState(false);
   const [datePickerOpen, setDatePickerOpen] = useState(false);
 
   const [inputs, setInputs] = useState(
@@ -93,13 +92,11 @@ const ReportForm = () => {
           div.classList &&
           (div.classList.contains("report-form__block-img") ||
             div.classList.contains("react-datepicker-popper") ||
-            div.classList.contains("report-form__project")
+            div.classList.contains("report-form__project"))
-
-          )
       )
     ) {
       setDatePickerOpen(false);
-      setOpenSelectProject(false)
+      setOpenSelectProject(false);
     }
   };
 
@@ -110,16 +107,16 @@ const ReportForm = () => {
   };
 
   const getProjectList = () => {
-    setProjectLoader(true)
+    setProjectLoader(true);
     apiRequest(
       `/project/project-list?user_id=${localStorage.getItem(
         "id"
       )}&expand=columns`
     ).then((el) => {
-      setProjectLoader(false)
+      setProjectLoader(false);
-      setProjectList(el?.projects)
+      setProjectList(el?.projects);
     });
-  }
+  };
   const handler = () => {
     setIsFetching(true);
     for (let input of inputs) {
@@ -135,7 +132,7 @@ const ReportForm = () => {
       data: {
         user_id: localStorage.getItem("id"),
         tasks: inputs,
-        project_id: selectedProject.id ? selectedProject.id : '',
+        project_id: selectedProject.id ? selectedProject.id : "",
         difficulties: troublesInputValue,
         tomorrow: scheduledInputValue,
         created_at: getCreatedDate(startDate),
@@ -167,7 +164,7 @@ const ReportForm = () => {
       data: {
         tasks: inputs,
         difficulties: troublesInputValue,
-        project_id: selectedProject.id ? selectedProject.id : '',
+        project_id: selectedProject.id ? selectedProject.id : "",
         tomorrow: scheduledInputValue,
         created_at: getCreatedDate(startDate),
         status: 1
@@ -244,30 +241,58 @@ const ReportForm = () => {
                 setStartDate(date);
               }}
             />
-            {projectLoader ? <div className="loader__wrapper"><Loader /></div> :
+            {projectLoader ? (
+              <div className="loader__wrapper">
+                <Loader />
+              </div>
+            ) : (
               <>
                 <div className="report-form__task-list">
                   <img src={ellipse} alt="" />
                   <span>Выберите проект</span>
                 </div>
                 <div className="report-form__project">
-                  <div className="project__selected" onClick={() => setOpenSelectProject(!openSelectProject)}>
+                  <div
-                    <p>{selectedProject.name ? selectedProject.name : selectedProject}</p>
+                    className="project__selected"
-                    <img className={openSelectProject ? "project__selected--open" : ""} src={arrowDown} alt='arrow' />
+                    onClick={() => setOpenSelectProject(!openSelectProject)}
-                  </div>
+                  >
-                  {openSelectProject &&
+                    <p>
-                    <div className="project__dropDown">
+                      {selectedProject.name
-                      {Boolean(projectList.length) ? projectList.map((project) => {
+                        ? selectedProject.name
-                        return <span onClick={() => {
+                        : selectedProject}
-                          setSelectedProject(project)
+                    </p>
-                          setOpenSelectProject(false)
+                    <img
-                        }} key={project.id}>{project.name}</span>
+                      className={
-                      }) : <span>Проектов нет</span>}
+                        openSelectProject ? "project__selected--open" : ""
-                    </div>
                       }
+                      src={arrowDown}
+                      alt="arrow"
+                    />
+                  </div>
+                  {openSelectProject && (
+                    <div className="project__dropDown">
+                      {Boolean(projectList.length) ? (
+                        projectList.map((project) => {
+                          return (
+                            <span
+                              onClick={() => {
+                                setSelectedProject(project);
+                                setOpenSelectProject(false);
+                              }}
+                              key={project.id}
+                            >
+                              {project.name}
+                            </span>
+                          );
+                        })
+                      ) : (
+                        <span>Проектов нет</span>
+                      )}
+                    </div>
+                  )}
                 </div>
               </>
-            }
+            )}
             <div className="report-form__task-list">
               <img src={ellipse} alt="" />
               <span>Какие задачи выполнены?</span>