done smal fix

src/App.tsx

@@ -1,10 +1,10 @@
 import { lazy, Suspense } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Switch } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { ToastContainer } from 'react-toastify';
 
 import s from './App.module.css';
-import { IAppProps, IAppState } from './typescript/app/interfaces';
+import { IAppProps, IAppState } from './typescript/components/App/interfaces';
 
 import PrivateRoute from './components/Routes/PrivateRoute/PrivateRoute';
 import PublicRoute from './components/Routes/PublicRoute/PublicRoute';

src/components/Authorization/Registration/RegistrationForm.module.css

@@ -1,9 +1,9 @@
 .registration_form {
-  width: 360px;
+  width: 20%;
   min-height: 106px;
   display: flex;
   height: auto;
-  background-color: rgb(194, 192, 196);
+  background-color: rgb(164, 162, 167);
   margin: 0 auto;
   -webkit-box-shadow: 0px -23px 30px 18px #7c3ee0;
   box-shadow: 0px -23px 30px 18px #858586;
@@ -15,8 +15,8 @@
   padding-right: 2px;
   border-bottom: none;
   position: absolute;
-  left: 690px;
-  top: 140px;
+  left: 40%;
+  top: 200px;
 }
 
 .registration_input_wrapper {

src/components/Authorization/Registration/RegistrationForm.tsx

@@ -9,7 +9,7 @@ import { asyncCreateUser } from '../../../redux/authorization/operation';
 import {
   IRegistrationProps,
   IRegistrationState,
-} from '../../../typescript/registration/interfaces';
+} from '../../../typescript/components/Registration/interfaces';
 import s from './RegistrationForm.module.css';
 
 const RegistrationForm = ({ isLoading, createUser }: IRegistrationProps) => {
@@ -29,7 +29,7 @@ const RegistrationForm = ({ isLoading, createUser }: IRegistrationProps) => {
           <TextField
             id="email"
             name="email"
-            label="Email..."
+            label="Email"
             value={formik.values.email}
             onChange={formik.handleChange}
             error={formik.touched.email && Boolean(formik.errors.email)}
@@ -38,7 +38,7 @@ const RegistrationForm = ({ isLoading, createUser }: IRegistrationProps) => {
           <TextField
             id="password"
             name="password"
-            label="Password..."
+            label="Password*"
             type="password"
             value={formik.values.password}
             onChange={formik.handleChange}
@@ -72,7 +72,9 @@ const mapStateToProps = (state: IRegistrationState) => ({
   isLoading: state.isLoading.flag,
 });
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (
+  dispatch: (dispatchAction: any) => Promise<void>,
+) => ({
   createUser: (login: string, password: string) =>
     dispatch(asyncCreateUser(login, password)),
 });

src/components/Authorization/SignIn/SignIn.module.css

@@ -1,12 +1,12 @@
 .signIn_form {
-  width: 360px;
+  width: 20%;
   min-height: 106px;
   display: flex;
   height: auto;
   background-color: rgb(164, 162, 167);
   margin: 0 auto;
-  -webkit-box-shadow: 0px -23px 30px 18px #bebbc4;
-  box-shadow: 0px -23px 30px 18px #c1c0c2;
+  -webkit-box-shadow: 0px -23px 30px 18px #7c3ee0;
+  box-shadow: 0px -23px 30px 18px #858586;
   border: solid 3px rgb(2, 2, 2);
   border-radius: 20px;
   padding-bottom: 10px;
@@ -15,8 +15,8 @@
   padding-right: 2px;
   border-bottom: none;
   position: absolute;
-  left: 690px;
-  top: 140px;
+  left: 40%;
+  top: 200px;
 }
 .signIn_input {
   width: 100%;

src/components/Authorization/SignIn/SignIn.tsx

@@ -8,7 +8,7 @@ import { asyncLogin } from '../../../redux/authorization/operation';
 import {
   ILoginProps,
   ILoginState,
-} from '../../../typescript/registration/interfaces';
+} from '../../../typescript/components/Registration/interfaces';
 import togglePassword from '../helpers/helpers';
 import s from './SignIn.module.css';
 
@@ -29,7 +29,7 @@ const SignInForm = ({ isLoading, doLogin }: ILoginProps) => {
           className={s.signIn_input}
           id="email"
           name="email"
-          label="Email..."
+          label="Email"
           value={formik.values.email}
           onChange={formik.handleChange}
           error={formik.touched.email && Boolean(formik.errors.email)}
@@ -40,7 +40,7 @@ const SignInForm = ({ isLoading, doLogin }: ILoginProps) => {
             className={s.signIn_input}
             id="password"
             name="password"
-            label="Password..."
+            label="Password*"
             type="password"
             value={formik.values.password}
             onChange={formik.handleChange}
@@ -72,7 +72,9 @@ const mapStateToProps = (state: ILoginState) => ({
   isLoading: state.isLoading.flag,
 });
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (
+  dispatch: (dispatchAction: any) => Promise<void>,
+) => ({
   doLogin: (login: string, password: string) =>
     dispatch(asyncLogin(login, password)),
 });

src/components/Authorization/helpers/validation.js

@@ -1,24 +1,27 @@
 import * as yup from 'yup';
+import { SchemaOf } from 'yup';
 
-const validationSchemaRegistration = yup.object({
+import { IValidationScheme } from '../../../typescript/redux/authorization/interfaces';
+
+const validationSchemaRegistration: SchemaOf<IValidationScheme> = yup.object({
   email: yup
-    .string('Enter your email')
+    .string()
     .email('Enter a valid email')
     .required('Email is required'),
   password: yup
-    .string('Enter your password')
+    .string()
     .min(8, 'Password should be of minimum 8 characters length')
     .max(20, 'Password should be less 20 characters')
     .required('Password is required'),
 });
 
-const validationSchemaSignIn = yup.object({
+const validationSchemaSignIn: SchemaOf<IValidationScheme> = yup.object({
   email: yup
-    .string('Enter your email')
+    .string()
     .email('Enter a valid email')
     .required('Email is required'),
   password: yup
-    .string('Enter your password')
+    .string()
     .min(8, 'Password should be of minimum 8 characters length')
     .max(20, 'Password should be less 20 characters')
     .required('Password is required'),

src/components/Categories/Categories.tsx

@@ -7,7 +7,7 @@ import { asyncGetCategories } from '../../redux/categories/operation';
 import {
   ICategoriesProps,
   ICategoriesState,
-} from '../../typescript/categories/interfaces';
+} from '../../typescript/components/Categories/interfaces';
 
 import Category from './Category/Category';
 import Pagination from '../PaginationBar/PaginationBar';
@@ -43,7 +43,9 @@ const mapStateToProps = (state: ICategoriesState) => ({
   categoriesArr: state.categories.categoriesArr,
 });
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (
+  dispatch: (dispatchAction: any) => Promise<void>,
+) => ({
   getCategories: () => dispatch(asyncGetCategories()),
 });
 

src/components/Categories/Category/Category.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import s from './Category.module.css';
-import { ICategoryItem } from '../../../typescript/categories/interfaces';
+import { ICategoryItem } from '../../../typescript/components/Categories/interfaces';
 
 const Category = ({ category: { _id, name, createdAt } }: ICategoryItem) => {
   return (

src/components/Goods/DetailGood/DetailGood.tsx

@@ -5,11 +5,11 @@ import { useRouteMatch } from 'react-router-dom';
 import s from './DetailGood.module.css';
 import { goodById } from '../../../api-data';
 import { asyncMakeOrderById } from '../../../redux/user/operation';
-import { IGoodDetail } from '../../../typescript/goods/interfaces';
+import { IGoodDetail } from '../../../typescript/components/Goods/interfaces';
 import {
   TRouteMatchId,
   TDispatchLoading,
-} from '../../../typescript/goods/types';
+} from '../../../typescript/components/Goods/types';
 import { actionLoading } from '../../../redux/loading/action';
 
 function DetailGood({ dispatchLoading }: TDispatchLoading) {
@@ -63,7 +63,9 @@ function DetailGood({ dispatchLoading }: TDispatchLoading) {
   ) : null;
 }
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (
+  dispatch: (dispatchAction: any) => Promise<void>,
+) => ({
   dispatchLoading: (value: boolean) => dispatch(actionLoading(value)),
 });
 

src/components/Goods/Good/Good.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 
 import s from './Good.module.css';
-import { IGoodItem } from '../../../typescript/goods/interfaces';
+import { IGoodItem } from '../../../typescript/components/Goods/interfaces';
 
 const Good = ({
   good: { _id, name, createdAt, price, images },

src/components/Goods/Goods.tsx

@@ -4,8 +4,12 @@ import { connect } from 'react-redux';
 
 import s from './Goods.module.css';
 import { asyncGetGoods } from '../../redux/goods/operation';
-import { IGoodsProps, IGoodsState } from '../../typescript/goods/interfaces';
-import { TRouteMatchName } from '../../typescript/goods/types';
+import {
+  IGoodsProps,
+  IGoodsState,
+} from '../../typescript/components/Goods/interfaces';
+import { TRouteMatchName } from '../../typescript/components/Goods/types';
+import { TDispatchOperation } from '../../typescript/redux/dispatch/types';
 
 import Good from './Good/Good';
 import Pagination from '../PaginationBar/PaginationBar';
@@ -45,7 +49,9 @@ const mapStateToProps = (state: IGoodsState) => ({
   goodsArr: state.goods.goodsArr,
 });
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (
+  dispatch: (dispatchAction: any) => Promise<void>,
+) => ({
   getGoods: () => dispatch(asyncGetGoods()),
 });
 

src/components/Navigation/Navigation.tsx

@@ -1,7 +1,7 @@
 import Button from './Button/Button';
 import { connect } from 'react-redux';
 import { asyncLogout } from '../../redux/authorization/operation';
-import { INavigationProps } from '../../typescript/navigation/interfaces';
+import { INavigationProps } from '../../typescript/components/Navigation/interfaces';
 import s from './Navigation.module.css';
 
 const Navigation = ({ doLogout }: INavigationProps) => {
@@ -19,7 +19,9 @@ const Navigation = ({ doLogout }: INavigationProps) => {
   );
 };
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (
+  dispatch: (dispatchAction: any) => Promise<void>,
+) => ({
   doLogout: () => dispatch(asyncLogout()),
 });
 

src/components/Orders/DetailOrder/DetailOrder.tsx

@@ -5,11 +5,11 @@ import { connect } from 'react-redux';
 import s from './DetailOrder.module.css';
 import { actionLoading } from '../../../redux/loading/action';
 import { orderById } from '../../../api-data';
-import { IOrderDetail } from '../../../typescript/orders/interfaces';
+import { IOrderDetail } from '../../../typescript/components/Orders/interfaces';
 import {
   TRouteMatchId,
   TDispatchLoading,
-} from '../../../typescript/orders/types';
+} from '../../../typescript/components/Orders/types';
 
 function DetailOrder({ dispatchLoading }: TDispatchLoading) {
   const {
@@ -40,7 +40,9 @@ function DetailOrder({ dispatchLoading }: TDispatchLoading) {
     </div>
   ) : null;
 }
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (
+  dispatch: (dispatchAction: any) => Promise<void>,
+) => ({
   dispatchLoading: (value: boolean) => dispatch(actionLoading(value)),
 });
 

src/components/Orders/Order/Order.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import s from './Order.module.css';
-import { IOrderItem } from '../../../typescript/orders/interfaces';
+import { IOrderItem } from '../../../typescript/components/Orders/interfaces';
 
 const Order = ({
   order: { _id, total, createdAt, orderGoods },

src/components/Orders/Orders.tsx

@@ -4,7 +4,10 @@ import { connect } from 'react-redux';
 
 import s from './Orders.module.css';
 import { asyncGetOrders } from '../../redux/orders/operation';
-import { IOrdersProps, IOrdersState } from '../../typescript/orders/interfaces';
+import {
+  IOrdersProps,
+  IOrdersState,
+} from '../../typescript/components/Orders/interfaces';
 
 import Order from './Order/Order';
 import Pagination from '../PaginationBar/PaginationBar';
@@ -39,7 +42,9 @@ const mapStateToProps = (state: IOrdersState) => ({
   ordersArr: state.orders.ordersArr,
 });
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (
+  dispatch: (dispatchAction: any) => Promise<void>,
+) => ({
   getOrders: () => dispatch(asyncGetOrders()),
 });
 

src/components/Routes/PrivateRoute/PrivateRoute.tsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import {
   IPrivateState,
   IPrivateProps,
-} from '../../../typescript/routes/interfaces';
+} from '../../../typescript/components/Routes/interfaces';
 
 function PrivateRoute({ children, token, ...routeProps }: IPrivateProps) {
   return (

src/components/Routes/PublicRoute/PublicRoute.tsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import {
   IPublicState,
   IPublicProps,
-} from '../../../typescript/routes/interfaces';
+} from '../../../typescript/components/Routes/interfaces';
 
 function PublicRoute({
   children,

src/components/UserInterface/UserInterface.tsx

@@ -4,7 +4,7 @@ import s from './UserInterface.module.css';
 import {
   IUserInterfaceProps,
   IUserInterfaceState,
-} from '../../typescript/userInterface/interfaces';
+} from '../../typescript/components/UserInterface/interfaces';
 
 const UserInterface = ({ cash, login }: IUserInterfaceProps) => {
   return (

src/redux/authorization/action/index.ts

@@ -1,4 +1,4 @@
-import { IAuthorizationPayload } from './../../../typescript/reduxTs/authorization/interfaces';
+import { IAuthorizationPayload } from '../../../typescript/redux/authorization/interfaces';
 import { authorizationActionType } from '../actionType';
 
 const actionLoginSuccess = (payload: IAuthorizationPayload) => ({

src/redux/authorization/reducer/index.ts

@@ -1,5 +1,5 @@
 import { authorizationActionType } from '../actionType';
-import { IAuthorizationReducer } from '../../../typescript/reduxTs/authorization/interfaces';
+import { IAuthorizationReducer } from '../../../typescript/redux/authorization/interfaces';
 
 export const initialState = {
   login: '',

src/redux/categories/action/index.ts

@@ -1,5 +1,5 @@
 import { categoriesActionType } from '../actionType';
-import { ICategory } from '../../../typescript/categories/interfaces';
+import { ICategory } from '../../../typescript/components/Categories/interfaces';
 
 const actionGetCategoriesSusses = (arr: ICategory[]) => ({
   type: categoriesActionType.success,

src/redux/categories/operation/index.ts

@@ -4,7 +4,7 @@ import {
 } from '../action';
 import { actionLoading } from '../../loading/action';
 import { categoriesGQL } from '../../../api-data';
-import { ICategory } from '../../../typescript/categories/interfaces';
+import { ICategory } from '../../../typescript/components/Categories/interfaces';
 
 const asyncGetCategories = () => async (dispatch: any) => {
   try {

src/redux/categories/reducer/index.ts

@@ -1,5 +1,5 @@
 import { categoriesActionType } from '../actionType';
-import { ICategoriesReducer } from '../../../typescript/reduxTs/categories/interfaces';
+import { ICategoriesReducer } from '../../../typescript/redux/categories/interfaces';
 
 export const initialState = {
   categoriesArr: [],

src/redux/goods/action/index.ts

@@ -1,5 +1,5 @@
 import { goodsActionType } from '../actionType';
-import { IGood } from '../../../typescript/goods/interfaces';
+import { IGood } from '../../../typescript/components/Goods/interfaces';
 
 const actionGetGoodsSusses = (arr: IGood[]) => ({
   type: goodsActionType.success,

src/redux/goods/operation/index.ts

@@ -1,7 +1,7 @@
 import { actionGetGoodsSusses, actionGetGoodsReject } from '../action';
 import { actionLoading } from '../../loading/action';
 import { goodsGQL } from '../../../api-data';
-import { IGood } from '../../../typescript/goods/interfaces';
+import { IGood } from '../../../typescript/components/Goods/interfaces';
 
 const asyncGetGoods = () => async (dispatch: any) => {
   try {

src/redux/goods/reducer/index.ts

@@ -1,5 +1,5 @@
 import { goodsActionType } from '../actionType';
-import { IGoodsReducer } from '../../../typescript/reduxTs/goods/interfaces';
+import { IGoodsReducer } from '../../../typescript/redux/goods/interfaces';
 
 const initialState = {
   goodsArr: [],

src/redux/loading/reducer/index.ts

@@ -1,5 +1,5 @@
 import { loadingActionType } from '../actionType';
-import { ILoadingReducer } from '../../../typescript/reduxTs/loading/interfaces';
+import { ILoadingReducer } from '../../../typescript/redux/loading/interfaces';
 
 export function LoadingReducer(
   state = { flag: false },

src/redux/orders/action/index.ts

@@ -1,5 +1,5 @@
 import { ordersActionType } from '../actionType';
-import { IOrder } from '../../../typescript/orders/interfaces';
+import { IOrder } from '../../../typescript/components/Orders/interfaces';
 
 const actionGetOrdersSusses = (arr: IOrder[]) => ({
   type: ordersActionType.success,

src/redux/orders/operation/index.ts

@@ -1,7 +1,7 @@
 import { actionGetOrdersSusses, actionGetOrdersReject } from '../action';
 import { actionLoading } from '../../loading/action';
 import { ordersGQL } from '../../../api-data';
-import { IOrder } from '../../../typescript/orders/interfaces';
+import { IOrder } from '../../../typescript/components/Orders/interfaces';
 
 const asyncGetOrders = () => async (dispatch: any) => {
   try {

src/redux/orders/reducer/index.ts

@@ -1,5 +1,5 @@
 import { ordersActionType } from '../actionType';
-import { IOrdersReducer } from '../../../typescript/reduxTs/orders/interfaces';
+import { IOrdersReducer } from '../../../typescript/redux/orders/interfaces';
 
 const initialState = {
   ordersArr: [],

src/redux/user/reducer/index.ts

@@ -1,5 +1,5 @@
 import { userActionType } from '../actionType';
-import { IUserReducer } from '../../../typescript/reduxTs/user/interfaces';
+import { IUserReducer } from '../../../typescript/redux/user/interfaces';
 
 const initialState = {
   cash: 100,

src/typescript/reduxTs/authorization/interfaces.ts

@@ -21,3 +21,8 @@ export interface IAuthorizationReducer {
     | ETypes.logoutReject;
   payload: IAuthorizationPayload;
 }
+
+export interface IValidationScheme {
+  email: string;
+  password: string;
+}

src/typescript/reduxTs/categories/interfaces.ts

@@ -1,4 +1,4 @@
-import { ICategory } from '../../categories/interfaces';
+import { ICategory } from '../../components/Categories/interfaces';
 import { ETypes } from './enum';
 
 export interface ICategoriesReducer {

src/typescript/redux/dispatch/types.ts

@@ -0,0 +1,7 @@
+export type TDispatchAction = {
+  dispatch: (dispatchAction: any) => Promise<void>;
+};
+
+export type TDispatchOperation = {
+  dispatch: (dispatchAction: any) => Promise<void>;
+};

src/typescript/reduxTs/goods/interfaces.ts

@@ -1,4 +1,4 @@
-import { IGood } from '../../goods/interfaces';
+import { IGood } from '../../components/Goods/interfaces';
 import { ETypes } from './enum';
 
 export interface IGoodsReducer {

src/typescript/reduxTs/orders/interfaces.ts

@@ -1,4 +1,4 @@
-import { IOrder } from '../../orders/interfaces';
+import { IOrder } from '../../components/Orders/interfaces';
 import { ETypes } from './enum';
 
 export interface IOrdersReducer {