state-management

import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';

// 1. useState - managing component state
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

export function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

export function move(list, from, to) {
  const next = list.slice();

import { useReducer, useCallback } from 'react';

const initialState = (present) => ({ past: [], present, future: [] });

function historyReducer(state, action) {
  const { past, present, future } = state;

import { useMemo, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';

function parseFilters(params) {
  return {
    q: params.get('q') || '',

export interface Todo {
  id: string;
  title: string;
  done: boolean;
}

import { createContext } from "react";

export type ToastVariant = "info" | "success" | "error";

export interface Toast {
  id: string;

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, shareReplay } from 'rxjs/operators';

export interface Project {

export interface Post {
  id: string;
  body: string;
  liked: boolean;
  likeCount: number;
}

import React from 'react';
import { useToasts } from './useToasts';

export function Toaster() {
  const { toasts, dismiss } = useToasts();

import { Injectable } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, take } from 'rxjs/operators';

export interface QueryCodec<T> {
  parse: (raw: string | null) => T;
  serialize: (value: T) => string | null;
}

export function stringParam(fallback = ""): QueryCodec<string> {

import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Injectable()
export class SignupFormService {
  readonly form: FormGroup;