Drag13

Testing with context

Context

Create a context to wrap the fetch.

import { createContext, useContext } from "react";

const API = {

Drag13

const TEST_DATA = [
  ["OUTLOOK", "TEMPERATURE", "HUMIDITY", "WIND", "PLAY"],
  ["SUNNY", "HOT", "HIGH", "WEAK", "NO"],
  ["SUNNY", "HOT", "HIGH", "STRONG", "NO"],
  ["OVERCAST", "HOT", "HIGH", "WEAK", "YES"],
  ["RAIN", "MILD", "HIGH", "WEAK", "YES"],
  ["RAIN", "COOL", "NORMAL", "WEAK", "YES"],
  ["RAIN", "COOL", "NORMAL", "STRONG", "NO"],
  ["OVERCAST", "COOL", "NORMAL", "STRONG", "YES"],
  ["SUNNY", "MILD", "HIGH", "WEAK", "NO"],

Drag13

// SETUP
function generateData(n) {
  const ids = new Array(n).fill(0).map((_, i) => i);
  return {
    notebooks: ids.map((x) => ({ id: x })),
    prices: ids
      .map((x) => [
        {
          entityId: x,
          price: 100,

Drag13

type ErrorBoundariesProps<TContext> =
  | {
      children: ReactNode;
      errorFallback: ReactNode | ((props: { error: Error }) => ReactNode);
      onError?: (error: Error, context: TContext) => void;
    }
  | {
      children: ReactNode;
      errorFallback:

Drag13

import React from 'react';
import {
  createContext,
  useContext,
  useState,
} from 'react';

export function HomePage() {
  const [s, setS] = useState(1);
  const setValue = (v: number) =>

Drag13

// imagine this function is out of the file 
function fetchUser(id: number, signal: AbortSignal) {
  return fetch(`/user/${id}`, { signal }).then(x=>x.json());
}

function UserDetails({ userId }: { userId: number }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const abortController = new AbortController();
    fetchUser(userId, abortController.signal).then(setUser);

Drag13

type DelayOptions =
  | { timeout: number; shouldFail?: boolean }
  | { timeout?: number; shouldFail: boolean };

function delayed<T>(
  data: T,
  options: DelayOptions = { shouldFail: false, timeout: 1500 }
) {
  const { shouldFail, timeout } = options
  return new Promise<T>((resolve, reject) => {

Drag13

import { useEffect, useState } from 'react';

export default Page;

function Page() {
  const [visible, setVisible] = useState(true);
  const hideCounter = () => setVisible(false);

  return (
    <main>

Drag13

Git aliases

Sync

• Add

git config --global alias.sync "!git checkout dev && git pull  && git checkout - &&  git merge -"

Drag13

Чекліст перед початком нового проекту для SPA(0) (FRONT_END)

Не функціональні вимоги

Питання	Наслідки
Маленькі (не стандартні) екрани? Якщо так(1), то який мінімальний розмір	Починаємо з мобільної верстки
Які браузери підтримуємо?	Працюємо на найбільш екзотичному браузері або ставимо browserstack
Мультимовність?