Skip to content

Commit 0d60905

Browse files
tduyngtduyng
committed
Integrate alert
1 parent 372e521 commit 0d60905

File tree

8 files changed

+100
-48
lines changed

8 files changed

+100
-48
lines changed

‎server/db/db.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,12 @@
9797
"brand": "APPLE",
9898
"image_url": "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-12-pro-gold-hero?wid=470&hei=556&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1604021659000",
9999
"id": "f1d30887-14f9-4238-8ecd-c106d5f529e8"
100+
},
101+
{
102+
"name": "test",
103+
"brand": "OTHERS",
104+
"image_url": "/images/image-default.jpg",
105+
"id": "72fc536d-6992-4d26-a9ff-1294bb38cd5a"
100106
}
101107
]
102108
}

‎src/@types/alert.d.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
11
//eslint-disable-next-line
2-
enum AlertTypes {
3-
SUCCESS = 'sucess',
4-
ERROR = 'error',
5-
INFO = 'info',
6-
WARNING = 'warning',
7-
}
82

93
interface IAlert {
104
id: string;

‎src/assets/scss/_home.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,6 @@
4242
background: rgba(0, 0, 0, 0.2);
4343
height: 100vh;
4444
}
45+
.alert-section {
46+
margin-top: 3px;
47+
}

‎src/components/Alert/index.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,17 @@ const _AppAlert = (props: Props) => {
1717
alerts.length > 0 &&
1818
alerts.map((alert, index) => {
1919
return (
20-
<Alert
21-
message={alert.msg}
22-
type={alert.type}
23-
key={index}
24-
showIcon
25-
closable
26-
></Alert>
20+
<div className="container">
21+
<div className="alert-section">
22+
<Alert
23+
message={alert.msg}
24+
type={alert.type}
25+
key={index}
26+
showIcon
27+
closable
28+
></Alert>
29+
</div>
30+
</div>
2731
);
2832
})
2933
);

‎src/components/Auth/Auth.thunks.ts‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,29 @@ import { URL } from 'src/constants/urls';
33
import * as actions from './Auth.actions';
44
import { v4 as uuid } from 'uuid';
55
import { setAlert } from 'src/components/Alert/Alert.thunks';
6+
import { AlertTypes } from 'src/constants/alerts';
67

78
export const loadUser = () => async dispatch => {
89
const userJson = localStorage.getItem('user') || '{}';
910
const user = JSON.parse(userJson) as IUser;
1011
const id = user.id;
1112
if (!id) {
12-
return dispatch(actions.authError());
13+
dispatch(actions.authError());
14+
dispatch(setAlert({ msg: 'Cant not load user!', type: AlertTypes.ERROR }));
15+
return;
1316
}
1417
try {
1518
const res = await axios.get(`${URL.baseAPIUrl}/api/users/${id}`);
1619
if (res) {
1720
return dispatch(actions.userLoaded(res.data));
1821
}
19-
return dispatch(actions.authError());
22+
dispatch(actions.authError());
23+
dispatch(setAlert({ msg: 'Get user error!', type: AlertTypes.ERROR }));
24+
return;
2025
} catch (error) {
21-
return dispatch(actions.authError());
26+
dispatch(actions.authError());
27+
dispatch(setAlert({ msg: error.message, type: AlertTypes.ERROR }));
28+
return;
2229
}
2330
};
2431

@@ -31,6 +38,12 @@ export const login = (payload: ReqLogin) => async dispatch => {
3138
let user = allUsers.filter(x => x.username === username)[0];
3239
if (user && user.password === password) {
3340
dispatch(actions.loginSuccess(user));
41+
dispatch(
42+
setAlert({
43+
msg: 'You are logged!',
44+
type: AlertTypes.SUCCESS,
45+
}),
46+
);
3447
dispatch(loadUser());
3548
return;
3649
}
@@ -48,11 +61,23 @@ export const register = (payload: ReqLogin) => async dispatch => {
4861
const newUser = { ...payload, id, accessToken };
4962
await axios.post(`${URL.baseAPIUrl}/api/users`, newUser);
5063
dispatch(actions.registerSuccess(newUser));
64+
dispatch(
65+
setAlert({
66+
msg: 'Register successfully!',
67+
type: AlertTypes.SUCCESS,
68+
}),
69+
);
5170
dispatch(loadUser());
5271
} catch (error) {
5372
return dispatch(actions.registerFailed());
5473
}
5574
};
5675
export const logout = () => async dispatch => {
57-
return dispatch(actions.logoutSuccess());
76+
dispatch(actions.logoutSuccess());
77+
dispatch(
78+
setAlert({
79+
msg: 'You are logged out!',
80+
type: AlertTypes.WARNING,
81+
}),
82+
);
5883
};

