alexanderson1993

React Hook Refactor

I can think of at least three ways this hook can be refactored which makes it easier to read and more performant. This can be done without adding new dependencies or changing the signature of the context provider or hook, so it only refactors the internal behavior.

I'd love to see how anyone else would refactor this.

alexanderson1993

import { AwsClient } from "aws4fetch";

const sesEndpoint = "email.us-east-1.amazonaws.com";

export function makeEmailSender({
  accessKeyId,
  secretAccessKey,
  defaultFromAddress,
}: {
  accessKeyId: string;

alexanderson1993

import type { UploadHandlerPart } from "@remix-run/cloudflare";

export class MaxPartSizeExceededError extends Error {
  constructor(public field: string, public maxBytes: number) {
    super(`Field "${field}" exceeded upload size of ${maxBytes} bytes.`);
  }
}

export function createR2UploadHandler({
  bucket,

alexanderson1993

migrate.mov

A handy CLI for working with the new Cloudflare D1/Prisma integration. You can read about that here: https://blog.cloudflare.com/prisma-orm-and-d1

Getting Started

• Install wrangler, Prisma, and the other dependencies

npm install prisma@latest @prisma/client@latest @prisma/adapter-d1

alexanderson1993

This was originally written for a Remix app, but you could adapt it to work for any SSR framework.

Check the docs for these packages to learn how to use these snippets

https://www.npmjs.com/package/kysely-migration-cli https://www.npmjs.com/package/kysely-codegen https://www.npmjs.com/package/kysely#migrations

It's configured to use MySQL on Planetscale, but you could adjust it to use Postgres or SQLite if you want.

alexanderson1993

"use client";
import * as React from "react";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,

alexanderson1993

function CurrencyInput({
  value,
  onChange,
  max,
}: {
  value: number;
  max: number;
  onChange: (val: number) => void;
}) {
  const [error, setError] = useState('');

alexanderson1993

import fs from 'fs/promises';

console.time('Get file sizes');

const items = await fs.readdir('.');

const ignore = [
  '_templates',
  '.git',
  '.github',

alexanderson1993

// This is a React component that loads and inlines an SVG image, making it easier to style 
// with CSS. It renders an <img> first, and then renders the inline SVG once it's been loaded.

import {useState, useEffect, memo, ComponentPropsWithoutRef} from "react";

export const SVGImageLoader: React.FC<
  {url: string} & ComponentPropsWithoutRef<"img">
> = memo(({url, alt, ...props}) => {
  const [data, setData] = useState<string | null>(null);
  useEffect(() => {

alexanderson1993

import * as React from "react";

const CopyToClipboard:React.FC<{text:string} & React.HTMLAttributes<HTMLButtonElement>> = ({text, ...props}) => {
  const copyToClipboard = (event:React.MouseEvent<HTMLButtonElement>, str:string) => {
    const el = Object.assign(document.createElement('textarea'),{value:str});
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);