From 11a7d10e38e5af1293af0a17bf24c27392cc0a37 Mon Sep 17 00:00:00 2001
From: Dm1tr1y147 <me@dmitriy.icu>
Date: Wed, 23 Sep 2020 18:47:19 +0500
Subject: [PATCH] Imporved error handling in admin components
---
src/views/Admin/LogInForm/index.tsx | 19 +++++++++--------
src/views/Admin/RemoveList/index.tsx | 1 +
src/views/Admin/RemoveList/utils.ts | 2 +-
src/views/Admin/UploadForm/index.tsx | 31 ++++++++++++++++++++++------
src/views/Admin/handlers.ts | 8 +++----
src/views/Admin/utils.ts | 2 +-
6 files changed, 42 insertions(+), 21 deletions(-)
diff --git a/src/views/Admin/LogInForm/index.tsx b/src/views/Admin/LogInForm/index.tsx
index 3bfc978..d8943b6 100644
--- a/src/views/Admin/LogInForm/index.tsx
+++ b/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>
);
};
diff --git a/src/views/Admin/RemoveList/index.tsx b/src/views/Admin/RemoveList/index.tsx
index be63f51..fa79187 100644
--- a/src/views/Admin/RemoveList/index.tsx
+++ b/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="удалить" />
diff --git a/src/views/Admin/RemoveList/utils.ts b/src/views/Admin/RemoveList/utils.ts
index 11e8bff..39439aa 100644
--- a/src/views/Admin/RemoveList/utils.ts
+++ b/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;
diff --git a/src/views/Admin/UploadForm/index.tsx b/src/views/Admin/UploadForm/index.tsx
index f97eeb0..b12c6a9 100644
--- a/src/views/Admin/UploadForm/index.tsx
+++ b/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>
);
diff --git a/src/views/Admin/handlers.ts b/src/views/Admin/handlers.ts
index 53b62f0..9145969 100644
--- a/src/views/Admin/handlers.ts
+++ b/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 };
diff --git a/src/views/Admin/utils.ts b/src/views/Admin/utils.ts
index fba2122..e801f7b 100644
--- a/src/views/Admin/utils.ts
+++ b/src/views/Admin/utils.ts
@@ -22,4 +22,4 @@ const handleFormSubmit = (
.catch((err) => errorHandler(err));
};
-export {handleFormSubmit}
\ No newline at end of file
+export { handleFormSubmit };