Skip to content

Instantly share code, notes, and snippets.

View pkellner's full-sized avatar

Peter Kellner pkellner

View GitHub Profile
import "server-only";
import ToDoItem from "../../components/todo/ToDoItem";
import ToDoItemClient from "../../components/todo/ToDoItemClient";
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
export default async function ToDoList() {
const url = "http://localhost:4000/todos";
const res = await fetch(url,{
"use client";
import React, { ReactNode } from "react";
import { ErrorBoundary } from "react-error-boundary";
export default function ErrorBoundaryFunctionalWrapper({
children,
errorComponent,
}: {
children: ReactNode;
import { useEffect, useState } from "react";
const CHARS = new Set(" abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ");
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
function isAlphanumeric(char) {
return CHARS.has(char);
}
.large-description {
color: red;
font-size: 20px;
}
.description {
color: blue;
fo
import React from "react";
import SpeakersHeader from "@/app/presenter/[year]/SpeakersHeader";
import SpeakerContent from "@/app/presenter/[year]/[presenterSlug]/SpeakerContent";
import { getDataFromGql } from "@/lib/getDataFromGql";
import { initializeApollo } from "@/lib/apolloClient";
import { speakerQuerySp1, speakerSlugsQuery } from "@/gql/speakers/speakers";
import { Speaker, SpeakerSlug } from "@/app/common/CodeCampInterfaces";
import SpeakerHeader from "@/app/presenter/[year]/[presenterSlug]/SpeakerHeader";
import {DocumentNode} from "@apollo/client";
import {print} from "graphql/language/printer";
export async function getDataFromGql(gqlData: DocumentNode, variables: any = undefined) {
const data = await fetch("https://graphql.svcc.mobi/graphql", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
@pkellner
pkellner / App.js
Created May 16, 2022 17:25
A working simple app component that has no Suspense Elements but does use useDeferredValue (and works as expected)
import "./App.css";
import { useState, useDeferredValue, memo, useEffect } from "react";
import { fetchCities } from "./data/cities";
const displayCount = 1000;
// code similar to example by React Team: https://github.com/reactwg/react-18/discussions/129#discussioncomment-2439125
const ListItem = ({ id, name }) => {
let now = performance.now();
while (performance.now() - now < 5) {
@pkellner
pkellner / gist:2503b62f3d015a3a22403703081040e9
Created May 16, 2022 17:24
AppWithUseDeferredValueAndNoSuspenseElement.js
import "./App.css";
import { useState, useDeferredValue, memo, useEffect } from "react";
import { fetchCities } from "./data/cities";
const displayCount = 1000;
// code similar to example by React Team: https://github.com/reactwg/react-18/discussions/129#discussioncomment-2439125
const ListItem = ({ id, name }) => {
let now = performance.now();
while (performance.now() - now < 5) {
import { fetchCities } from "../data/cities";
export function fetchCityListData(displayCount) {
const cityPromise = fetchCities(displayCount);
return {
cities: wrapPromise(cityPromise),
};
}
function wrapPromise(promise) {
@pkellner
pkellner / ErrorBoundary.js
Created January 30, 2022 14:59
ErrorBoundary used in React 18 Pluralsight Course
// Author: Peter Kellner, https://peterkellner.net
import React from 'react';
class ErrorBoundary extends React.Component {
state = { hasError: false };
updateHasErrorsToFalse = () => {
this.setState(() => ({
hasError: false,
}));