typescript 2

my-app/src/App.tsx

@@ -0,0 +1,65 @@
+import React, {Component} from 'react';
+import './App.css';
+import NavBar from './components/NavBar/NavBar';
+import DialogsContainer from './components/Dialogs/DialogsContainer'
+import {Route, withRouter} from 'react-router-dom';
+import UsersContainer from './components/Users/UsersContainer';
+import HeaderContainer from './components/Header/HeaderContainer';
+import Login from './components/Login/Login';
+import {initializeApp} from './redux/app-reducer';
+import {connect} from 'react-redux';
+import Preloader from './components/common/Preloader';
+import {compose} from 'redux';
+import {withSuspense} from './hoc/withSuspense';
+import {AppStateType} from "./redux/redux-store";
+
+const ProfileContainer = React.lazy(() => import('./components/Profile/ProfileContainer'));
+
+type MapPropsType= ReturnType<typeof mapStateToProps>
+type DispatchPropsType= {
+    initializeApp:()=>void
+}
+
+class App extends Component<MapPropsType & DispatchPropsType > {
+
+    componentDidMount() {
+        this.props.initializeApp()
+    }
+
+    render() {
+        if (!this.props.initialized) {
+
+            return <Preloader/>
+        }
+      return (
+          <div className='app-wrapper'>
+              <HeaderContainer/>
+              <NavBar/>
+              <div className="app-wrapper-content">
+
+                  <Route path='/dialogs' render={() => <DialogsContainer/>}/>
+
+                  <Route path='/profile/:userId?' render={withSuspense(ProfileContainer)}/>
+
+                  <Route path='/users' render={() => <UsersContainer/>}/>
+                  <Route path='/login' render={() => <Login/>}/>
+
+
+              </div>
+
+          </div>
+
+
+      )
+  }
+}
+
+const mapStateToProps=(state: AppStateType)=>({
+  initialized:state.app.initialized
+})
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, {initializeApp})
+)(App)
+

my-app/src/api/api.ts

