completed changes

package.json

@@ -17,6 +17,7 @@
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^5.3.4",
     "react-redux": "^8.0.5",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "redux": "^4.2.1",
     "redux-saga": "^1.2.3",

src/App.tsx

@@ -1,15 +1,25 @@
-import './App.styles.jsx';
+import "./App.styles.jsx";
 import * as S from "./App.styles";
 import { FC } from "react";
-import Main from './pages/main';
+import Main from "./pages/main";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useSelector } from "react-redux";
+import DescriptionPage from "pages/description";
+import { IDataBooks } from "types/index.js";
 
 const App:FC = ():JSX.Element => {
+	const url = useSelector((state: IDataBooks) => state.books.id);
 
-  return (
-    <S.Container>
-        <Main />
-    </S.Container>
-  );
-}
+	return (
+		<BrowserRouter>
+			<S.Container>
+				<Routes>
+					<Route path="/*" element={<Main />} />
+					<Route path={`${url}`} element={<DescriptionPage />} />
+				</Routes>
+			</S.Container>
+		</BrowserRouter>
+	);
+};
 
 export default App;

src/assets/constants/index.tsx

@@ -1,23 +1,9 @@
 export const kindSortButtons = [
-	{
-		name: "All",
-	},
-	{
-		name: "Art",
-	},
-	{
-		name: "Biography",
-	},
-	{
-		name: "Computers",
-	},
-	{
-		name: "History",
-	},
-	{
-		name: "Medical",
-	},
-	{
-		name: "Poetry",
-	},
+	{ name: "All" },
+	{ name: "Art" },
+	{ name: "Biography" },
+	{ name: "Computers" },
+	{ name: "History" },
+	{ name: "Medical" },
+	{ name: "Poetry" },
 ];

src/common/api/constant/index.tsx

@@ -1,2 +1 @@
-const API__KEY = `AIzaSyAPez01RNSc-o39SVYSn2nSeDiVyRHGLCo`;
 export const basicUrl = `https://www.googleapis.com/books/v1/volumes`;

src/common/api/helpers/index.tsx

@@ -1,20 +1,18 @@
 import axios from "axios";
+import { localString } from "types";
 import { basicUrl } from "../constant";
 
