Skip to content

Instantly share code, notes, and snippets.

View dsafreno's full-sized avatar

Doug Safreno dsafreno

View GitHub Profile
@dsafreno
dsafreno / firebase-hook.js
Created January 14, 2020 16:52
React Hooks for loading Firebase Data
import React, { useReducer, useEffect, useRef } from 'react';
import firebase from 'firebase/app';
import equal from 'deep-equal';
function filterKeys(raw, allowed) {
if (!raw) {
return raw;
}
let s = new Set(allowed);
return Object.keys(raw)
@dsafreno
dsafreno / rtdb-component-after.js
Created October 16, 2019 19:16
Firebase RTDB Component - withDbData
class Example extends React.Component {
componentDidMount() {
// first time we got data!
}
render() {
let {user, team} = this.props;
// don't need to null check since we await the data!
}
}
@dsafreno
dsafreno / rtdb-component.js
Created October 16, 2019 18:53
Firebase RTDB Component, before withDbData
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { user: null, team: null };
}
componentDidMount() {
let {userId, teamId} = this.props;
// subscribe to user data
let userRef = firebase.database().ref(`users/${userId}`);
let userOff = userRef.on('value', (snap) => {
@dsafreno
dsafreno / withDbData.js
Last active July 21, 2020 17:14
Helper to use Firebase RTDB with React more conveniently. From https://pragli.com/blog/how-we-use-firebase-instead-of-redux-with-react
import React from 'react';
import firebase from 'firebase/app';
import equal from 'deep-equal';
function filterKeys(raw, allowed) {
if (!raw) {
return raw;
}
let s = new Set(allowed);
return Object.keys(raw)