samcorcos

import React from 'react'
import PropTypes from 'prop-types'
import Radium from 'radium'
import styles from './styles'

const Checkmark = () =>
  <div style={{ width: '100%', height: 'auto', }}>
    <svg viewBox="0 0 64 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
      <title>Path 2</title>
      <desc>Created with Sketch.</desc>

samcorcos

// Iterative deepening DFS

const tree = {
  id: "1",
  children: [
    {id: "2", children: [
      {id: "4", children: [
        {id: "7", children: []}
      ]},    
      {id: "6", children: []},

samcorcos

const tree = {
  id: "1",
  children: [
    {id: "2", children: [
      {id: "4", children: [
        {id: "7", children: []}
      ]},    
      {id: "6", children: []},
    ]},
    {id: "3", children: [

samcorcos

import React from 'react'

import { firebase } from './firebase'

export const initialState = {
  currentUser: {},
  data: {}
}

export const Context = React.createContext(initialState)

samcorcos

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/functions'
import 'firebase/storage'

const firebaseConfig = {
  apiKey: "AIzaSyBKSk6fpE4XsscB-Id2QGDthUGVZlAVHtc",
  authDomain: "react-firebase-next.firebaseapp.com",
  databaseURL: "https://react-firebase-next.firebaseio.com",

samcorcos

import React from 'react'
import App, { Container } from 'next/app'

import { firebase } from '../lib/firebase'
import { Context, Provider } from '../lib/context'

// Use this additional container to bind firebase auth listener to store
class _App extends App {
  render () {
    const { Component, pageProps } = this.props

samcorcos

import React from 'react'

/**
 * A component that is used to bind the current user the store using Firebase
 *
 * @param {function} store.set - must receive a `store` prop that has a `set` function
 * @param {Object} firebase - must receive an initialized `firebase` as a prop
 *
 * Render this alongside the top-level component of your app. Should only be rendered once.
 */

samcorcos

...
import AuthBindings from '../components/AuthBindings

...
              <>
                <AuthBindings firebase={firebase} store={store} />
                <Component store={store} {...pageProps} />
              </>
...

samcorcos

import React from 'react'

import { Context } from '../lib/context'
import { firebase } from '../lib/firebase'

export default class Home extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      email: '',

samcorcos

import React from 'react'

/**
 * The goal of this component is to wrap another component and give it some data from the
 * database while maintaining state and bindings and significantly cutting down on
 * boilerplate.
 *
 * This component expects a function
 * See [this article](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9)
 * for more information on why function-as-child components are awesome for this use case