gragland

// Usage
function ProfilePage({ uid }) {
  // Subscribe to Firestore document
  const { data, status, error } = useFirestoreQuery(
    firestore.collection("profiles").doc(uid)
  );
  
  if (status === "loading"){
    return "Loading..."; 
  }

gragland

// Usage
function ProfilePage({ uid }) {
  // Subscribe to Firestore document
  const { data, status, error } = useFirestoreQuery(
    firestore.collection("profiles").doc(uid)
  );
  
  if (status === "loading"){
    return "Loading..."; 
  }

gragland

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
const requireAuth = require("./_require-auth.js");
const { updateUser } = require("./_db.js");

export default requireAuth((req, res) => {
  const user = req.user;

  // If user already has a stripeCustomerId then return it in success response
  if (user.stripeCustomerId) {
    return res.send({

gragland

// Usage
export function useUser(uid) {
  return useQuery(uid && firestore.collection("users").doc(uid));
}

// Custom useQuery hook for Firestore
function useQuery(query) {
  const [queryState, setQueryState] = useState({
    status: "loading",
    data: undefined,

gragland

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{uid} {
      allow read, write: if isUser(uid);
    }
    match /items/{id} {
      allow read: if true;
      //allow read: if isOwner(); // Would restrict reads to owner
      allow delete: if isOwner();

gragland

import React, { useState, useEffect, useRef } from 'react';

// Usage
function MyComponent({ obj }) {
  const [state, setState] = useState();
  
  // Use the previous obj value if the "id" property hasn't changed
  const objFinal = useMemoCompare(obj, (prev, next) => {
    return prev && prev.id === next.id;
  });

gragland

  
  const signinAnonymously = () => {
    return firebase.auth().signInAnonymously()
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };
  
  etc...

gragland

import React, { useState, useEffect, useCallback } from 'react';

// Usage
function App() {
  const { execute, status, value, error } = useAsync(myFunction, false);

  return (
    <div>
      {status === 'idle' && <div>Start your journey by clicking a button</div>}
      {status === 'success' && <div>{value}</div>}

gragland

import Dashboard from "./Dashboard.js";
import Loading from "./Loading.js";
import { useRequireAuth } from "./use-require-auth.js";

function DashboardPage(props) {
  const auth = useRequireAuth();
  
  // If auth is null (still fetching data) 
  // or false (logged out, above hook will redirect)
  // then show loading indicator.

gragland

import { useMemo } from "react";
import { useParams, useLocation, useHistory, useRouteMatch } from 'react-router-dom';
import queryString from 'query-string';

// Usage
function MyComponent(){
  // Get the router object
  const router = useRouter();

  // Get value from query string (?postId=123) or route param (/:postId)