Vitalii Drag13

Testing with context

Create a context to wrap the fetch.

import { createContext, useContext } from "react";

const API = {

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

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

	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"],

	// 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,


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

	// 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);

	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) => {

	import { useEffect, useState } from 'react';

	export default Page;

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

	return (
	<main>