удаление задачи

README.md

@@ -6,3 +6,42 @@ Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+Чек-лист
+- Стартовый экран — экран «Вход». Пользователю предлагается ввести почту и пароль, если он уже зарегистрирован, и нажать «Войти». 
+Если пользователь еще не зарегистрирован, ему необходимо нажать «Регистрируйтесь здесь». 
+
+- На экране регистрации пользователь придумывает имя, почту и пароль. После этого он нажимает «Зарегистрироваться». 
+Если пользователь понял, что у него уже есть аккаунт, он может нажать «Войдите здесь» и вернуться на экран «Вход».
+После регистрации пользователь снова попадает на стартовый экран «Вход», где вводит логин и пароль заново.
+
+- При вводе неверных данных или если пользователь не заполнил одно из полей вылезает сообщение об ошибке.
+
+- После заполнения данных и нажатия на кнопку «Войти» пользователь попадает на главный экран канбан-доски.
+
+- Канбан состоит из карточек с задачами, которые расположены под теми колонками, в каком статусе выполнения они находятся.
+Карточка задачи содержит в себе категорию, название задачи и срок ее исполнения. Также на карточке в правом верхнем углу присутствуют три точки, при нажатии на которые раскрывается подробный просмотр задачи.
+
+- При загрузки страницы появляется  лоадер "Подождите, страница загружается".
+
+- При нажатии на «Окошко пользователя» пользователю раскрывается окно, где отображаются его имя и почта, а также есть возможность выхода из аккаунта.
+
+- При нажатии на «Выйти» пользователю раскрывается окно с подтверждением выхода из аккаунта. При нажатии «Да, выйти» происходит выход. При нажатии «Нет, остаться» на экране остается канбан, а окно «Выйти из аккаунта» закрывается. При наведении и нажатии на кнопку с обводкой она заливается цветом.
+
+- При нажатии на кнопку «Создать новую задачу» пользователю раскрывается окно с созданием задачи. Задний фон с канбаном при открытии окна затемняется.
+
+- Окно создание задачи содержит в себе поля для заполнения: «Название задачи», «Описание задачи». Также есть возможность выбора категории и постановки срока исполнения.
+После заполнения информации необходимо нажать на кнопку «Создать задачу» — тогда карточка с задачей падает на доску канбана.
+
+- Реализация календаря. Конечный срок исполнения выбирается нажатием на необходимую дату. Сегодняшний день выделен начертанием bold.
+Мы хотим поставить другой срок исполнения, тогда чтобы выбрать это число, мы кликаем на него. Ниже календаря, где написано «Выберите срок исполнения», автоматически проставляется выбранный конечный срок по задаче.
+
+- Категория выбирается с помощью клика на необходимый выбор. Активная выбранная категория отображается ярко, а невыбранные категории имеют прозрачность.
+
+- При нажатии на карточку с задачей открывается окошко с более подробным просмотром данной задачи, где пользователь может увидеть описание задачи, срок исполнения и статус. 
+Данные поля неактивны для клика и изменения , пока пользователь не нажмет «Редактировать задачу». Также присутствует возможность удаления задачи. 
+Если пользователь нажимает «Удалить задачу», задача исчезает с канбан-доски. При нажатии на кнопку «Закрыть» окно с просмотром задачи закрывается, и пользователь снова видит канбан.
+
+- При нажатии на кнопку «Редактировать задачу» у пользователя появляется возможность взаимодействия с полями «Статус», «Описание задачи» и «Даты».
+Объекты, которые выбраны, отображаются цветом 94A6BE.
+

src/App.css

