Skip to content

Commit 8afcf92

Browse files
restuwahyu13restuwahyu13
committed
update all examples react-fakes
1 parent 4b4f513 commit 8afcf92

20 files changed

Lines changed: 259 additions & 295 deletions

‎app-dev/src/examples/components/Dummy/index.js‎

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,13 @@
11
import React, { Component } from 'react'
2-
import { Dummy } from 'react-fakers'
2+
import ResultAllData from './ResultAllData'
3+
import ResultWithParams from './ResultWithParams'
34

45
class DummyComponents extends Component {
5-
constructor(props) {
6-
super(props)
7-
this.state = {
8-
loading: false,
9-
data: []
10-
}
11-
}
12-
13-
onSuccess = (res) => {
14-
this.setState({
15-
loading: true,
16-
data: res
17-
})
18-
}
19-
20-
onError = (error) => {
21-
if (error) {
22-
alert(error.message)
23-
}
24-
}
25-
266
render() {
277
return (
288
<>
29-
<Dummy success={this.onSuccess} error={this.onError} />
30-
{!this.state.loading && <h4>Loading....</h4>}
31-
{this.state.loading &&
32-
this.state.data.map((val, id) => (
33-
<ul key={id}>
34-
<li>
35-
{val.firstName} {val.lastName} - {val.email}
36-
</li>
37-
</ul>
38-
))}
9+
<ResultAllData />
10+
{/* <ResultWithParams /> */}
3911
</>
4012
)
4113
}

‎app-dev/src/examples/components/Faker/index.js‎

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,13 @@
11
import React, { Component } from 'react'
2-
import { Faker } from 'react-fakers'
2+
import ResultAllData from './ResultAllData'
3+
import ResultWithParams from './ResultWithParams'
34

45
class FakerComponents extends Component {
5-
constructor(props) {
6-
super(props)
7-
this.state = {
8-
loading: false,
9-
data: []
10-
}
11-
}
12-
13-
onSuccess = (res) => {
14-
this.setState({
15-
loading: true,
16-
data: res
17-
})
18-
}
19-
20-
onError = (error) => {
21-
if (error) {
22-
alert(error.message)
23-
}
24-
}
25-
266
render() {
277
return (
288
<>
29-
<Faker success={this.onSuccess} error={this.onError} />
30-
{!this.state.loading && <h4>Loading....</h4>}
31-
{this.state.loading &&
32-
this.state.data.map((val, id) => (
33-
<ul key={val.uuid}>
34-
<li>
35-
{val.firstname} {val.lastname} - {val.email}
36-
</li>
37-
</ul>
38-
))}
9+
<ResultAllData />
10+
{/* <ResultWithParams /> */}
3911
</>
4012
)
4113
}

‎app-dev/src/examples/components/JsonPlaceHolder/index.js‎

Lines changed: 8 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,17 @@
11
import React, { Component } from 'react'
2-
import { JsonPlaceHolder } from 'react-fakers'
2+
import ResultAllData from './ResultAllData'
3+
import ResultWithParams from './ResultWithParams'
4+
import ResultWithOptions from './ResultWithOptions'
5+
import ResultWithFilters from './ResultWithFilters'
36

47
class JsonPlaceHolderComponents extends Component {
5-
constructor(props) {
6-
super(props)
7-
this.state = {
8-
loading: false,
9-
data: []
10-
}
11-
}
12-
13-
onSuccess = (res) => {
14-
this.setState({
15-
loading: true,
16-
data: res
17-
})
18-
}
19-
20-
onError = (error) => {
21-
if (error) {
22-
alert(error.message)
23-
}
24-
}
25-
268
render() {
279
return (
2810
<>
29-
<JsonPlaceHolder success={this.onSuccess} error={this.onError} />
30-
{!this.state.loading && <h4>Loading....</h4>}
31-
{this.state.loading &&
32-
this.state.data.map((val, id) => (
33-
<ul key={id}>
34-
<li>
35-
{val.name} - {val.email}
36-
</li>
37-
</ul>
38-
))}
11+
<ResultAllData />
12+
{/* <ResultWithParams />
13+
<ResultWithOptions/>
14+
<ResultWithFilters/> */}
3915
</>
4016
)
4117
}

‎app-dev/src/examples/components/UIFaces/index.js‎

Lines changed: 6 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,16 @@
11
import React, { Component } from 'react'
2-
import { UIFaces } from 'react-fakers'
3-
4-
class UIFacesComponents extends Component {
5-
constructor(props) {
6-
super(props)
7-
this.state = {
8-
loading: false,
9-
data: []
10-
}
11-
}
12-
13-
onSuccess = (res) => {
14-
this.setState({
15-
loading: true,
16-
data: res
17-
})
18-
}
19-
20-
onError = (error) => {
21-
if (error) {
22-
alert(error.message)
23-
}
24-
}
2+
import ResultAllData from './ResultAllData'
3+
import ResultWithParams from './ResultWithParams'
254

5+
class UIFacesComponent extends Component {
266
render() {
277
return (
288
<>
29-
<UIFaces success={this.onSuccess} error={this.onError} />
30-
{!this.state.loading && <h4>Loading....</h4>}
31-
{this.state.loading &&
32-
this.state.data.map((val, id) => (
33-
<ul key={val.id}>
34-
<li>
35-
{val.name} - {val.email} - {val.position}
36-
</li>
37-
</ul>
38-
))}
9+
<ResultAllData />
10+
{/* <ResultWithParams /> */}
3911
</>
4012
)
4113
}
4214
}
4315

44-
export default UIFacesComponents
16+
export default UIFacesComponent

‎app-dev/src/examples/hooks/Dummy/ResultAllData.js‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,24 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React from 'react'
22
import { useDummy } from 'react-fakers'
33

44
const ResultAllData = () => {
5-
const [state, setState] = useState(false)
6-
const { success, error } = useDummy()
7-
8-
useEffect(() => {
9-
if (success) {
10-
setState(true)
11-
}
12-
}, [])
5+
const { success, error, loading } = useDummy()
136

147
if (error) {
158
window.alert(error.message)
169
}
1710

1811
return (
1912
<>
20-
{!state && <h4>Loading....</h4>}
21-
{state &&
22-
success.map((val, id) => (
23-
<ul key={val.id}>
24-
<li>
13+
{!loading && <h4>Loading....</h4>}
14+
<ul>
15+
{loading &&
16+
success.map((val, id) => (
17+
<li key={val.id}>
2518
{val.firstName} {val.lastName} - {val.email}
2619
</li>
27-
</ul>
28-
))}
20+
))}
21+
</ul>
2922
</>
3023
)
3124
}

‎app-dev/src/examples/hooks/Dummy/ResultWithParams.js‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,35 +11,27 @@ const ResultWithParams = () => {
1111
* more about information please check documentation from DUMMY API
1212
*/
1313

14-
const [state, setState] = useState(false)
15-
16-
const { success, error } = useDummy({
14+
const { success, error, loading } = useDummy({
1715
params: { user: { id: '0F8JIqi4zwvb77FGz6Wt', refs: 'post' } },
1816
options: { limit: 5 }
1917
})
2018

21-
useEffect(() => {
22-
if (success) {
23-
setState(true)
24-
}
25-
}, [])
26-
2719
if (error) {
2820
window.alert(error.message)
2921
}
3022

3123
return (
3224
<>
33-
{!state && <h4>Loading....</h4>}
25+
{!loading && <h4>Loading....</h4>}
3426
<h3>Using ID and Reference to POST</h3>
35-
{state &&
36-
success.map((val, id) => (
37-
<ul key={val.id}>
38-
<li>
27+
<ul>
28+
{loading &&
29+
success.map((val, id) => (
30+
<li key={val.id}>
3931
{val.id} - {val.text}
4032
</li>
41-
</ul>
42-
))}
33+
))}
34+
</ul>
4335
</>
4436
)
4537
}

‎app-dev/src/examples/hooks/Faker/ResultAllData.js‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,24 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React from 'react'
22
import { useFaker } from 'react-fakers'
33

44
const ResultAllData = () => {
5-
const [state, setState] = useState(false)
6-
const { success, error } = useFaker()
7-
8-
useEffect(() => {
9-
if (success) {
10-
setState(true)
11-
}
12-
}, [])
5+
const { success, error, loading } = useFaker()
136

147
if (error) {
158
window.alert(error.message)
169
}
1710

1811
return (
1912
<>
20-
{!state && <h4>Loading....</h4>}
21-
{state &&
22-
success.map((val, id) => (
23-
<ul key={id}>
24-
<li>
13+
{!loading && <h4>Loading....</h4>}
14+
<ul>
15+
{loading &&
16+
success.map((val, id) => (
17+
<li key={id}>
2518
{val.firstname} {val.lastname} - {val.email}
2619
</li>
27-
</ul>
28-
))}
20+
))}
21+
</ul>
2922
</>
3023
)
3124
}

‎app-dev/src/examples/hooks/Faker/ResultWithParams.js‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React from 'react'
22
import { useFaker } from 'react-fakers'
33

44
const ResultWithParams = () => {
@@ -9,8 +9,7 @@ const ResultWithParams = () => {
99
* more about information please check documentation from FAKER
1010
*/
1111

12-
const [state, setState] = useState(false)
13-
const { success, error } = useFaker({
12+
const { success, error, loading } = useFaker({
1413
params: {
1514
users: {
1615
quantity: 5,
@@ -19,27 +18,21 @@ const ResultWithParams = () => {
1918
}
2019
})
2120

22-
useEffect(() => {
23-
if (success) {
24-
setState(true)
25-
}
26-
}, [])
27-
2821
if (error) {
2922
window.alert(error.message)
3023
}
3124

3225
return (
3326
<>
34-
{!state && <h4>Loading....</h4>}
35-
{state &&
36-
success.map((val, id) => (
37-
<ul key={id}>
38-
<li>
27+
{!loading && <h4>Loading....</h4>}
28+
<ul>
29+
{loading &&
30+
success.map((val, id) => (
31+
<li key={id}>
3932
{val.firstname} {val.lastname} - {val.email}
4033
</li>
41-
</ul>
42-
))}
34+
))}
35+
</ul>
4336
</>
4437
)
4538
}

0 commit comments

Comments
 (0)