Skip to content

Instantly share code, notes, and snippets.

Avatar

Gabe Ragland gragland

View GitHub Profile
@gragland
gragland / use-async-improved.jsx
Last active Aug 28, 2020
Example for /u/caughtupstream299792
View use-async-improved.jsx
import React, { useState, useEffect, useCallback } from 'react';
// Hook
const useAsync = (asyncFunction, immediate = true) => {
const [status, setStatus] = useState('idle');
const [value, setValue] = useState(null);
const [error, setError] = useState(null);
// The execute function wraps asyncFunction and
// handles setting state for pending, value, and error.
View use-firestore-query.jsx
// Usage
function ProfilePage({ uid }) {
// Subscribe to Firestore document
const { data, status, error } = useFirestoreQuery(
firestore.collection("profiles").doc(uid)
);
if (status === "loading"){
return "Loading...";
}
View OLD-use-firestore-query.jsx
// Usage
function ProfilePage({ uid }) {
// Subscribe to Firestore document
const { data, status, error } = useFirestoreQuery(
firestore.collection("profiles").doc(uid)
);
if (status === "loading"){
return "Loading...";
}
View create-customer.js
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({
View use-firestore-query.jsx
// 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
gragland / firestore-rules
Last active Apr 11, 2020
Some Firestore security rules
View firestore-rules
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();
View use-memo-compare.jsx
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;
});
View gist:1d47d265b841cdf09e7fc7e6801c039e
const signinAnonymously = () => {
return firebase.auth().signInAnonymously()
.then(response => {
setUser(response.user);
return response.user;
});
};
etc...
View use-async.jsx
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>}
View use-require-auth.js
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.
You can’t perform that action at this time.