‎src/components/Products/Product.thunks.ts‎

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,30 @@ import axios from 'axios';
22
import { URL } from 'src/constants/urls';
33
import * as actions from './Product.actions';
44
import { v4 as uuid } from 'uuid';
5+
import { setAlert } from 'src/components/Alert/Alert.thunks';
6+
import { AlertTypes } from 'src/constants/alerts';
7+
8+
const dispatchError = (dispatch, error) => {
9+
const payload = {
10+
msg: error.response?.statusText,
11+
status: error.response?.status,
12+
};
13+
dispatch(actions.productError(payload));
14+
dispatch(
15+
setAlert({
16+
msg: error.response?.statusText,
17+
type: AlertTypes.ERROR,
18+
}),
19+
);
20+
};
521

622
export const getProducts = () => async dispatch => {
723
try {
824
const res = await axios.get(`${URL.baseAPIUrl}/api/products`);
925
const products = res.data;
1026
dispatch(actions.getProductsSuccess(products));
1127
} catch (error) {
12-
const payload = {
13-
msg: error.response?.statusText,
14-
status: error.response?.status,
15-
};
16-
dispatch(actions.productError(payload));
28+
dispatchError(dispatch, error);
1729
}
1830
};
1931

@@ -23,11 +35,7 @@ export const getProduct = id => async dispatch => {
2335
const product = res.data as Product;
2436
dispatch(actions.getProductSuccess(product));
2537
} catch (error) {
26-
const payload = {
27-
msg: error.response?.statusText,
28-
status: error.response?.status,
29-
};
30-
dispatch(actions.productError(payload));
38+
dispatchError(dispatch, error);
3139
}
3240
};
3341
export const clearProduct = () => dispatch => {
@@ -44,27 +52,31 @@ export const createProduct = (formData: ProductForm) => async dispatch => {
4452
};
4553
await axios.post(`${URL.baseAPIUrl}/api/products`, newProduct);
4654
dispatch(actions.createProductSuccess(newProduct));
55+
dispatch(
56+
setAlert({
57+
msg: 'Create product successfully',
58+
type: AlertTypes.SUCCESS,
59+
}),
60+
);
4761
dispatch(getProducts());
4862
} catch (error) {
49-
const payload = {
50-
msg: error.response?.statusText,
51-
status: error.response?.status,
52-
};
53-
dispatch(actions.productError(payload));
63+
dispatchError(dispatch, error);
5464
}
5565
};
5666

5767
export const deleteProduct = (id: string) => async dispatch => {
5868
try {
5969
await axios.delete(`${URL.baseAPIUrl}/api/products/${id}`);
6070
dispatch(actions.deleteProductSuccess(id));
71+
dispatch(
72+
setAlert({
73+
msg: 'Delete product successfully',
74+
type: AlertTypes.SUCCESS,
75+
}),
76+
);
6177
dispatch(getProducts());
6278
} catch (error) {
63-
const payload = {
64-
msg: error.response?.statusText,
65-
status: error.response?.status,
66-
};
67-
dispatch(actions.productError(payload));
79+
dispatchError(dispatch, error);
6880
}
6981
};
7082

@@ -74,24 +86,22 @@ export const editProduct = (id: string) => async dispatch => {
7486
const product = res.data as Product;
7587
dispatch(actions.editProductSuccess(product));
7688
} catch (error) {
77-
const payload = {
78-
msg: error.response?.statusText,
79-
status: error.response?.status,
80-
};
81-
dispatch(actions.productError(payload));
89+
dispatchError(dispatch, error);
8290
}
8391
};
8492

8593
export const updateProduct = (product: Product) => async dispatch => {
8694
try {
8795
await axios.put(`${URL.baseAPIUrl}/api/products/${product.id}`, product);
8896
dispatch(actions.updateProductSuccess(product));
97+
dispatch(
98+
setAlert({
99+
msg: 'Update product successfully',
100+
type: AlertTypes.SUCCESS,
101+
}),
102+
);
89103
dispatch(getProducts());
90104
} catch (error) {
91-
const payload = {
92-
msg: error.response?.statusText,
93-
status: error.response?.status,
94-
};
95-
dispatch(actions.productError(payload));
105+
dispatchError(dispatch, error);
96106
}
97107
};

‎src/constants/alerts.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum AlertTypes {
2+
SUCCESS = 'success',
3+
ERROR = 'error',
4+
INFO = 'info',
5+
WARNING = 'warning',
6+
}

‎src/pages/layouts/MainLayout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
22
import { AppHeader } from 'src/components/Header';
33
import { AppFooter } from 'src/components/Footer';
44
import { Layout } from 'antd';
5+
import { AppAlert } from 'src/components/Alert';
56
const { Header, Content, Footer } = Layout;
67

78
interface Props {
@@ -14,7 +15,10 @@ export const MainLayout = (props: Props) => {
1415
<Header>
1516
<AppHeader />
1617
</Header>
17-
<Content className="layout-children">{children}</Content>
18+
<Content className="layout-children">
19+
<AppAlert />
20+
{children}
21+
</Content>
1822
<Footer>
1923
<AppFooter />
2024
</Footer>

0 commit comments

Comments
 (0)