This repository has been archived by the owner on Sep 22, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
104 lines (93 loc) · 4.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactSync</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous"/>
</head>
<body>
<div class="container">
<h1 class="page-header">React Sync v0.9.0</h1>
<a href="https://github.com/moodysalem/react-sync"><img style="position: absolute; top: 0; left: 0; border: 0;"
src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
<p class="lead">
Change the parameters as fast as you like and you should always see the correct results because
<code>react-sync</code> handles cancelling old requests
</p>
<div id="app">
<p>Loading assets...</p>
</div>
</div>
<!-- babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"
integrity="sha256-FiZMk1zgTeujzf/+vomWZGZ9r00+xnGvOgXoj0Jo1jA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"
integrity="sha256-ST7P3DAEZSLHHBnC+AyRNGDRFbSHK7EiPC3hBjkVOZA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"
integrity="sha256-LPSUIWkbnb8ZFvlw4VMqck85wQs2s77MeUEUVZ9uNSs=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-sync@0.9.0/dist/react-sync.js"
integrity="sha384-bOofg1r6tt3u6UvGHwAVQFm+hh67E2E68ncMz5lgZsC5WgOe8U3YuenbNlyMKKXR"
crossorigin="anonymous"></script>
<script type="text/babel">
'use strict';
const ProvidesPosts = ({ ...rest }) => (
<ReactSync.default {...rest} url={'https://jsonplaceholder.typicode.com/posts'}/>
);
class App extends React.Component {
state = {
userId: ''
};
render() {
const { userId } = this.state;
return (
<div>
<input type="number" value={userId}
className="form-control"
placeholder="userId filter"
onChange={e => this.setState({ userId: e.target.value })}/>
<ProvidesPosts params={userId.length > 0 ? { userId } : null}>
{
({ promise, data, error }) => (
<div style={{ marginTop: 10 }}>
{promise != null && data != null ? (
<div className="text-center" style={{ margin: 10 }}>
<i className="fa fa-spinner fa-spin fa-5x"/>
</div>
) : null}
{
data == null && promise != null ? 'Loading posts...' :
(
error != null ? error.message :
data != null && data.length > 0 ? data.map(
({ id, body, title, userId }) => (
<div key={id} className="well well-sm">
<h3>
<em> by user ID {userId}: </em>
<strong>{title}</strong>
</h3>
<p>{body}</p>
</div>
)
) : 'No matching posts!'
)
}
</div>
)
}
</ProvidesPosts>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);
</script>
</body>
</html>