fix/TMS-1005: changed styles and refactoring code, switched styled co…

…mpoents and replace types of component
kr4chinin · Apr 10, 2023 · 7d73004 · 7d73004
1 parent 9a37407
commit 7d73004
Show file tree

Hide file tree

Showing 19 changed files with 327 additions and 396 deletions.
diff --git a/src/common/api/helpers/index.tsx b/src/common/api/helpers/index.tsx
@@ -1,19 +1,18 @@
 import axios from 'axios';
-import { localString } from 'types';
 
 import { basicUrl } from '../constant';
 
-export const getBooksApi = (queryParams: localString) => {
+export const getBooksApi = (queryParams: string) => {
 	const response = axios.get(`${basicUrl}?q=${queryParams}&maxResults=40`);
 	return response;
 };
 
-export const getSortingBooksApi = (queryParams: localString) => {
+export const getSortingBooksApi = (queryParams: string) => {
 	const response = axios.get(`${basicUrl}?q=${queryParams}&maxResults=40`);
 	return response;
 };
 
-export const getBookByIDApi = (queryParams: localString) => {
+export const getBookByIDApi = (queryParams: string) => {
 	const response = axios.get(`${basicUrl}/${queryParams}`);
 	return response;
 };
diff --git a/src/components/button/index.styles.jsx b/src/components/button/index.styles.jsx
@@ -2,22 +2,18 @@ import styled from 'styled-components';
 
 export const ContainerButton = styled.button`
 	max-width: 100px;
-	margin-left: 10px;
 	min-height: 50px;
+	margin-left: 10px;
+	padding: 5px 10px;
 	background-image: linear-gradient(60deg, #cdcdcd 50%, transparent 30%);
 	background-position: 100%;
 	background-size: 400%;
 	background-color: transparent;
 	border-radius: 10px;
 	border: 1px solid #434242;
-	padding: 5px 10px;
 	@media (max-width: 560px) {
-		padding: 1px 1px;
 		min-height: 30px;
-	}
-	span {
-		font-family: 'Edu NSW ACT Foundation', cursive;
-		font-weight: 700;
+		padding: 1px 1px;
 	}
 	:hover {
 		cursor: pointer;
@@ -26,3 +22,8 @@ export const ContainerButton = styled.button`
 		background-position: 10%;
 	}
 `;
+
+export const Inline = styled.span`
+	font-family: 'Edu NSW ACT Foundation', cursive;
+	font-weight: 700;
+`;
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -1,17 +1,22 @@
 import { FC } from 'react';
-import { IPropsButton } from 'types';
 
 import * as S from './index.styles';
 
+interface IPropsButton {
+	buttonName: string;
+	className?: string;
+	handleClick?: () => void;
+}
+
 export const Button: FC<IPropsButton> = ({
-	onClick,
+	handleClick,
 	buttonName,
 	className,
 }): JSX.Element => {
 
 	return (
-		<S.ContainerButton onClick={onClick} className={className}>
-			<span>{buttonName}</span>
+		<S.ContainerButton onClick={handleClick} className={className}>
+			<S.Inline>{buttonName}</S.Inline>
 		</S.ContainerButton>
 	);
 };
diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
@@ -1,17 +1,21 @@
 import { FC } from 'react';
 import { getBooks } from 'redux/reducer';
 import React from 'react';
-import { IPropsInput } from 'types';
 
 import * as S from './index.styles';
 
-const Input: FC<IPropsInput> = ({ value, setValue, dispatch }): JSX.Element => {
+interface IPropsInput {
+	value?: string;
+	dispatch: (e: any) => string;
+	setValue: (e: string) => void;
+}
 
-	const handleValue = (e: React.ChangeEvent<HTMLInputElement>): void => {
+const Input: FC<IPropsInput> = ({ value, setValue, dispatch }): JSX.Element => {
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
 		setValue(e.target.value);
 	};
 
-	const handleChange = (e: React.KeyboardEvent): void => {
+	const handleKeyPress = (e: React.KeyboardEvent): void => {
 		if (e.key === 'Enter') {
 			dispatch(getBooks(value));
 		}
@@ -21,8 +25,8 @@ const Input: FC<IPropsInput> = ({ value, setValue, dispatch }): JSX.Element => {
 		<S.ContainerInput
 			type="text"
 			placeholder="Введите название книги"
-			onChange={handleValue}
-			onKeyPress={handleChange}
+			onChange={handleChange}
+			onKeyPress={handleKeyPress}
 		/>
 	);
 };

diff --git a/src/components/select/index.tsx b/src/components/select/index.tsx
@@ -1,19 +1,22 @@
 import { FC } from 'react';
 import { getSortingBooks } from 'redux/reducer';
-import { IPropsSelect } from 'types';
 
 import * as S from './index.styles';
 
-const Select: FC<IPropsSelect> = ({ value, dispatch }): JSX.Element => {
+export interface IPropsSelect {
+	dispatch: (e: any) => string;
+	value?: string;
+}
 
-	const handleSortingBy = (e: React.ChangeEvent<HTMLInputElement>): void => {
+const Select: FC<IPropsSelect> = ({ value, dispatch }): JSX.Element => {
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
 		const queryParams = `${value}&orderBy=${e.target.value}`;
 		dispatch(getSortingBooks(queryParams));
 	};
 
 	return (
 		<S.ContainerSelect
-			onChange={handleSortingBy}
+			onChange={handleChange}
 			name="sortingBy"
 			id="sortingBy"
 		>

diff --git a/src/pages/description/index.styles.jsx b/src/pages/description/index.styles.jsx
@@ -9,78 +9,48 @@ export const Container = styled.div`
 	min-height: 700px;
 	background: linear-gradient(#b98d60, #474649);
 	border-radius: 20px;
-	.container__label {
-		margin: 0 40px 0 40px;
-	}
 	@media (max-width: 560px) {
 		max-width: 500px;
 		width: 100%;
 		min-height: 400px;
 	}
-	img {
-		max-width: 700px;
+`;
+
+export const ContainerLabel = styled.div`
+	margin: 0 40px 0 40px;
+`;
+
+export const Image = styled.img`
+	max-width: 700px;
+	width: 100%;
+	height: 500px;
+	@media (max-width: 560px) {
+		max-width: 100px;
 		width: 100%;
-		height: 500px;
-		@media (max-width: 560px) {
-			max-width: 100px;
-			width: 100%;
-			height: 180px;
-		}
+		height: 180px;
 	}
-	.container__label {
-		max-width: 400px;
+`;
+
+export const ContainerDescription = styled.div`
+	max-width: 700px;
+	width: 100%;
+	@media (max-width: 560px) {
+		max-width: 300px;
 		width: 100%;
-		@media (max-width: 560px) {
-			display: flex;
-			justify-content: center;
-		}
 	}
-	.container__description {
-		max-width: 700px;
+`;
+
+export const Page = styled.p`
+	max-width: 300px;
+	width: 100%;
+	@media (max-width: 560px) {
+		max-width: 100px;
 		width: 100%;
-		@media (max-width: 560px) {
-			max-width: 300px;
-			width: 100%;
-		}
-		.name {
-			max-width: 300px;
-			width: 100%;
-			@media (max-width: 560px) {
-				max-width: 100px;
-				width: 100%;
-				font-size: 10px;
-			}
-		}
-		.categories {
-			max-width: 300px;
-			width: 100%;
-			@media (max-width: 560px) {
-				max-width: 100px;
-				width: 100%;
-				font-size: 10px;
-			}
-		}
-		.authors {
-			max-width: 300px;
-			width: 100%;
-			@media (max-width: 560px) {
-				max-width: 100px;
-				width: 100%;
-				font-size: 10px;
-			}
-		}
-		.nameSpace {
-			font-weight: 900;
-		}
-		.namingBook {
-			font-family: 'Edu NSW ACT Foundation', cursive;
-		}
-		.description {
-			@media (max-width: 560px) {
-				max-width: 350px;
-				width: 100%;
-				font-size: 9px;
-			}
-		}
+		font-size: 10px;
 	}
 `;
+
+export const InlineString = styled.span`
+	font-weight: 900;
+	font-family: 'Edu NSW ACT Foundation', cursive;
+`;
diff --git a/src/pages/description/index.tsx b/src/pages/description/index.tsx
@@ -2,28 +2,17 @@ import { useSelector } from 'react-redux';
 import { Button } from 'components/button';
 import { useNavigate } from 'react-router-dom';
 import { MagnifyingGlass } from 'react-loader-spinner';
-import {
-	bookAuthors,
-	bookCategories,
-	bookDescription,
-	bookImage,
-	bookName,
-	isLoading,
-} from 'redux/selectors';
+import { isLoading, bookData, imageLinks } from 'redux/selectors';
 
 import * as S from './index.styles';
 
 const DescriptionPage = () => {
-	const label = useSelector(bookImage);
-	const name = useSelector(bookName);
-	const categories = useSelector(bookCategories);
-	const authors = useSelector(bookAuthors);
-	const description = useSelector(bookDescription);
 	const loading = useSelector(isLoading);
+	const { title, categories, authors, description } =
+		useSelector(bookData);
+		const label = useSelector(imageLinks);
 	const navigate = useNavigate();
 
-	console.log('label', label);
-
 	const goBack = () => {
 		navigate(-1);
 	};
@@ -46,29 +35,29 @@ const DescriptionPage = () => {
 					<Button
 						buttonName={'Back'}
 						className={'backbutton'}
-						onClick={goBack}
+						handleClick={goBack}
 					/>
-					<div className="container__label">
-						<img src={label} alt="label of book" />
-					</div>
-					<div className="container__description">
-						<p className="name">
-							<span className="nameSpace">Name:</span>
-							<span className="namingBook">{name}</span>
-						</p>
-						<p className="categories">
-							<span className="nameSpace">Categories: </span>
-							<span className="namingBook">{categories}</span>
-						</p>
-						<p className="authors">
-							<span className="nameSpace">Authors:</span>
-							<span className="namingBook">{authors}</span>
-						</p>
-						<p className="description">
-							<span className="nameSpace">Description:</span>
-							<span className="namingBook">{description}</span>
-						</p>
-					</div>
+					<S.ContainerLabel>
+						<S.Image src={label} alt="label of book" />
+					</S.ContainerLabel>
+					<S.ContainerDescription>
+						<S.Page>
+							<S.InlineString>Name:</S.InlineString>
+							<S.InlineString>{title}</S.InlineString>
+						</S.Page>
+						<S.Page>
+							<S.InlineString>Categories: </S.InlineString>
+							<S.InlineString>{categories}</S.InlineString>
+						</S.Page>
+						<S.Page>
+							<S.InlineString>Authors:</S.InlineString>
+							<S.InlineString>{authors}</S.InlineString>
+						</S.Page>
+						<S.Page>
+							<S.InlineString>Description:</S.InlineString>
+							<S.InlineString>{description}</S.InlineString>
+						</S.Page>
+					</S.ContainerDescription>
 				</>
 			)}
 		</S.Container>