Skip to content

Instantly share code, notes, and snippets.

@samselikoff
samselikoff / authed-swr-provider.js
Created July 19, 2021 04:32
Example useAuth hook using Zustand, SWR and Suspense
import firebase from "firebase/app";
import "firebase/auth";
import { gql, GraphQLClient } from "graphql-request";
import { SWRConfig } from "swr";
import create from "zustand";
import { computed } from "zustand-middleware-computed-state";
const firebaseConfig = {
//
};
@3nvi
3nvi / use-real-time-query-simple.ts
Last active July 3, 2022 19:11
A simple way to integrate react-query & firebase
import React from 'react';
import { useQuery, useQueryClient, UseQueryOptions } from 'react-query';
import realTimeApi from './real-time-api';
function useRealTimeQuery<Data>(
firebasePathKey: string,
useQueryOptions: UseQueryOptions<Data> = {}
) {
const queryClient = useQueryClient();
//MIT License
//Copyright (c) 2021 Felix Westin
//Source: https://github.com/Fewes/MinimalAtmosphere
//Ported to GLSL by Marcin Ignac
#ifndef ATMOSPHERE_INCLUDED
#define ATMOSPHERE_INCLUDED
// -------------------------------------
import React from "react";
import { Link } from "react-router-dom";
export function createResource(getPromise) {
let cache = {};
let inflight = {};
let errors = {};
function load(key) {
inflight[key] = getPromise(key)
@christianalfoni
christianalfoni / action.ts
Last active March 27, 2019 15:37
firebase
export const open: Action = async ({ state, actions, effects }) => {
state.currentPage = Page.ADMIN
const messageUpdates = await effects.api.getAdminMessageUpdates()
state.admin.messageUpdates = messageUpdates
state.admin.users = await effects.api.getUsers(
messageUpdates.map((update) => update.userUid)
)
if (state.admin.messageUpdates.length) {
state.admin.isLoadingFeed = true
import React, { useEffect } from "react"
import useFetch from "./useFetch"
export default function ProcessingPurchase({
send,
context: { workshopData, ticketsToPurchase, stripeToken }
}) {
let [charge, error] = useFetch("/purchaseWorkshop", {
workshopId: workshopData.id,
ticketsToPurchase,
@treyhoover
treyhoover / dnsmasq OS X.md
Last active March 20, 2018 19:40 — forked from ogrrd/dnsmasq OS X.md
Setup dnsmasq on OS X

Never touch your local /etc/hosts file in OS X again

To setup your computer to work with *.test domains, e.g. project.test, awesome.test and so on, without having to add to your hosts file each time.

Requirements

Install

@acdlite
acdlite / prefetch.js
Last active June 11, 2021 08:34
Prefetching in React
function prefetch(getKey, getValue, getInitialValue, propName) {
const inFlight = new Set();
const cache = new Map();
return ChildComponent => {
return class extends React.Component {
state = {value: getInitialValue(this.props)};
componentWillReceiveProps(nextProps) {
const key = getKey(nextProps);
if (cache.has(key)) {
// Use cached value
import { Component } from 'react'
import { createStore, combineReducers } from 'redux'
import parseLinkHeader from 'parse-link-header'
const START = 'start'
const SUCCEED = 'succeed'
const ERROR = 'error'
const inflight = (state={}, action) => (
((state) => (
@markerikson
markerikson / render-logic.js
Last active January 1, 2024 06:20
React render function organization
// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
// My basic render function structure:
function RenderLogicExample({
someBoolean, // 1) Destructure values from `props` object
someList,
}) {
// 2) Declare state values
const [a, setA] = useState(0);
const [b, setB] = useState(0);