-export const getBooksApi = (action: any) => {
-	const response = axios.get(`${basicUrl}?q=${action}&maxResults=40`);
+export const getBooksApi = (queryParams:localString) => {
+	const response = axios.get(`${basicUrl}?=${queryParams}&maxResults=40`);
 	return response;
 };
 
-export const getSortingBooksApi = (action: any) => {
-	const response = axios.get(`${basicUrl}?q=${action}&maxResults=40`);
+export const getSortingBooksApi = (queryParams:localString) => {
+	const response = axios.get(`${basicUrl}?q=${queryParams}&maxResults=40`);
 	return response;
 };
 
-export const getBookByIDApi = (action: any) => {
-	console.log('response in last function')
-	const response = axios.get(`${basicUrl}/${action}`);
-	console.log('response in last function', response)
+export const getBookByIDApi = (queryParams:localString) => {
+	const response = axios.get(`${basicUrl}/${queryParams}`);
 	return response;
 };
-

src/components/button/index.styles.jsx

@@ -14,7 +14,7 @@ export const ContainerButton = styled.button`
 	}
 	:hover {
 		cursor: pointer;
-		background-color: #fdd;
+		background-color: #9f9999;
 		border: 1px solid #000;
 		transition: all 500ms;
 	}

src/components/button/index.tsx

@@ -2,6 +2,14 @@ import { FC } from "react";
 import { IPropsButton } from "types";
 import * as S from "./index.styles";
 
-export const Button:FC<IPropsButton> = ({ onClick, buttonName }):JSX.Element => {
-	return <S.ContainerButton onClick={onClick} ><span>{buttonName}</span></S.ContainerButton>;
+export const Button: FC<IPropsButton> = ({
+	onClick,
+	buttonName,
+	className,
+}): JSX.Element => {
+	return (
+		<S.ContainerButton onClick={ onClick } className={ className }>
+			<span>{ buttonName }</span>
+		</S.ContainerButton>
+	);
 };

src/components/input/index.styles.jsx

@@ -1,9 +1,8 @@
 import styled from "styled-components";
 
 export const ContainerInput = styled.input`
-
-max-width: 600px;
-width: 100%;;
+	max-width: 600px;
+	width: 100%;
 	outline: none;
 	min-height: 50px;
 	border-radius: 10px;

src/components/input/index.tsx

@@ -3,11 +3,12 @@ import { useDispatch } from "react-redux";
 import * as S from "./index.styles";
 import { getBooks } from "redux/reducer";
 import React from "react";
+import { IPropsInput } from "types";
 
-const Input: FC<any> = ({ value, setValue }): JSX.Element => {
+const Input: FC<IPropsInput> = ({ value, setValue }): JSX.Element => {
 	const dispatch = useDispatch();
 
-	const handleValue = (e: any) => {
+	const handleValue = (e: React.ChangeEvent<HTMLInputElement>): void => {
 		setValue(e.target.value);
 	};
 

src/components/select/index.styles.jsx

@@ -6,9 +6,8 @@ export const ContainerSelect = styled.select`
 	height: 30px;
 	border-radius: 5px;
 	margin-top: 20px;
-   font-family: "Edu NSW ACT Foundation", cursive;
-		font-weight: 700;
- 
+	font-family: "Edu NSW ACT Foundation", cursive;
+	font-weight: 700;
 	&:hover {
 		cursor: pointer;
 	}

src/components/select/index.tsx

@@ -1,13 +1,14 @@
+import { FC } from "react";
 import { useDispatch } from "react-redux";
 import { getSortingBooks } from "redux/reducer";
+import { IPropsSelect } from "types";
 import * as S from "./index.styles";
 
-const Select = ({ value }:any) => {
+const Select: FC<IPropsSelect> = ({ value }): JSX.Element => {
 	const dispatch = useDispatch();
 
-	const handleSortingBy = (e: any) => {
-		const queryParams = `${value}&orderBy=${e.target.value}`
-		//@ts-ignore
+	const handleSortingBy = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		const queryParams = `${value}&orderBy=${e.target.value}`;
 		dispatch(getSortingBooks(queryParams));
 	};
 

src/index.css

@@ -5,9 +5,9 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+};
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+};

src/index.tsx

@@ -5,7 +5,6 @@ import App from "./App";
 import { Provider } from "react-redux";
 import { store } from "redux/index";
 
-
 const root = ReactDOM.createRoot(
 	document.getElementById("root") as HTMLElement,
 );

src/pages/description/index.styles.jsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+	display: flex;
+	max-width: 1400px;
+	width: 100%;
+	justify-content: space-around;
+	align-items: center;
+	min-height: 700px;
+	background-color: #cdcdcd;
+	border-radius: 20px;
+	img {
+		max-width: 700px;
+		width: 100%;
+		height: 500px;
+	}
+	.container__label {
+		max-width: 400px;
+		width: 100%;
+	}
+	.container__description {
+		max-width: 700px;
+		width: 100%;
+		.name {
+			max-width: 300px;
+			width: 100%;
+		}
+		.categories {
+			max-width: 300px;
+			width: 100%;
+		}
+		.authors {
+			max-width: 300px;
+			width: 100%;
+		}
+	}
+`;

src/pages/description/index.tsx

@@ -0,0 +1,67 @@
+import * as S from "./index.styles";
+import { useSelector } from "react-redux";
+import { Button } from "components/button";
+import { Link } from "react-router-dom";
+import { MagnifyingGlass } from "react-loader-spinner";
+import { ICurrentState, IState } from "types";
+
+const DescriptionPage = () => {
+	const bookImage = useSelector(
+		(state:ICurrentState) => state.books.book.data?.volumeInfo.imageLinks.smallThumbnail,
+	);
+	const bookName = useSelector(
+		(state:ICurrentState) => state.books.book.data?.volumeInfo.title,
+	);
+	const bookCategories = useSelector(
+		(state:ICurrentState) => state.books.book.data?.volumeInfo.categories,
+	);
+	const bookAuthors = useSelector(
+		(state:ICurrentState) => state.books.book.data?.volumeInfo.authors,
+	);
+	const bookDescription = useSelector(
+		(state:ICurrentState) => state.books.book.data?.volumeInfo.description,
+	);
+	const isLoading = useSelector((state:IState) => state.books?.loading);
+
+	return (
+		<S.Container>
+			{isLoading ? (
+				<MagnifyingGlass
+					visible={true}
+					height="110"
+					width="110"
+					ariaLabel="MagnifyingGlass-loading"
+					wrapperStyle={{ marginTop: "10px" }}
+					wrapperClass="MagnifyingGlass-wrapper"
+					glassColor="#c0efff"
+					color="#bb7d81"
+				/>
+			) : (
+				<>
+					<Link to="/*">
+						<Button buttonName={"Back"} className={"backbutton"} />
+					</Link>
+					<div className="container__label">
+						<img src={bookImage} alt="label of book" />
+					</div>
+					<div className="container__description">
+						<p className="name">
+							Name: <span className="namingBook">{bookName}</span>
+						</p>
+						<p className="categories">
+							Categories: <span className="namingBook">{bookCategories}</span>
+						</p>
+						<p className="authors">
+							Authors: <span className="namingBook">{bookAuthors}</span>
+						</p>
+						<p className="description">
+							Description: <span className="namingBook">{bookDescription}</span>
+						</p>
+					</div>
+				</>
+			)}
+		</S.Container>
+	);
+};
+
+export default DescriptionPage;

src/pages/items/index.styles.jsx

@@ -8,10 +8,22 @@ export const Container = styled.div`
 	gap: 15px;
 	min-height: calc(100vh - 200px);
 	.container__content {
+		text-decoration: none;
+		color: #000;
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
 		justify-content: center;
 		gap: 30px;
+		
+		a {
+			text-decoration: none;
+			color: #000;
+			max-width: 200px;
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+		}
 	}
+
 `;