add user by email

src/components/Calendar/calendarComponent.scss

@@ -1,6 +1,6 @@
 .calendar-component {
   position: relative;
-  margin: 30px 0;
+  margin: 10px 0;
   background-color: #f9f9f9;
   padding: 20px 30px;
   font-family: "LabGrotesque", sans-serif;
@@ -94,7 +94,7 @@
   }
 
   &__rectangle {
-    margin: 20px 0;
+    margin: 10px 0;
 
     img {
       width: 100%;

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -70,6 +70,7 @@ export const TrackerModal = ({
   const [workers, setWorkers] = useState([]);
   const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
   const [selectedWorker, setSelectedWorker] = useState(null);
+  const [emailWorker, setEmailWorker] = useState("");
   const [selectColumnPriority, setSelectColumnPriority] = useState(
     "Выберите приоритет колонки"
   );
@@ -305,6 +306,19 @@ export const TrackerModal = ({
     });
   }
 
+  function inviteUserByEmail() {
+    apiRequest("/project/add-user-by-email", {
+      method: "POST",
+      data: {
+        email: emailWorker,
+        project_id: projectBoard.id
+      }
+    }).then((el) => {
+      setActive(false);
+      setEmailWorker("");
+    });
+  }
+
   useEffect(() => {
     modalType === "add-worker"
       ? apiRequest("/project/my-employee").then((el) => {
@@ -386,26 +400,12 @@ export const TrackerModal = ({
   };
 
   return (
-    <ModalLayout
+    <ModalLayout active={active} setActive={setActive} type={modalType}>
-      active={active}
-      setActive={setActive}
-      type={modalType}
-      // onClick={() => {
-      //   setSelectWorkersOpen(false);
-      // }}
-    >
       {modalType === "add-worker" && (
         <>
           <div className="select__person">
             <div className="title-project select-person">
               <h4>Добавьте участника</h4>
-              {/*<div className="input-container">*/}
-              {/*  <input*/}
-              {/*    className="name-project"*/}
-              {/*    value={emailWorker}*/}
-              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-              {/*  />*/}
-              {/*</div>*/}
               <p className="select-person__info">
                 Выберите пользователя в проекте или добавьте по e-mail
               </p>
@@ -468,9 +468,14 @@ export const TrackerModal = ({
                       className="name-project"
                       placeholder="e-mail"
                       type="email"
+                      value={emailWorker}
+                      onChange={(e) => setEmailWorker(e.target.value)}
                     />
                   </div>
-                  <BaseButton styles={"button-add invite-person-block__btn"}>
+                  <BaseButton
+                    styles={"button-add invite-person-block__btn"}
+                    onClick={inviteUserByEmail}
+                  >
                     Отправить приглашение
                   </BaseButton>
                 </div>
@@ -494,11 +499,6 @@ export const TrackerModal = ({
                   alt="avatar"
                 />
               </div>
-              {/*<span>Этап</span>*/}
-              {/*<div className="createTaskHead__selectColumn">*/}
-              {/*  <span>Backlog</span>*/}
-              {/*  <img src={arrowCreateTask} alt="arrow" />*/}
-              {/*</div>*/}
             </div>
             <div className="createTaskBody">
               <div className="createTaskBody__left">