Merge pull request #27 from 001elijah/sidebar

sendEmail logic/svg fix/styles fix

src/components/HelpWindow/HelpWindow.jsx

@@ -4,16 +4,41 @@ import flower1x from 'assets/images/flower-min.png';
 import flower2x from 'assets/images/[email protected]';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useState } from 'react';
 import { Modal } from '../Modal/Modal';
+import { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { sendEmail } from 'redux/Auth/authOperations';
 
 export const HelpWindow = ({ theme }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const onOpen = () => {
+    setIsModalOpen(true);
+  };
 
   const onClose = () => {
     setIsModalOpen(false);
   };
 
+  const onSubmit = e => {
+    e.preventDefault();
+
+    const email = e.target.email.value;
+    const comment = e.target.comment.value;
+
+    dispatch(sendEmail({ email, comment }));
+    onClose();
+  };
+
+  useEffect(() => {
+    document.body.classList.toggle('no-scroll', isModalOpen);
+
+    return () => {
+      document.body.classList.remove('body-scroll-lock');
+    };
+  }, [isModalOpen]);
+
   return (
     <div className={clsx(s.container, s[theme])}>
       <div className={s.imageContainer}>
@@ -32,9 +57,7 @@ export const HelpWindow = ({ theme }) => {
       <button
         type="button"
         className={clsx(s.button, s[theme])}
-        onClick={() => {
-          setIsModalOpen(true);
-        }}
+        onClick={onOpen}
       >
         <svg className={clsx(s.icon, s[theme])}>
           <use href={`${sprite}#icon-help`}></use>
@@ -43,14 +66,16 @@ export const HelpWindow = ({ theme }) => {
       </button>
       {isModalOpen && (
         <Modal title="Need help" onClose={onClose} className={s.modal}>
-          <form>
+          <form onSubmit={onSubmit}>
             <input
               type="email"
+              name="email"
               placeholder="Email address"
               className={s.emailInput}
             />
             <textarea
               type="text"
+              name="comment"
               placeholder="Comment"
               className={s.commentInput}
             />

src/redux/Auth/authOperations.js

@@ -10,6 +10,7 @@ import {
   currentUserApi,
   logoutUserApi,
   themeChangeUserApi,
+  sendEmailApi,
   updateUserApi,
 } from 'services/backendAPI';
 
@@ -119,3 +120,15 @@ export const updateUser = createAsyncThunk(
     }
   },
 );
+
+export const sendEmail = createAsyncThunk(
+  'auth/sendEmail',
+  async (email, { rejectWithValue }) => {
+    try {
+      await sendEmailApi(email);
+      return Notify.success('Email sent');
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  },
+);

src/services/backendAPI.js

@@ -52,6 +52,13 @@ export const getListOfBoardsApi = async userToken => {
   return data;
 };
 
+//---------------------------------------------EMAIL---------------------//
+
+export const sendEmailApi = async userEmail => {
+  const { data } = await axios.post('user/sendEmail', userEmail);
+  return data.message;
+};
+
 // export const addColumn = async board => {
 //   const { data } = await axios.post('board/column');
 //   console.log(data);