Ionic Framework App using React Firebase Hooks
Tags: firebase, ionic, reacthooks, javascript
Published: 2019-10-15 01:51:22

---
title: Ionic Framework App using React Firebase Hooks
published: true
description: Sample app integrating firebase with a react application using react hooks api and React Firebase Hooks - A set of reusable react hooks for Firebase.
tags: #firebase #ionic #reacthooks #javascript
series: Ionic Framework & Firebase React Hooks
---

> Please checkout and subscribe to my video content on YouTube. Feel free to leave comments and suggestions for what content you would like to see. 
[YouTube  Channel](https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg)

### Overview 
Sample app integrating firebase with a react application using react hooks api and [React Firebase Hooks](https://github.com/CSFrequency/react-firebase-hooks) - A set of reusable [react hooks](https://reactjs.org/docs/hooks-intro.html) for [Firebase](https://firebase.google.com/docs/web/setup?authuser=0).

> This is a follow-up to the previous article using react-hook for manipulating an array of object in an Ionic Framework / React JS Application: [See Previous Article](https://dev.to/aaronksaunders/react-ionic-framework-and-hooks-5135)

<div style="padding-right: 10px">
<img src="https://thepracticaldev.s3.amazonaws.com/i/6qkwlb2g35uo8bzgbeg3.png" width=400/>
  </div>
</div>


## Getting A Collecting of Things

This is from firebase-hooks, it allows us to query all of the item from the `things` collection in the database in descending order based on the creation data. the `value` will containing the results of the query that we will loop through to render the list items

```javascript
const [value, loading, error] = useCollection(
  firebase
    .firestore()
    .collection("things")
    .orderBy("createdOn", "desc"),
  {
    snapshotListenOptions: { includeMetadataChanges: true }
  }
);
```

## Getting a Specific Thing

We use the firebase-hooks to get a specific object using the id of the object we want to retrieve

```javascript
// get a document if there is an initial value
const [value, loading, error] = useDocument(
  firebase.firestore().doc("things/" + objectId),
  {
    snapshotListenOptions: { includeMetadataChanges: true }
  }
);
```

## Adding Or Updating a Specific Thing

if editing then we use the firebase-hooks to get the specific object using the
`initialValue` property that is passed to the component

```javascript
// get a document if there is an initial value
const [value, loading, error] = useDocument(
  firebase.firestore().doc("things/" + initialValue),
  {
    snapshotListenOptions: { includeMetadataChanges: true }
  }
);
```

When saving the thing, determine if it is a new object or an existing object by checking to see if there was an `initialValue` provided as a property. If there was, then we have an object id so we need to update the object and not create a new object

```javascript
/**
 * on save determine if it is a new object or an existing object
 * by check to see if there was an initial value provided
 */
const onSave = async () => {
  let collectionRef = firebase.firestore().collection("things");

  if (initialValue) {
    await collectionRef
      .doc(initialValue)
      .set({ name: thing, updatedOn: new Date().getTime() }, { merge: true });
    setThing("");
    clear();
  } else {
    await collectionRef.add({ name: thing, createdOn: new Date().getTime() });
    setThing("");
    clear();
  }
};
```

## Deleting A Specific Thing

There is no firebase-hook to delete an object, we just used the firebase javascript api to remove the object

```javascript
/**
 * deletes item from firebase database using the id
 * of teh object
 *
 * @param {*} id
 */
const doDelete = id => {
  firebase
    .firestore()
    .collection("things")
    .doc(id)
    .delete();
};
```
### Please check the proper branch in the github repo
- Branch using Ionic Framework & Capacitor for deployment to mobile device: [repo](https://github.com/aaronksaunders/react-course-firebase-hooks-app/tree/capacitor-ionic)
- Branch with just firebase integration: [repo](https://github.com/aaronksaunders/react-course-firebase-hooks-app/tree/with-authentication)

{% github https://github.com/aaronksaunders/react-course-firebase-hooks-app no-readme %}