Skip to content

Commit cabc8fc

Browse files
prescottprueprescottprue
authored
chore (examples/complete/simple): tests passing (prescottprue#103)
chore (examples/complete/simple): tests passing
1 parent e3102af commit cabc8fc

File tree

4 files changed

+94
-86
lines changed

4 files changed

+94
-86
lines changed

‎examples/complete/simple/src/App.js

+11-78
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,14 @@
1-
import React, { Component, PropTypes } from 'react'
2-
import { connect } from 'react-redux'
3-
import {
4-
firebaseConnect,
5-
isLoaded,
6-
isEmpty,
7-
dataToJS
8-
} from 'react-redux-firebase'
9-
10-
import logo from './logo.svg'
11-
import TodoItem from './TodoItem'
1+
import React from 'react'
2+
import { Provider } from 'react-redux'
3+
import Home from './Home'
4+
import configureStore from './store'
125
import './App.css'
136

14-
class App extends Component {
15-
static propTypes = {
16-
todos: PropTypes.object,
17-
firebase: PropTypes.shape({
18-
push: PropTypes.func.isRequired
19-
})
20-
}
21-
22-
handleAdd = () => {
23-
const { firebase } = this.props
24-
const { newTodo } = this.refs
25-
firebase.push('/todos', { text: newTodo.value, done: false })
26-
newTodo.value = ''
27-
}
28-
29-
render () {
30-
const { todos } = this.props
31-
32-
console.log('todos;', todos)
33-
34-
const todosList = (!isLoaded(todos))
35-
? 'Loading'
36-
: (isEmpty(todos))
37-
? 'Todo list is empty'
38-
: Object.keys(todos).map((key) => (
39-
<TodoItem key={key} id={key} todo={todos[key]} />
40-
))
41-
return (
42-
<div className='App'>
43-
<div className='App-header'>
44-
<h2>react-redux-firebase demo</h2>
45-
<img src={logo} className='App-logo' alt='logo' />
46-
</div>
47-
<div className='App-todos'>
48-
<h4>
49-
Loaded From
50-
<span className='App-Url'>
51-
<a href='https://redux-firebasev3.firebaseio.com/'>
52-
redux-firebasev3.firebaseio.com
53-
</a>
54-
</span>
55-
</h4>
56-
<h4>Todos List</h4>
57-
{todosList}
58-
<h4>New Todo</h4>
59-
<input type='text' ref='newTodo' />
60-
<button onClick={this.handleAdd}>
61-
Add
62-
</button>
63-
</div>
64-
</div>
65-
)
66-
}
67-
}
68-
const fbWrappedComponent = firebaseConnect([
69-
'/todos'
70-
// { type: 'once', path: '/todos' } // for loading once instead of binding
71-
// '/todos#populate=owner:displayNames' // for populating owner parameter from id into string loaded from /displayNames root
72-
// '/todos#populate=collaborators:users' // for populating owner parameter from id to user object loaded from /users root
73-
// { path: 'todos', populates: [{ child: 'collaborators', root: 'users' }] } // object notation of population
74-
// '/todos#populate=owner:users:displayName' // for populating owner parameter from id within to displayName string from user object within users root
75-
])(App)
7+
const initialState = window.__INITIAL_STATE__ || { firebase: { authError: null } }
8+
const store = configureStore(initialState)
769

77-
export default connect(
78-
({ firebase }) => ({
79-
todos: dataToJS(firebase, 'todos'),
80-
})
81-
)(fbWrappedComponent)
10+
export default () => (
11+
<Provider store={store}>
12+
<Home />
13+
</Provider>
14+
)

‎examples/complete/simple/src/Home.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { Component, PropTypes } from 'react'
2+
import { connect } from 'react-redux'
3+
import {
4+
firebaseConnect,
5+
isLoaded,
6+
isEmpty,
7+
dataToJS
8+
} from 'react-redux-firebase'
9+
10+
import logo from './logo.svg'
11+
import TodoItem from './TodoItem'
12+
import './App.css'
13+
14+
class App extends Component {
15+
static propTypes = {
16+
todos: PropTypes.object,
17+
firebase: PropTypes.shape({
18+
push: PropTypes.func.isRequired
19+
})
20+
}
21+
22+
handleAdd = () => {
23+
const { firebase } = this.props
24+
const { newTodo } = this.refs
25+
firebase.push('/todos', { text: newTodo.value, done: false })
26+
newTodo.value = ''
27+
}
28+
29+
render () {
30+
const { todos } = this.props
31+
32+
console.log('todos;', todos)
33+
34+
const todosList = (!isLoaded(todos))
35+
? 'Loading'
36+
: (isEmpty(todos))
37+
? 'Todo list is empty'
38+
: Object.keys(todos).map((key) => (
39+
<TodoItem key={key} id={key} todo={todos[key]} />
40+
))
41+
return (
42+
<div className='App'>
43+
<div className='App-header'>
44+
<h2>react-redux-firebase demo</h2>
45+
<img src={logo} className='App-logo' alt='logo' />
46+
</div>
47+
<div className='App-todos'>
48+
<h4>
49+
Loaded From
50+
<span className='App-Url'>
51+
<a href='https://redux-firebasev3.firebaseio.com/'>
52+
redux-firebasev3.firebaseio.com
53+
</a>
54+
</span>
55+
</h4>
56+
<h4>Todos List</h4>
57+
{todosList}
58+
<h4>New Todo</h4>
59+
<input type='text' ref='newTodo' />
60+
<button onClick={this.handleAdd}>
61+
Add
62+
</button>
63+
</div>
64+
</div>
65+
)
66+
}
67+
}
68+
const fbWrappedComponent = firebaseConnect([
69+
'/todos'
70+
// { type: 'once', path: '/todos' } // for loading once instead of binding
71+
// '/todos#populate=owner:displayNames' // for populating owner parameter from id into string loaded from /displayNames root
72+
// '/todos#populate=collaborators:users' // for populating owner parameter from id to user object loaded from /users root
73+
// { path: 'todos', populates: [{ child: 'collaborators', root: 'users' }] } // object notation of population
74+
// '/todos#populate=owner:users:displayName' // for populating owner parameter from id within to displayName string from user object within users root
75+
])(App)
76+
77+
export default connect(
78+
({ firebase }) => ({
79+
todos: dataToJS(firebase, 'todos'),
80+
})
81+
)(fbWrappedComponent)

‎examples/complete/simple/src/TodoItem.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ class TodoItem extends Component {
2626
checked={todo.done}
2727
onChange={toggleDone}
2828
/>
29-
{todo.text}
29+
{todo.text || todo.name}
3030
<button className="Todo-Button" onClick={deleteTodo}>
3131
Delete
3232
</button>

‎examples/complete/simple/src/index.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,8 @@ import React from 'react'
22
import ReactDOM from 'react-dom'
33
import App from './App'
44
import './index.css'
5-
import { Provider } from 'react-redux'
6-
import configureStore from './store'
7-
8-
const initialState = window.__INITIAL_STATE__ || {firebase: { authError: null }}
9-
10-
const store = configureStore(initialState)
115

126
ReactDOM.render(
13-
<Provider store={store}><App/></Provider>,
7+
<App />,
148
document.getElementById('root')
159
)

0 commit comments

Comments
 (0)