feat: add RTK Query, caching, loading/error states, refresh button, t…

.env

@@ -0,0 +1 @@
+VITE_CACHE_TTL=60

src/pages/DetailPage.tsx

@@ -1,7 +1,5 @@
-import { useState, useEffect } from 'react';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
-import { fetchPokemonDetail } from '../api/pokemonApi';
-import { PokemonDetail } from '../types';
+import { useGetPokemonDetailQuery } from '../store/apiSlice';
 import Spinner from '../components/Spinner/Spinner';
 
 function DetailPage() {
@@ -10,37 +8,22 @@ function DetailPage() {
   const [searchParams] = useSearchParams();
   const page = searchParams.get('page') ?? '1';
 
-  const [pokemon, setPokemon] = useState<PokemonDetail | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!name) return;
-    setLoading(true);
-    fetchPokemonDetail(name)
-      .then((data) => {
-        setPokemon(data);
-        setLoading(false);
-      })
-      .catch((err) => {
-        setError(err.message);
-        setLoading(false);
-      });
-  }, [name]);
+  const { data: pokemon, isLoading, isError, refetch } = useGetPokemonDetailQuery(name ?? '');
 
   const handleClose = () => {
     navigate(`/?page=${page}`);
   };
 
-  if (loading) return <Spinner />;
-  if (error) return <p>{error}</p>;
+  if (isLoading) return <Spinner />;
+  if (isError) return <p>Xatolik yuz berdi. Pokemon topilmadi.</p>;
   if (!pokemon) return null;
 
   const types = pokemon.types.map((t) => t.type.name).join(', ');
 
   return (
     <div className="detail-panel">
       <button className="detail-panel__close" onClick={handleClose}>✕ Close</button>
+      <button className="refresh-btn" onClick={() => refetch()}>🔄 Refresh</button>
       <img src={pokemon.sprites.front_default} alt={pokemon.name} />
       <h2>#{String(pokemon.id).padStart(3, '0')} {pokemon.name}</h2>
       <p>Type: {types}</p>

src/pages/MainPage.tsx

@@ -1,53 +1,28 @@
-import { useState, useEffect } from 'react';
 import { useSearchParams, useNavigate, Outlet } from 'react-router-dom';
-import { fetchPokemons } from '../api/pokemonApi';
-import { PokemonDetail } from '../types';
+import { useGetPokemonsQuery } from '../store/apiSlice';
 import { useLocalStorage } from '../hooks/useLocalStorage';
 import Search from '../components/Search/Search';
 import CardList from '../components/CardList/CardList';
 import Spinner from '../components/Spinner/Spinner';
 import ErrorBoundary from '../components/ErrorBoundary/ErrorBoundary';
 import Flyout from '../components/Flyout/Flyout';
 import ThemeToggle from '../components/ThemeToggle/ThemeToggle';
+import { useState } from 'react';
 
 function MainPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
   const { getValue, setValue } = useLocalStorage();
 
   const page = parseInt(searchParams.get('page') ?? '1');
-
-  const [pokemons, setPokemons] = useState<PokemonDetail[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [query, setQuery] = useState(getValue());
 
-  const LIMIT = 20;
-
-  const loadPokemons = async (searchQuery: string, currentPage: number) => {
-    setLoading(true);
-    setError(null);
-    try {
-      await new Promise((r) => setTimeout(r, 300));
-      const results = await fetchPokemons(searchQuery, currentPage, LIMIT);
-      setPokemons(results);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unknown error');
-      setPokemons([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadPokemons(query, page);
-  }, [page]);
+  const { data: pokemons = [], isLoading, isError, refetch } = useGetPokemonsQuery({ query, page });
 
   const handleSearch = (newQuery: string) => {
     setValue(newQuery);
     setQuery(newQuery);
     setSearchParams({ page: '1' });
-    loadPokemons(newQuery, 1);
   };
 
   const handleCardClick = (name: string) => {
@@ -72,7 +47,7 @@ function MainPage() {
         </div>
         <nav>
           <a href="/about">About</a>
-           <ThemeToggle />
+          <ThemeToggle />
         </nav>
       </header>
 
@@ -85,26 +60,36 @@ function MainPage() {
           </section>
 
           <section className="app__results-section">
-            {loading ? (
+            {isLoading ? (
               <Spinner />
+            ) : isError ? (
+              <div className="error-message">
+                Xatolik yuz berdi. Iltimos, qayta urinib ko'ring.
+              </div>
             ) : (
               <ErrorBoundary>
                 <CardList
                   pokemons={pokemons}
-                  error={error}
+                  error={null}
                   onCardClick={handleCardClick}
                 />
               </ErrorBoundary>
             )}
           </section>
 
-          {!loading && pokemons.length > 0 && (
+          {!isLoading && pokemons.length > 0 && (
             <div className="pagination">
               <button onClick={handlePrev} disabled={page === 1}>← Prev</button>
               <span>Page {page}</span>
               <button onClick={handleNext}>Next →</button>
             </div>
           )}
+
+          <div className="refresh-section">
+            <button className="refresh-btn" onClick={() => refetch()}>
+              🔄 Refresh
+            </button>
+          </div>
         </div>
 
         <div className="app__right">

src/store/apiSlice.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { configureStore } from '@reduxjs/toolkit';
+import { pokemonApi } from './apiSlice';
+
+const mockPokemon = {
+  id: 1,
+  name: 'bulbasaur',
+  base_experience: 64,
+  height: 7,
+  weight: 69,
+  types: [{ slot: 1, type: { name: 'grass', url: '' } }],
+  sprites: { front_default: 'https://example.com/1.png' },
+};
+
+const mockListResponse = {
+  results: [{ name: 'bulbasaur', url: '' }],
+};
+
+function makeMockResponse(data: unknown, ok = true) {
+  const body = JSON.stringify(data);
+  return new Response(body, {
+    status: ok ? 200 : 404,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+function makeStore() {
+  return configureStore({
+    reducer: {
+      [pokemonApi.reducerPath]: pokemonApi.reducer,
+    },
+    middleware: (getDefault) => getDefault().concat(pokemonApi.middleware),
+  });
+}
+
+describe('pokemonApi', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should fetch pokemon list successfully', async () => {
+    global.fetch = vi.fn()
+      .mockResolvedValueOnce(makeMockResponse(mockListResponse))
+      .mockResolvedValueOnce(makeMockResponse(mockPokemon));
+
+    const store = makeStore();
+    const result = await store.dispatch(
+      pokemonApi.endpoints.getPokemons.initiate({ query: '', page: 1 })
+    );
+
+    expect(result.data).toBeDefined();
+    expect(Array.isArray(result.data)).toBe(true);
+  });
+
+  it('should fetch single pokemon by name', async () => {
+    global.fetch = vi.fn()
+      .mockResolvedValueOnce(makeMockResponse(mockPokemon));
+
+    const store = makeStore();
+    const result = await store.dispatch(
+      pokemonApi.endpoints.getPokemons.initiate({ query: 'bulbasaur', page: 1 })
+    );
+
+    expect(result.data).toBeDefined();
+    expect(result.data?.[0].name).toBe('bulbasaur');
+  });
+
+  it('should fetch pokemon detail', async () => {
+    global.fetch = vi.fn()
+      .mockResolvedValueOnce(makeMockResponse(mockPokemon));
+
+    const store = makeStore();
+    const result = await store.dispatch(
+      pokemonApi.endpoints.getPokemonDetail.initiate('bulbasaur')
+    );
+
+    expect(result.data).toBeDefined();
+    expect(result.data?.name).toBe('bulbasaur');
+  });
+
+  it('should handle loading state', () => {
+    const store = makeStore();
+    const state = store.getState();
+    expect(state[pokemonApi.reducerPath]).toBeDefined();
+  });
+
+  it('should handle error state', async () => {
+    global.fetch = vi.fn()
+      .mockResolvedValueOnce(makeMockResponse({}, false));
+
+    const store = makeStore();
+    const result = await store.dispatch(
+      pokemonApi.endpoints.getPokemonDetail.initiate('unknown-pokemon')
+    );
+
+    expect(result.error).toBeDefined();
+  });
+});

src/store/apiSlice.ts

@@ -0,0 +1,45 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { PokemonDetail, ApiResponse } from '../types';
+
+const TTL = Number(import.meta.env.VITE_CACHE_TTL) || 60;
+
+export const pokemonApi = createApi({
+  reducerPath: 'pokemonApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: 'https://pokeapi.co/api/v2',
+  }),
+  keepUnusedDataFor: TTL,
+  endpoints: (builder) => ({
+    getPokemons: builder.query<PokemonDetail[], { query: string; page: number }>({
+      async queryFn({ query, page }, _api, _extra, baseQuery) {
+        if (query.trim() === '') {
+          const limit = 20;
+          const offset = (page - 1) * limit;
+          const listResult = await baseQuery(
+            `/pokemon?limit=${limit}&offset=${offset}`
+          );
+          if (listResult.error) return { error: listResult.error };
+          const data = listResult.data as ApiResponse;
+          const details = await Promise.all(
+            data.results.map(async (p) => {
+              const res = await baseQuery(`/pokemon/${p.name}`);
+              return res.data as PokemonDetail;
+            })
+          );
+          return { data: details };
+        } else {
+          const result = await baseQuery(
+            `/pokemon/${query.trim().toLowerCase()}`
+          );
+          if (result.error) return { error: result.error };
+          return { data: [result.data as PokemonDetail] };
+        }
+      },
+    }),
+    getPokemonDetail: builder.query<PokemonDetail, string>({
+      query: (name) => `/pokemon/${name}`,
+    }),
+  }),
+});
+
+export const { useGetPokemonsQuery, useGetPokemonDetailQuery } = pokemonApi;

src/store/store.ts

@@ -1,10 +1,14 @@
 import { configureStore } from '@reduxjs/toolkit';
 import selectedReducer from './selectedSlice';
+import { pokemonApi } from './apiSlice';
 
 export const store = configureStore({
   reducer: {
     selected: selectedReducer,
+    [pokemonApi.reducerPath]: pokemonApi.reducer,
   },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(pokemonApi.middleware),
 });
 
 export type RootState = ReturnType<typeof store.getState>;