Skip to content

Commit

Permalink
Docs + react-redux-firebase.com
Browse files Browse the repository at this point in the history
* Docs are now part of repo (source downloaded from [gitbook.com version](https://www.gitbook.com/book/prescottprue/react-redux-firebase/details)) and published to [react-redux-firebase.com](http://react-redux-firebase.com)
* docs npm scripts added:
  * `docs:clean` - cleans docs folders
  * `docs:prepare` - prepares for doc generation (installs gitbook-cli)
  * `docs:api` - generates API Reference section of docs from comments in code using [`documentation.js`](http://documentation.js.org/)
  * `docs:build` - builds docs into gitbook
  * `docs: watch` - builds docs into gitbook while watching for changes
  * `docs: publish` - publish docs to `gh-pages` branch (pointed to [react-redux-firebase.com](http://react-redux-firebase.com) using CNAME file)
  • Loading branch information
prescottprue authored Dec 4, 2016
2 parents fe9150e + db6a5ad commit efbf8be
Show file tree
Hide file tree
Showing 32 changed files with 1,537 additions and 83 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ node_modules
examples/**/node_modules
dist
coverage
_book

# Logs
*.log

.DS_Store
**/**/.DS_Store
1 change: 1 addition & 0 deletions CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
react-redux-firebase.com
2 changes: 1 addition & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2016 Prescott Prue
Copyright (c) 2016-present Prescott Prue

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
43 changes: 27 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,10 @@

View deployed version of [Material Example](https://github.com/prescottprue/react-redux-firebase/tree/master/examples/complete/material) [here](https://redux-firebasev3.firebaseapp.com/)


## Features
- Integrated into redux
- Support for updating and nested props
- [Population capability](https://prescottprue.gitbooks.io/react-redux-firebase/content/populate.html) (similar to mongoose's `populate` or SQL's `JOIN`)
- [Population capability](http://react-redux-firebase.com/docs/populate) (similar to mongoose's `populate` or SQL's `JOIN`)
- Out of the box support for authentication (with auto load user profile)
- Firebase Storage Support
- Support small data ( using `value` ) or large datasets ( using `child_added`, `child_removed`, `child_changed` )
Expand Down Expand Up @@ -120,7 +119,7 @@ const { isLoaded, isEmpty, dataToJS } = helpers
todos: dataToJS(firebase, '/todos'),
})
)
class Todos extends Component {
export default class Todos extends Component {
static propTypes = {
todos: PropTypes.object,
firebase: PropTypes.object
Expand Down Expand Up @@ -161,7 +160,6 @@ class Todos extends Component {
)
}
}
export default Todos
```

Alternatively, if you choose not to use decorators:
Expand All @@ -179,8 +177,14 @@ export default connect(

```

## [API](https://prescottprue.gitbooks.io/react-redux-firebase/content/)
See [API Docs](https://prescottprue.gitbooks.io/react-redux-firebase/content/)
## [Documentation](http://react-redux-firebase.com)
See [react-redux-firebase.com](http://react-redux-firebase.com)

* [Getting Started](http://react-redux-firebase.com/docs/getting_started)
* [Auth](http://react-redux-firebase.com/docs/auth)
* [Queries](http://react-redux-firebase.com/docs/queries)
* [Populate](http://react-redux-firebase.com/docs/populate)
* [API Reference](http://react-redux-firebase.com/docs/api)

## [Examples](examples)

Expand All @@ -200,7 +204,11 @@ A simple example that was created using [create-react-app](https://github.com/fa

#### [Material App Example](examples/complete/material)

An example that user Material UI built on top of the output of [create-react-app](https://github.com/facebookincubator/create-react-app)'s eject command. Shows a list of todo items and allows you to add to them. This is what is deployed to [react-redux-firebase.firebaseapp.com](https://react-redux-firebase.firebaseapp.com/).
An example that user Material UI built on top of the output of [create-react-app](https://github.com/facebookincubator/create-react-app)'s eject command. Shows a list of todo items and allows you to add to them. This is what is deployed to [redux-firebasev3.firebaseapp.com](https://redux-firebasev3.firebaseapp.com/).

## Discussion

Join the [redux-firebase gitter](https://gitter.im/redux-firebase/Lobby).

## Using with `redux-thunk`
If you are using `redux-thunk`, make sure to set up your thunk middleware using it's redux-thunk's `withExtraArgument` method so that firebase is available within your actions. Here is an example `createStore` function that adds `getFirebase` as third argument along with a thunk that uses it:
Expand All @@ -214,15 +222,18 @@ import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import makeRootReducer from './reducers';

const fbConfig = {} // your firebase config

const config = {
userProfile: 'users',
enableLogging: false
}
const store = createStore(
makeRootReducer(),
initialState,
compose(
applyMiddleware([
thunk.withExtraArgument(getFirebase) // Pass getFirebase function as extra argument
]),
reactReduxFirebase(fbConfig, { userProfile: 'users', enableLogging: false })
reactReduxFirebase(fbConfig, )
)
);

Expand Down Expand Up @@ -273,17 +284,17 @@ const somethingEpic = (action$, store, getFirebase) =>
1. How is this different than [`redux-react-firebase`](https://github.com/tiberiuc/redux-react-firebase)?

This library was actually originally forked from redux-react-firebase, but adds extended functionality such as:
* [populate functionality](https://prescottprue.gitbooks.io/react-redux-firebase/content/populate.html) (similar to mongoDB or SQL JOIN)
* [`profileDecorator`](https://prescottprue.gitbooks.io/react-redux-firebase/content/config.html) - change format of profile stored on Firebase
* [`getFirebase`](https://prescottprue.gitbooks.io/react-redux-firebase/content/thunks.html) - access to firebase instance that fires actions when methods are called
* [integrations](https://prescottprue.gitbooks.io/react-redux-firebase/content/thunks.html) for [`redux-thunk`](https://github.com/gaearon/redux-thunk) and [`redux-observable`](https://redux-observable.js.org) - using `getFirebase`
* [access to firebase's `storage`](https://prescottprue.gitbooks.io/react-redux-firebase/content/storage.html) method`
* [populate functionality](http://react-redux-firebase.com/docs/populate) (similar to mongoDB or SQL JOIN)
* [`profileDecorator`](http://react-redux-firebase.com/docs/config) - change format of profile stored on Firebase
* [`getFirebase`](http://react-redux-firebase.com/docs/thunks) - access to firebase instance that fires actions when methods are called
* [integrations](http://react-redux-firebase.com/docs/thunks) for [`redux-thunk`](https://github.com/gaearon/redux-thunk) and [`redux-observable`](https://redux-observable.js.org) - using `getFirebase`
* [access to firebase's `storage`](http://react-redux-firebase.com/docs/storage) method`
* `uniqueSet` method helper for only setting if location doesn't already exist
* Object or String notation for paths (`[{ path: '/todos' }]` equivalent to `['/todos']`)
* Action Types and other Constants are exposed for external usage (such as `redux-observable`)
* Action Types and other Constants are exposed for external usage (such as with `redux-observable`)

#### Well why not combine?
I have been talking to the author of [redux-react-firebase]() about combining, but we are not sure that the users of both want that at this point. Join us on [the redux-firebase gitter](https://gitter.im/redux-firebase/Lobby) if you haven't already since a ton of this type of discussion goes on there.
I have been talking to the author of [redux-react-firebase](https://github.com/tiberiuc/redux-react-firebase) about combining, but we are not sure that the users of both want that at this point. Join us on the [redux-firebase gitter](https://gitter.im/redux-firebase/Lobby) if you haven't already since a ton of this type of discussion goes on there.

**Bottom line:** The author of redux-react-firebase was absent when functionality was needed by me and others, so this library was created.

Expand Down
20 changes: 20 additions & 0 deletions SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Summary

* [Read Me](/README.md)
* [Getting Started](/docs/getting_started.md)
* [Auth](/docs/auth.md)
* [Queries](/docs/queries.md)
* [Populate](/docs/populate.md)
* [Storage](/docs/storage.md)
* [Recipes](/docs/recipes/README.md)
* [Upload](/docs/recipes/upload.md)
* [Actions](/docs/recipes/actions.md)
* [Thunks](/docs/recipes/thunks.md)
* [API Reference](/docs/api/README.md)
* [constants](/docs/api/constants.md)
* [firebaseConnect](/docs/api/connect.md)
* [firebaseStateReducer](/docs/api/reducer.md)
* [reactReduxFirebase](/docs/api/compose.md)
* [helpers](/docs/api/helpers.md)
* [Roadmap](/docs/roadmap.md)
* [Contributing](/docs/contributing.md)
47 changes: 47 additions & 0 deletions bin/api-docs-generate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
const exec = require('child_process').exec
const files = [
{
src: 'connect.js',
dest: 'connect.md'
},
{
src: 'compose.js',
dest: 'compose.md'
},
{
src: 'helpers.js',
dest: 'helpers.md'
},
{
src: 'reducer.js',
dest: 'reducer.md'
},
{
src: 'constants.js',
dest: 'constants.md'
}
]
const pathToDocumentationJs = 'node_modules/documentation/bin/documentation.js'

const generateDocForFile = (file) => {
return new Promise((resolve, reject) => {
exec(`${pathToDocumentationJs} build src/${file.src} -f md -o docs/api/${file.dest} --shallow`, (error, stdout) => {
if (error !== null) {
return reject(error)
}
resolve(stdout)
})
})
}

(function () {
files.forEach(file => {
generateDocForFile(file)
.then((res) => {
console.log('Successfully generated', file) // eslint-disable-line no-console
})
.catch((err) => {
console.log('error generating doc: ', err) // eslint-disable-line no-console
})
})
})()
19 changes: 19 additions & 0 deletions book.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"gitbook": ">=3.2.1",
"title": "React Redux Firebase",
"plugins": ["edit-link", "prism", "-highlight", "github", "anchorjs"],
"pluginsConfig": {
"edit-link": {
"base": "https://github.com/prescottprue/react-redux-firebase/tree/master",
"label": "Edit This Page"
},
"github": {
"url": "https://github.com/prescottprue/react-redux-firebase/"
},
"theme-default": {
"styles": {
"website": "build/gitbook.css"
}
}
}
}
4 changes: 4 additions & 0 deletions docs/GLOSSARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Glossary

## ## `profileDecorator`

20 changes: 20 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Summary

* [Read Me](/README.md)
* [Getting Started](/docs/getting_started.md)
* [Auth](/docs/auth.md)
* [Queries](/docs/queries.md)
* [Populate](/docs/populate.md)
* [Storage](/docs/storage.md)
* [Recipes](/docs/recipes/README.md)
* [Upload](/docs/recipes/upload.md)
* [Actions](/docs/recipes/actions.md)
* [Thunks](/docs/recipes/thunks.md)
* [API Reference](/docs/api/README.md)
* [constants](/docs/api/constants.md)
* [firebaseConnect](/docs/api/connect.md)
* [firebaseStateReducer](/docs/api/reducer.md)
* [reactReduxFirebase](/docs/api/compose.md)
* [helpers](/docs/api/helpers.md)
* [Roadmap](/docs/roadmap.md)
* [Contributing](/docs/contributing.md)
25 changes: 25 additions & 0 deletions docs/api/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# API Reference

Just like [redux](http://redux.js.org/docs/api/index.html), the react-redux-firebase API surface is small.

## Top-Level Exports
* [firebaseConnect](/docs/api/connect.md)
* [firebaseStateReducer](/docs/api/reducer.md)
* [reactReduxFirebase](/docs/api/compose.md)
* [constants](/docs/api/constants.md)
* [actionTypes](/docs/api/constants.md)
* [helpers](/docs/api/helpers.md)

## Importing

Every function described above is a top-level export. You can import any of them like this:

### ES6
```js
import { firebaseConnect } from 'react-redux-firebase'
```

### ES5 (CommonJS)
```js
var firebaseConnect = require('react-redux-firebase').firebaseConnect
```
51 changes: 51 additions & 0 deletions docs/api/compose.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

# reactReduxFirebase

Middleware that handles configuration (placed in redux's `compose` call)

**Parameters**

- `fbConfig` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Object containing Firebase config including databaseURL
- `fbConfig.apiKey` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Firebase apiKey
- `fbConfig.authDomain` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Firebase auth domain
- `fbConfig.databaseURL` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Firebase database url
- `fbConfig.storageBucket` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Firebase storage bucket
- `config` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Containing react-redux-firebase specific config such as userProfile
- `config.userProfile` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Location on firebase to store user profiles
- `config.enableLogging` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Location on firebase to store user profiles. default: `false`
- `config.profileDecorator` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Location on firebase to store user profiles. default: `false`
- `config.updateProfileOnLogin` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to update profile when logging in. default: `false`
- `config.profileParamsToPopulate` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to update profile when logging in. default: `false`

**Examples**

_Data_

```javascript
import { createStore, compose } from 'redux'
import { reactReduxFirebase } from 'react-redux-firebase'

// Firebase config
const fbConfig = {
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>'
}

// React Redux Firebase Config
const config = {
userProfile: 'users'
}

// Add react-redux-firebase to compose
const createStoreWithFirebase = compose(
reactReduxFirebase(fbConfig, config),
)(createStore)

// Use Function later to create store
const store = createStoreWithFirebase(rootReducer, initialState)
```

Returns **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** That accepts a component a returns a wrapped version of component
56 changes: 56 additions & 0 deletions docs/api/connect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

# firebaseConnect

**Extends React.Component**

Higher Order Component that automatically listens/unListens
to provided firebase paths using React's Lifecycle hooks.

**Parameters**

- `watchArray` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)** Array of objects or strings for paths to sync from Firebase

**Examples**

_Basic_

```javascript
// this.props.firebase set on App component as firebase object with helpers
import { firebaseConnect } from 'react-redux-firebase'
export default firebaseConnect()(App)
```

_Paths_

```javascript
import { connect } from 'react-redux'
import { firebaseConnect, helpers } from 'react-redux-firebase'
const { pathToJS } = helpers

// pass todos list from redux as this.props.todosList
export default connect(({ firebase }) => ({
profile: pathToJS(firebase, 'profile'),
auth: pathToJS(firebase, 'auth')
}))(App)
```

_Data_

```javascript
import { connect } from 'react-redux'
import { firebaseConnect, helpers } from 'react-redux-firebase'
const { dataToJS } = helpers

// sync /todos from firebase into redux
const fbWrapped = firebaseConnect([
'todos'
])(App)

// pass todos list from redux as this.props.todosList
export default connect(({ firebase }) => ({
todosList: dataToJS(firebase, 'todos')
}))(fbWrapped)
```

Returns **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** that accepts a component to wrap and returns the wrapped component
Loading

0 comments on commit efbf8be

Please sign in to comment.