Кешування даних

import { useCallback, useEffect, useState } from "react";

// Кеш успішних відповідей
const responseCache = new Map();

// Запити, які вже виконуються
const pendingRequests = new Map();

function getCachedValue(key) {
  const entry = responseCache.get(key);

  if (!entry) {
    return null;
  }

  if (entry.expiresAt <= Date.now()) {
    responseCache.delete(key);
    return null;
  }

  return entry.data;
}

function invalidateCache(key) {
  if (key) {
    responseCache.delete(key);
  } else {
    responseCache.clear();
  }
}

async function fetchJson(key, ttl) {
  const cachedValue = getCachedValue(key);

  if (cachedValue !== null) {
    return cachedValue;
  }

  // Якщо такий запит уже виконується, використовуємо його Promise
  const existingRequest = pendingRequests.get(key);

  if (existingRequest) {
    return existingRequest;
  }

  const request = fetch(key)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`Помилка HTTP: ${response.status}`);
      }

      return response.json();
    })
    .then((data) => {
      responseCache.set(key, {
        data,
        expiresAt: Date.now() + ttl
      });

      return data;
    })
    .finally(() => {
      pendingRequests.delete(key);
    });

  pendingRequests.set(key, request);

  return request;
}

export function useCachedJson(url, options = {}) {
  const {
    ttl = 30_000
  } = options;

  const [reloadVersion, setReloadVersion] = useState(0);
  const [state, setState] = useState(() => {
    const cachedValue = getCachedValue(url);

    return {
      data: cachedValue,
      loading: cachedValue === null,
      error: null
    };
  });

  useEffect(() => {
    let isCurrent = true;

    const cachedValue = getCachedValue(url);

    if (cachedValue !== null) {
      setState({
        data: cachedValue,
        loading: false,
        error: null
      });

      return () => {
        isCurrent = false;
      };
    }

    setState((previousState) => ({
      ...previousState,
      loading: true,
      error: null
    }));

    fetchJson(url, ttl)
      .then((data) => {
        if (!isCurrent) {
          return;
        }

        setState({
          data,
          loading: false,
          error: null
        });
      })
      .catch((error) => {
        if (!isCurrent) {
          return;
        }

        setState({
          data: null,
          loading: false,
          error
        });
      });

    return () => {
      isCurrent = false;
    };
  }, [url, ttl, reloadVersion]);

  const refresh = useCallback(() => {
    invalidateCache(url);
    setReloadVersion((version) => version + 1);
  }, [url]);

  return {
    ...state,
    refresh
  };
}

function TodoList() {
  const {
    data: todos,
    loading,
    error,
    refresh
  } = useCachedJson(
    "https://jsonplaceholder.typicode.com/todos?_limit=5",
    { ttl: 60_000 }
  );

  if (loading && !todos) {
    return <p>Завантаження...</p>;
  }

  if (error) {
    return (
      <div>
        <p>Не вдалося завантажити завдання.</p>
        <button onClick={refresh}>Повторити</button>
      </div>
    );
  }

  return (
    <section>
      <button onClick={refresh}>
        Оновити дані
      </button>

      {loading && <p>Оновлення...</p>}

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.title}
          </li>
        ))}
      </ul>
    </section>
  );
}

export default TodoList;

useCachedJson("/api/products", {
  ttl: 5 * 60 * 1000
});

function Header() {
  const { data } = useCachedJson("/api/profile");

  return <p>{data?.name}</p>;
}

function ProfilePage() {
  const { data } = useCachedJson("/api/profile");

  return <h1>{data?.name}</h1>;
}

const pendingRequests = new Map();

const existingRequest = pendingRequests.get(key);

if (existingRequest) {
  return existingRequest;
}

async function createTodo(title) {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/todos",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title,
        completed: false,
        userId: 1
      })
    }
  );

  if (!response.ok) {
    throw new Error(`Помилка HTTP: ${response.status}`);
  }

  const newTodo = await response.json();

  // Після успішної зміни потрібно видалити застарілий список
  invalidateCache(
    "https://jsonplaceholder.typicode.com/todos?_limit=5"
  );

  return newTodo;
}

const { refresh } = useCachedJson("/api/todos");

await createTodo("Вивчити кешування");
refresh();

useCachedJson(`/api/products?category=${category}&page=${page}`);

/api/products?category=books&page=1
/api/products?category=books&page=2

function ProductList() {
  const { data, loading, error, refresh } = useCachedJson("/api/products");

  if (!data && loading) {
    return <p>Завантаження списку...</p>;
  }

  if (error && !data) {
    return <p>Помилка завантаження.</p>;
  }

  return (
    <div>
      <button onClick={refresh}>Оновити</button>

      {loading && <p>Оновлення списку...</p>}

      <ul>
        {data?.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

function SearchResults({ query }) {
  const url = `/api/search?q=${encodeURIComponent(query)}`;
  const { data, loading } = useCachedJson(url);

  if (loading && !data) {
    return <p>Пошук...</p>;
  }

  return (
    <ul>
      {data?.items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

useCachedJson("/api/products");