@@ -10,6 +10,8 @@ export const instance = axios.create({
 })
 export type GetItemsType={
     items: Array<UserType>
+    totalCount:number
+    error:string | null
 }
 export enum ResultCodesEnum{
     Success=0,
@@ -21,8 +23,8 @@ export enum ResultCodeForCaptchaEnum{
 }
 
 
-export type ResponseType<D = {}, RC = ResultCodesEnum> = {
+export type ResponseType<D = {}, RC = ResultCodesEnum | ResultCodeForCaptchaEnum> = {
     data: D,
     resultCode: RC,
-    message: Array<string>
+    messages: Array<string>
 }

my-app/src/api/users-api.ts

@@ -27,7 +27,7 @@ export const usersAPI = {
         return instance.get<string>(`profile/status/${userId}`).then(res=>res.data)
     },
     updateStatus(status: string) {
-        return instance.put<string>(`profile/status`, {status: status}).then(res=>res.data)
+        return instance.put<ResponseType>(`profile/status`, {status: status}).then(res=>res.data)
     },
     savePhoto(photo: any) {
         const form = new FormData();

my-app/src/components/Dialogs/Dialogs.jsx → my-app/src/components/Dialogs/Dialogs.tsx

@@ -2,20 +2,33 @@ import React from 'react';
 import styles from './Dialogs.module.css'
 import DialogsItem from './DialogsItem/DialogsItem'
 import Messages from './Messages/Messages';
-import { Field, reduxForm } from 'redux-form';
+import {Field, InjectedFormProps, reduxForm} from 'redux-form';
 import { Textarea } from '../common/FormsControls/FormsContols';
 import { required, maxLengthCreator } from '../../utils/validators.js/validator';
+import {initialStateType} from "../../redux/dialogs-reducer";
 
 const maxLength10=maxLengthCreator(10)
 
-const Dialogs = (props) => {
+type PropsType = {
+    dialogsPage: initialStateType,
+    sendMessage: (messageText:string)=>void
+}
+
+type OwnPropsType = {}
+
+export type NewMessageFormType={
+    newMessageBody:string
+}
+
+
+const Dialogs: React.FC<PropsType> = (props) => {
     let state=props.dialogsPage;
 
     let newDialogsData=state.dialogsData.map(val=><DialogsItem name={val.name}  id={val.id}/>);
     let newMessagesData=state.messagesData.map(val=><Messages message={val.message} />);
 
 
-   let addNewMessage=(values)=>{
+   let addNewMessage=(values: NewMessageFormType)=>{
     props.sendMessage(values.newMessageBody);
    }
 
@@ -30,14 +43,16 @@ const Dialogs = (props) => {
             <div className={styles.messages}>
 
                 {newMessagesData}
+
                 <DialogsFormRedux onSubmit={addNewMessage}/>
 
             </div>
         </div>
     )
 }
 
-const DialogsForm = (props) => {
+const  DialogsForm :React.FC<InjectedFormProps<NewMessageFormType, OwnPropsType> & OwnPropsType>
+    = (props) => {
 
     return (
         <form onSubmit={props.handleSubmit}>
@@ -49,7 +64,7 @@ const DialogsForm = (props) => {
     )
 }
 
-const DialogsFormRedux=reduxForm({
+const DialogsFormRedux=reduxForm<NewMessageFormType, OwnPropsType>({
     form:"NewMessage"
 })(DialogsForm)
 

my-app/src/components/Dialogs/DialogsContainer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Dialogs from "./Dialogs"
+import { connect } from 'react-redux';
+import { withAuthRedirect } from '../../hoc/withAuthRedirect';
+import { compose } from 'redux';
+import {actions} from "../../redux/dialogs-reducer";
+import {AppStateType} from "../../redux/redux-store";
+
+
+
+let mapStateToProps=(state: AppStateType)=>{
+    return{
+        dialogsPage: state.dialogsPage
+    }
+}
+
+
+
+export default compose<React.ComponentType>(
+    connect(mapStateToProps, {...actions}),
+    withAuthRedirect
+)(Dialogs);

my-app/src/components/Profile/MyPosts/MyPostsContainer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import MyPosts from './MyPosts'
-import { newPostActionCreator, updatePostActionCreator } from '../../../redux/profile-reducer';
+import { actions } from '../../../redux/profile-reducer';
 import { connect } from 'react-redux';
 
 
@@ -15,7 +15,7 @@ let mapStateToProps=(state)=>{
 let mapDispatchToProps=(dispatch)=>{
   return{
     newPost:(newPostText)=>{
-      dispatch(newPostActionCreator(newPostText));
+      dispatch(actions.newPostActionCreator(newPostText));
       }
   }
 }

my-app/src/components/Users/UsersContainer.tsx

@@ -90,7 +90,7 @@ let mapStateProps=(state:AppStateType)=>{
 // }
 
 
-export default compose(
+export default compose<React.ComponentType>(
 
   connect<MapStateToPropsType, MapDispatchToPropsType, null, AppStateType>(mapStateProps,
     {followThunkCreator,unfollowThunkCreator,getUsersThunkCreator})

my-app/src/hoc/withAuthRedirect.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Redirect} from 'react-router-dom';
+import {connect} from 'react-redux';
+import {AppStateType} from "../redux/redux-store";
+
+
+let mapStateToPropsForRedirect=(state :AppStateType)=>({
+    isAuth: state.auth.isAuth
+  });
+
+export function withAuthRedirect<WCP>(WrappedComponent: React.ComponentType<WCP>){
+
+    function RedirectComponent(props: WCP) {
+
+        if (!props.isAuth) return <Redirect to='/login'/>
+        return <WrappedComponent {...props}/>
+    }
+
+    let ConnectedAuthRedirectComponent=connect(mapStateToPropsForRedirect)(RedirectComponent)
+    return  ConnectedAuthRedirectComponent;
+}