Skip to content

Commit d5af433

Browse files
author
Scott Prue
committed
fix(docs): simplify and add comment to stateBasedQuery example snippet
1 parent fb6c255 commit d5af433

File tree

13 files changed

+196
-234
lines changed

13 files changed

+196
-234
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Home from './Home'
44
import configureStore from './store'
55
import './App.css'
66

7-
const initialState = window.__INITIAL_STATE__ // set initial state here
7+
const initialState = window && window.__INITIAL_STATE__ // set initial state here
88
const store = configureStore(initialState)
99

1010
export default () => (

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

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,45 +9,47 @@ import {
99
} from 'react-redux-firebase'
1010
import logo from './logo.svg'
1111
import TodoItem from './TodoItem'
12+
import NewTodo from './NewTodo'
1213
import './App.css'
13-
import NewTodo from './NewTodo';
1414

15-
const Home = ({ firebase, todos }) => (
16-
<div className='App'>
17-
<div className='App-header'>
18-
<h2>react-redux-firebase demo</h2>
19-
<img src={logo} className='App-logo' alt='logo' />
15+
function Home({ todos }) {
16+
return (
17+
<div className='App'>
18+
<div className='App-header'>
19+
<h2>react-redux-firebase demo</h2>
20+
<img src={logo} className='App-logo' alt='logo' />
21+
</div>
22+
<div className='App-todos'>
23+
<h4>
24+
Loaded From
25+
<span className='App-Url'>
26+
<a href='https://redux-firebasev3.firebaseio.com/'>
27+
redux-firebasev3.firebaseio.com
28+
</a>
29+
</span>
30+
</h4>
31+
<h4>Todos List</h4>
32+
{
33+
!isLoaded(todos)
34+
? 'Loading'
35+
: isEmpty(todos)
36+
? 'Todo list is empty'
37+
: todos.reverse().map((todo, ind) => (
38+
<TodoItem
39+
key={`${todo.key}-${ind}`}
40+
id={todo.key}
41+
todo={todo.value}
42+
/>
43+
))
44+
}
45+
<NewTodo />
46+
</div>
2047
</div>
21-
<div className='App-todos'>
22-
<h4>
23-
Loaded From
24-
<span className='App-Url'>
25-
<a href='https://redux-firebasev3.firebaseio.com/'>
26-
redux-firebasev3.firebaseio.com
27-
</a>
28-
</span>
29-
</h4>
30-
<h4>Todos List</h4>
31-
{
32-
!isLoaded(todos)
33-
? 'Loading'
34-
: isEmpty(todos)
35-
? 'Todo list is empty'
36-
: todos.reverse().map((todo, ind) => (
37-
<TodoItem
38-
key={`${todo.key}-${ind}`}
39-
id={todo.key}
40-
todo={todo.value}
41-
/>
42-
))
43-
}
44-
<NewTodo />
45-
</div>
46-
</div>
47-
)
48+
)
49+
}
4850

4951
Home.propTypes = {
50-
firebase: PropTypes.object.isRequired
52+
todos: PropTypes.array
5153
}
5254

5355
const enhance = compose(

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { combineReducers } from 'redux'
2-
import { firebaseStateReducer as firebase } from 'react-redux-firebase'
2+
import { reducer as firebase } from 'react-redux-firebase'
3+
// import { reducer as firestore } from 'react-redux-firebase'
34

45
const rootReducer = combineReducers({
5-
firebase
6+
firebase,
7+
// firestore // add this for firestore
68
})
79

810
export default rootReducer

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,12 @@ export default function configureStore (initialState, history) {
1919
}
2020

2121
const createStoreWithMiddleware = compose(
22+
// enhance store with store.firebase
2223
reactReduxFirebase(firebase, reduxFirebaseConfig),
24+
// enhance store with store.firestore
2325
reduxFirestore(firebase),
24-
typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
26+
// support redux devtools
27+
typeof window === 'object' && typeof window.__REDUX_DEVTOOLS_EXTENSION__ === 'function' ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
2528
)(createStore)
2629
const store = createStoreWithMiddleware(rootReducer)
2730

‎examples/snippets/multipleQueries/App.js‎

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,57 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { map } from 'lodash'
44
import { connect } from 'react-redux'
5+
import { compose } from 'redux'
56
import { firebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'
67
import TodoItem from './TodoItem'
78

8-
const renderList = (list) =>
9-
!isLoaded(list)
9+
function renderList(list) {
10+
return !isLoaded(list)
1011
? 'Loading'
11-
: (isEmpty(list))
12+
: isEmpty(list)
1213
? 'Todo list is empty'
13-
: map(list, (todo, id) =>
14-
<TodoItem key={id} id={id} todo={todo} />
15-
)
14+
: map(list, (todo, id) => <TodoItem key={id} id={id} todo={todo} />)
15+
}
1616

17-
const MultipleQueries = ({ incompleteTodos, completeTodos }) => (
18-
<div>
19-
<div>
20-
<h2>react-redux-firebase multiple queries demo</h2>
21-
</div>
17+
function Home({ incompleteTodos, completeTodos }) {
18+
return (
2219
<div>
23-
<h4>Incomplete Todos</h4>
24-
{renderList(incompleteTodos)}
25-
<h4>Complete Todos</h4>
26-
{renderList(completeTodos)}
20+
<div>
21+
<h2>react-redux-firebase multiple queries demo</h2>
22+
</div>
23+
<div>
24+
<h4>Incomplete Todos</h4>
25+
{renderList(incompleteTodos)}
26+
<h4>Complete Todos</h4>
27+
{renderList(completeTodos)}
28+
</div>
2729
</div>
28-
</div>
29-
)
30+
)
31+
}
3032

31-
MultipleQueries.propTypes = {
32-
myProjects: PropTypes.object,
33-
anonymousProjects: PropTypes.object
33+
Home.propTypes = {
34+
incompleteTodos: PropTypes.object,
35+
completeTodos: PropTypes.object
3436
}
3537

36-
export default compose(
38+
const enhance = compose(
3739
firebaseConnect([
3840
{
3941
path: 'todos',
4042
storeAs: 'incompleteTodos',
41-
queryParams: [ 'orderByChild=done', 'equalTo=true'] },
43+
queryParams: ['orderByChild=done', 'equalTo=true']
44+
},
4245
{
4346
path: 'todos',
4447
storeAs: 'completeTodos',
45-
queryParams: [ 'orderByChild=done', 'equalTo=false']
46-
},
48+
queryParams: ['orderByChild=done', 'equalTo=false']
49+
}
4750
]),
48-
connect(
49-
({ firebase: { data } }) => ({
50-
incompleteTodos: data['incompleteTodos'], // path matches storeAs
51-
completeTodos: data['completeTodos'] // path matches storeAs
52-
})
53-
)
51+
connect(({ firebase: { data } }) => ({
52+
incompleteTodos: data['incompleteTodos'], // path matches storeAs
53+
completeTodos: data['completeTodos'] // path matches storeAs
54+
}))
5455
)
56+
57+
export default enhance(Home)

‎examples/snippets/populates/App.js‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,55 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { map } from 'lodash'
44
import { compose } from 'redux'
55
import { connect } from 'react-redux'
6-
import { firebaseConnect, populate, isLoaded } from 'react-redux-firebase'
6+
import {
7+
firebaseConnect,
8+
populate,
9+
isLoaded,
10+
isEmpty
11+
} from 'react-redux-firebase'
712

813
// NOTE: In real application don't forget to use Provider from react-redux
914
// or firebaseConnect/withFirebase will not work
10-
const Projects = ({ projects }) => (
11-
<div>
12-
<h2>react-redux-firebase populate snippet</h2>
15+
function Projects({ projects }) {
16+
return (
1317
<div>
14-
<h4>Projects List</h4>
15-
{
16-
!isLoaded(projects)
18+
<h2>react-redux-firebase populate snippet</h2>
19+
<div>
20+
<h4>Projects List</h4>
21+
{!isLoaded(projects)
1722
? 'Loading'
1823
: isEmpty(projects)
1924
? 'Todo list is empty'
2025
: map(projects, (project, id) => (
2126
<div>
2227
Name: {project.name}
23-
Owner: { project.owner.displayName }
28+
Owner: {project.owner.displayName}
2429
</div>
25-
))
26-
}
30+
))}
31+
</div>
2732
</div>
28-
</div>
29-
)
33+
)
34+
}
35+
36+
Projects.propTypes = {
37+
projects: PropTypes.object
38+
}
3039

3140
const populates = [
32-
{ child: 'owner', root: 'users' },
41+
{ child: 'owner', root: 'users' }
3342
// or if you want a param of the populate child such as user's display name
3443
// { child: 'owner', root: 'users', childParam: 'displayName' }
3544
]
3645

37-
export default compose(
46+
const enhance = compose(
3847
// gather projects and matching owners from firebase and place into redux
39-
firebaseConnect([
40-
{ path: 'projects', populates },
41-
]),
48+
firebaseConnect(() => [{ path: 'projects', populates }]),
4249
// projects with owner populated from redux into component props
43-
connect(
44-
({ firebase }) => ({
45-
projects: populate(firebase, 'projects', populates),
46-
})
47-
)
48-
)(Projects)
50+
connect(state => ({
51+
projects: populate(state.firebase, 'projects', populates)
52+
}))
53+
)
54+
55+
export default enhance(Projects)

‎examples/snippets/populates/README.md‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,28 @@
22

33
This example shows using data from redux state to be used in queries. A good example of this is querying based on the current user's UID.
44

5-
**Note** Example does not use routing, which is what will commonly be used when creating a full application. For how to build with routing, please view [the routing recipes section of the docs.](/docs/recipes/routing.md/)
5+
**Note** Example does not use routing, which is what will commonly be used when creating a full application. For how to build with routing, please view [the routing recipes section of the docs.](https://react-redux-firebase.com/docs/recipes/routing.html)
66

77
## What It Does
88

99
1. Top level component uses `firebaseConnect` function to set a listener for the `projects` path on firebase. When the listener updates it also goes and gets the object from the `users` path that matches the owner from each project. This will be used in the next step, but for now the data has been loaded into redux.
10-
```js
11-
const populates = [
12-
{ child: 'owner', root: 'users' },
13-
]
1410

15-
firebaseConnect([
16-
{ path: 'projects', populates },
17-
])
18-
```
11+
```js
12+
const populates = [
13+
{ child: 'owner', root: 'users' },
14+
]
15+
16+
firebaseConnect([
17+
{ path: 'projects', populates },
18+
])
19+
```
1920

2021
1. Next is the `connect` HOC which allows us to grab from redux state and pass that data in as props to the component. In this case we are going to get projects with the owner parameter on each project replaced with the matching user:
2122

22-
```js
23-
connect(
24-
({ firebase }) => ({
25-
projects: populate(firebase, 'projects', populates),
26-
})
27-
)
28-
```
23+
```js
24+
connect((state) => ({
25+
projects: populate(state.firebase, 'projects', populates),
26+
}))
27+
```
2928

3029
1. `isLoaded` can be used as usual to wait for data to be loaded. The projects list has the owner parameter "populated" from users.

‎examples/snippets/stateBasedQuery/App.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎examples/snippets/stateBasedQuery/Home.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,27 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import { connect } from 'react-redux'
44
import { isLoaded, isEmpty } from 'react-redux-firebase'
5+
import Todos from './Todos'
6+
import LoginView from './LoginView'
57

6-
const Home = ({ auth }) => {
8+
function Home({ auth }) {
79
// handle initial loading of auth
810
if (!isLoaded(auth)) {
911
return <div>Loading...</div>
1012
}
1113

14+
// User is not logged in, show login view
1215
if (isEmpty(auth)) {
1316
return <LoginView />
1417
}
1518

16-
return <TodosView auth={auth} />
19+
return <Todos uid={auth.uid} />
1720
}
1821

1922
Home.propTypes = {
2023
auth: PropTypes.object
2124
}
2225

23-
export default connect(
24-
({ firebase: { auth } }) => ({ auth })
25-
)(Home)
26+
export default connect(state => ({
27+
auth: state.firebase.auth
28+
}))(Home)

0 commit comments

Comments
 (0)