fixed createWork bug

src/pages/YourWorksPage/YourWorksPage.jsx

@@ -9,12 +9,16 @@ import { Works } from '../../components/Works/Works';
 import { MainLayout } from '../../layouts/MainLayout';
 import { PopupWrapper } from '../../components/PopupWrapper/PopupWrapper';
 import { Input } from '../../components/Input/Input';
+import { useInput } from '../../hooks/useInput';
+import { createWork } from '../../store/works/actions/createWork';
 
 export const YourWorksPage = () => {
   const dispatch = useDispatch();
   const { isAuth } = useSelector((state) => state.auth);
   const { isLoading } = useSelector((state) => state.works);
   const newPenPopup = usePopup();
+  const title = useInput();
+  const description = useInput();
 
   useEffect(() => {
     if (isAuth) {
@@ -24,6 +28,18 @@ export const YourWorksPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleCreate = (e) => {
+    e.preventDefault();
+    const newWork = {
+      title: title.value,
+      description: description.value,
+    };
+    dispatch(createWork(newWork));
+    newPenPopup.close();
+    title.setValue('');
+    description.setValue('');
+  };
+
   if (isLoading) return <LoadingPage />;
   return (
     <MainLayout className={style.yourWorks}>
@@ -44,10 +60,18 @@ export const YourWorksPage = () => {
         isOpen={newPenPopup.isPopupVisible}
         close={newPenPopup.close}
       >
-        <form>
-          <Input title="Pen title" />
-          <Input title="Pen description" />
-          <button>Create</button>
+        <form onSubmit={handleCreate}>
+          <Input
+            value={title.value}
+            onChange={title.onChange}
+            title="Pen title"
+          />
+          <Input
+            value={description.value}
+            onChange={description.onChange}
+            title="Pen description"
+          />
+          <button type="submit">Create</button>
         </form>
       </PopupWrapper>
     </MainLayout>

src/store/works/actions/createWork.js

@@ -1,10 +1,14 @@
-import { createAsyncThunk } from "@reduxjs/toolkit";
-import { getGql } from "../../../services/api";
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { getGql } from '../../../services/api';
+import {
+  showErrorMessage,
+  showSuccessMessage,
+} from '../../goMessage/goMessageSlice';
 
 export const createWork = createAsyncThunk(
-  "work/create",
+  'work/create',
 
-  async ({ title, description }, { rejectWithValue }) => {
+  async ({ title, description }, { rejectWithValue, dispatch }) => {
     const gql = getGql();
     try {
       const response = await gql.request(
@@ -27,22 +31,24 @@ export const createWork = createAsyncThunk(
             title: title,
             description: description,
             files: [
-              { text: "", type: "HTML" },
-              { text: "", type: "CSS" },
-              { text: "", type: "JS" },
+              { text: '', type: 'HTML' },
+              { text: '', type: 'CSS' },
+              { text: '', type: 'JS' },
             ],
           },
         }
       );
 
       if (response.SnippetUpsert) {
+        dispatch(showSuccessMessage('Work created.'));
         return response.SnippetUpsert;
       } else {
-        return rejectWithValue("Failed to create work, please try again");
+        return rejectWithValue('Failed to create work, please try again');
       }
     } catch (error) {
       console.log(error);
-      return rejectWithValue("Failed to create work, please try again");
+      dispatch(showErrorMessage('Failed to create work, please try again'));
+      return rejectWithValue('Failed to create work, please try again');
     }
   }
 );

src/store/works/actions/deleteWork.js

@@ -1,10 +1,14 @@
-import { createAsyncThunk } from "@reduxjs/toolkit";
-import { getGql } from "../../../services/api";
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { getGql } from '../../../services/api';
+import {
+  showErrorMessage,
+  showSuccessMessage,
+} from '../../goMessage/goMessageSlice';
 
 export const deleteWork = createAsyncThunk(
-  "work/delete",
+  'work/delete',
 
-  async (id, { rejectWithValue }) => {
+  async (id, { rejectWithValue, dispatch }) => {
     const gql = getGql();
     try {
       const response = await gql.request(
@@ -27,13 +31,15 @@ export const deleteWork = createAsyncThunk(
       );
 
       if (response.SnippetUpsert) {
+        dispatch(showSuccessMessage('Work deleted.'));
         return response.SnippetUpsert;
       } else {
-        return rejectWithValue("Failed to delete work, please try again");
+        return rejectWithValue('Failed to delete work, please try again');
       }
     } catch (error) {
       console.error(error);
-      return rejectWithValue("Failed to delete work, please try again");
+      dispatch(showErrorMessage('Failed to delete work, please try again'));
+      return rejectWithValue('Failed to delete work, please try again');
     }
   }
 );