RTK Query

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 {

src/MainPage.tsx

@@ -1,18 +1,11 @@
-import React, {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  useContext,
-} from "react";
+import React, { useRef, useEffect, useContext } from "react";
 import {
   useParams,
   useSearchParams,
   Outlet,
   useNavigate,
 } from "react-router-dom";
 import "./App.css";
-import { PlanetApi } from "./PlanetFetch";
 import Planets from "./Planets";
 import Button from "./Button";
 import Input from "./Input";
@@ -24,30 +17,37 @@ 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 {
   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 [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 = [], total_records = 0 } = {},
+    error,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useGetPlanetsQuery({ page: currentPage, search: searchQuery });
+
   const toggleItemSelection = (item: PlanetsListItem) => {
     if (selectedItems.some((selected) => selected.uid === item.uid)) {
       dispatch(removeItem(item.uid));
@@ -56,32 +56,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;
@@ -91,12 +65,6 @@ function MainPage(): React.ReactElement {
     }
   }, [inputValue, searchQuery, setInputValue]);
 
-  useEffect(() => {
-    getPlanets();
-  }, [getPlanets, searchQuery]);
-
-  const [error, setError] = useState<string | null>(null);
-
   function handleSearch() {
     navigate(`/list/1?search=${encodeURIComponent(inputValue)}`);
   }
@@ -108,15 +76,17 @@ 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>
       </div>
       <div className="main-container">
         <Planets
-          searchPlanets={searchPlanets}
-          isLoading={isLoading}
+          searchPlanets={planets}
+          isLoading={isLoading || isFetching}
           inputValue={inputValue}
           onItemSelect={toggleItemSelection}
           selectedItems={selectedItems}
@@ -126,9 +96,10 @@ function MainPage(): React.ReactElement {
       {isLoading ? null : (
         <Pagination
           planetsPerPage={planetsPerPage}
-          totalPlanets={totalPlanets}
+          totalPlanets={total_records}
           currentPage={currentPage}
           searchQuery={searchQuery}
+          refetch={refetch}
         ></Pagination>
       )}
       {!isLoading && <SelectedPlanets />}

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;
+}

src/Pagination.tsx

@@ -1,19 +1,22 @@
 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({
   planetsPerPage,
   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>
   );
 }

src/PlanetCard.tsx

@@ -1,52 +1,31 @@
-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();
 
   const handleClose = () => {
     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}>