Merge pull request #62 from AnWhiteM/help-block

commit
AnWhiteM · Jun 14, 2024 · b308c72 · b308c72
2 parents e7772cc + 6ca4a55
commit b308c72
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/src/components/ModalHelp/ModalHelp.jsx b/src/components/ModalHelp/ModalHelp.jsx
@@ -5,23 +5,32 @@ import * as Yup from "yup";
 import toast from "react-hot-toast";
 
 import { Formik, Form, Field, ErrorMessage } from "formik";
+import { useDispatch } from "react-redux";
+import { sendHelpMessage } from "../../redux/boards/operations";
 
 export default function ModalHelp({ isOpen, closeModal }) {
+  const dispatch = useDispatch();
+
   const ValidEditionSchema = Yup.object().shape({
     email: Yup.string()
       .min(1, "Too Short Email!")
       .max(35, "Too Long Email!")
       .required("Required"),
-    text: Yup.string()
+    comment: Yup.string()
       .min(1, "Too Short Coment!")
       .max(300, "Too Long Coment!")
       .required("Required"),
   });
-  const Notify = () => toast.success("ТІЛЬКИ БОГ ПОМОЖЕ =)");
+  const Notify = () => toast.success("You send message");
 
-  const handleSubmit = (values) => {
-    console.log(values.email);
-    console.log(values.text);
+  const handleSubmit = (values, actions) => {
+    const newMessage = {
+      email: values.email,
+      comment: values.comment,
+    };
+    console.log(newMessage);
+    actions.resetForm();
+    dispatch(sendHelpMessage(newMessage));
     Notify();
     closeModal();
   };
@@ -35,7 +44,7 @@ export default function ModalHelp({ isOpen, closeModal }) {
       shouldCloseOnOverlayClick={true}
     >
       <Formik
-        initialValues={{ email: "", text: "" }}
+        initialValues={{ email: "", comment: "" }}
         onSubmit={handleSubmit}
         validationSchema={ValidEditionSchema}
       >
@@ -63,13 +72,13 @@ export default function ModalHelp({ isOpen, closeModal }) {
           <Field
             className={css.inputText}
             type="text"
-            name="text"
+            name="comment"
             placeholder="Comment"
             rows="5"
             component="textarea"
           />
           <ErrorMessage
-            name="text"
+            name="comment"
             component="div"
             className={css.errorMessage}
           />

diff --git a/src/components/ModalHelp/ModalHelp.module.css b/src/components/ModalHelp/ModalHelp.module.css
@@ -21,6 +21,7 @@
   padding: 20px;
   width: 335px;
   border: 1px solid rgba(255, 255, 255, 1);
+  z-index: 15;
 }
 .form {
   width: 100%;

diff --git a/src/redux/boards/operations.js b/src/redux/boards/operations.js
@@ -19,7 +19,6 @@ export const addBoard = createAsyncThunk(
   "boards/addBoard",
   async (newBoard, thunkAPI) => {
     try {
-      console.log("newBoard:", newBoard);
       const response = await axios.post(`/home`, newBoard);
       return response.data;
     } catch (error) {
@@ -57,3 +56,17 @@ export const deleteBoard = createAsyncThunk(
     }
   }
 );
+
+export const sendHelpMessage = createAsyncThunk(
+  "boards/sendHelpMessage",
+  async (helpMessage, thunkAPI) => {
+    try {
+      console.log(helpMessage);
+      const response = await axios.post(`/current/help`, helpMessage);
+
+      return response.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error.message);
+    }
+  }
+);
diff --git a/src/redux/boards/slice.js b/src/redux/boards/slice.js
@@ -1,5 +1,11 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { getBoards, addBoard, updateBoard, deleteBoard } from "./operations";
+import {
+  getBoards,
+  addBoard,
+  updateBoard,
+  deleteBoard,
+  sendHelpMessage,
+} from "./operations";
 
 const boardSlice = createSlice({
   name: "boards",
@@ -65,12 +71,18 @@ const boardSlice = createSlice({
       .addCase(updateBoard.rejected, (state) => {
         state.loading = false;
         state.error = true;
+      })
+      .addCase(sendHelpMessage.pending, (state) => {
+        state.error = false;
+        state.loading = true;
+      })
+      .addCase(sendHelpMessage.fulfilled, (state) => {
+        state.loading = false;
+      })
+      .addCase(sendHelpMessage.rejected, (state) => {
+        state.loading = false;
+        state.error = true;
       }),
-  //   .addCase(logOut.fulfilled, (state) => {
-  //     state.items = [];
-  //     state.error = null;
-  //     state.loading = false;
-  //   }),
 });
 
 export const boardsReducer = boardSlice.reducer;