update articles slice
This commit is contained in:
Виталий Лавшонок
@@ -23,26 +23,33 @@ const ArticleEditor = () => {
|
||||
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 refactor = articleId && !isNaN(articleId);
|
||||
|
||||
// Достаём данные из redux
|
||||
const article = useAppSelector(
|
||||
(state) => state.articles.fetchArticleById.article,
|
||||
);
|
||||
|
||||
const statusCreate = useAppSelector(
|
||||
(state) => state.articles.createArticle.status,
|
||||
);
|
||||
const statusUpdate = useAppSelector(
|
||||
(state) => state.articles.updateArticle.status,
|
||||
);
|
||||
const statusDelete = useAppSelector(
|
||||
(state) => state.articles.deleteArticle.status,
|
||||
);
|
||||
|
||||
// Локальные состояния
|
||||
const [code, setCode] = useState<string>(article?.content || '');
|
||||
const [name, setName] = useState<string>(article?.name || '');
|
||||
const [tagInput, setTagInput] = useState<string>('');
|
||||
const [tags, setTags] = useState<string[]>(article?.tags || []);
|
||||
|
||||
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();
|
||||
if (newTag && !tags.includes(newTag)) {
|
||||
@@ -55,53 +62,63 @@ const ArticleEditor = () => {
|
||||
setTags(tags.filter((tag) => tag !== tagToRemove));
|
||||
};
|
||||
|
||||
// ==========================
|
||||
// Эффекты по статусам
|
||||
// ==========================
|
||||
useEffect(() => {
|
||||
if (statusCreate == 'successful') {
|
||||
dispatch(setArticlesStatus({ key: 'create', status: 'idle' }));
|
||||
navigate(back ? back : '/home/articles');
|
||||
if (statusCreate === 'successful') {
|
||||
dispatch(
|
||||
setArticlesStatus({ key: 'createArticle', status: 'idle' }),
|
||||
);
|
||||
navigate(back ?? '/home/articles');
|
||||
}
|
||||
}, [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');
|
||||
if (statusUpdate === 'successful') {
|
||||
dispatch(
|
||||
setArticlesStatus({ key: 'updateArticle', status: 'idle' }),
|
||||
);
|
||||
navigate(back ?? '/home/articles');
|
||||
}
|
||||
}, [statusUpdate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (statusDelete === 'successful') {
|
||||
dispatch(
|
||||
setArticlesStatus({ key: 'deleteArticle', status: 'idle' }),
|
||||
);
|
||||
navigate(back ?? '/home/articles');
|
||||
}
|
||||
}, [statusDelete]);
|
||||
|
||||
// ==========================
|
||||
// Получение статьи
|
||||
// ==========================
|
||||
useEffect(() => {
|
||||
if (articleId) {
|
||||
dispatch(fetchArticleById(articleId));
|
||||
}
|
||||
}, [articleId]);
|
||||
|
||||
// Обновление локального состояния после загрузки статьи
|
||||
useEffect(() => {
|
||||
if (article && refactor) {
|
||||
setCode(article?.content || '');
|
||||
setName(article?.name || '');
|
||||
setTags(article?.tags || []);
|
||||
setCode(article.content || '');
|
||||
setName(article.name || '');
|
||||
setTags(article.tags || []);
|
||||
}
|
||||
}, [article]);
|
||||
|
||||
// ==========================
|
||||
// Рендер
|
||||
// ==========================
|
||||
return (
|
||||
<div className="h-screen grid grid-rows-[60px,1fr]">
|
||||
{activeEditor ? (
|
||||
<Header
|
||||
backClick={() => {
|
||||
setActiveEditor(false);
|
||||
}}
|
||||
/>
|
||||
<Header backClick={() => setActiveEditor(false)} />
|
||||
) : (
|
||||
<Header
|
||||
backClick={() => navigate(back ? back : '/home/articles')}
|
||||
/>
|
||||
<Header backClick={() => navigate(back ?? '/home/articles')} />
|
||||
)}
|
||||
|
||||
{activeEditor ? (
|
||||
@@ -113,6 +130,8 @@ const ArticleEditor = () => {
|
||||
? `Редактирование статьи: \"${article?.name}\"`
|
||||
: 'Создание статьи'}
|
||||
</div>
|
||||
|
||||
{/* Кнопки действий */}
|
||||
<div>
|
||||
{refactor ? (
|
||||
<div className="flex gap-[20px]">
|
||||
@@ -129,16 +148,16 @@ const ArticleEditor = () => {
|
||||
}}
|
||||
text="Обновить"
|
||||
className="mt-[20px]"
|
||||
disabled={statusUpdate == 'loading'}
|
||||
disabled={statusUpdate === 'loading'}
|
||||
/>
|
||||
<ReverseButton
|
||||
onClick={() => {
|
||||
dispatch(deleteArticle(articleId));
|
||||
}}
|
||||
onClick={() =>
|
||||
dispatch(deleteArticle(articleId))
|
||||
}
|
||||
color="error"
|
||||
text="Удалить"
|
||||
className="mt-[20px]"
|
||||
disabled={statusDelete == 'loading'}
|
||||
disabled={statusDelete === 'loading'}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
@@ -154,11 +173,12 @@ const ArticleEditor = () => {
|
||||
}}
|
||||
text="Опубликовать"
|
||||
className="mt-[20px]"
|
||||
disabled={statusCreate == 'loading'}
|
||||
disabled={statusCreate === 'loading'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Название */}
|
||||
<Input
|
||||
defaultState={name}
|
||||
name="articleName"
|
||||
@@ -166,13 +186,11 @@ const ArticleEditor = () => {
|
||||
className="mt-[20px] max-w-[600px]"
|
||||
type="text"
|
||||
label="Название"
|
||||
onChange={(v) => {
|
||||
setName(v);
|
||||
}}
|
||||
onChange={setName}
|
||||
placeholder="Новая статья"
|
||||
/>
|
||||
|
||||
{/* Блок для тегов */}
|
||||
{/* Теги */}
|
||||
<div className="mt-[20px] max-w-[600px]">
|
||||
<div className="grid grid-cols-[1fr,140px] items-end gap-2">
|
||||
<Input
|
||||
@@ -181,14 +199,11 @@ const ArticleEditor = () => {
|
||||
className="mt-[20px] max-w-[600px]"
|
||||
type="text"
|
||||
label="Теги"
|
||||
onChange={(v) => {
|
||||
setTagInput(v);
|
||||
}}
|
||||
onChange={setTagInput}
|
||||
defaultState={tagInput}
|
||||
placeholder="arrays"
|
||||
onKeyDown={(e) => {
|
||||
console.log(e.key);
|
||||
if (e.key == 'Enter') addTag();
|
||||
if (e.key === 'Enter') addTag();
|
||||
}}
|
||||
/>
|
||||
<PrimaryButton
|
||||
@@ -215,6 +230,7 @@ const ArticleEditor = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Просмотр и переход в редактор */}
|
||||
<PrimaryButton
|
||||
onClick={() => setActiveEditor(true)}
|
||||
text="Редактировать текст"
|
||||
@@ -222,7 +238,7 @@ const ArticleEditor = () => {
|
||||
/>
|
||||
<MarkdownPreview
|
||||
content={code}
|
||||
className="bg-transparent border-liquid-lighter border-[3px] rounder-[20px] mt-[20px]"
|
||||
className="bg-transparent border-liquid-lighter border-[3px] rounded-[20px] mt-[20px]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user