- fix issue with firebase-hooks

- implement custom useAuthState

src/contexts/DatabaseContext.js

@@ -1,23 +1,34 @@
 import firebase from "gatsby-plugin-firebase";
 import { debounce } from "lodash";
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import UserContext from "./UserContext";
 
 const defaultState = {
+  isOffline: false,
   isUpdating: false,
   getResume: async () => {},
+  getResumes: async () => {},
   createResume: () => {},
   updateResume: async () => {},
+  debouncedUpdate: async () => {},
   deleteResume: () => {},
 };
 
 const DatabaseContext = createContext(defaultState);
 
 const DatabaseProvider = ({ children }) => {
+  const [isOffline, setOffline] = useState(false);
   const [isUpdating, setUpdating] = useState(false);
   const { user } = useContext(UserContext);
 
+  useEffect(() => {
+    const connectedRef = firebase.database().ref(".info/connected");
+    connectedRef.on("value", (snapshot) => {
+      snapshot.val() === true ? setOffline(false) : setOffline(true);
+    });
+  }, []);
+
   const getResume = async (id) => {
     const snapshot = await firebase
       .database()
@@ -30,11 +41,25 @@ const DatabaseProvider = ({ children }) => {
     const id = uuidv4();
     const createdAt = firebase.database.ServerValue.TIMESTAMP;
 
+    let firstName = "",
+      lastName = "",
+      photograph = "";
+
+    if (!user.isAnonymous) {
+      [firstName, lastName] = user.displayName.split(" ");
+      photograph = user.photoURL;
+    }
+
     firebase
       .database()
       .ref(`users/${user.uid}/resumes/${id}`)
       .set({
         id,
+        profile: {
+          firstName,
+          lastName,
+          photograph,
+        },
         ...resume,
         createdAt,
         updatedAt: createdAt,
@@ -66,10 +91,12 @@ const DatabaseProvider = ({ children }) => {
   return (
     <DatabaseContext.Provider
       value={{
+        isOffline,
         isUpdating,
         getResume,
         createResume,
-        updateResume: debouncedUpdate,
+        updateResume,
+        debouncedUpdate,
         deleteResume,
       }}
     >

src/contexts/ResumeContext.js

@@ -5,7 +5,7 @@ import DatabaseContext from "./DatabaseContext";
 const ResumeContext = createContext({});
 
 const ResumeProvider = ({ children }) => {
-  const { updateResume } = useContext(DatabaseContext);
+  const { debouncedUpdate } = useContext(DatabaseContext);
 
   const [state, dispatch] = useReducer((state, { type, payload }) => {
     let newState;
@@ -13,7 +13,7 @@ const ResumeProvider = ({ children }) => {
     switch (type) {
       case "on_input":
         newState = set({ ...state }, payload.path, payload.value);
-        updateResume(newState);
+        debouncedUpdate(newState);
         return newState;
       case "set_data":
         return payload;

src/contexts/UserContext.js

@@ -1,14 +1,15 @@
 import firebase from "gatsby-plugin-firebase";
 import { pick } from "lodash";
 import React, { createContext, useEffect, useState } from "react";
-import { useAuthState } from "react-firebase-hooks/auth";
 import { toast } from "react-toastify";
+import useAuthState from "../hooks/useAuthState";
 
 const defaultUser = {
   uid: null,
   displayName: null,
   email: null,
   photoURL: null,
+  isAnonymous: false,
 };
 
 const defaultState = {
@@ -20,7 +21,7 @@ const defaultState = {
 const UserContext = createContext(defaultState);
 
 const UserProvider = ({ children }) => {
-  const [firebaseUser, loading] = useAuthState(firebase.auth());
+  const [firebaseUser, loading] = useAuthState(firebase);
   const [user, setUser] = useState(null);
 
   useEffect(() => {