completed changes

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-loader-spinner": "^5.3.4",
     "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
     "redux": "^4.2.1",

src/assets/constants/index.tsx

@@ -0,0 +1,23 @@
+export const kindSortButtons = [
+	{
+		name: "all",
+	},
+	{
+		name: "art",
+	},
+	{
+		name: "biography",
+	},
+	{
+		name: "computers",
+	},
+	{
+		name: "history",
+	},
+	{
+		name: "medical",
+	},
+	{
+		name: "poetry",
+	},
+];

src/components/button/index.styles.jsx

@@ -1,12 +1,13 @@
 import styled from "styled-components";
 
-export const ContanerButton = styled.button`
+export const ContainerButton = styled.button`
 	max-width: 100px;
 	margin-left: 10px;
 	min-height: 50px;
 	background-color: transparent;
 	border-radius: 10px;
-	border: 1px solid transparent;
+	border: 1px solid #000;
+	padding: 5px 10px;
 	span {
 		font-family: "Edu NSW ACT Foundation", cursive;
 		font-weight: 700;

src/components/button/index.tsx

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

src/pages/items/index.styles.jsx

@@ -3,7 +3,6 @@ import styled from "styled-components";
 export const Container = styled.div`
 	display: flex;
 	flex-wrap: wrap;
-	align-items: center;
 	justify-content: center;
 	gap: 15px;
 	min-height: calc(100vh - 200px);

src/pages/items/index.tsx

@@ -2,30 +2,44 @@ import * as S from "./index.styles";
 import Item from "./item";
 import { useState, useEffect } from "react";
 import { Button } from "components/button";
+import { RotatingLines } from "react-loader-spinner";
+import { useSelector } from "react-redux";
 
 const Items = ({ state }: any) => {
 	const [stateArray, setStateArray] = useState([]);
 	const [visible, setVisible] = useState(30);
+	const isLoading = useSelector((state: any) => state.books.loading);
+	console.log("isLoad", isLoading);
 
 	const showMoreItems = () => {
-		setVisible((prevValue)=>prevValue + 30)
-	}
-
+		setVisible((prevValue) => prevValue + 30);
+	};
 
 	useEffect(() => {
 		setStateArray(state);
 	}, [state]);
 
 	return (
 		<S.Container>
-		<div className='container__content'>{stateArray
-				? stateArray
-						.slice(0, visible)
-						.map((element: any) => <Item key={element.id} state={element} />)
-				: null}
-				</div>
-
-			{stateArray ? (<Button onClick={showMoreItems} buttonName={'Show more'}/>):(null)}	
+			{isLoading ? (
+				<RotatingLines
+					strokeColor="#f3e7e7"
+					strokeWidth="5"
+					animationDuration="0.55"
+					width="100"
+					visible={true}
+				/>
+			) : !!stateArray ? (
+				<>
+					<span>Found {stateArray.length} books</span>
+					<div className="container__content">
+						{stateArray.slice(0, visible).map((element: any) => (
+							<Item key={element.id} state={element} />
+						))}
+					</div>
+					<Button onClick={showMoreItems} buttonName={"Show more"} />
+				</>
+			) : null}
 		</S.Container>
 	);
 };

src/pages/main/index.styles.jsx

@@ -14,5 +14,18 @@ export const ContainerMain = styled.div`
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		flex-direction: column;
+	}
+	.header__mainfield {
+		display: flex;
+		max-width: 600px;
+		width: 100%;
+	}
+	.buttonsGroupSorting {
+		margin-top:40px;
+		max-width: 605px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between
 	}
 `;

src/pages/main/index.tsx

@@ -1,3 +1,4 @@
+import { kindSortButtons } from "assets/constants";
 import { Button } from "components/button";
 import Input from "components/input";
 import Items from "pages/items";
@@ -7,21 +8,26 @@ import { getBooks } from "redux/reducer";
 import * as S from "./index.styles";
 
 const Main: FC = (): JSX.Element => {
-	const state = useSelector((state:any)=>state.books.books.data?.items);
+	const state = useSelector((state: any) => state.books.books.data?.items);
 	const dispatch = useDispatch();
-	const [value, setValue] = useState()
-	
+	const [value, setValue] = useState();
+
 	const triggerLoadData = () => {
-	dispatch(getBooks(value))
-}
+		dispatch(getBooks(value));
+	};
 
 	return (
 		<S.ContainerMain>
 			<div className="header">
-			<Input  value={value} setValue={setValue}/>
-			<Button onClick={triggerLoadData}  buttonName={'Search'}/>
+				<div className="header__mainfield">
+					<Input value={value} setValue={setValue} />
+					<Button onClick={triggerLoadData} buttonName={"Search"} />
+				</div>
+				<div className="buttonsGroupSorting">
+				{kindSortButtons.map((item, index)=><Button key={index} onClick={triggerLoadData} buttonName={item.name} />)}
+				</div>
 			</div>
-			<Items state={state}/>
+			<Items state={state} />
 		</S.ContainerMain>
 	);
 };

src/redux/reducer/index.tsx

@@ -18,7 +18,6 @@ const booksSlice = createSlice({
          state.loading = true
       },
 		setBooks: (state, action) => {
-			console.log('action in action', action)
 			state.books = action.payload;
 		},
 		setError: (state, action) => {

src/redux/saga/index.tsx

@@ -5,13 +5,9 @@ import { IDataBooks } from "types";
 
 function* sagaGetBooks(action:any) {
 	try {
-		console.log('action in saga', action.payload)
-		console.log('common baby, let s start a saga')
 		yield put(setLoading());
 		const dataBooks:IDataBooks = yield call(getBooksApi, action.payload);
-		console.log('hm, can i get a data from books shop?', dataBooks)
 		yield put(setBooks(dataBooks));
-		console.log('i think a data already in state')
 		yield put(unSetLoading());
 	} catch {
 		yield put(setError("Произошла ошибка загрузки данных"));