typescript

typescript
import { Pool } from "pg";

async function keyFor(pool: Pool, name: string): Promise<string> {
  const { rows } = await pool.query<{ key: string }>(
    "SELECT hashtextextended($1, 0) AS key",
    [name]

Postgres advisory lock for one-at-a-time work

postgres concurrency reliability
by codesnips 3 tabs
typescript
import { useCallback, useEffect, useState } from "react";

type Patch = Record<string, string | null | undefined>;

function readParams(): URLSearchParams {
  return new URLSearchParams(window.location.search);

Sync a Filter Panel to the URL Query String with a Custom useSearchParams Hook

react hooks url-state
by codesnips 3 tabs
typescript
import { Suspense } from 'react'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useParams } from 'react-router-dom'
import api from '@/services/api'
import { Post } from '@/types'
import { ErrorBoundary } from '@/components/ErrorBoundary'

React Suspense for data fetching

react suspense async-loading
by Maya Patel 1 tab
typescript
import { ReactNode, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'

interface PortalProps {
  children: ReactNode
  container?: Element

React portals for rendering outside component tree

react portals dom
by Maya Patel 2 tabs
typescript
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';

export interface HasUnsavedChanges {
  canDeactivate(): boolean | Observable<boolean>;
}

Warn Users About Unsaved Changes With an Angular CanDeactivate Guard

angular routing guards
by codesnips 3 tabs
typescript
import { Link, useLocation, useMatches } from 'react-router-dom'

interface BreadcrumbMatch {
  pathname: string
  handle?: {
    crumb?: (data?: any) => string

Breadcrumb navigation from React Router

react react-router navigation
by Maya Patel 2 tabs
typescript
import { cookies } from "next/headers";
import { jwtVerify } from "jose";

export interface Session {
  userId: string;
  role: "user" | "admin";

Next.js Route Handler with auth guard

nextjs route-handlers authentication
by codesnips 3 tabs
typescript
export const PERMISSIONS = {
  READ_POSTS: 'posts:read',
  WRITE_POSTS: 'posts:write',
  DELETE_POSTS: 'posts:delete',
  MANAGE_USERS: 'users:manage',
} as const;

Typed Role-Based Route Guards with Permission Middleware in Express

express authorization rbac
by codesnips 3 tabs
typescript
export interface Todo {
  id: string;
  title: string;
  done: boolean;
}

Optimistic Todo Toggling in React with Rollback via useReducer

javascript typescript react
by codesnips 3 tabs
typescript
import { Readable } from "node:stream";
import { S3Client } from "@aws-sdk/client-s3";
import { Upload } from "@aws-sdk/lib-storage";

const s3 = new S3Client({ region: process.env.AWS_REGION });
const BUCKET = process.env.UPLOAD_BUCKET!;

Multipart upload streaming (busboy)

busboy express s3
by codesnips 3 tabs
typescript
import React, { createContext, useContext, useState, ReactNode } from 'react'

interface TabsContextType {
  activeTab: string
  setActiveTab: (tab: string) => void
}

Compound components pattern for flexible APIs

react patterns components
by Maya Patel 2 tabs
typescript
import { Injectable, signal, computed } from '@angular/core';

export interface CurrentUser {
  id: string;
  email: string;
  roles: string[];

Guarding a Lazy-Loaded Angular Admin Route with a Functional CanActivate Role Check

angular routing lazy-loading
by codesnips 3 tabs