Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 87f55c4

Browse files
author
Ivan Franchin
committed
Use async/await to call an API instead of then/catch/finally
1 parent 1c2c868 commit 87f55c4

File tree

4 files changed

+163
-179
lines changed

4 files changed

+163
-179
lines changed

‎book-ui/src/components/admin/AdminPage.js

Lines changed: 84 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -35,119 +35,109 @@ class AdminPage extends Component {
3535
this.setState({ [name]: value })
3636
}
3737

38-
handleGetUsers = () => {
39-
constAuth=this.context
40-
const user = Auth.getUser()
38+
handleGetUsers = async() => {
39+
try{
40+
const user = this.context.getUser()
4141

42-
this.setState({ isUsersLoading: true })
43-
bookApi.getUsers(user)
44-
.then(response => {
45-
this.setState({ users: response.data })
46-
})
47-
.catch(error => {
48-
handleLogError(error)
49-
})
50-
.finally(() => {
51-
this.setState({ isUsersLoading: false })
52-
})
53-
}
42+
this.setState({ isUsersLoading: true })
5443

55-
handleDeleteUser = (username) => {
56-
const Auth = this.context
57-
const user = Auth.getUser()
44+
const response = await bookApi.getUsers(user)
45+
const users = response.data
5846

59-
bookApi.deleteUser(user, username)
60-
.then(() => {
61-
this.handleGetUsers()
62-
})
63-
.catch(error => {
64-
handleLogError(error)
65-
})
47+
this.setState({ users })
48+
} catch (error) {
49+
handleLogError(error)
50+
} finally {
51+
this.setState({ isUsersLoading: false })
52+
}
6653
}
6754

68-
handleSearchUser = () => {
69-
constAuth=this.context
70-
const user = Auth.getUser()
55+
handleDeleteUser = async(username) => {
56+
try{
57+
const user = this.context.getUser()
7158

72-
const username = this.state.userUsernameSearch
73-
bookApi.getUsers(user, username)
74-
.then(response => {
75-
const data = response.data
76-
const users = data instanceof Array ? data : [data]
77-
this.setState({ users })
78-
})
79-
.catch(error => {
80-
handleLogError(error)
81-
this.setState({ users: [] })
82-
})
59+
await bookApi.deleteUser(user, username)
60+
await this.handleGetUsers()
61+
} catch (error) {
62+
handleLogError(error)
63+
}
8364
}
8465

85-
handleGetBooks = () => {
86-
const Auth = this.context
87-
const user = Auth.getUser()
66+
handleSearchUser = async () => {
67+
try {
68+
const user = this.context.getUser()
69+
70+
const username = this.state.userUsernameSearch
71+
const response = await bookApi.getUsers(user, username)
8872

89-
this.setState({ isBooksLoading: true })
90-
bookApi.getBooks(user)
91-
.then(response => {
92-
this.setState({ books: response.data })
93-
})
94-
.catch(error => {
95-
handleLogError(error)
96-
})
97-
.finally(() => {
98-
this.setState({ isBooksLoading: false })
99-
})
73+
const data = response.data
74+
const users = data instanceof Array ? data : [data]
75+
this.setState({ users })
76+
} catch (error) {
77+
handleLogError(error)
78+
this.setState({ users: [] })
79+
}
10080
}
10181

102-
handleDeleteBook = (isbn) => {
103-
constAuth=this.context
104-
const user = Auth.getUser()
82+
handleGetBooks = async() => {
83+
try{
84+
const user = this.context.getUser()
10585

106-
bookApi.deleteBook(user, isbn)
107-
.then(() => {
108-
this.handleGetBooks()
109-
})
110-
.catch(error => {
111-
handleLogError(error)
112-
})
86+
this.setState({ isBooksLoading: true })
87+
const response = await bookApi.getBooks(user)
88+
89+
this.setState({ books: response.data, isBooksLoading: false })
90+
} catch (error) {
91+
handleLogError(error)
92+
this.setState({ isBooksLoading: false })
93+
}
11394
}
11495

115-
handleAddBook = () => {
116-
constAuth=this.context
117-
const user = Auth.getUser()
96+
handleDeleteBook = async(isbn) => {
97+
try{
98+
const user = this.context.getUser()
11899

119-
let { bookIsbn, bookTitle } = this.state
120-
bookIsbn = bookIsbn.trim()
121-
bookTitle = bookTitle.trim()
122-
if (!(bookIsbn && bookTitle)) {
123-
return
100+
await bookApi.deleteBook(user, isbn)
101+
this.handleGetBooks()
102+
} catch (error) {
103+
handleLogError(error)
124104
}
105+
}
106+
107+
handleAddBook = async () => {
108+
try {
109+
const user = this.context.getUser()
110+
111+
let { bookIsbn, bookTitle } = this.state
112+
bookIsbn = bookIsbn.trim()
113+
bookTitle = bookTitle.trim()
125114

126-
const book = { isbn: bookIsbn, title: bookTitle }
127-
bookApi.addBook(user, book)
128-
.then(() => {
129-
this.clearBookForm()
130-
this.handleGetBooks()
131-
})
132-
.catch(error => {
133-
handleLogError(error)
134-
})
115+
if (!(bookIsbn && bookTitle)) {
116+
return
117+
}
118+
119+
const book = { isbn: bookIsbn, title: bookTitle }
120+
await bookApi.addBook(user, book)
121+
this.clearBookForm()
122+
this.handleGetBooks()
123+
} catch (error) {
124+
handleLogError(error)
125+
}
135126
}
136127

137-
handleSearchBook = () => {
138-
const Auth = this.context
139-
const user = Auth.getUser()
128+
handleSearchBook = async () => {
129+
try {
130+
const user = this.context.getUser()
131+
const text = this.state.bookTextSearch
140132

141-
const text = this.state.bookTextSearch
142-
bookApi.getBooks(user, text)
143-
.then(response => {
144-
const books = response.data
145-
this.setState({ books })
146-
})
147-
.catch(error => {
148-
handleLogError(error)
149-
this.setState({ books: [] })
150-
})
133+
const response = await bookApi.getBooks(user, text)
134+
const books = response.data
135+
136+
this.setState({ books })
137+
} catch (error) {
138+
handleLogError(error)
139+
this.setState({ books: [] })
140+
}
151141
}
152142

153143
clearBookForm = () => {
@@ -161,7 +151,7 @@ class AdminPage extends Component {
161151
if (!this.state.isAdmin) {
162152
return <Navigate to='/' />
163153
}
164-
154+
165155
const { isUsersLoading, users, userUsernameSearch, isBooksLoading, books, bookIsbn, bookTitle, bookTextSearch } = this.state
166156
return (
167157
<Container>

‎book-ui/src/components/home/Login.js

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,35 +25,34 @@ class Login extends Component {
2525
this.setState({ [name]: value })
2626
}
2727

28-
handleSubmit = (e) => {
28+
handleSubmit = async(e) => {
2929
e.preventDefault()
30-
30+
3131
const { username, password } = this.state
3232
if (!(username && password)) {
3333
this.setState({ isError: true })
3434
return
3535
}
36-
37-
bookApi.authenticate(username, password)
38-
.then(response => {
39-
const { id, name, role } = response.data
40-
const authdata = window.btoa(username + ':' + password)
41-
const user = { id, name, role, authdata }
42-
43-
const Auth = this.context
44-
Auth.userLogin(user)
45-
46-
this.setState({
47-
username: '',
48-
password: '',
49-
isLoggedIn: true,
50-
isError: false
51-
})
52-
})
53-
.catch(error => {
54-
handleLogError(error)
55-
this.setState({ isError: true })
36+
37+
try {
38+
const response = await bookApi.authenticate(username, password)
39+
const { id, name, role } = response.data
40+
const authdata = window.btoa(username + ':' + password)
41+
const newUser = { id, name, role, authdata }
42+
43+
const Auth = this.context
44+
Auth.userLogin(newUser)
45+
46+
this.setState({
47+
username: '',
48+
password: '',
49+
isLoggedIn: true,
50+
isError: false
5651
})
52+
} catch (error) {
53+
handleLogError(error)
54+
this.setState({ isError: true })
55+
}
5756
}
5857

5958
render() {

‎book-ui/src/components/home/Signup.js

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ class Signup extends Component {
2828
this.setState({ [name]: value })
2929
}
3030

31-
handleSubmit = (e) => {
31+
handleSubmit = async(e) => {
3232
e.preventDefault()
33-
33+
3434
const { username, password, name, email } = this.state
3535
if (!(username && password && name && email)) {
3636
this.setState({
@@ -39,41 +39,41 @@ class Signup extends Component {
3939
})
4040
return
4141
}
42-
42+
4343
const user = { username, password, name, email }
44-
bookApi.signup(user)
45-
.then(response=> {
46-
const { id, name, role }=response.data
47-
const authdata=window.btoa(username+':'+password)
48-
const user = { id, name, role, authdata }
49-
50-
constAuth=this.context
51-
Auth.userLogin(user)
52-
53-
this.setState({
54-
username: '',
55-
password: '',
56-
isLoggedIn: true,
57-
isError: false,
58-
errorMessage: ''
59-
})
44+
45+
try {
46+
const response=awaitbookApi.signup(user)
47+
const { id, name, role }=response.data
48+
const authdata = window.btoa(username+':'+password)
49+
constnewUser={ id, name, role, authdata }
50+
51+
constAuth=this.context
52+
Auth.userLogin(newUser)
53+
54+
this.setState({
55+
username: '',
56+
password: '',
57+
isLoggedIn: true,
58+
isError: false,
59+
errorMessage: ''
6060
})
61-
.catch(error => {
62-
handleLogError(error)
63-
if (error.response && error.response.data) {
64-
const errorData = error.response.data
65-
let errorMessage = 'Invalid fields'
66-
if (errorData.status === 409) {
67-
errorMessage = errorData.message
68-
} else if (errorData.status === 400) {
69-
errorMessage = errorData.errors[0].defaultMessage
70-
}
71-
this.setState({
72-
isError: true,
73-
errorMessage
74-
})
61+
} catch (error) {
62+
handleLogError(error)
63+
if (error.response && error.response.data) {
64+
const errorData = error.response.data
65+
let errorMessage = 'Invalid fields'
66+
if (errorData.status === 409) {
67+
errorMessage = errorData.message;
68+
} else if (errorData.status === 400) {
69+
errorMessage = errorData.errors[0].defaultMessage;
7570
}
76-
})
71+
this.setState({
72+
isError: true,
73+
errorMessage
74+
})
75+
}
76+
}
7777
}
7878

7979
render() {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /