integrating typescript

my-app/package.json

@@ -11,6 +11,7 @@
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
     "@types/react-redux": "^7.1.9",
+    "@types/react-router-dom": "^5.1.7",
     "@types/redux-form": "^8.3.0",
     "axios": "^0.19.2",
     "react": "^16.13.1",

my-app/src/App.tsx

@@ -20,6 +20,7 @@ type DispatchPropsType= {
     initializeApp:()=>void
 }
 
+const ProfileContainerWithSuspense=withSuspense(ProfileContainer)
 class App extends Component<MapPropsType & DispatchPropsType > {
 
     componentDidMount() {
@@ -39,7 +40,7 @@ class App extends Component<MapPropsType & DispatchPropsType > {
 
                   <Route path='/dialogs' render={withSuspense(DialogsContainer)}/>
 
-                  <Route path='/profile/:userId?' render={withSuspense(ProfileContainer)}/>
+                  <Route path='/profile/:userId?' render={()=><ProfileContainerWithSuspense/>}/>
 
                   <Route path='/users' render={() => <UsersContainer/>}/>
                   <Route path='/login' render={() => <Login/>}/>

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

@@ -2,7 +2,12 @@ import React from 'react';
 import styles from '../Dialogs.module.css'
 import { NavLink } from 'react-router-dom';
 
-const DialogsItem = (props) => {
+type PropsType={
+    id: number
+    name: string
+}
+
+const DialogsItem: React.FC<PropsType> = (props) => {
     let path = "/dialogs/" + props.id;
     return (
         <div className={`${styles.dialogs} ${styles.active}`}>

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import styles from '../Dialogs.module.css'
 
-
-const Messages=(props)=>{
+type PropsType={
+    message: string
+}
+const Messages :React.FC<PropsType>=(props)=>{
     return(
         <div>
         <div 

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

@@ -2,7 +2,16 @@ import React from 'react';
 import  styles from './Header.module.css';
 import { NavLink } from 'react-router-dom';
 
-const Header= (props)=> {
+export type MapStatePropsType={
+    isAuth: boolean,
+    login: string | null
+
+}
+
+export type MapDispatchPropsType={
+    logout: () => void
+}
+const Header: React.FC<MapStatePropsType & MapDispatchPropsType> = (props)=> {
   return (
        <header className={styles.header}>
           <img src='https://w7.pngwing.com/pngs/553/496/png-transparent-honda-logo-honda-logo-car-honda-accord-vin-diesel-celebrities-angle-text.png' />

my-app/src/components/Header/HeaderContainer.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Header, {MapStatePropsType, MapDispatchPropsType} from './Header';
+import { connect } from 'react-redux';
+import {LogoutUserThunkCreator } from '../../redux/auth-reducer';
+import {AppStateType} from "../../redux/redux-store";
+
+
+
+class HeaderContainer extends React.Component<MapStatePropsType & MapDispatchPropsType> {
+
+  render() {
+    return <>
+      <Header {...this.props} />
+    </>
+  }
+}
+
+let mapStateToProps=(state: AppStateType)=>({
+  isAuth:state.auth.isAuth,
+  login:state.auth.login
+
+
+})
+export default connect<MapStatePropsType, MapDispatchPropsType, {}, AppStateType>
+(mapStateToProps,
+    {logout:LogoutUserThunkCreator})
+(HeaderContainer);

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

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './NavBar.module.css';
 import { NavLink } from 'react-router-dom';
 
-const NavBar= ()=> {
+const NavBar:React.FC= ()=> {
   return (
         <nav className={styles.nav}>
             <div className={styles.item}>

my-app/src/components/Profile/MyPosts/MyPosts.tsx

@@ -8,11 +8,15 @@ import {PostType} from "../../../redux/types/types";
 
 const maxLength10=maxLengthCreator(10);
 
-type PropsType={
+export type MapStatePropsType={
     posts: Array<PostType>,
+
+}
+
+export type MapDispatchPropsType={
     newPost: (newPostText:string)=>void
 }
-const MyPosts: React.FC<PropsType> = (props) => {
+const MyPosts: React.FC<MapStatePropsType & MapDispatchPropsType> = (props) => {
 
   let onNewPost=(values: MyPostsFormType)=>{
   props.newPost(values.newPostText);

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

@@ -1,26 +1,20 @@
 import React from 'react';
-import MyPosts from './MyPosts'
+import MyPosts, {MapDispatchPropsType, MapStatePropsType} from './MyPosts'
 import { actions } from '../../../redux/profile-reducer';
 import { connect } from 'react-redux';
+import {AppStateType} from "../../../redux/redux-store";
 
 
-let mapStateToProps=(state)=>{
+let mapStateToProps=(state: AppStateType)=>{
   return{
-    posts:state.profilePage.postMessageData,
-    newPostText:state.profilePage.newPostText
+    posts:state.profilePage.postMessageData
   }
 
 }
 
-let mapDispatchToProps=(dispatch)=>{
-  return{
-    newPost:(newPostText)=>{
-      dispatch(actions.newPostActionCreator(newPostText));
-      }
-  }
-}
-
 
-const MyPostsContainer=connect(mapStateToProps, mapDispatchToProps)(MyPosts)
+const MyPostsContainer=connect<MapStatePropsType, MapDispatchPropsType, {}, AppStateType>(mapStateToProps, {
+  newPost:actions.newPostActionCreator
+})(MyPosts)
 
 export default MyPostsContainer;

my-app/src/components/Profile/MyPosts/Post/Post.jsx → my-app/src/components/Profile/MyPosts/Post/Post.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import styles from './Post.module.css';
-
-const Post = (props) => {
+type PostType={
+    message: string
+}
+const Post:React.FC<PostType>= (props) => {
   return ( 
       <div className={styles.item}>
         {props.message}

my-app/src/components/Profile/Profile.tsx

@@ -2,8 +2,18 @@ import React from 'react';
 import styles from './Profile.module.css';
 import MyPostsContainer from './MyPosts/MyPostsContainer';
 import ProfileInfo from './ProfileInfo/ProfileInfo'
+import {ProfileType} from "../../redux/types/types";
 
-const Profile = (props) => {
+type PropsType={
+    profile: ProfileType | null
+    savePhoto: (file: File)=>void,
+    saveProfile: (profile: ProfileType)=>void
+    isOwner: boolean
+    status: string,
+    updateStatus: (status: string)=>void
+}
+
+const Profile: React.FC<PropsType> = (props) => {
   return (
     <div className={styles.content}>
       <ProfileInfo profile={props.profile} status={props.status} 
@@ -14,8 +24,7 @@ const Profile = (props) => {
 
       />
 
-      <MyPostsContainer store={props.store}
-              />
+      <MyPostsContainer/>
 
     </div>
 

my-app/src/components/Profile/ProfileContainer.tsx

@@ -9,27 +9,53 @@ import {
 import { connect } from "react-redux";
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
+import {AppStateType} from "../../redux/redux-store";
+import {ProfileType} from "../../redux/types/types";
+import {RouteComponentProps} from "react-router-dom"
 
 
-class ProfileContainer extends React.Component {
+type MapStatePropsType= ReturnType<typeof mapStateToProps>
+type DispatchProps={
+   getProfileThunkCreator:(userId: number)=>void
+   getProfileStatusThunkCreator:(userId: number)=>void
+   updateProfileStatusThunkCreator:(status: string)=>void
+   savePhoto:(file: File)=>void
+   saveProfile:(profile: ProfileType)=>void
+}
+type PropsType= MapStatePropsType & DispatchProps & RouteComponentProps<PathParamsType>
+
+type PathParamsType = {
+    userId: string
+}
+
+
+class ProfileContainer extends React.Component<PropsType> {
 
   refreshProfile() {
-    let userId = this.props.match.params.userId
+      debugger
+
+    let userId: number | null= +this.props.match.params.userId
     if (!userId) {
-      userId = this.props.autorizedUserId;
+      userId =  this.props.autorizedUserId;
       if (!userId) {
         this.props.history.push("/login")
       }
     }
-    this.props.getProfileThunkCreator(userId);
-    this.props.getProfileStatusThunkCreator(userId);
+    if(!userId){
+        console.log('ID should exist in URL')
+    }else{
+        debugger
+        this.props.getProfileThunkCreator(userId);
+        this.props.getProfileStatusThunkCreator(userId);
+    }
+
   }
 
   componentDidMount() {
     this.refreshProfile()
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps:PropsType) {
 
     if(this.props.match.params.userId!==prevProps.match.params.userId)
     this.refreshProfile()
@@ -38,7 +64,7 @@ class ProfileContainer extends React.Component {
   render() {
 
     return (
-      < div >
+      <div>
         <Profile {...this.props} profile={this.props.profile} status={this.props.status}
           updateStatus={this.props.updateProfileStatusThunkCreator}
           isOwner={!this.props.match.params.userId}
@@ -51,15 +77,15 @@ class ProfileContainer extends React.Component {
 }
 
 
-let mapStateToProps = (state) => ({
+let mapStateToProps = (state: AppStateType) => ({
   profile: state.profilePage.profile,
   status: state.profilePage.status,
   isAuth: state.auth.isAuth,
   autorizedUserId: state.auth.id
 });
 
 
-export default compose(
+export default compose<React.ComponentType>(
   connect(mapStateToProps,
     { getProfileThunkCreator, getProfileStatusThunkCreator, updateProfileStatusThunkCreator, 
       savePhoto, saveProfile}),

my-app/src/components/Profile/ProfileInfo/ProfileDataForm.tsx

@@ -1,8 +1,12 @@
 import React from "react"
-import { Field, reduxForm } from 'redux-form';
+import {Field, InjectedFormProps, reduxForm} from 'redux-form';
 import styles from './ProfileInfo.module.css';
+import {ProfileType} from "../../../redux/types/types";
 
-const ProfileDataForm=(props)=>{
+type PropsType={
+  profile: ProfileType
+}
+const ProfileDataForm:React.FC<InjectedFormProps<ProfileType, PropsType> & PropsType>=(props)=>{
     return <form onSubmit={props.handleSubmit}>
     <div>
       <button>save</button>
@@ -32,7 +36,7 @@ const ProfileDataForm=(props)=>{
   }
 
 
-  let ProfileDataFormRedux=reduxForm({
+  let ProfileDataFormRedux=reduxForm<ProfileType, PropsType>({
     form: 'profileEdit'
   })(ProfileDataForm)