firestore_cache_context.jsx

import React, { useState, useEffect, useContext } from 'react'

import { FirebaseContext } from 'bentowidgets/widgets/firebase_context'
import firebase from 'firebase'

const FirestoreCacheContext = React.createContext()

function FirestoreCacheProvider(props) {
  const _firebase = useContext(FirebaseContext)
  const { children } = props
  const onSnapshot = firebase.firestore.Query.prototype.onSnapshot
  firebase.firestore.Query.prototype.onSnapshot = (arg1, arg2, arg3) => {
    console.log('WRAPPED')
    console.log(this)
    return Reflect.apply(onSnapshot, arg1, arg2, arg3)
  }
  return <FirestoreCacheContext.Provider value={_firebase}>{children}</FirestoreCacheContext.Provider>
}

// This function takes a component...
function withFirestoreCache(Component) {
  // ...and returns another component...
  return function FirestoreCacheComponent(props) {
    // ... and renders the wrapped component with the context theme!
    // Notice that we pass through any additional props as well
    return (
      <FirestoreCacheContext.Consumer>
        {firebase => <Component {...props} firebase={firebase} />}
      </FirestoreCacheContext.Consumer>
    )
  }
}

export default FirestoreCacheProvider
export { FirestoreCacheContext, withFirestoreCache, FirestoreCacheProvider }