@@ -83,7 +83,7 @@ body {
   width: 100%;
   height: 100%;
   font-family: "Roboto", Arial, Helvetica, sans-serif;
-  color: #000000;
+  /* color: #000000; */
 }
 
 /* .wrapper {

src/api.js

@@ -62,18 +62,21 @@ export async function changeTodo({
 }
 
 //Удаление задачи
-export async function DeleteTodo({ _id }) {
-  const response = await fetch(baseHost + "/" + _id, {
+export async function deleteTodo({ _id, token }) {
+  const response = await fetch(baseHost  + `/${_id}`, {
     method: "DELETE",
     headers: {
       Authorization: `Bearer ${token}`,
     },
   });
-  if (response.ok) {
-    throw new Error("Ошибка удаления задачи");
-  }
-  return await response.json();
+  if (!response.status === 201) {
+    throw new Error("Не удалось удалить задачу, попробуйте позже");
+}
+const data = await response.json();
+return data;
 }
+
+
 
 
 

src/components/Calendar/Calendar.jsx

@@ -1,21 +1,25 @@
 import { format } from "date-fns";
-import { DayPicker } from "react-day-picker"; 
+
 import "react-day-picker/dist/style.css";
 import ru from "date-fns/locale/ru";
+import { CalendarCustom, Calendaric, CategoriesP, ChooseDate } from "./Calendar.styled";
 
 export default function Calendar({selectedDate,setSelectedDate }) {
 
 
-  let footer = <p>Пожалуйста, выберите дату.</p>;
+  let footer = <ChooseDate>Выберите срок исполнения</ChooseDate>;
   if (selectedDate) {
-    footer = <p>Вы выбрали {format(selectedDate, "PP", { locale: ru })}</p>;
+    footer = <ChooseDate>Вы выбрали {format(selectedDate, "PP", { locale: ru })}</ChooseDate>;
   }
   return (
-    <DayPicker
-      mode="single"
-      selected={selectedDate}
-      onSelect={setSelectedDate}
-      footer={footer}
-    />
+    <Calendaric>
+    <CategoriesP>Даты</CategoriesP>
+  <CalendarCustom locale={ru}
+    mode="single"
+    selected={selectedDate}
+    onSelect={setSelectedDate}
+    footer={footer}
+  />
+  </Calendaric>
   );
 }

src/components/Calendar/Calendar.styled.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { DayPicker } from 'react-day-picker';
+
+
+export const Calendaric = styled.div`
+  margin-bottom: 20px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1px;
+  color: #94a6be;
+  letter-spacing: -0.14px;
+
+`;
+export const CategoriesP = styled.p`
+  margin-bottom: 14px;
+  margin-left: 20px;
+  color: #000;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 14px;
+  white-space: nowrap;
+`;
+export const ChooseDate = styled.p`
+  margin-left: 7px;
+  margin-top: 10px;
+`;
+export const CalendarCustom = styled(DayPicker)`
+    --rdp-cell-size: 30px;
+    --rdp-caption-font-size: 14px;
+`;

src/components/popups/PopBrowse/PopBrowse.jsx

@@ -1,43 +1,52 @@
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { appRoutes } from "../../../lib/appRoutes";
 import Calendar from "../../Calendar/Calendar";
 import * as S from "./PopBrowse.styled";
-import { useTask } from "../../../hooks/useUser";
-import * as St from "../../Card/Card.styled";
+import { useUser } from "../../../hooks/useUser";
+import { useTask } from "../../../hooks/useTask";
+
 import { topicHeader } from "../../../lib/topic";
+import { deleteTodo } from "../../../api";
 function PopBrowse() {
   const { id } = useParams();
-  const{task} = useTask();
+  const { task, setTask } = useTask();
+  const { user } = useUser();
   const currentTask = task.find((element) => id === element._id);
+  const navigate = useNavigate();
+
+  const deleteTask = () => {
+    deleteTodo({
+      token: user.token,
+      _id: id,
+    })
+      .then((data) => {
+        setTask(data.tasks);
+        navigate(appRoutes.MAIN);
+      })
+      .catch((error) => {
+        alert(error);
+      });
+  };
+
   return (
     <S.PopBrowse id="popBrowse">
       <S.PopBrowseContainer>
         <S.PopBrowseBlock>
           <S.PopBrowseContent>
             <S.PopBrowseTopBlock>
-              <S.PopBrowseTtl>Название задачи:{currentTask.title}</S.PopBrowseTtl>
-              <St.CardTopic $themeColor={topicHeader[currentTask.topic]}>
-                <St.TopicText>{currentTask.topic}</St.TopicText>
-              </St.CardTopic>
+              <S.PopBrowseTtl>
+                Название задачи:{currentTask.title}
+              </S.PopBrowseTtl>
+              <S.CategoriesTheme $themeColor={topicHeader[currentTask.topic]}>
+                <S.CategoriesThemeP>{currentTask.topic}</S.CategoriesThemeP>
+              </S.CategoriesTheme>
             </S.PopBrowseTopBlock>
             <S.PopBrowseStatus>
               <S.StatusPSubttl>Статус</S.StatusPSubttl>
               <S.StatusThemes>
                 <S.StatusThemeHide>
                   <S.StatusThemeHideP>Без статуса</S.StatusThemeHideP>
                 </S.StatusThemeHide>
-                {/* <div className="status__theme _gray">
-                  <p className="_gray">Нужно сделать</p>
-                </div>
-                <div className="status__theme _hide">
-                  <p>В работе</p>
-                </div>
-                <div className="status__theme _hide">
-                  <p>Тестирование</p>
-                </div>
-                <div className="status__theme _hide">
-                  <p>Готово</p>
-                </div> */}
               </S.StatusThemes>
             </S.PopBrowseStatus>
 
