add error toasts

src/pages/ArticleEditor.tsx

@@ -15,6 +15,7 @@ import {
 } from '../redux/slices/articles';
 import { useQuery } from '../hooks/useQuery';
 import { ReverseButton } from '../components/button/ReverseButton';
+import { cn } from '../lib/cn';
 
 const ArticleEditor = () => {
     const navigate = useNavigate();
@@ -24,6 +25,7 @@ const ArticleEditor = () => {
     const back = query.get('back') ?? undefined;
     const articleId = Number(query.get('articleId') ?? undefined);
     const refactor = articleId && !isNaN(articleId);
+    const [clickSubmit, setClickSubmit] = useState<boolean>(false);
 
     // Достаём данные из redux
     const article = useAppSelector(
@@ -61,7 +63,6 @@ const ArticleEditor = () => {
     const removeTag = (tagToRemove: string) => {
         setTags(tags.filter((tag) => tag !== tagToRemove));
     };
-
     // ==========================
     // Эффекты по статусам
     // ==========================
@@ -96,6 +97,7 @@ const ArticleEditor = () => {
     // Получение статьи
     // ==========================
     useEffect(() => {
+        setClickSubmit(false);
         if (articleId) {
             dispatch(fetchArticleById(articleId));
         }
@@ -110,6 +112,18 @@ const ArticleEditor = () => {
         }
     }, [article]);
 
+    const getNameErrorMessage = (): string => {
+        if (!clickSubmit) return '';
+        if (name == '') return 'Поле не может быть пустым';
+        return '';
+    };
+
+    const getContentErrorMessage = (): string => {
+        if (!clickSubmit) return '';
+        if (code == '') return 'Поле не может быть пустым';
+        return '';
+    };
+
     // ==========================
     // Рендер
     // ==========================
@@ -137,6 +151,7 @@ const ArticleEditor = () => {
                             <div className="flex gap-[20px]">
                                 <PrimaryButton
                                     onClick={() => {
+                                        setClickSubmit(true);
                                         dispatch(
                                             updateArticle({
                                                 articleId,
@@ -163,6 +178,7 @@ const ArticleEditor = () => {
                         ) : (
                             <PrimaryButton
                                 onClick={() => {
+                                    setClickSubmit(true);
                                     dispatch(
                                         createArticle({
                                             name,
@@ -188,6 +204,7 @@ const ArticleEditor = () => {
                         label="Название"
                         onChange={setName}
                         placeholder="Новая статья"
+                        error={getNameErrorMessage()}
                     />
 
                     {/* Теги */}
@@ -236,6 +253,14 @@ const ArticleEditor = () => {
                         text="Редактировать текст"
                         className="mt-[20px]"
                     />
+                    <div
+                        className={cn(
+                            'text-liquid-red text-[14px] h-auto mt-[5px] whitespace-pre-line ',
+                            getContentErrorMessage() == '' && 'h-0 mt-0',
+                        )}
+                    >
+                        {getContentErrorMessage()}
+                    </div>
                     <MarkdownPreview
                         content={code}
                         className="bg-transparent border-liquid-lighter border-[3px] rounded-[20px] mt-[20px]"