Imporved error handling in admin components

src/views/Admin/LogInForm/index.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { ILoadingState } from 'types';
 import { handleFormSubmit } from 'views/Admin/utils';
 import { IErrorStatus } from 'views/Admin/types';
-import { handleLoginError } from 'views/Admin/handlers';
+import { handleError } from 'views/Admin/handlers';
 import { handleSuccessfulLogin } from './handlers';
 import './main.css';
 
@@ -31,15 +31,15 @@ const LogInForm: React.FC<props> = ({ setLoading, token, setToken }) => {
     return (
         <form
             id="logIn"
-            onSubmit={(e) =>
-                handleFormSubmit(
+            onSubmit={(e) => {
+                setErrorStatus({ successful: true });
+                return handleFormSubmit(
                     e,
                     'api/login',
-                    (err) => handleLoginError(err, setErrorStatus),
-                    (res: Response) => handleSuccessfulLogin(res, setToken),
-                    { 'Access-Control-Allow-Origin': '*' }
-                )
-            }
+                    (err) => handleError(err, setErrorStatus),
+                    (res: Response) => handleSuccessfulLogin(res, setToken)
+                );
+            }}
         >
             <label htmlFor="">Имя пользователя</label>
             <input type="text" name="username" />
@@ -47,8 +47,9 @@ const LogInForm: React.FC<props> = ({ setLoading, token, setToken }) => {
             <label htmlFor="password">Пароль</label>
             <input type="password" name="password" />
 
+            {!errorStatus.successful ? <p className="errorText">{errorStatus.errorMessage}</p> : ''}
+
             <input type="submit" value="Вход" />
-            {!errorStatus.successful ? <p>{errorStatus.errorMessage}</p> : ''}
         </form>
     );
 };

src/views/Admin/RemoveList/index.tsx

@@ -27,6 +27,7 @@ const RemoveList: React.FC<props> = ({ setLoading, token, setToken }) => {
                     <button
                         onClick={async () => {
                             await removeItem(el.slug, token!);
+                            fetchCardList(setData);
                         }}
                     >
                         <img src={removeIcon} alt="удалить" />

src/views/Admin/RemoveList/utils.ts

@@ -4,7 +4,7 @@ const removeItem = async (slug: string, token: string) => {
             `https://upml-bank.dmitriy.icu/api/card/${slug}/delete`,
             {
                 method: 'delete',
-                headers: { Authentification: `Token ${token}` }
+                headers: { Authorization: `Token ${token}` }
             }
         );
         if (!res.ok) throw res.statusText;

src/views/Admin/UploadForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Select from 'components/Form/Select';
@@ -6,6 +6,8 @@ import { ILoadingState } from 'types';
 import { handleFormSubmit } from 'views/Admin/utils';
 import selectOptions from './selectOptions.json';
 import './main.css';
+import { IErrorStatus } from '../types';
+import { handleError } from '../handlers';
 
 type props = {
     setLoading: Dispatch<SetStateAction<ILoadingState>>;
@@ -15,6 +17,10 @@ type props = {
 const UploadForm: React.FC<props> = ({ setLoading, token }) => {
     const { push: historyPush } = useHistory();
 
+    const [errorStatus, setErrorStatus] = useState<IErrorStatus>({
+        successful: true
+    });
+
     useEffect(() => {
         if (!token) {
             historyPush('/a/l');
@@ -24,11 +30,18 @@ const UploadForm: React.FC<props> = ({ setLoading, token }) => {
     return (
         <form
             id="uploadForm"
-            onSubmit={(e) =>
-                handleFormSubmit(e, 'api/card/create', () => {}, undefined, {
-                    'Authorization': `Token ${localStorage.token}`
-                })
-            }
+            onSubmit={(e) => {
+                setErrorStatus({ successful: true });
+                handleFormSubmit(
+                    e,
+                    'api/card/create',
+                    (err) => handleError(err, setErrorStatus),
+                    undefined,
+                    {
+                        Authorization: `Token ${token}`
+                    }
+                );
+            }}
         >
             <label htmlFor="title">Название</label>
             <input type="text" name="title" />
@@ -62,6 +75,12 @@ const UploadForm: React.FC<props> = ({ setLoading, token }) => {
                 <input type="file" name="image" id="image" />
             </aside>
 
+            {!errorStatus.successful ? (
+                <p className="errorText">{errorStatus.errorMessage}</p>
+            ) : (
+                ''
+            )}
+
             <input type="submit" value="Отправить" />
         </form>
     );

src/views/Admin/handlers.ts

@@ -1,15 +1,15 @@
 import { Dispatch, SetStateAction } from 'react';
 import { IErrorStatus } from './types';
 
-const handleLoginError = (
-    err: ErrorEvent,
+const handleError = (
+    err: string,
     setErrorStatus: Dispatch<SetStateAction<IErrorStatus>>
 ) => {
     console.log(err);
     setErrorStatus({
         successful: false,
-        errorMessage: err.toString()
+        errorMessage: 'Ошибка'
     });
 };
 
-export { handleLoginError };
+export { handleError };

src/views/Admin/utils.ts

@@ -22,4 +22,4 @@ const handleFormSubmit = (
         .catch((err) => errorHandler(err));
 };
 
-export {handleFormSubmit}
+export { handleFormSubmit };