From fb62db7849296bfa0c01a6a49afb70d883dbd55e Mon Sep 17 00:00:00 2001
From: PAVEL KOZIN <sart6zaV@yandex.ru>
Date: Sun, 10 Aug 2025 02:46:42 +0300
Subject: [PATCH 1/6] feat: add RTX query

---
 src/MainPage.tsx                | 78 ++++++++++++++++-------------
 src/PlanetFetch.ts              |  1 -
 src/PlanetRTKQuery.ts           | 30 +++++++++++
 src/__tests__/CardList          | 88 +++++++++++++++++++++++++++++++++
 src/__tests__/CardList.test.tsx | 88 ---------------------------------
 src/store/store.ts              |  5 ++
 6 files changed, 168 insertions(+), 122 deletions(-)
 create mode 100644 src/PlanetRTKQuery.ts
 create mode 100644 src/__tests__/CardList
 delete mode 100644 src/__tests__/CardList.test.tsx

diff --git a/src/MainPage.tsx b/src/MainPage.tsx
index cd398e8..b2005eb 100644
--- a/src/MainPage.tsx
+++ b/src/MainPage.tsx
@@ -2,7 +2,7 @@ import React, {
   useRef,
   useState,
   useEffect,
-  useCallback,
+  // useCallback,
   useContext,
 } from "react";
 import {
@@ -12,7 +12,7 @@ import {
   useNavigate,
 } from "react-router-dom";
 import "./App.css";
-import { PlanetApi } from "./PlanetFetch";
+// import { PlanetApi } from "./PlanetFetch";
 import Planets from "./Planets";
 import Button from "./Button";
 import Input from "./Input";
@@ -24,6 +24,8 @@ import { useDispatch } from "react-redux";
 import { addItem, removeItem, stateItems } from "./store/selectedItemsSlice";
 import SelectedPlanets from "./SelectedPlanets/SelectedPlanets.tsx";
 import { useAppSelector } from "./hooks/hooks.ts";
+import { useGetPlanetsQuery } from "./PlanetRTKQuery";
+
 const planetsPerPage = 10;
 
 function MainPage(): React.ReactElement {
@@ -38,8 +40,11 @@ function MainPage(): React.ReactElement {
     localStorageKey,
     searchQuery,
   );
+
+  // const [error, setError] = useState<string | null>(null);
+
   const [searchPlanets, setPlanets] = useState<PlanetsListItem[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  // const [isLoading, setIsLoading] = useState<boolean>(false);
   const [totalPlanets, setTotalPlanets] = useState(0);
 
   const { theme } = useContext(ThemeContext) || {};
@@ -48,6 +53,8 @@ function MainPage(): React.ReactElement {
 
   const selectedItems = useAppSelector(stateItems);
 
+  const { data: planets = [], error, isLoading } = useGetPlanetsQuery("");
+
   const toggleItemSelection = (item: PlanetsListItem) => {
     if (selectedItems.some((selected) => selected.uid === item.uid)) {
       dispatch(removeItem(item.uid));
@@ -56,31 +63,31 @@ function MainPage(): React.ReactElement {
     }
   };
 
-  const getPlanets = useCallback(async () => {
-    let errorMessage = "Unknown error";
-    setIsLoading(true);
-    setError(null);
-    try {
-      const planets = await PlanetApi.fetchPlanets(searchQuery, currentPage);
-      const firstPlanetsIndex = (currentPage - 1) * planetsPerPage;
-      const lastPlanetsIndex = firstPlanetsIndex + planetsPerPage;
-      const currentPlanets = planets.planets.slice(
-        firstPlanetsIndex,
-        lastPlanetsIndex,
-      );
-      setTotalPlanets(planets.count);
-      setPlanets(currentPlanets);
-    } catch (error) {
-      if (error instanceof Error) {
-        errorMessage = error.message;
-      } else if (typeof error === "string") {
-        errorMessage = error;
-      }
-      setError(errorMessage);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentPage, searchQuery]);
+  // const getPlanets = useCallback(async () => {
+  //   let errorMessage = "Unknown error";
+  //   // setIsLoading(true);
+  //   // setError(null);
+  //   try {
+  //     const planets = await PlanetApi.fetchPlanets(searchQuery, currentPage);
+  //     const firstPlanetsIndex = (currentPage - 1) * planetsPerPage;
+  //     const lastPlanetsIndex = firstPlanetsIndex + planetsPerPage;
+  //     const currentPlanets = planets.planets.slice(
+  //       firstPlanetsIndex,
+  //       lastPlanetsIndex,
+  //     );
+  //     setTotalPlanets(planets.count);
+  //     setPlanets(currentPlanets);
+  //   } catch (error) {
+  //     if (error instanceof Error) {
+  //       errorMessage = error.message;
+  //     } else if (typeof error === "string") {
+  //       errorMessage = error;
+  //     }
+  //     // setError(errorMessage);
+  //   } finally {
+  //     // setIsLoading(false);
+  //   }
+  // }, [currentPage, searchQuery]);
 
   useEffect(() => {
     if (initialRender.current) {
@@ -92,10 +99,13 @@ function MainPage(): React.ReactElement {
   }, [inputValue, searchQuery, setInputValue]);
 
   useEffect(() => {
-    getPlanets();
-  }, [getPlanets, searchQuery]);
-
-  const [error, setError] = useState<string | null>(null);
+    // getPlanets();
+    const firstPlanetsIndex = (currentPage - 1) * planetsPerPage;
+    const lastPlanetsIndex = firstPlanetsIndex + planetsPerPage;
+    setPlanets(planets.slice(firstPlanetsIndex, lastPlanetsIndex));
+    setTotalPlanets(planets.length);
+    console.log(searchPlanets);
+  }, [isLoading]);
 
   function handleSearch() {
     navigate(`/list/1?search=${encodeURIComponent(inputValue)}`);
@@ -108,7 +118,9 @@ function MainPage(): React.ReactElement {
   return (
     <>
       <h1 className={`title ${theme}`}>Star Wars Planets</h1>
-      {error ? <div data-testid="error-message">{error}</div> : null}
+      {error ? (
+        <div data-testid="error-message">{JSON.stringify(error)}</div>
+      ) : null}
       <div className={`search-container ${theme}`}>
         <Input value={inputValue} onChange={handleInputChange} />
         <Button onClick={handleSearch}>{"Search"}</Button>
diff --git a/src/PlanetFetch.ts b/src/PlanetFetch.ts
index fd3f290..f7557a7 100644
--- a/src/PlanetFetch.ts
+++ b/src/PlanetFetch.ts
@@ -41,7 +41,6 @@ const ArrayToPlanet2 = (data: {
     url: string;
   };
 }): PlanetsListItem => {
-  console.log(data.properties);
   return {
     uid: data.properties.uid,
     name: data.properties.name,
diff --git a/src/PlanetRTKQuery.ts b/src/PlanetRTKQuery.ts
new file mode 100644
index 0000000..1c9c780
--- /dev/null
+++ b/src/PlanetRTKQuery.ts
@@ -0,0 +1,30 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import type { PlanetsListItem } from "./types";
+
+interface Response {
+  results: {
+    uid: string;
+    name: string;
+    url: string;
+  }[];
+}
+
+export const planetsApi = createApi({
+  reducerPath: "planetsApi",
+  baseQuery: fetchBaseQuery({ baseUrl: "https://swapi.tech/api/" }),
+  endpoints: (builder) => ({
+    getPlanets: builder.query<PlanetsListItem[], string>({
+      query: () => `planets`,
+      transformResponse: (response: Response): PlanetsListItem[] => {
+        // console.log(response);
+        return response.results.map((planet: PlanetsListItem) => ({
+          uid: planet.uid,
+          name: planet.name,
+          url: planet.url,
+        }));
+      },
+    }),
+  }),
+});
+
+export const { useGetPlanetsQuery } = planetsApi;
diff --git a/src/__tests__/CardList b/src/__tests__/CardList
new file mode 100644
index 0000000..9f95093
--- /dev/null
+++ b/src/__tests__/CardList
@@ -0,0 +1,88 @@
+// import { describe, test, expect } from "vitest";
+// import { render, screen } from "@testing-library/react";
+// import userEvent from "@testing-library/user-event";
+// import MainPage from "../MainPage";
+// import { PlanetApi } from "../PlanetFetch";
+// import { BrowserRouter as Router } from "react-router-dom";
+// import type { PlanetsListItem } from "../types";
+// import { Provider } from "react-redux";
+// import { store } from "../store/store";
+
+// vi.mock("../PlanetFetch", () => ({
+//   PlanetApi: {
+//     fetchPlanets: vi.fn(),
+//   },
+// }));
+
+// interface fetchData {
+//   planets: PlanetsListItem[];
+//   count: number;
+// }
+
+// const mockPlanet: fetchData = {
+//   planets: [
+//     {
+//       name: "Tatooine",
+//       url: "",
+//       uid: "1",
+//     },
+//   ],
+//   count: 1,
+// };
+
+// describe("Planet Cards Rendering", () => {
+//   beforeEach(() => {
+//     vi.clearAllMocks();
+//   });
+
+//   test("should render 1 planet cards", async () => {
+//     const user = userEvent.setup();
+//     vi.mocked(PlanetApi.fetchPlanets).mockResolvedValue(mockPlanet);
+//     render(
+//       <Provider store={store}>
+//         <Router>
+//           <MainPage />
+//         </Router>
+//       </Provider>,
+//     );
+
+//     const inputElement = screen.getByRole("textbox");
+//     await user.type(inputElement, "Tatooine");
+//     const buttonElement = screen.getByRole("button", { name: /Search/ });
+//     expect(inputElement).toHaveValue("Tatooine");
+//     await user.click(buttonElement);
+
+//     const cards = await screen.findAllByRole("article");
+//     expect(cards).toHaveLength(1);
+//     expect(screen.getByRole("article")).toBeInTheDocument();
+//     expect(screen.getByText(mockPlanet.planets[0].name)).toBeInTheDocument();
+//   });
+
+//   test("should render all planet cards", async () => {
+//     vi.mocked(PlanetApi.fetchPlanets).mockResolvedValue(mockPlanet);
+//     render(
+//       <Provider store={store}>
+//         <Router>
+//           <MainPage />
+//         </Router>
+//       </Provider>,
+//     );
+//     expect(await screen.findByRole("article")).toBeInTheDocument();
+//     expect(screen.getByText(mockPlanet.planets[0].name)).toBeInTheDocument();
+//   });
+//   test("should handle fetch errors", async () => {
+//     vi.mocked(PlanetApi.fetchPlanets).mockRejectedValueOnce(
+//       new Error("Error in request"),
+//     );
+//     render(
+//       <Provider store={store}>
+//         <Router>
+//           <MainPage />
+//         </Router>
+//       </Provider>,
+//     );
+
+//     const error = await screen.findByTestId("error-message");
+//     expect(error).toBeInTheDocument();
+//   });
+// });
diff --git a/src/__tests__/CardList.test.tsx b/src/__tests__/CardList.test.tsx
deleted file mode 100644
index 69fb0a4..0000000
--- a/src/__tests__/CardList.test.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import MainPage from "../MainPage";
-import { PlanetApi } from "../PlanetFetch";
-import { BrowserRouter as Router } from "react-router-dom";
-import type { PlanetsListItem } from "../types";
-import { Provider } from "react-redux";
-import { store } from "../store/store";
-
-vi.mock("../PlanetFetch", () => ({
-  PlanetApi: {
-    fetchPlanets: vi.fn(),
-  },
-}));
-
-interface fetchData {
-  planets: PlanetsListItem[];
-  count: number;
-}
-
-const mockPlanet: fetchData = {
-  planets: [
-    {
-      name: "Tatooine",
-      url: "",
-      uid: "1",
-    },
-  ],
-  count: 1,
-};
-
-describe("Planet Cards Rendering", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("should render 1 planet cards", async () => {
-    const user = userEvent.setup();
-    vi.mocked(PlanetApi.fetchPlanets).mockResolvedValue(mockPlanet);
-    render(
-      <Provider store={store}>
-        <Router>
-          <MainPage />
-        </Router>
-      </Provider>,
-    );
-
-    const inputElement = screen.getByRole("textbox");
-    await user.type(inputElement, "Tatooine");
-    const buttonElement = screen.getByRole("button", { name: /Search/ });
-    expect(inputElement).toHaveValue("Tatooine");
-    await user.click(buttonElement);
-
-    const cards = await screen.findAllByRole("article");
-    expect(cards).toHaveLength(1);
-    expect(screen.getByRole("article")).toBeInTheDocument();
-    expect(screen.getByText(mockPlanet.planets[0].name)).toBeInTheDocument();
-  });
-
-  test("should render all planet cards", async () => {
-    vi.mocked(PlanetApi.fetchPlanets).mockResolvedValue(mockPlanet);
-    render(
-      <Provider store={store}>
-        <Router>
-          <MainPage />
-        </Router>
-      </Provider>,
-    );
-    expect(await screen.findByRole("article")).toBeInTheDocument();
-    expect(screen.getByText(mockPlanet.planets[0].name)).toBeInTheDocument();
-  });
-  test("should handle fetch errors", async () => {
-    vi.mocked(PlanetApi.fetchPlanets).mockRejectedValueOnce(
-      new Error("Error in request"),
-    );
-    render(
-      <Provider store={store}>
-        <Router>
-          <MainPage />
-        </Router>
-      </Provider>,
-    );
-
-    const error = await screen.findByTestId("error-message");
-    expect(error).toBeInTheDocument();
-  });
-});
diff --git a/src/store/store.ts b/src/store/store.ts
index eb02d11..78ecac6 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,11 +1,16 @@
 import { configureStore } from "@reduxjs/toolkit";
 import selectedItemsReducer from "./selectedItemsSlice";
+import { planetsApi } from "../PlanetRTKQuery";
 
 export const store = configureStore({
   reducer: {
     selectedItems: selectedItemsReducer,
+    [planetsApi.reducerPath]: planetsApi.reducer,
   },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(planetsApi.middleware),
 });
+
 export type AppStore = typeof store;
 export type RootState = ReturnType<AppStore["getState"]>;
 export type AppDispatch = AppStore["dispatch"];

From 01107634cee66d39406cb185784e721f5855887d Mon Sep 17 00:00:00 2001
From: PAVEL KOZIN <sart6zaV@yandex.ru>
Date: Sun, 10 Aug 2025 22:52:48 +0300
Subject: [PATCH 2/6] fix: RTKQuery

---
 src/MainPage.tsx      | 65 ++++++--------------------------
 src/PlanetFetch.ts    |  1 +
 src/PlanetRTKQuery.ts | 87 ++++++++++++++++++++++++++++++++++++-------
 src/types.ts          |  3 +-
 4 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/src/MainPage.tsx b/src/MainPage.tsx
index b2005eb..97fdae4 100644
--- a/src/MainPage.tsx
+++ b/src/MainPage.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useRef,
-  useState,
-  useEffect,
-  // useCallback,
-  useContext,
-} from "react";
+import React, { useRef, useEffect, useContext } from "react";
 import {
   useParams,
   useSearchParams,
@@ -12,7 +6,6 @@ import {
   useNavigate,
 } from "react-router-dom";
 import "./App.css";
-// import { PlanetApi } from "./PlanetFetch";
 import Planets from "./Planets";
 import Button from "./Button";
 import Input from "./Input";
@@ -31,29 +24,28 @@ const planetsPerPage = 10;
 function MainPage(): React.ReactElement {
   const navigate = useNavigate();
   const { pageNumber } = useParams();
+  const currentPage = parseInt(pageNumber || "1", 10);
   const initialRender = useRef(true);
   const [searchParams] = useSearchParams();
   const searchQuery = searchParams.get("search") || "";
-  const currentPage = parseInt(pageNumber || "1", 10);
   const localStorageKey: string = "starWarsQuery";
   const [inputValue, setInputValue] = useLocalStorage(
     localStorageKey,
     searchQuery,
   );
 
-  // const [error, setError] = useState<string | null>(null);
-
-  const [searchPlanets, setPlanets] = useState<PlanetsListItem[]>([]);
-  // const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [totalPlanets, setTotalPlanets] = useState(0);
-
   const { theme } = useContext(ThemeContext) || {};
 
   const dispatch = useDispatch();
 
   const selectedItems = useAppSelector(stateItems);
 
-  const { data: planets = [], error, isLoading } = useGetPlanetsQuery("");
+  const {
+    data: { planets = [], total_pages = 0, total_records = 0 } = {},
+    error,
+    isLoading,
+    isFetching,
+  } = useGetPlanetsQuery({ page: currentPage, search: searchQuery });
 
   const toggleItemSelection = (item: PlanetsListItem) => {
     if (selectedItems.some((selected) => selected.uid === item.uid)) {
@@ -63,32 +55,6 @@ function MainPage(): React.ReactElement {
     }
   };
 
-  // const getPlanets = useCallback(async () => {
-  //   let errorMessage = "Unknown error";
-  //   // setIsLoading(true);
-  //   // setError(null);
-  //   try {
-  //     const planets = await PlanetApi.fetchPlanets(searchQuery, currentPage);
-  //     const firstPlanetsIndex = (currentPage - 1) * planetsPerPage;
-  //     const lastPlanetsIndex = firstPlanetsIndex + planetsPerPage;
-  //     const currentPlanets = planets.planets.slice(
-  //       firstPlanetsIndex,
-  //       lastPlanetsIndex,
-  //     );
-  //     setTotalPlanets(planets.count);
-  //     setPlanets(currentPlanets);
-  //   } catch (error) {
-  //     if (error instanceof Error) {
-  //       errorMessage = error.message;
-  //     } else if (typeof error === "string") {
-  //       errorMessage = error;
-  //     }
-  //     // setError(errorMessage);
-  //   } finally {
-  //     // setIsLoading(false);
-  //   }
-  // }, [currentPage, searchQuery]);
-
   useEffect(() => {
     if (initialRender.current) {
       initialRender.current = false;
@@ -98,15 +64,6 @@ function MainPage(): React.ReactElement {
     }
   }, [inputValue, searchQuery, setInputValue]);
 
-  useEffect(() => {
-    // getPlanets();
-    const firstPlanetsIndex = (currentPage - 1) * planetsPerPage;
-    const lastPlanetsIndex = firstPlanetsIndex + planetsPerPage;
-    setPlanets(planets.slice(firstPlanetsIndex, lastPlanetsIndex));
-    setTotalPlanets(planets.length);
-    console.log(searchPlanets);
-  }, [isLoading]);
-
   function handleSearch() {
     navigate(`/list/1?search=${encodeURIComponent(inputValue)}`);
   }
@@ -127,8 +84,8 @@ function MainPage(): React.ReactElement {
       </div>
       <div className="main-container">
         <Planets
-          searchPlanets={searchPlanets}
-          isLoading={isLoading}
+          searchPlanets={planets}
+          isLoading={isLoading || isFetching}
           inputValue={inputValue}
           onItemSelect={toggleItemSelection}
           selectedItems={selectedItems}
@@ -138,7 +95,7 @@ function MainPage(): React.ReactElement {
       {isLoading ? null : (
         <Pagination
           planetsPerPage={planetsPerPage}
-          totalPlanets={totalPlanets}
+          totalPlanets={total_records}
           currentPage={currentPage}
           searchQuery={searchQuery}
         ></Pagination>
diff --git a/src/PlanetFetch.ts b/src/PlanetFetch.ts
index f7557a7..c0ae452 100644
--- a/src/PlanetFetch.ts
+++ b/src/PlanetFetch.ts
@@ -58,6 +58,7 @@ const ToPlanet = (data: { properties: PlanetProperties }): PlanetProperties => {
     climate: data.properties.climate,
     terrain: data.properties.terrain,
     gravity: data.properties.gravity,
+    url: data.properties.url,
   };
 };
 
diff --git a/src/PlanetRTKQuery.ts b/src/PlanetRTKQuery.ts
index 1c9c780..6ad2132 100644
--- a/src/PlanetRTKQuery.ts
+++ b/src/PlanetRTKQuery.ts
@@ -1,11 +1,16 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
-import type { PlanetsListItem } from "./types";
+import type { PlanetsListItem, PlanetProperties } from "./types";
 
 interface Response {
-  results: {
+  results: PlanetsListItem[];
+  total_pages: number;
+  total_records: number;
+}
+
+interface PlanetDetailsResponseSearch {
+  result: {
+    properties: PlanetProperties;
     uid: string;
-    name: string;
-    url: string;
   }[];
 }
 
@@ -13,15 +18,71 @@ export const planetsApi = createApi({
   reducerPath: "planetsApi",
   baseQuery: fetchBaseQuery({ baseUrl: "https://swapi.tech/api/" }),
   endpoints: (builder) => ({
-    getPlanets: builder.query<PlanetsListItem[], string>({
-      query: () => `planets`,
-      transformResponse: (response: Response): PlanetsListItem[] => {
-        // console.log(response);
-        return response.results.map((planet: PlanetsListItem) => ({
-          uid: planet.uid,
-          name: planet.name,
-          url: planet.url,
-        }));
+    getPlanets: builder.query<
+      {
+        planets: PlanetsListItem[];
+        total_pages: number;
+        total_records: number;
+      },
+      { page?: number; search?: string }
+    >({
+      query: ({ page = 1, search = "" }) => {
+        if (search) {
+          return {
+            url: `planets`,
+            params: { name: search },
+          };
+        }
+        return {
+          url: `planets`,
+          params: { page: page, limit: 10 },
+        };
+      },
+      transformResponse: (
+        response: Response | PlanetDetailsResponseSearch,
+        meta,
+        arg,
+      ): {
+        planets: PlanetsListItem[];
+        total_pages: number;
+        total_records: number;
+      } => {
+        let allPlanets: PlanetsListItem[];
+        let total_records: number;
+        let total_pages: number;
+        if ("results" in response) {
+          allPlanets = response.results.map((planet) => ({
+            uid: planet.uid,
+            name: planet.name,
+            url: planet.url,
+          }));
+          total_records = response.total_records;
+          total_pages = response.total_pages;
+        } else {
+          allPlanets = response.result.map((item) => ({
+            uid: item.uid,
+            name: item.properties.name,
+            url: item.properties.url,
+          }));
+          total_records = allPlanets.length;
+          total_pages = Math.ceil(total_records / 10);
+        }
+        if (arg.search && arg.page) {
+          const firstPlanetsIndex = (arg.page - 1 || 0) * 10;
+          const lastPlanetsIndex = firstPlanetsIndex + 10;
+          const planets = allPlanets.slice(firstPlanetsIndex, lastPlanetsIndex);
+          return {
+            planets: planets,
+            total_pages: total_pages,
+            total_records: allPlanets.length,
+          };
+        } else {
+          return {
+            planets: allPlanets,
+            total_pages: total_pages,
+            total_records: total_records,
+          };
+        }
       },
     }),
   }),
diff --git a/src/types.ts b/src/types.ts
index 89e5bd8..550148c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,5 @@
 export interface PlanetProperties {
-  name?: string;
+  name: string;
   diameter: string;
   rotation_period: string;
   orbital_period: string;
@@ -7,6 +7,7 @@ export interface PlanetProperties {
   climate: string;
   terrain: string;
   gravity: string;
+  url: string;
 }
 
 export interface Planet {

From c6b621a45f833f79439b2f2da3257a78e41ada4f Mon Sep 17 00:00:00 2001
From: PAVEL KOZIN <sart6zaV@yandex.ru>
Date: Sun, 10 Aug 2025 22:55:51 +0300
Subject: [PATCH 3/6] fix: few fix

---
 src/MainPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/MainPage.tsx b/src/MainPage.tsx
index 97fdae4..d843bc6 100644
--- a/src/MainPage.tsx
+++ b/src/MainPage.tsx
@@ -41,7 +41,7 @@ function MainPage(): React.ReactElement {
   const selectedItems = useAppSelector(stateItems);
 
   const {
-    data: { planets = [], total_pages = 0, total_records = 0 } = {},
+    data: { planets = [], total_records = 0 } = {},
     error,
     isLoading,
     isFetching,

From 788e21fd800050153195e0e2ef1e9c6784a518a3 Mon Sep 17 00:00:00 2001
From: PAVEL KOZIN <sart6zaV@yandex.ru>
Date: Sun, 10 Aug 2025 23:49:07 +0300
Subject: [PATCH 4/6] fix: type error fix

---
 src/PlanetRTKQuery.ts       | 2 +-
 src/__tests__/Card.test.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/PlanetRTKQuery.ts b/src/PlanetRTKQuery.ts
index 6ad2132..5a2d551 100644
--- a/src/PlanetRTKQuery.ts
+++ b/src/PlanetRTKQuery.ts
@@ -40,7 +40,7 @@ export const planetsApi = createApi({
       },
       transformResponse: (
         response: Response | PlanetDetailsResponseSearch,
-        meta,
+        _meta,
         arg,
       ): {
         planets: PlanetsListItem[];
diff --git a/src/__tests__/Card.test.tsx b/src/__tests__/Card.test.tsx
index b4699ab..a05d2ab 100644
--- a/src/__tests__/Card.test.tsx
+++ b/src/__tests__/Card.test.tsx
@@ -32,6 +32,7 @@ describe("Planet Cards Rendering", () => {
       orbital_period: "364",
       gravity: "1 standard",
       terrain: "grasslands, mountains",
+      url: "https://www.swapi.tech/api/planets/2",
     };
 
     vi.mocked(PlanetApi.fetchPlanetDetail).mockResolvedValue(mockPlanetData);

From 7ba830a57a4d99f7e482719884d45b454987585b Mon Sep 17 00:00:00 2001
From: PAVEL KOZIN <sart6zaV@yandex.ru>
Date: Mon, 11 Aug 2025 02:02:57 +0300
Subject: [PATCH 5/6] feat: RTQ Query planetdetail

---
 src/App.css                             |  4 +-
 src/PlanetCard.tsx                      | 43 +++--------
 src/PlanetFetch.ts                      | 95 -------------------------
 src/PlanetRTKQuery.ts                   | 11 ++-
 src/SelectedPlanets/SelectedPlanets.css |  5 +-
 src/__tests__/Card.test.tsx             | 52 --------------
 src/__tests__/CardList                  | 88 -----------------------
 7 files changed, 27 insertions(+), 271 deletions(-)
 delete mode 100644 src/PlanetFetch.ts
 delete mode 100644 src/__tests__/Card.test.tsx
 delete mode 100644 src/__tests__/CardList

diff --git a/src/App.css b/src/App.css
index a936122..1495cb2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,9 +23,9 @@ body.dark {
 }
 
 .title {
+  margin: 10px;
   text-align: center;
   color: #000000;
-  margin-bottom: 30px;
   font-size: 2.5rem;
 }
 
@@ -40,7 +40,7 @@ body.dark {
   background-color: #2a2a2a;
   padding: 20px;
   border-radius: 8px;
-  margin-bottom: 30px;
+  margin-bottom: 10px;
 }
 
 .main-input {
diff --git a/src/PlanetCard.tsx b/src/PlanetCard.tsx
index 85e9a30..b11cd7b 100644
--- a/src/PlanetCard.tsx
+++ b/src/PlanetCard.tsx
@@ -1,15 +1,8 @@
-import React, { useEffect, useState } from "react";
-import type { PlanetProperties } from "./types";
 import Spinner from "./Spinner";
-import { PlanetApi } from "./PlanetFetch";
 import { useParams, useNavigate } from "react-router-dom";
+import { useGetPlanetDetailsQuery } from "./PlanetRTKQuery";
 
 function PlanetCard(): React.ReactElement {
-  const [error, setError] = useState<string | null>(null);
-  const [isLoadingDetail, setIsLoadingDetail] = useState<boolean>(false);
-  const [selectedPlanet, setSelectedPlanet] = useState<PlanetProperties | null>(
-    null,
-  );
   const { planetId, pageNumber } = useParams();
   const navigate = useNavigate();
 
@@ -17,36 +10,22 @@ function PlanetCard(): React.ReactElement {
     navigate(pageNumber ? `/list/${pageNumber}` : "/");
   };
 
-  useEffect(() => {
-    const getPlanetSelect = async () => {
-      let errorMessage = "Unknown error";
-      try {
-        if (!planetId) return null;
-        setIsLoadingDetail(true);
-        const planetUrl = `https://swapi.tech/api/planets/${planetId}`;
-        const planetDetails = await PlanetApi.fetchPlanetDetail(planetUrl);
-        setSelectedPlanet(planetDetails);
-      } catch (error) {
-        if (error instanceof Error) {
-          errorMessage = error.message;
-        } else if (typeof error === "string") {
-          errorMessage = error;
-        }
-        setError(errorMessage);
-      } finally {
-        setIsLoadingDetail(false);
-      }
-    };
-    getPlanetSelect();
-  }, [planetId]);
+  const {
+    data: selectedPlanet,
+    error,
+    isLoading,
+    isFetching,
+  } = useGetPlanetDetailsQuery(planetId);
 
   return (
     <div className="planet-details">
-      {isLoadingDetail ? (
+      {isLoading || isFetching ? (
         <Spinner />
       ) : (
         <>
-          {error ? <div data-testid="error-message">{error}</div> : null}
+          {error ? (
+            <div data-testid="error-message">{JSON.stringify(error)}</div>
+          ) : null}
           {selectedPlanet && (
             <>
               <button className="close-button" onClick={handleClose}>
diff --git a/src/PlanetFetch.ts b/src/PlanetFetch.ts
deleted file mode 100644
index c0ae452..0000000
--- a/src/PlanetFetch.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import type { PlanetProperties, PlanetsListItem } from "./types";
-
-interface PlanetsListResponse {
-  results: PlanetsListItem[];
-}
-
-interface PlanetDetailsResponse {
-  result: {
-    properties: PlanetProperties;
-    uid: string;
-  };
-}
-
-interface PlanetDetailsResponseSearch {
-  result: [];
-}
-
-async function fetchData<T>(searchQuery: string): Promise<T> {
-  const response = await fetch(searchQuery);
-  if (!response.ok) {
-    throw new Error("Error in request");
-  }
-  return response.json();
-}
-const ArrayToPlanet1 = (data: {
-  uid: string;
-  name: string;
-  url: string;
-}): PlanetsListItem => {
-  return {
-    uid: data.uid,
-    name: data.name,
-    url: data.url,
-  };
-};
-
-const ArrayToPlanet2 = (data: {
-  properties: {
-    uid: string;
-    name: string;
-    url: string;
-  };
-}): PlanetsListItem => {
-  return {
-    uid: data.properties.uid,
-    name: data.properties.name,
-    url: data.properties.url,
-  };
-};
-
-const ToPlanet = (data: { properties: PlanetProperties }): PlanetProperties => {
-  return {
-    name: data.properties.name,
-    diameter: data.properties.diameter,
-    rotation_period: data.properties.rotation_period,
-    orbital_period: data.properties.orbital_period,
-    population: data.properties.population,
-    climate: data.properties.climate,
-    terrain: data.properties.terrain,
-    gravity: data.properties.gravity,
-    url: data.properties.url,
-  };
-};
-
-export const PlanetApi = {
-  fetchPlanets: async function (
-    searchQuery: string = "",
-    currentPage: number = 1,
-  ) {
-    let url: string;
-    let planets = [];
-    let count;
-    if (searchQuery) {
-      url =
-        "https://swapi.tech/api/planets" +
-        "?name=" +
-        encodeURIComponent(searchQuery.trim());
-      const listData = await fetchData<PlanetDetailsResponseSearch>(url);
-      planets = listData.result.map((planet) => ArrayToPlanet2(planet));
-      count = planets.length;
-    } else {
-      const listData = await fetchData<PlanetsListResponse>(
-        `https://swapi.tech/api/planets?page=${currentPage}&limit=NaN`,
-      );
-      planets = listData.results.map((detail) => ArrayToPlanet1(detail));
-      count = planets.length;
-    }
-    return { planets, count };
-  },
-
-  fetchPlanetDetail: async function (planet_url: string = "") {
-    const planetDetails = await fetchData<PlanetDetailsResponse>(planet_url);
-    return ToPlanet(planetDetails.result);
-  },
-};
diff --git a/src/PlanetRTKQuery.ts b/src/PlanetRTKQuery.ts
index 5a2d551..16e5ca5 100644
--- a/src/PlanetRTKQuery.ts
+++ b/src/PlanetRTKQuery.ts
@@ -85,7 +85,16 @@ export const planetsApi = createApi({
         }
       },
     }),
+
+    getPlanetDetails: builder.query<PlanetProperties, string | undefined>({
+      query: (planetId) => `planets/${planetId}`,
+      transformResponse: (response: {
+        result: { properties: PlanetProperties };
+      }) => {
+        return response.result.properties;
+      },
+    }),
   }),
 });
 
-export const { useGetPlanetsQuery } = planetsApi;
+export const { useGetPlanetsQuery, useGetPlanetDetailsQuery } = planetsApi;
diff --git a/src/SelectedPlanets/SelectedPlanets.css b/src/SelectedPlanets/SelectedPlanets.css
index bd93acb..675d9a0 100644
--- a/src/SelectedPlanets/SelectedPlanets.css
+++ b/src/SelectedPlanets/SelectedPlanets.css
@@ -10,7 +10,10 @@
   max-height: 50vh;
   transition: bottom 0.3s ease;
 }
-
+.selected-planets h3{
+  margin: 1px;
+  margin-bottom: 10px;
+}
 .selected-planets.visible {
   bottom: 0px;
 }
diff --git a/src/__tests__/Card.test.tsx b/src/__tests__/Card.test.tsx
deleted file mode 100644
index a05d2ab..0000000
--- a/src/__tests__/Card.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { describe, test, expect, vi } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
-import PlanetCard from "../PlanetCard";
-import { PlanetApi } from "../PlanetFetch";
-import { BrowserRouter as Router } from "react-router-dom";
-import { Provider } from "react-redux";
-import { store } from "../store/store";
-import type { Params } from "react-router-dom";
-
-vi.mock("../PlanetFetch", () => ({
-  PlanetApi: {
-    fetchPlanetDetail: vi.fn(),
-  },
-}));
-
-vi.mock("react-router-dom", async (importOriginal) => {
-  const original = await importOriginal<typeof import("react-router-dom")>();
-  return {
-    ...original,
-    useParams: (): Readonly<Params<string>> => ({ planetId: "2" }),
-  };
-});
-
-describe("Planet Cards Rendering", () => {
-  test("should render 1 planet cards", async () => {
-    const mockPlanetData = {
-      name: "Alderaan",
-      diameter: "12500",
-      climate: "temperate",
-      population: "2000000000",
-      rotation_period: "24",
-      orbital_period: "364",
-      gravity: "1 standard",
-      terrain: "grasslands, mountains",
-      url: "https://www.swapi.tech/api/planets/2",
-    };
-
-    vi.mocked(PlanetApi.fetchPlanetDetail).mockResolvedValue(mockPlanetData);
-    render(
-      <Provider store={store}>
-        <Router>
-          <PlanetCard />
-        </Router>
-      </Provider>,
-    );
-    await waitFor(() => {
-      expect(
-        screen.getByRole("heading", { name: /Alderaan/ }),
-      ).toBeInTheDocument();
-    });
-  });
-});
diff --git a/src/__tests__/CardList b/src/__tests__/CardList
deleted file mode 100644
index 9f95093..0000000
--- a/src/__tests__/CardList
+++ /dev/null
@@ -1,88 +0,0 @@
-// import { describe, test, expect } from "vitest";
-// import { render, screen } from "@testing-library/react";
-// import userEvent from "@testing-library/user-event";
-// import MainPage from "../MainPage";
-// import { PlanetApi } from "../PlanetFetch";
-// import { BrowserRouter as Router } from "react-router-dom";
-// import type { PlanetsListItem } from "../types";
-// import { Provider } from "react-redux";
-// import { store } from "../store/store";
-
-// vi.mock("../PlanetFetch", () => ({
-//   PlanetApi: {
-//     fetchPlanets: vi.fn(),
-//   },
-// }));
-
-// interface fetchData {
-//   planets: PlanetsListItem[];
-//   count: number;
-// }
-
-// const mockPlanet: fetchData = {
-//   planets: [
-//     {
-//       name: "Tatooine",
-//       url: "",
-//       uid: "1",
-//     },
-//   ],
-//   count: 1,
-// };
-
-// describe("Planet Cards Rendering", () => {
-//   beforeEach(() => {
-//     vi.clearAllMocks();
-//   });
-
-//   test("should render 1 planet cards", async () => {
-//     const user = userEvent.setup();
-//     vi.mocked(PlanetApi.fetchPlanets).mockResolvedValue(mockPlanet);
-//     render(
-//       <Provider store={store}>
-//         <Router>
-//           <MainPage />
-//         </Router>
-//       </Provider>,
-//     );
-
-//     const inputElement = screen.getByRole("textbox");
-//     await user.type(inputElement, "Tatooine");
-//     const buttonElement = screen.getByRole("button", { name: /Search/ });
-//     expect(inputElement).toHaveValue("Tatooine");
-//     await user.click(buttonElement);
-
-//     const cards = await screen.findAllByRole("article");
-//     expect(cards).toHaveLength(1);
-//     expect(screen.getByRole("article")).toBeInTheDocument();
-//     expect(screen.getByText(mockPlanet.planets[0].name)).toBeInTheDocument();
-//   });
-
-//   test("should render all planet cards", async () => {
-//     vi.mocked(PlanetApi.fetchPlanets).mockResolvedValue(mockPlanet);
-//     render(
-//       <Provider store={store}>
-//         <Router>
-//           <MainPage />
-//         </Router>
-//       </Provider>,
-//     );
-//     expect(await screen.findByRole("article")).toBeInTheDocument();
-//     expect(screen.getByText(mockPlanet.planets[0].name)).toBeInTheDocument();
-//   });
-//   test("should handle fetch errors", async () => {
-//     vi.mocked(PlanetApi.fetchPlanets).mockRejectedValueOnce(
-//       new Error("Error in request"),
-//     );
-//     render(
-//       <Provider store={store}>
-//         <Router>
-//           <MainPage />
-//         </Router>
-//       </Provider>,
-//     );
-
-//     const error = await screen.findByTestId("error-message");
-//     expect(error).toBeInTheDocument();
-//   });
-// });

From e49e2b07888e011bc9e9b670cfecb864e8e10d80 Mon Sep 17 00:00:00 2001
From: PAVEL KOZIN <sart6zaV@yandex.ru>
Date: Mon, 11 Aug 2025 02:42:59 +0300
Subject: [PATCH 6/6] feat: add button Refetch

---
 src/MainPage.tsx   |  2 ++
 src/Pagination.css | 22 +++++++++++++++++++++-
 src/Pagination.tsx |  4 ++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/MainPage.tsx b/src/MainPage.tsx
index d843bc6..bc55283 100644
--- a/src/MainPage.tsx
+++ b/src/MainPage.tsx
@@ -45,6 +45,7 @@ function MainPage(): React.ReactElement {
     error,
     isLoading,
     isFetching,
+    refetch,
   } = useGetPlanetsQuery({ page: currentPage, search: searchQuery });
 
   const toggleItemSelection = (item: PlanetsListItem) => {
@@ -98,6 +99,7 @@ function MainPage(): React.ReactElement {
           totalPlanets={total_records}
           currentPage={currentPage}
           searchQuery={searchQuery}
+          refetch={refetch}
         ></Pagination>
       )}
       {!isLoading && <SelectedPlanets />}
diff --git a/src/Pagination.css b/src/Pagination.css
index 089db56..5de3264 100644
--- a/src/Pagination.css
+++ b/src/Pagination.css
@@ -1,7 +1,7 @@
 .pagination-container {
   display: flex;
   gap: 8px;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   background-color: #000;
   padding: 16px;
@@ -31,3 +31,23 @@
   background-color: #a0910f;
   color: #000;
 }
+
+.pagination-container button{
+  margin-left:20%;
+  right: 0;
+  color: #a0910f;
+  background-color: transparent;
+  border: 1px solid #a0910f;
+  border-radius: 4px;
+  padding: 8px 12px;
+  cursor: pointer;
+  min-width: 36px;
+  text-decoration: none;
+  text-align: center;
+  font-weight: bold;
+}
+
+.pagination-container button:hover {
+  background-color: #a0910f;
+  color: #000;
+}
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index 7de7a52..0f91cac 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -1,12 +1,14 @@
 import { NavLink } from "react-router-dom";
 import "./Pagination.css";
 import { useParams } from "react-router-dom";
+import Button from "./Button";
 
 interface PaginationProps {
   planetsPerPage: number;
   totalPlanets: number;
   currentPage: number;
   searchQuery: string;
+  refetch: () => object;
 }
 
 export default function Pagination({
@@ -14,6 +16,7 @@ export default function Pagination({
   totalPlanets,
   currentPage,
   searchQuery,
+  refetch,
 }: PaginationProps): React.ReactElement {
   const pageNumbers = [];
   const { planetId } = useParams();
@@ -32,6 +35,7 @@ export default function Pagination({
           {number}
         </NavLink>
       ))}
+      <Button onClick={() => refetch()}>{"Refetch"}</Button>
     </div>
   );
 }