// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { create } from 'zustand';
import App from './App';
 
const queryClient = new QueryClient();
 
ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

// store.ts
import create from 'zustand';
 
type CoffeeState = {
  coffeeList: any[];
  setCoffeeList: (list: any[]) => void;
};
 
const useCoffeeStore = create<CoffeeState>((set) => ({
  coffeeList: [],
  setCoffeeList: (list) => set({ coffeeList: list }),
}));
 
export default useCoffeeStore;

// components/CoffeeList.tsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';
import useCoffeeStore from '../store';
 
const fetchCoffeeList = async () => {
  const response = await fetch('https://api.example.com/coffee');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};
 
const CoffeeList = () => {
  const { data, error, isLoading } = useQuery(['coffeeList'], fetchCoffeeList);
  const { setCoffeeList } = useCoffeeStore();
 
  React.useEffect(() => {
    if (data) {
      setCoffeeList(data);
    }
  }, [data, setCoffeeList]);
 
  if (isLoading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error.message}</div>;
 
  return (
    <ul>
      {data.map((coffee) => (
        <li key={coffee.id}>{coffee.name}</li>
      ))}
    </ul>
  );
};
 
export default CoffeeList;

// components/AddCoffeeForm.tsx
import React, { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import useCoffeeStore from '../store';
 
const addCoffee = async (newCoffee) => {
  const response = await fetch('https://api.example.com/coffee', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newCoffee),
  });
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};
 
const AddCoffeeForm = () => {
  const queryClient = useQueryClient();
  const [name, setName] = useState('');
  const { coffeeList, setCoffeeList } = useCoffeeStore();
 
  const mutation = useMutation(addCoffee, {
    onSuccess: (newCoffee) => {
      queryClient.invalidateQueries(['coffeeList']);
      setCoffeeList([...coffeeList, newCoffee]);
    },
  });
 
  const handleSubmit = (e) => {
    e.preventDefault();
    mutation.mutate({ name });
    setName('');
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Название кофе"
      />
      <button type="submit">Добавить</button>
    </form>
  );
};
 
export default AddCoffeeForm;