Ionic Framework App using React Firebase 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

Overview

Sample app integrating firebase with a react application using react hooks api and React Firebase Hooks - A set of reusable react hooks for Firebase.

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

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

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

// 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

// 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

/**
 * 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

/**
 * 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
• Branch with just firebase integration: repo

aaronksaunders / react-course-firebase-hooks-app

Sample app using firebase-hooks and react-hooks api to manage a list of things