From ca131a225c2b54762855aa233c4c73f791ecae6e Mon Sep 17 00:00:00 2001
From: kuwsh1n <senya.bogachev@mail.ru>
Date: Sun, 12 May 2024 20:20:29 +0300
Subject: [PATCH] fix ticket 5

---
 src/App.jsx                               |  2 -
 src/assets/styles/answersForm.module.scss | 47 ++++++++++++------
 src/components/CheckModal.jsx             |  4 +-
 src/hooks/api/answersApi.js               | 36 ++++++++++++++
 src/hooks/api/enterAccountApi.js          |  3 +-
 src/hooks/api/formApi.js                  | 27 +++++------
 src/pages/AnswersForm.jsx                 | 58 +++++++++++++++++------
 src/pages/Forms.jsx                       |  9 ++--
 8 files changed, 131 insertions(+), 55 deletions(-)
 create mode 100644 src/hooks/api/answersApi.js

diff --git a/src/App.jsx b/src/App.jsx
index dd57b24..42f840b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -32,7 +32,6 @@ const App = () => {
         {id: 8, text: 'Дата', typeTag: InputDate}
     ]);
 
-  // useEffect(() => globalRender(window.location.pathname, user, navigate));
   const [cookies, _, __] = useCookies(["user"]);
 
   useEffect(() => {
@@ -41,7 +40,6 @@ const App = () => {
 
             if (response.status === 200) {
                 setUser(response.data);
-                console.log(response.data)
                 globalRender(window.location.pathname, response.data, navigate);
             }
             else {
diff --git a/src/assets/styles/answersForm.module.scss b/src/assets/styles/answersForm.module.scss
index cf73951..7afa108 100644
--- a/src/assets/styles/answersForm.module.scss
+++ b/src/assets/styles/answersForm.module.scss
@@ -75,36 +75,55 @@
                 background-color: rgb(200, 200, 200);
             }
             &__column {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
                 font-size: 15px;
                 font-family: "Montserrat", sans-serif;
                 padding: 5px;
+                width: 100%;
                 border-bottom: 1px solid rgb(200, 200, 200);
+                &__wrapper {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 100%;
+                    width: 95%;
+                }
             }
             &__item {
                 padding: 0 5px;
-                // border-bottom: 1px solid rgb(200, 200, 200);
                 font-size: 15px;
                 font-family: "Montserrat", sans-serif;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
                 height: 20%;
                 width: 100%;
+                position: relative;
                 &:hover {
                     background-color: rgba(230, 230, 230, 0.6);
                 }
-                &__user {
-                    cursor: pointer;
-                    &:hover {
-                        text-decoration: underline;
+                &__wrapper {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 100%;
+                    width: 95%;
+                    &__user {
+                        cursor: pointer;
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    }
+                    &__date {
+
+                    }
+                    i {
+                        font-size: 13px;
+                        position: absolute;
+                        right: 10px;
+                        cursor: pointer;
+                        &:hover {
+                            color: rgb(199, 73, 73);
+                        }
                     }
                 }
-                &__date {
-
-                }
+                
             }
         }
     }
diff --git a/src/components/CheckModal.jsx b/src/components/CheckModal.jsx
index 1b860cd..912d4f5 100644
--- a/src/components/CheckModal.jsx
+++ b/src/components/CheckModal.jsx
@@ -2,10 +2,10 @@ import React from "react";
 import classes from "../assets/styles/components/checkModal.module.scss";
 import MyButton from "./MyButton.jsx";
 
-const CheckModal = ({message, action}) => {
+const CheckModal = ({postfix, message, action}) => {
 
     return (
-        <div class="modal fade" tabindex="-1" id="checkModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
+        <div class="modal fade" tabindex="-1" id={`checkModal${postfix}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
diff --git a/src/hooks/api/answersApi.js b/src/hooks/api/answersApi.js
new file mode 100644
index 0000000..32489b4
--- /dev/null
+++ b/src/hooks/api/answersApi.js
@@ -0,0 +1,36 @@
+import axios from "axios";
+
+async function getAnswersApi(token, formToken) {
+    try {
+        const response = await axios.get(`https://api.minerva.krbl.ru/formBuilder/edit/${formToken}/answers`,
+        {
+            headers: {
+                "Authorization": `Token ${token}`
+            }
+        })
+        return response
+    }
+    catch (e) {
+        return e
+    }
+};
+
+async function removeAnswerFormApi(token, formId, answerId) {
+    try {
+        const response = await axios.delete(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/answers`,
+        {
+            headers: {
+                "Authorization": `Token ${token}`
+            },
+            data: {
+                "answer_id": answerId
+            }
+        })
+        return response
+    }
+    catch (e) {
+        return e
+    }
+};
+
+export { getAnswersApi, removeAnswerFormApi }
\ No newline at end of file
diff --git a/src/hooks/api/enterAccountApi.js b/src/hooks/api/enterAccountApi.js
index 99c7a22..eed9aeb 100644
--- a/src/hooks/api/enterAccountApi.js
+++ b/src/hooks/api/enterAccountApi.js
@@ -32,7 +32,8 @@ async function completeRegistration(data) {
 async function verifyUserApi(token=false) {
     if (token) {
         try {
-            const response = await axios.get("https://api.minerva.krbl.ru/auth/me", { 
+            const response = await axios.get("https://api.minerva.krbl.ru/auth/me", 
+            { 
                 headers: {
                     "Authorization": `Token ${token}`,
                 },
diff --git a/src/hooks/api/formApi.js b/src/hooks/api/formApi.js
index 90127b1..54b0819 100644
--- a/src/hooks/api/formApi.js
+++ b/src/hooks/api/formApi.js
@@ -138,21 +138,6 @@ async function saveAnswersApi(token, formToken, data) {
     }
 };
 
-async function getAnswersApi(token, formToken) {
-    try {
-        const response = await axios.get(`https://api.minerva.krbl.ru/formBuilder/edit/${formToken}/answers`,
-        {
-            headers: {
-                "Authorization": `Token ${token}`
-            }
-        })
-        return response
-    }
-    catch (e) {
-        return e
-    }
-};
-
 async function getBlockApi(token, formId, order) {
     try {
         const response = await axios.post(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/get`,
@@ -171,4 +156,14 @@ async function getBlockApi(token, formId, order) {
     }
 };
 
-export { addFormBlockApi, listFormBlockApi, saveFormApi, updateBlockApi, updateOrderBlockApi, listFormBlockByTokenApi, saveAnswersApi, getAnswersApi, removeBlockApi, getBlockApi }
\ No newline at end of file
+export { 
+    addFormBlockApi, 
+    listFormBlockApi, 
+    saveFormApi, 
+    updateBlockApi, 
+    updateOrderBlockApi, 
+    listFormBlockByTokenApi, 
+    saveAnswersApi, 
+    removeBlockApi, 
+    getBlockApi 
+}
\ No newline at end of file
diff --git a/src/pages/AnswersForm.jsx b/src/pages/AnswersForm.jsx
index ab2133e..9ba848a 100644
--- a/src/pages/AnswersForm.jsx
+++ b/src/pages/AnswersForm.jsx
@@ -4,9 +4,11 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { answersData } from "../context";
 import classes from "../assets/styles/answersForm.module.scss";
 import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock";
-import { listFormBlockApi, getAnswersApi } from "../hooks/api/formApi";
+import { listFormBlockApi } from "../hooks/api/formApi";
 import { listUsersApi } from "../hooks/api/adminApi";
+import { removeAnswerFormApi, getAnswersApi } from "../hooks/api/answersApi.js";
 import Loading from "../components/Loading.jsx";
+import CheckModal from "../components/CheckModal.jsx";
 
 const AnswersForm = () => {
     const { formId } = useParams();
@@ -27,6 +29,7 @@ const AnswersForm = () => {
                 if (responseAnswers.data) {
                     for (let item of responseAnswers.data) {
                         const blocks = {
+                            id: item.id,
                             user: listUsers.data.find(user => user.id === item.user_id).login,
                             date: dateTimeParse(item.date),
                             block: []
@@ -60,6 +63,17 @@ const AnswersForm = () => {
         getForm()
     }, []);
 
+    async function removeAnswerForm(answerId) {
+        const response = await removeAnswerFormApi(cookies.token, formId, answerId)
+
+        if (response.status === 200) {
+            setData([...data].filter(item => item.id !== answerId))
+        }
+        else {
+            console.log(response)
+        }
+    }
+
     return (
         <div className={classes.main}>
             <div className={classes.wrapper}>
@@ -70,26 +84,40 @@ const AnswersForm = () => {
                         </div>
                         <div className={classes.answers__wrapper__body}>
                             <div className={classes.answers__wrapper__body__column}>
-                                <div>Логин</div>
-                                <div>Дата</div>
+                                <div className={classes.answers__wrapper__body__column__wrapper}>
+                                    <div>Логин</div>
+                                    <div>Дата</div>
+                                </div>                              
                             </div>
 
                             {data ? 
-                                data.map((item, i) => 
-                                    <div className={classes.answers__wrapper__body__item} key={i}>
-                                        <div className={classes.answers__wrapper__body__item__user} data-bs-toggle={"modal"} data-bs-target={`#answersModal${i}`}>
-                                            {item.user}
-                                        </div>
-                                        <div className={classes.answers__wrapper__body__item__date}>
-                                            {item.date}
-                                        </div>
+                                data.map((item, dataIndex) => 
+                                    <div className={classes.answers__wrapper__body__item} key={dataIndex}>
+                                        <div className={classes.answers__wrapper__body__item__wrapper}>
+                                            <div className={classes.answers__wrapper__body__item__wrapper__user} data-bs-toggle={"modal"} data-bs-target={`#answersModal${dataIndex}`}>
+                                                {item.user}
+                                            </div>
+                                            <div className={classes.answers__wrapper__body__item__wrapper__date}>
+                                                {item.date}
+                                            </div>
+                                            <i class="fa-solid fa-trash" data-bs-toggle="modal" data-bs-target={`#checkModal${item.id}`}></i>
+                                        </div>   
 
-                                        <div class="modal fade myModal" className={classes.myModal} id={`answersModal${i}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
+                                        <CheckModal
+                                            postfix={item.id}
+                                            message={`Вы хотетите удалить ответы пользователя <${item.user}>?`} 
+                                            action={{
+                                                execute: () => removeAnswerForm(item.id), 
+                                                cancel: () => {}
+                                            }}
+                                        />                                     
+
+                                        <div class="modal fade myModal" className={classes.myModal} id={`answersModal${dataIndex}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
                                             <div class="modal-dialog myModal__dialog" className={classes.myModal__dialog}>
                                                 <div class="modal-content" className={classes.myModal__dialog__content}>
                                                     <div class="modal-body" className={classes.myModal__dialog__content__body}>
-                                                        {item.block.map((block, i) => 
-                                                        <div className={classes.myModal__item} key={i}>
+                                                        {item.block.map((block, blockIndex) => 
+                                                        <div className={classes.myModal__item} key={blockIndex}>
                                                             <div className={classes.myModal__item__question}>
                                                                 <p className={classes.myModal__item__question__text}>{block.question.question}</p>
                                                                 <p className={classes.myModal__item__question__comment}>{block.question.comment}</p>
@@ -97,7 +125,7 @@ const AnswersForm = () => {
                                                             <div className={classes.myModal__item__answer}>
                                                                 <p className={classes.myModal__item__question__text}>Ответ: {
                                                                     Array.isArray(block.answers.answer) ? 
-                                                                    block.answers.answer.map(item => <span>{item}; </span>) :
+                                                                    block.answers.answer.map((answer, indexAnswer) => <span key={indexAnswer}>{answer}; </span>) :
                                                                     block.answers.answer
                                                                 }</p>
                                                             </div>
diff --git a/src/pages/Forms.jsx b/src/pages/Forms.jsx
index 0d636f4..d7391ee 100644
--- a/src/pages/Forms.jsx
+++ b/src/pages/Forms.jsx
@@ -13,7 +13,6 @@ const Forms = () => {
     const {forms, setForms} = useContext(FormsData);
     const {user, setUser} = useContext(UserData);
     const [stateLoading, setStateLoading] = useState(false);
-    const [currentRemoveForm, setCurrentRemoveForm] = useState(false);
     const [searchForm, setSearchForm] = useState("");
 
     const [cookies, _, __] = useCookies(["user"]);
@@ -118,14 +117,14 @@ const Forms = () => {
                                     <li><a class="dropdown-item" onClick={() => navigate(`/forms/${item.id}/answers`)}>Ответы</a></li>
                                     <li><a class="dropdown-item" onClick={() => navigate(`/tokens/${item.id}`)}>Список токенов</a></li>
                                     <li><a class="dropdown-item" onClick={() => copyLinkToFormView(item.id)}>Скопировать ссылку</a></li>
-                                    <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#checkModal" onClick={() => setCurrentRemoveForm({id: item.id, title: item.title})}>Удалить</a></li>
+                                    <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target={`#checkModal${item.id}`}>Удалить</a></li>
                                 </ul>
 
                                 <CheckModal 
-                                    message={`Вы хотетите удалить форму <${currentRemoveForm.title}>?`} 
+                                    postfix={item.id}
+                                    message={`Вы хотетите удалить форму <${item.title}>?`} 
                                     action={{
-                                        execute: () => removeForm(currentRemoveForm.id), 
-                                        // cancel: () => setCurrentRemoveForm(false)
+                                        execute: () => removeForm(item.id), 
                                         cancel: () => {}
                                     }}
                                 />