added new feature

package.json

@@ -4,16 +4,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.16",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.3",
+    "styled-components": "^5.3.9",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -22,8 +28,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "predeploy":"npm run build",
-    "deploy":"gh-pages -d build"
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [

src/App.styles.jsx

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+
+export const Container = styled.div`
+   background:linear-gradient(#7f9b7a, #542877);
+   min-height:100vh;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   div{
+      background:linear-gradient(#b7d1b1, #4d3a5c);
+max-width:1200px;
+width: 100%;
+min-height:calc(100vh - 100px);
+border-radius: 10px;
+box-shadow: 5px 5px 5px 5px rgb(0, 0, 0, 0.5);
+   }
+
+
+`

src/App.tsx

@@ -1,12 +1,16 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import './App.styles.jsx';
+import * as S from "./App.styles";
+import { FC } from "react";
+import Main from './pages/main';
+
+const App:FC = ():JSX.Element => {
 
-function App() {
   return (
-    <div className="App">
-
-    </div>
+    <S.Container>
+      <div className='container__content'>
+        <Main />
+      </div>
+    </S.Container>
   );
 }
 

src/common/api/constant/index.tsx

@@ -0,0 +1,2 @@
+const API__KEY = `AIzaSyAPez01RNSc-o39SVYSn2nSeDiVyRHGLCo`
+export const basicUrl = `https://www.googleapis.com/books/v1/volumes?q=flowers+intitle:keyes&key=${API__KEY}`

src/common/api/helpers/index.tsx

@@ -0,0 +1,10 @@
+import axios from "axios"
+import { basicUrl } from "../constant"
+
+
+
+
+export const getBooksApi = () =>{
+const response = axios.get(basicUrl)
+console.log('response in function', response)
+}

src/components/button/index.styles.jsx

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const ContanerButton = styled.button`
+	max-width: 100px;
+	min-height: 50px;
+	background-color: transparent;
+	border-radius: 10px;
+	border: none;
+	span {
+		font-family: "Edu NSW ACT Foundation", cursive;
+		font-weight: 700;
+	}
+	:hover {
+		cursor: pointer;
+		background-color: #fdd;
+		border: 1px solid #000;
+		transition: all 500ms;
+	}
+`;

src/components/button/index.tsx

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { IPropsButton } from "types";
+import * as S from "./index.styles";
+
+export const Button:FC<IPropsButton> = ({onClick}):JSX.Element => {
+	return <S.ContanerButton onClick={onClick}><span>Поиск</span> </S.ContanerButton>;
+};

src/components/input/index.styles.jsx

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const ContainerInput = styled.div`
+      display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    input{
+      outline: none;
+      max-width:500px;
+      width: 100%;
+      min-height:50px;
+      border-radius: 10px;
+      border: none;
+      font-size: 20px;
+      ::placeholder{
+         font-size: 20px;
+      }
+    }
+`

src/components/input/index.tsx

@@ -0,0 +1,24 @@
+import { Button } from "components/button";
+import { FC } from "react";
+import { useDispatch } from "react-redux";
+import * as S from "./index.styles";
+import { getBooks } from "redux/reducer";
+
+const Input:FC = ():JSX.Element => {
+   const dispatch = useDispatch();
+
+   const triggerLoadData = () => {
+      dispatch(getBooks())
+
+   }
+
+
+   return (
+      <S.ContainerInput>
+         <input type="text" placeholder="Введите название книги" />
+         <Button onClick={triggerLoadData}/>
+      </S.ContainerInput>
+   )
+}
+
+export default Input;

src/index.tsx

@@ -1,19 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import { Provider } from "react-redux";
+import { store } from "redux/index";
+
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+	document.getElementById("root") as HTMLElement,
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+	<React.StrictMode>
+		<Provider store={store}>
+			<App />
+		</Provider>
+	</React.StrictMode>,
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/pages/main/index.styles.jsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const ContainerMain = styled.div`
+
+   display: flex;
+`

src/pages/main/index.tsx

@@ -0,0 +1,14 @@
+import Input from "components/input";
+import { FC } from "react";
+import * as S from "./index.styles";
+
+const Main: FC = (): JSX.Element => {
+
+	return (
+		<S.ContainerMain>
+			<Input />
+		</S.ContainerMain>
+	);
+};
+
+export default Main;

src/redux/index.tsx

@@ -0,0 +1,15 @@
+import createSagaMiddleware from "@redux-saga/core";
+import { configureStore } from "@reduxjs/toolkit";
+import { booksReducer } from "./reducer";
+import rootSaga from "./saga";
+
+const sagaMiddleware = createSagaMiddleware();
+
+export const store = configureStore({
+	reducer: {
+		books: booksReducer,
+	},
+	middleware: [sagaMiddleware],
+});
+
+sagaMiddleware.run(rootSaga);

src/redux/reducer/index.tsx

@@ -0,0 +1,31 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const booksSlice = createSlice({
+	name: " books",
+	initialState: {
+		books: [],
+		loading: false,
+		error: "",
+	},
+	reducers: {
+		setLoading: (state) => {
+			state.loading = true;
+		},
+		unSetLoading: (state) => {
+			state.loading = false;
+		},
+      getBooks:(state) => {
+         state.loading = true
+      },
+		setBooks: (state, action) => {
+			state.books = action.payload;
+		},
+		setError: (state, action) => {
+			state.error = action.payload;
+		},
+	},
+});
+
+export const booksReducer = booksSlice.reducer;
+export const { setLoading, unSetLoading,getBooks, setBooks, setError } =
+	booksSlice.actions;

src/redux/saga/index.tsx

@@ -0,0 +1,26 @@
+import { getBooksApi } from "common/api/helpers";
+import { put, call, all, takeEvery } from "redux-saga/effects";
+import { getBooks, setBooks, setError, setLoading, unSetLoading } from "redux/reducer";
+import { IDataBooks } from "types";
+
+function* sagaGetBooks() {
+	try {
+		console.log('common baby, let s start a saga')
+		yield put(setLoading());
+		const dataBooks:IDataBooks = yield call(getBooksApi);
+		console.log('hm, can i get a data from books shop?', dataBooks)
+		yield put(setBooks(dataBooks));
+		yield put(unSetLoading());
+	} catch {
+		yield put(setError("Произошла ошибка загрузки данных"));
+		yield put(unSetLoading());
+	}
+}
+
+function* sagaBooksWatcher() {
+	yield takeEvery(getBooks, sagaGetBooks);
+}
+
+export default function* rootSaga() {
+	yield all([sagaBooksWatcher()]);
+}