v3.5.0 (#947)

* feat(storage): upload file metadata to existing firestore document (#936) - @JonnyBoy333
* chore(deps): update babel dev dependencies to 7.10.1
* feat(ci): add creating of release to publish workflow

Co-authored-by: Jon <[email protected]>

Author: prescottprue

.github/workflows/publish.yml

@@ -34,20 +34,15 @@ jobs:
 
       - name: Install Dependencies
         if: steps.check.outputs.changed == 'true'
-        env:
-          CI: true
         run: npm ci
 
       - name: Check For Lint
         if: steps.check.outputs.changed == 'true'
-        env:
-          CI: true
         run: npm run lint
 
       - name: Run Unit Tests + Coverage
         if: steps.check.outputs.changed == 'true'
         env:
-          CI: true
           CODE_CLIMATE: ${{ secrets.CODE_CLIMATE }}
         run: npm run test:cov
 
@@ -57,22 +52,27 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_REF: ${{ github.ref }}
         run: |
-          export GIT_BRANCH=${GITHUB_REF##*/}
-          export PUBLISH_FLAG=$(if [ "$GITHUB_REF" != 'refs/heads/master' ]; then eval echo '--tag $GIT_BRANCH'; else echo ''; fi;)
-          npm publish $PUBLISH_FLAG
-
-      - name: Archive Build Artifact
-        if: steps.check.outputs.changed == 'true'
-        uses: actions/upload-artifact@master
-        with:
-          name: build
-          path: lib
+          gitBranch=${GITHUB_REF##*/}
+          publishFlag=$(if [ "$GITHUB_REF" != 'refs/heads/master' ]; then eval echo '--tag $gitBranch'; else echo ''; fi;)
+          echo "::set-env name=PACKAGE_VERSION::$(cat package.json | jq -r '.version')"
+          npm publish $publishFlag
 
       - name: Upload Coverage
         if: steps.check.outputs.changed == 'true'
         env:
-          CI: true
           CODE_COV: ${{ secrets.CODE_COV }}
         # Upload to Code Cover. Curl used in place of codecov/codecov-action
         # due to long build time. See https://github.com/codecov/codecov-action/issues/21
         run: curl -s https://codecov.io/bash | bash -s -- -t $CODE_COV
+      
+      - name: Create Release
+        if: github.ref == 'refs/heads/master' && steps.check.outputs.changed == 'true'
+        id: create_release
+        uses: actions/create-release@latest
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        with:
+          tag_name: v${{ env.PACKAGE_VERSION }}
+          release_name: v${{ env.PACKAGE_VERSION }}
+          draft: false
+          prerelease: false

.github/workflows/verify.yml

@@ -25,26 +25,20 @@ jobs:
           key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
 
       - name: Install Dependencies
-        env:
-          CI: true
         run: npm ci
 
       - name: Check For Lint
-        env:
-          CI: true
         run: npm run lint
 
       - name: Run Unit Tests + Coverage
-        if: success()
         run: npm run test:cov
 
       - name: Run Build
         run: npm run build
 
       - name: Upload Coverage
-        if: matrix.node-version == '10.x' && success()
+        if: matrix.node-version == '10.x'
         env:
-          CI: true
           CODE_COV: ${{ secrets.CODE_COV }}
         # Upload to codecov.io. Curl used in place of codecov/codecov-action
         # due to long build time. See https://github.com/codecov/codecov-action/issues/21

README.md

@@ -20,15 +20,15 @@ The [Material Example](https://github.com/prescottprue/react-redux-firebase/tree
 
 ## Features
 
-* Out of the box support for authentication (with auto loading user profile from database/firestore)
-* Full Firebase Platform Support Including Real Time Database, Firestore, and Storage
-* Automatic binding/unbinding of listeners through React Hooks (`useFirebaseConnect`, `useFirestoreConnect`) or Higher Order Components (`firebaseConnect` and `firestoreConnect`)
-* [Population capability](http://react-redux-firebase.com/docs/populate) (similar to mongoose's `populate` or SQL's `JOIN`)
-* Support small data ( using `value` ) or large datasets ( using `child_added`, `child_removed`, `child_changed` )
-* Multiple queries types supported including `orderByChild`, `orderByKey`, `orderByValue`, `orderByPriority`, `limitToLast`, `limitToFirst`, `startAt`, `endAt`, `equalTo`
-* Tons of examples of integrations including [`redux-thunk`](https://github.com/gaearon/redux-thunk) and [`redux-observable`](https://redux-observable.js.org/)
-* Server Side Rendering Support
-* [`react-native` support](http://react-redux-firebase.com/docs/integrations/react-native.html) using [native modules](http://react-redux-firebase.com/docs/integrations/react-native.html#native-modules) or [web sdk](http://react-redux-firebase.com/docs/integrations/react-native.html#jsweb)
+- Out of the box support for authentication (with auto loading user profile from database/firestore)
+- Full Firebase Platform Support Including Real Time Database, Firestore, and Storage
+- Automatic binding/unbinding of listeners through React Hooks (`useFirebaseConnect`, `useFirestoreConnect`) or Higher Order Components (`firebaseConnect` and `firestoreConnect`)
+- [Population capability](http://react-redux-firebase.com/docs/populate) (similar to mongoose's `populate` or SQL's `JOIN`)
+- Support small data ( using `value` ) or large datasets ( using `child_added`, `child_removed`, `child_changed` )
+- Multiple queries types supported including `orderByChild`, `orderByKey`, `orderByValue`, `orderByPriority`, `limitToLast`, `limitToFirst`, `startAt`, `endAt`, `equalTo`
+- Tons of examples of integrations including [`redux-thunk`](https://github.com/gaearon/redux-thunk) and [`redux-observable`](https://redux-observable.js.org/)
+- Server Side Rendering Support
+- [`react-native` support](http://react-redux-firebase.com/docs/integrations/react-native.html) using [native modules](http://react-redux-firebase.com/docs/integrations/react-native.html#native-modules) or [web sdk](http://react-redux-firebase.com/docs/integrations/react-native.html#jsweb)
 
 ## Installation
 
@@ -147,7 +147,7 @@ export default function Todos() {
     'todos' // { path: '/todos' } // object notation
   ])
 
-  const todos = useSelector(state => state.firebase.ordered.todos)
+  const todos = useSelector((state) => state.firebase.ordered.todos)
 
   if (!isLoaded(todos)) {
     return <div>Loading...</div>
@@ -219,7 +219,7 @@ import { useSelector } from 'react-redux'
 import { useFirebase, isLoaded, isEmpty } from 'react-redux-firebase'
 
 function TodosList() {
-  const todos = useSelector(state => state.firebase.ordered.todos)
+  const todos = useSelector((state) => state.firebase.ordered.todos)
 
   if (!isLoaded(todos)) {
     return <div>Loading...</div>
@@ -268,21 +268,15 @@ Currently `react-redux-firebase` still handles auth when using [`redux-firestore
 
 See full documentation at [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)
-* [Firestore](http://react-redux-firebase.com/docs/firestore)
-* [Populate](http://react-redux-firebase.com/docs/populate)
-* [API Reference](http://react-redux-firebase.com/docs/api)
+- [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)
+- [Firestore](http://react-redux-firebase.com/docs/firestore)
+- [Populate](http://react-redux-firebase.com/docs/populate)
+- [API Reference](http://react-redux-firebase.com/docs/api)
 
 ## [Examples](examples)
 
-### Real World Applications
-
-* [fireadmin.io](http://fireadmin.io) - Firebase Instance Management Tool (source [available here](https://github.com/prescottprue/fireadmin))
-
-If you would like a project added to this section please reach out [over gitter][gitter-url]
-
 ### [Examples Folder](examples)
 
 Examples folder is broken into two categories [snippets](examples/snippets) and [complete](examples/complete). `/complete` contains full applications that can be run as is, where as `/snippets` contains small amounts of code to highlight specific functionality (dev tools and deps not included).
@@ -311,16 +305,16 @@ Join us on the [redux-firebase gitter](https://gitter.im/redux-firebase/Lobby).
 
 View docs for recipes on integrations with:
 
-* [redux-firestore](http://react-redux-firebase.com/docs/firestore.html)
-* [redux-thunk](http://react-redux-firebase.com/docs/integrations/thunks.html)
-* [reselect](http://react-redux-firebase.com/docs/integrations/integrations/reselect.html)
-* [redux-observable](http://react-redux-firebase.com/docs/integrations/redux-observable.html)
-* [redux-saga](http://react-redux-firebase.com/docs/integrations/redux-saga.html)
-* [redux-form](http://react-redux-firebase.com/docs/integrations/redux-form.html)
-* [redux-auth-wrapper](http://react-redux-firebase.com/docs/recipes/routing.html#advanced)
-* [redux-persist](http://react-redux-firebase.com/docs/integrations/redux-persist.html)
-* [react-native](http://react-redux-firebase.com/docs/integrations/react-native.html)
-* [react-native-firebase](http://react-redux-firebase.com/docs/integrations/react-native.html#native-modules)
+- [redux-firestore](http://react-redux-firebase.com/docs/firestore.html)
+- [redux-thunk](http://react-redux-firebase.com/docs/integrations/thunks.html)
+- [reselect](http://react-redux-firebase.com/docs/integrations/integrations/reselect.html)
+- [redux-observable](http://react-redux-firebase.com/docs/integrations/redux-observable.html)
+- [redux-saga](http://react-redux-firebase.com/docs/integrations/redux-saga.html)
+- [redux-form](http://react-redux-firebase.com/docs/integrations/redux-form.html)
+- [redux-auth-wrapper](http://react-redux-firebase.com/docs/recipes/routing.html#advanced)
+- [redux-persist](http://react-redux-firebase.com/docs/integrations/redux-persist.html)
+- [react-native](http://react-redux-firebase.com/docs/integrations/react-native.html)
+- [react-native-firebase](http://react-redux-firebase.com/docs/integrations/react-native.html#native-modules)
 
 ## Starting A Project
 
@@ -353,7 +347,9 @@ It can be imported like so:
 <script src="../node_modules/redux-firestore/dist/redux-firestore.min.js"></script>
 <!-- or through cdn: <script src="https://unpkg.com/react-redux-firebase@latest/dist/react-redux-firebase.min.js"></script> -->
 <!-- or through cdn: <script src="https://unpkg.com/redux-firestore@latest/dist/redux-firestore.min.js"></script> -->
-<script>console.log('react redux firebase:', window.ReactReduxFirebase)</script>
+<script>
+  console.log('react redux firebase:', window.ReactReduxFirebase)
+</script>
 ```
 
 Note: In an effort to keep things simple, the wording from this explanation was modeled after [the installation section of the Redux Docs](https://redux.js.org/#installation).
@@ -364,12 +360,6 @@ This project exists thanks to all the people who contribute.
 
 <a href="https://github.com/prescottprue/react-redux-firebase/graphs/contributors"><img src="https://opencollective.com/react-redux-firebase/contributors.svg?width=890" /></a>
 
-## Backers
-
-Thank you to all our backers! 🙏
-
-* [Side Inc.](https://github.com/reside-eng)
-
 [npm-image]: https://img.shields.io/npm/v/react-redux-firebase.svg?style=flat-square
 [npm-url]: https://npmjs.org/package/react-redux-firebase
 [npm-downloads-image]: https://img.shields.io/npm/dm/react-redux-firebase.svg?style=flat-square

docs/recipes/upload.md

@@ -7,12 +7,12 @@ This example component uses `react-dropzone` to allow for drag/drop uploading di
 **NOTE:** The third argument provided to the `uploadFiles` and `deleteFiles` calls below is the database path where File Metadata will be written/deleted from. This is out of convenience only, simply remove the third argument if you don't want metadata written/deleted to/from database.
 
 ```js
-import React from 'react';
-import PropTypes from 'prop-types';
-import { map } from 'lodash';
-import { useSelector } from 'react-redux';
-import { useFirebase, useFirebaseConnect } from 'react-redux-firebase';
-import Dropzone from 'react-dropzone';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { map } from 'lodash'
+import { useSelector } from 'react-redux'
+import { useFirebase, useFirebaseConnect } from 'react-redux-firebase'
+import Dropzone from 'react-dropzone'
 
 // Path within Database for metadata (also used for file Storage path)
 const filesPath = 'uploadedFiles'
@@ -22,10 +22,10 @@ export default function Uploader({ uploadedFiles, onFileDelete, onFilesDrop }) {
   const uploadedFiles = useSelector(({ firebase: { data } }) => data[filesPath])
 
   function onFilesDrop(files) {
-    return firebase.uploadFiles(filesPath, files, filesPath);
+    return firebase.uploadFiles(filesPath, files, filesPath)
   }
   function onFileDelete(file, key) {
-    return firebase.deleteFile(file.fullPath, `${filesPath}/${key}`);
+    return firebase.deleteFile(file.fullPath, `${filesPath}/${key}`)
   }
 
   return (
@@ -39,13 +39,15 @@ export default function Uploader({ uploadedFiles, onFileDelete, onFilesDrop }) {
           {map(uploadedFiles, (file, key) => (
             <div key={file.name + key}>
               <span>{file.name}</span>
-              <button onClick={() => onFileDelete(file, key)}>Delete File</button>
+              <button onClick={() => onFileDelete(file, key)}>
+                Delete File
+              </button>
             </div>
           ))}
         </div>
       )}
     </div>
-  );
+  )
 }
 ```
 
@@ -74,7 +76,9 @@ When uploading files as in the above example, you can modify how the file's meta
 const config = {
   fileMetadataFactory: (uploadRes, firebase, metadata, downloadURL) => {
     // upload response from Firebase's storage upload
-    const { metadata: { name, fullPath } } = uploadRes
+    const {
+      metadata: { name, fullPath }
+    } = uploadRes
     // default factory includes name, fullPath, downloadURL
     return {
       name,
@@ -84,3 +88,23 @@ const config = {
   }
 }
 ```
+
+### Update Firestore Document
+
+If using Firestore for you database and you would like to update a specific document after a file has uploaded you can specify the `options.documentId` property. In this example the document with id `12345` in the `contacts` collection will have the `fileUrl` property updated with the file's download url. More details can be found in the [upload file](https://firebase.google.com/docs/storage/web/upload-files#add_file_metadata) section of the Firebase docs.
+
+```js
+const storagePath = 'contacts/sleepygary'
+const dbPath = 'contacts'
+
+firebase
+  .uploadFile(storagePath, file, dbPath, {
+    metadataFactory: (uploadRes, firebase, metadata, downloadURL) => {
+      return { fileUrl: downloadURL }
+    },
+    documentId: '12345'
+  })
+  .then(() => {
+    console.log('File uploaded successfully')
+  })
+```