react-firebase icon indicating copy to clipboard operation
react-firebase copied to clipboard

add connectFirestore to react-firebase

Open swyxio opened this issue 7 years ago • 2 comments

hi! this is my crack at this issue as i needed it for my own project. basically its a minimal clone of your connect function modified to work with firestore. i also modified the provider to also accept a firestore prop. basic usage:

secrets.js:

// scecrets should be this shape, copy from firebase console

var firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");
var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
};
firebase.initializeApp(config);
export const firestore = firebase.firestore();
export default firebase;

index.js:

import firebaseApp, { firestore } from "./secrets";

ReactDOM.render(
  <Provider firebaseApp={firebaseApp} firestore={firestore}>
    <App />
  </Provider>,
  document.getElementById("root")
);

within a component:

import { connect } from "../../../react-firebase-firestore";
// define SomeComponent

// exactly the same api as the normal firebase `connect`
const mapFirebaseToProps = (props, ref) => ({
  rawdocs: "documents",
  removeDocument: id => {
    if (confirm("Are you sure? This is permanent!"))
      ref(`documents/${id}`).delete();
  }
});

export default connect(mapFirebaseToProps)(SomeComponent);

swyxio avatar Jan 09 '18 09:01 swyxio

i should also note that i could not for the life of me figure out how to make my Prettier work with your eslint. so i know this fails linting.

when i tried just doing eslint --fix it gave me this error:

Cannot find module '@unfold/eslint-config'
Referenced from: /Users/swyx/Desktop/webdev/OpenSource/react-firebase/.eslintrc
Error: Cannot find module '@unfold/eslint-config'
Referenced from: /Users/swyx/Desktop/webdev/OpenSource/react-firebase/.eslintrc
    at ModuleResolver.resolve (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/util/module-resolver.js:74:19
)
    at resolve (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:471:25)
    at load (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:542:26)
    at configExtends.reduceRight (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:421:
36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:403:28)
    at loadFromDisk (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:514:22)
    at Object.load (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:550:20)
    at Config.getLocalConfigHierarchy (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config.js:228:44)
    at Config.getConfigHierarchy (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config.js:180:43)

couldnt figure out how to get around it. is your package private somehow?

swyxio avatar Jan 09 '18 09:01 swyxio

i have made my own repo https://github.com/sw-yx/react-firebase-firestore

swyxio avatar Mar 18 '18 04:03 swyxio