articles view

src/pages/ArticleEditor.tsx

@@ -1,19 +1,25 @@
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import Header from '../views/articleeditor/Header';
 import MarkdownEditor from '../views/articleeditor/Editor';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { PrimaryButton } from '../components/button/PrimaryButton';
 import MarkdownPreview from '../views/articleeditor/MarckDownPreview';
 import { Input } from '../components/input/Input';
+import { useAppDispatch, useAppSelector } from '../redux/hooks';
+import { createArticle, setArticlesStatus } from '../redux/slices/articles';
 
 const ArticleEditor = () => {
+    const navigate = useNavigate();
+    const dispatch = useAppDispatch();
+
     const [code, setCode] = useState<string>('');
     const [name, setName] = useState<string>('');
-    const navigate = useNavigate();
 
     const [tagInput, setTagInput] = useState<string>('');
     const [tags, setTags] = useState<string[]>([]);
 
+    const status = useAppSelector((state) => state.articles.statuses.create);
+
     const addTag = () => {
         const newTag = tagInput.trim();
         if (newTag && !tags.includes(newTag)) {
@@ -26,6 +32,13 @@ const ArticleEditor = () => {
         setTags(tags.filter((tag) => tag !== tagToRemove));
     };
 
+    useEffect(() => {
+        if (status == 'successful') {
+            dispatch(setArticlesStatus({ key: 'create', status: 'idle' }));
+            navigate('/home/articles');
+        }
+    }, [status]);
+
     return (
         <div className="h-screen grid grid-rows-[60px,1fr]">
             <Routes>
@@ -39,7 +52,12 @@ const ArticleEditor = () => {
             <Routes>
                 <Route
                     path="editor"
-                    element={<MarkdownEditor onChange={setCode} />}
+                    element={
+                        <MarkdownEditor
+                            onChange={setCode}
+                            defaultValue={code}
+                        />
+                    }
                 />
                 <Route
                     path="*"
@@ -51,17 +69,21 @@ const ArticleEditor = () => {
 
                             <PrimaryButton
                                 onClick={() => {
-                                    console.log({
-                                        name: name,
-                                        tags: tags,
-                                        text: code,
-                                    });
+                                    dispatch(
+                                        createArticle({
+                                            name,
+                                            tags,
+                                            content: code,
+                                        }),
+                                    );
                                 }}
                                 text="Опубликовать"
                                 className="mt-[20px]"
+                                disabled={status == 'loading'}
                             />
 
                             <Input
+                                defaultState={name}
                                 name="articleName"
                                 autocomplete="articleName"
                                 className="mt-[20px] max-w-[600px]"