File tree Expand file tree Collapse file tree 3 files changed +7
-8
lines changed
react/advanced-hooks/05-optimistic-ui/lecture Expand file tree Collapse file tree 3 files changed +7
-8
lines changed Original file line number Diff line number Diff line change @@ -16,11 +16,10 @@ export function App() {
16
16
setOptimisticLikes ( optimisticLikes + 1 )
17
17
const data = ( await updateDatabase ( optimisticLikes + 1 ) . then ( ( r ) => r . json ( ) ) ) as ResponseData
18
18
19
- if ( ! data . error ) {
20
- console . log ( data . likes )
21
- setLikes ( data . likes )
22
- } else {
23
- setLikes ( data . likes )
19
+ setLikes ( data . likes )
20
+ console . log ( data . likes )
21
+
22
+ if ( data . error ) {
24
23
setError ( data . error )
25
24
}
26
25
}
Original file line number Diff line number Diff line change 3
3
Start with a basic form submission that asynchronously updates likes:
4
4
5
5
1 . Add our own implementation of ` optimisticLikes ` with ` useState ` . Notice how
6
- ` likes ` becomes useless / unused. Set set it but nothing uses it. Also re-factor
6
+ ` likes ` becomes useless / unused. We set it but nothing uses it. Also re-factor
7
7
to use transitions. See commented solution in App.tsx
8
8
9
9
2 . Refactor ` onSubmit={submit} ` to ` action={action} ` and now the homegrown optimistic likes
Original file line number Diff line number Diff line change @@ -7,9 +7,9 @@ export async function updateDatabase(likes: number) {
7
7
let status = 200
8
8
let responseData : ResponseData = { likes }
9
9
10
- if ( likes == = 5 ) {
10
+ if ( likes > = 5 ) {
11
11
status = 400
12
- responseData = { likes : 4 , error : 'Error saving 5 likes' }
12
+ responseData = { likes : 4 , error : 'Error saving 5 or more likes' }
13
13
}
14
14
15
15
return new Response ( JSON . stringify ( responseData ) , {
You can’t perform that action at this time.
0 commit comments