@@ -50,50 +59,27 @@ function PopBrowse() {
                     id="textArea01"
                     readOnly=""
                     placeholder="Введите описание задачи..."
-                     defaultValue={currentTask.description}
+                    defaultValue={currentTask.description}
                   />
                 </S.FormBrowseBlock>
               </S.PopBrowseForm>
               <Calendar />
             </S.PopBrowseWrap>
 
-            {/* <div className="theme-down__categories theme-down">
-              <p className="categories__p subttl">Категория</p>
-              <div className="categories__theme _orange _active-category">
-                <p className="_orange">Web Design</p>
-              </div>
-            </div> */}
             <S.PopBrowseBtnBrowse>
               <S.BtnGroup>
                 <S.BtnBrowseEditBtnBor>
                   Редактировать задачу
                 </S.BtnBrowseEditBtnBor>
-                <S.BtnBrowseEditBtnBor>Удалить задачу</S.BtnBrowseEditBtnBor>
+                <S.BtnBrowseEditBtnBor onClick={deleteTask}>
+                  Удалить задачу
+                </S.BtnBrowseEditBtnBor>
               </S.BtnGroup>
 
               <Link to={appRoutes.MAIN}>
                 <S.BtnBrowseClose>Закрыть</S.BtnBrowseClose>
               </Link>
             </S.PopBrowseBtnBrowse>
-            {/* <div className="pop-browse__btn-edit _hide">
-              <div className="btn-group">
-                <button className="btn-edit__edit _btn-bg _hover01">
-                  <a href="#">Сохранить</a>
-                </button>
-                <button className="btn-edit__edit _btn-bor _hover03">
-                  <a href="#">Отменить</a>
-                </button>
-                <button
-                  className="btn-edit__delete _btn-bor _hover03"
-                  id="btnDelete"
-                >
-                  <a href="#">Удалить задачу</a>
-                </button>
-              </div>
-              <button className="btn-edit__close _btn-bg _hover01">
-                <a href="#">Закрыть</a>
-              </button>
-            </div> */}
           </S.PopBrowseContent>
         </S.PopBrowseBlock>
       </S.PopBrowseContainer>

src/components/popups/PopBrowse/PopBrowse.styled.js

@@ -1,5 +1,6 @@
 import { styled } from "styled-components";
 import {hover01, hover03} from "../../../styled/common/Common.styled";
+import { topicStyles } from "../../../lib/topic";
 
 export const PopBrowse = styled.div`
   width: 100%;
@@ -31,6 +32,40 @@ export const PopBrowseContainer = styled.div`
     justify-content: flex-start;
   }
 `;
+
+export const CategoriesTheme = styled.div`
+   display: inline-block;
+  width: auto;
+  height: 30px;
+  padding: 8px 20px;
+  border-radius: 24px;
+  margin-right: 7px;
+  opacity: 0.4;
+  /* background-color: #ffe4c2; */
+  /* color: #ff6d00; */
+  opacity: 1 !important;
+  display: block;
+  background-color: ${({ $themeColor }) =>
+    topicStyles[$themeColor]?.backgroundColor || "#94a6be"};
+
+
+    color: ${({ $themeColor }) => topicStyles[$themeColor]?.color || "#ffffff"};
+
+`;
+export const CategoriesThemeP = styled.p`
+  /* background-color: #ffe4c2; */
+  /* color: #ff6d00; */
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 14px;
+  white-space: nowrap;
+
+`;
+
+
+
+
+
 export const PopBrowseBlock = styled.div`
   display: block;
   margin: 0 auto;