Skip to content

Commit 4c110dd

Browse files
jmdobryjmdobry
committed
Added React.js example.
1 parent 4433da4 commit 4c110dd

File tree

7 files changed

+389
-4
lines changed

7 files changed

+389
-4
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ Firebase adapter for [js-data](http://www.js-data.io/).
77
## API Documentation
88
[DSFirebaseAdapter](http://www.js-data.io/docs/dsfirebaseadapter)
99

10-
## Demo
11-
[https://js-data-firebase.firebaseapp.com/](https://js-data-firebase.firebaseapp.com/)
10+
## Demos
11+
[js-data-firebase + Angular](https://js-data-firebase.firebaseapp.com/angular/)
12+
[js-data-firebase + React](https://js-data-firebase.firebaseapp.com/react/)
1213

1314
## Project Status
1415

‎examples/example.css renamed to ‎examples/angular/example.css

File renamed without changes.

‎examples/example.js renamed to ‎examples/angular/example.js

File renamed without changes.

‎examples/index.html renamed to ‎examples/angular/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,13 @@
2525
<a class="example-nav-item" href="https://groups.io/org/groupsio/jsdata">Mailing List</a>
2626
<a class="example-nav-item" href="https://github.com/js-data/js-data-firebase/issues">Issues</a>
2727
<a class="example-nav-item active" href="#">js-data-firebase & Angular</a>
28+
<a class="example-nav-item" href="../react">js-data-firebase & React</a>
2829
</nav>
2930
</div>
3031
</div>
3132
<div class="container" style="margin-top: 100px">
32-
<div class="col-sm-6">
33-
<h1 class="page-header">js-data-firebase & Angular example</h1>
33+
<div class="col-sm-5">
34+
<h2 class="page-header">js-data-firebase & Angular example</h2>
3435

3536
<div class="panel panel-primary">
3637
<div class="panel-heading">

‎examples/react/example.css

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/*
2+
* Globals
3+
*/
4+
5+
body {
6+
color: #555;
7+
}
8+
9+
h1, .h1,
10+
h2, .h2,
11+
h3, .h3,
12+
h4, .h4,
13+
h5, .h5,
14+
h6, .h6 {
15+
margin-top: 0;
16+
font-weight: normal;
17+
color: #333;
18+
}
19+
20+
/*
21+
* Masthead for nav
22+
*/
23+
.example-masthead {
24+
background-color: #428bca;
25+
-webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
26+
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
27+
}
28+
29+
/* Nav links */
30+
.example-nav-item {
31+
position: relative;
32+
display: inline-block;
33+
padding: 10px;
34+
color: #cdddeb;
35+
}
36+
37+
.example-nav-item:hover,
38+
.example-nav-item:focus {
39+
color: #fff;
40+
text-decoration: none;
41+
}
42+
43+
/* Active state gets a caret at the bottom */
44+
.example-nav .active {
45+
color: #fff;
46+
}
47+
48+
.example-nav .active:after {
49+
position: absolute;
50+
bottom: 0;
51+
left: 50%;
52+
width: 0;
53+
height: 0;
54+
margin-left: -5px;
55+
vertical-align: middle;
56+
content: " ";
57+
border-right: 5px solid transparent;
58+
border-bottom: 5px solid;
59+
border-left: 5px solid transparent;
60+
}
61+
62+
/*
63+
* Blog name and description
64+
*/
65+
.example-header {
66+
padding-top: 20px;
67+
padding-bottom: 20px;
68+
}
69+
70+
.example-title {
71+
margin-top: 30px;
72+
margin-bottom: 0;
73+
font-size: 60px;
74+
font-weight: normal;
75+
}
76+
77+
.example-description {
78+
font-size: 20px;
79+
color: #999;
80+
}
81+
82+
/*
83+
* Main column and sidebar layout
84+
*/
85+
.example-main {
86+
font-size: 18px;
87+
line-height: 1.5;
88+
}
89+
90+
/* Sidebar modules for boxing content */
91+
.sidebar-module {
92+
padding: 15px;
93+
margin: 0 -15px 15px;
94+
}
95+
96+
.sidebar-module-inset {
97+
padding: 15px;
98+
background-color: #f5f5f5;
99+
border-radius: 4px;
100+
}
101+
102+
.sidebar-module-inset p:last-child,
103+
.sidebar-module-inset ul:last-child,
104+
.sidebar-module-inset ol:last-child {
105+
margin-bottom: 0;
106+
}
107+
108+
/* Pagination */
109+
.pager {
110+
margin-bottom: 60px;
111+
text-align: left;
112+
}
113+
114+
.pager > li > a {
115+
width: 140px;
116+
padding: 10px 20px;
117+
text-align: center;
118+
border-radius: 30px;
119+
}
120+
121+
/*
122+
* Blog posts
123+
*/
124+
.example-post {
125+
margin-bottom: 60px;
126+
}
127+
128+
.example-post-title {
129+
margin-bottom: 5px;
130+
font-size: 40px;
131+
}
132+
133+
.example-post-meta {
134+
margin-bottom: 20px;
135+
color: #999;
136+
}
137+
138+
/*
139+
* Footer
140+
*/
141+
.example-footer {
142+
padding: 40px 0;
143+
color: #999;
144+
text-align: center;
145+
background-color: #f9f9f9;
146+
border-top: 1px solid #e5e5e5;
147+
}
148+
149+
.example-footer p:last-child {
150+
margin-bottom: 0;
151+
}

‎examples/react/example.js

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
var store = new JSData.DS();
2+
3+
store.registerAdapter(
4+
'firebase',
5+
new DSFirebaseAdapter({
6+
basePath: 'https://js-data-firebase.firebaseio.com'
7+
}),
8+
{ default: true }
9+
);
10+
11+
// Flux pattern
12+
var UserStore = store.defineResource({
13+
name: 'user',
14+
afterInject: function () {
15+
UserStore.emit('change');
16+
},
17+
afterEject: function () {
18+
UserStore.emit('change');
19+
}
20+
});
21+
22+
var UserItem = React.createClass({
23+
remove: function () {
24+
UserStore.destroy(this.props.user.id);
25+
},
26+
render: function () {
27+
var user = this.props.user;
28+
return <div className="list-group-item" key={user.id}>
29+
<div className="pull-right">
30+
<button className="btn btn-xs btn-danger" onClick={this.remove}>
31+
Delete
32+
</button>
33+
</div>
34+
{user.name}
35+
</div>;
36+
}
37+
});
38+
39+
var UserApp = React.createClass({
40+
getInitialState: function () {
41+
// Pull the initial list of users
42+
// from Firebase
43+
UserStore.findAll();
44+
45+
return { users: UserStore.getAll(), name: '' };
46+
},
47+
onChange: function () {
48+
this.setState({ users: UserStore.getAll(), name: this.props.name || '' });
49+
},
50+
onInput: function (event) {
51+
this.setState({ users: this.state.users, name: event.target.value });
52+
},
53+
componentDidMount: function () {
54+
UserStore.on('change', this.onChange);
55+
},
56+
componentWillUnmount: function () {
57+
UserStore.off('change', this.onChange);
58+
},
59+
createUser: function (e) {
60+
e.preventDefault();
61+
UserStore.create({
62+
name: this.state.name
63+
});
64+
this.setState({ users: UserStore.getAll(), name: '' });
65+
},
66+
render: function () {
67+
var users = this.state.users;
68+
var _userItems = [];
69+
70+
users.forEach(function (user, i) {
71+
_userItems.push(<UserItem key={i} user={users[i]} />);
72+
});
73+
74+
return (
75+
<div className="panel panel-primary">
76+
<div className="panel-heading">
77+
<h3 className="panel-title">Users</h3>
78+
</div>
79+
<div className="list-group">
80+
{_userItems}
81+
<div className="list-group-item">
82+
<form id="user-form" name="user-form" className="list-group-item" onSubmit={this.createUser}>
83+
<input className="form-control" type="text" id="name" name="name" value={this.state.name} onChange={this.onInput} placeholder="Enter a name and press enter" />
84+
<input type="submit" className="hidden"/>
85+
</form>
86+
</div>
87+
</div>
88+
</div>
89+
);
90+
}
91+
});
92+
93+
React.render(<UserApp />, document.getElementById('example'));
94+
95+
hljs.initHighlightingOnLoad();

0 commit comments

Comments
 (0)