Add account and articles updater
This commit is contained in:
Виталий Лавшонок
@@ -1,4 +1,4 @@
|
||||
import { Route, Routes, useNavigate } from 'react-router-dom';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Header from '../views/articleeditor/Header';
|
||||
import MarkdownEditor from '../views/articleeditor/Editor';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -6,19 +6,42 @@ 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';
|
||||
import {
|
||||
createArticle,
|
||||
deleteArticle,
|
||||
fetchArticleById,
|
||||
setArticlesStatus,
|
||||
updateArticle,
|
||||
} from '../redux/slices/articles';
|
||||
import { useQuery } from '../hooks/useQuery';
|
||||
import { ReverseButton } from '../components/button/ReverseButton';
|
||||
|
||||
const ArticleEditor = () => {
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const [code, setCode] = useState<string>('');
|
||||
const [name, setName] = useState<string>('');
|
||||
const query = useQuery();
|
||||
const back = query.get('back') ?? undefined;
|
||||
const articleId = Number(query.get('articleId') ?? undefined);
|
||||
const article = useAppSelector((state) => state.articles.currentArticle);
|
||||
const refactor = articleId != undefined && !isNaN(articleId);
|
||||
|
||||
const [code, setCode] = useState<string>(article?.content || '');
|
||||
const [name, setName] = useState<string>(article?.name || '');
|
||||
const [tagInput, setTagInput] = useState<string>('');
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [tags, setTags] = useState<string[]>(article?.tags || []);
|
||||
|
||||
const status = useAppSelector((state) => state.articles.statuses.create);
|
||||
const [activeEditor, setActiveEditor] = useState<boolean>(false);
|
||||
|
||||
const statusCreate = useAppSelector(
|
||||
(state) => state.articles.statuses.create,
|
||||
);
|
||||
const statusUpdate = useAppSelector(
|
||||
(state) => state.articles.statuses.update,
|
||||
);
|
||||
const statusDelete = useAppSelector(
|
||||
(state) => state.articles.statuses.delete,
|
||||
);
|
||||
|
||||
const addTag = () => {
|
||||
const newTag = tagInput.trim();
|
||||
@@ -33,40 +56,92 @@ const ArticleEditor = () => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (status == 'successful') {
|
||||
if (statusCreate == 'successful') {
|
||||
dispatch(setArticlesStatus({ key: 'create', status: 'idle' }));
|
||||
navigate('/home/articles');
|
||||
navigate(back ? back : '/home/articles');
|
||||
}
|
||||
}, [status]);
|
||||
}, [statusCreate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (statusDelete == 'successful') {
|
||||
dispatch(setArticlesStatus({ key: 'delete', status: 'idle' }));
|
||||
navigate(back ? back : '/home/articles');
|
||||
}
|
||||
}, [statusDelete]);
|
||||
|
||||
useEffect(() => {
|
||||
if (statusUpdate == 'successful') {
|
||||
dispatch(setArticlesStatus({ key: 'update', status: 'idle' }));
|
||||
navigate(back ? back : '/home/articles');
|
||||
}
|
||||
}, [statusUpdate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (articleId) {
|
||||
dispatch(fetchArticleById(articleId));
|
||||
}
|
||||
}, [articleId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (article && refactor) {
|
||||
setCode(article?.content || '');
|
||||
setName(article?.name || '');
|
||||
setTags(article?.tags || []);
|
||||
}
|
||||
}, [article]);
|
||||
|
||||
return (
|
||||
<div className="h-screen grid grid-rows-[60px,1fr]">
|
||||
<Routes>
|
||||
<Route
|
||||
path="editor"
|
||||
element={<Header backUrl="/article/create" />}
|
||||
{activeEditor ? (
|
||||
<Header
|
||||
backClick={() => {
|
||||
setActiveEditor(false);
|
||||
}}
|
||||
/>
|
||||
<Route path="*" element={<Header backUrl="/home/articles" />} />
|
||||
</Routes>
|
||||
) : (
|
||||
<Header
|
||||
backClick={() => navigate(back ? back : '/home/articles')}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Routes>
|
||||
<Route
|
||||
path="editor"
|
||||
element={
|
||||
<MarkdownEditor
|
||||
onChange={setCode}
|
||||
defaultValue={code}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="*"
|
||||
element={
|
||||
<div className="text-liquid-white">
|
||||
<div className="text-[40px] font-bold">
|
||||
Создание статьи
|
||||
{activeEditor ? (
|
||||
<MarkdownEditor onChange={setCode} defaultValue={code} />
|
||||
) : (
|
||||
<div className="text-liquid-white">
|
||||
<div className="text-[40px] font-bold">
|
||||
{refactor
|
||||
? `Редактирование статьи: \"${article?.name}\"`
|
||||
: 'Создание статьи'}
|
||||
</div>
|
||||
<div>
|
||||
{refactor ? (
|
||||
<div className="flex gap-[20px]">
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
dispatch(
|
||||
updateArticle({
|
||||
articleId,
|
||||
name,
|
||||
tags,
|
||||
content: code,
|
||||
}),
|
||||
);
|
||||
}}
|
||||
text="Обновить"
|
||||
className="mt-[20px]"
|
||||
disabled={statusUpdate == 'loading'}
|
||||
/>
|
||||
<ReverseButton
|
||||
onClick={() => {
|
||||
dispatch(deleteArticle(articleId));
|
||||
}}
|
||||
color="error"
|
||||
text="Удалить"
|
||||
className="mt-[20px]"
|
||||
disabled={statusDelete == 'loading'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
) : (
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
dispatch(
|
||||
@@ -79,78 +154,78 @@ const ArticleEditor = () => {
|
||||
}}
|
||||
text="Опубликовать"
|
||||
className="mt-[20px]"
|
||||
disabled={status == 'loading'}
|
||||
disabled={statusCreate == 'loading'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
defaultState={name}
|
||||
name="articleName"
|
||||
autocomplete="articleName"
|
||||
className="mt-[20px] max-w-[600px]"
|
||||
type="text"
|
||||
label="Название"
|
||||
onChange={(v) => {
|
||||
setName(v);
|
||||
}}
|
||||
placeholder="Новая статья"
|
||||
/>
|
||||
|
||||
{/* Блок для тегов */}
|
||||
<div className="mt-[20px] max-w-[600px]">
|
||||
<div className="grid grid-cols-[1fr,140px] items-end gap-2">
|
||||
<Input
|
||||
defaultState={name}
|
||||
name="articleName"
|
||||
autocomplete="articleName"
|
||||
name="articleTag"
|
||||
autocomplete="articleTag"
|
||||
className="mt-[20px] max-w-[600px]"
|
||||
type="text"
|
||||
label="Название"
|
||||
label="Теги"
|
||||
onChange={(v) => {
|
||||
setName(v);
|
||||
setTagInput(v);
|
||||
}}
|
||||
defaultState={tagInput}
|
||||
placeholder="arrays"
|
||||
onKeyDown={(e) => {
|
||||
console.log(e.key);
|
||||
if (e.key == 'Enter') addTag();
|
||||
}}
|
||||
placeholder="Новая статья"
|
||||
/>
|
||||
|
||||
{/* Блок для тегов */}
|
||||
<div className="mt-[20px] max-w-[600px]">
|
||||
<div className="grid grid-cols-[1fr,140px] items-end gap-2">
|
||||
<Input
|
||||
name="articleTag"
|
||||
autocomplete="articleTag"
|
||||
className="mt-[20px] max-w-[600px]"
|
||||
type="text"
|
||||
label="Теги"
|
||||
onChange={(v) => {
|
||||
setTagInput(v);
|
||||
}}
|
||||
defaultState={tagInput}
|
||||
placeholder="arrays"
|
||||
onKeyDown={(e) => {
|
||||
console.log(e.key);
|
||||
if (e.key == 'Enter') addTag();
|
||||
}}
|
||||
/>
|
||||
<PrimaryButton
|
||||
onClick={addTag}
|
||||
text="Добавить"
|
||||
className="h-[40px] w-[140px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-[10px] mt-2">
|
||||
{tags.map((tag) => (
|
||||
<div
|
||||
key={tag}
|
||||
className="flex items-center gap-1 bg-liquid-lighter px-3 py-1 rounded-full"
|
||||
>
|
||||
<span>{tag}</span>
|
||||
<button
|
||||
onClick={() => removeTag(tag)}
|
||||
className="text-liquid-red font-bold ml-[5px]"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PrimaryButton
|
||||
onClick={() => navigate('editor')}
|
||||
text="Редактировать текст"
|
||||
className="mt-[20px]"
|
||||
/>
|
||||
<MarkdownPreview
|
||||
content={code}
|
||||
className="bg-transparent border-liquid-lighter border-[3px] rounder-[20px] mt-[20px]"
|
||||
onClick={addTag}
|
||||
text="Добавить"
|
||||
className="h-[40px] w-[140px]"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
<div className="flex flex-wrap gap-[10px] mt-2">
|
||||
{tags.map((tag) => (
|
||||
<div
|
||||
key={tag}
|
||||
className="flex items-center gap-1 bg-liquid-lighter px-3 py-1 rounded-full"
|
||||
>
|
||||
<span>{tag}</span>
|
||||
<button
|
||||
onClick={() => removeTag(tag)}
|
||||
className="text-liquid-red font-bold ml-[5px]"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PrimaryButton
|
||||
onClick={() => setActiveEditor(true)}
|
||||
text="Редактировать текст"
|
||||
className="mt-[20px]"
|
||||
/>
|
||||
<MarkdownPreview
|
||||
content={code}
|
||||
className="bg-transparent border-liquid-lighter border-[3px] rounder-[20px] mt-[20px]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user