integrating typescript #3

my-app/src/App.tsx

@@ -37,7 +37,7 @@ class App extends Component<MapPropsType & DispatchPropsType > {
               <NavBar/>
               <div className="app-wrapper-content">
 
-                  <Route path='/dialogs' render={() => <DialogsContainer/>}/>
+                  <Route path='/dialogs' render={withSuspense(DialogsContainer)}/>
 
                   <Route path='/profile/:userId?' render={withSuspense(ProfileContainer)}/>
 

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

@@ -1,15 +1,20 @@
 import React from 'react';
 import styles from './MyPosts.module.css';
 import Post from './Post/Post';
-import { Field, reduxForm } from 'redux-form';
+import {Field, InjectedFormProps, reduxForm} from 'redux-form';
 import { required, maxLengthCreator } from '../../../utils/validators.js/validator';
 import {Textarea} from '../../common/FormsControls/FormsContols'
+import {PostType} from "../../../redux/types/types";
 
 const maxLength10=maxLengthCreator(10);
 
-const MyPosts = (props) => {
+type PropsType={
+    posts: Array<PostType>,
+    newPost: (newPostText:string)=>void
+}
+const MyPosts: React.FC<PropsType> = (props) => {
 
-  let onNewPost=(values)=>{
+  let onNewPost=(values: MyPostsFormType)=>{
   props.newPost(values.newPostText);
  }
 
@@ -32,7 +37,14 @@ const MyPosts = (props) => {
   );
 }
 
-const MyPostsForm=(props)=>{
+type MyPostsFormPropsType={}
+
+type MyPostsFormType={
+    newPostText: string
+}
+
+const MyPostsForm: React.FC<InjectedFormProps<MyPostsFormType, MyPostsFormPropsType> & MyPostsFormPropsType>=
+    (props)=>{
   return(
     <form onSubmit={props.handleSubmit}>
       <Field className={styles.textarea} component={Textarea} name="newPostText" placeholder="Post Message"
@@ -43,7 +55,7 @@ const MyPostsForm=(props)=>{
   )
 }
 
-const MyPostsFormRedux=reduxForm({
+const MyPostsFormRedux=reduxForm <MyPostsFormType, MyPostsFormPropsType>({
   form:"postsForm"
 })(MyPostsForm)
 

my-app/src/components/Profile/ProfileInfo/ProfileInfo.jsx → my-app/src/components/Profile/ProfileInfo/ProfileInfo.tsx

@@ -4,8 +4,21 @@ import Preloader from '../../common/Preloader';
 import ProfileStatusWithHook from './ProfileStatusWithHook';
 import userPhoto from "../../../assets/images/userPhoto.png"
 import ProfileDataForm from './ProfileDataForm';
+import {ProfileType} from "../../../redux/types/types";
 
-const ProfileInfo = (props) => {
+
+type PropsType={
+    profile: ProfileType
+    savePhoto: (file: File)=>void,
+    saveProfile: (profile: ProfileType)=>void
+    isOwner: boolean
+    status: string,
+    updateStatus: (status: string)=>void
+
+
+}
+
+const ProfileInfo: React.FC<PropsType>  = (props) => {
   let [editMode, setEditMode]=useState(false);
 
   if (!props.profile) {

my-app/src/components/Users/User.jsx → my-app/src/components/Users/User.tsx

@@ -2,8 +2,16 @@ import React from "react";
 import s from './Users.module.css';
 import userPhoto from "../../assets/images/userPhoto.png"
 import { NavLink } from "react-router-dom";
+import {UserType} from "../../redux/types/types";
 
-let User = ({ user, followingInProgress, unfollowThunkCreator, followThunkCreator }) => {
+type PropsType={
+    user: UserType,
+    followingInProgress: Array<number>
+    unfollowThunkCreator:(userId:number)=>void,
+    followThunkCreator:(userId:number)=>void
+}
+
+let User: React.FC<PropsType> = ({ user, followingInProgress, unfollowThunkCreator, followThunkCreator }) => {
     let u = user;
     return (
         <div>

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

@@ -66,29 +66,6 @@ let mapStateProps=(state:AppStateType)=>{
     }
 }
 
-// let mapDispatchToProps=(dispatch)=>{
-//     return{
-//         follow:(userId)=>{
-//           dispatch(followAC(userId));
-//         },
-//         unfollow:(userId)=>{
-//             dispatch(unFollowAC(userId));
-//           },
-//           setUsers:(users)=>{
-//             dispatch(setUsersAC(users));
-//           },
-//           setCurrentPage:(pageNumber)=>{
-//             dispatch(setCurrentPageAC(pageNumber));
-//           },
-//           setTotalUsersCount:(totalCount)=>{
-//             dispatch(setTotalUsersCountAC(totalCount));
-//           },
-//           setToggleFetching:(isFetching)=>{
-//             dispatch(setToggleIsFetchingAC(isFetching));
-//           }
-//     }
-// }
-
 
 export default compose<React.ComponentType>(
 

my-app/src/hoc/withAuthRedirect.tsx

@@ -8,14 +8,22 @@ let mapStateToPropsForRedirect=(state :AppStateType)=>({
     isAuth: state.auth.isAuth
   });
 
-export function withAuthRedirect<WCP>(WrappedComponent: React.ComponentType<WCP>){
+type MapPropsType ={
+    isAuth: boolean
+}
+
+type MapDispatchProps ={}
 
-    function RedirectComponent(props: WCP) {
 
-        if (!props.isAuth) return <Redirect to='/login'/>
-        return <WrappedComponent {...props}/>
-    }
+export function withAuthRedirect<WCP>(WrappedComponent: React.ComponentType<WCP>){
+
+    const RedirectComponent: React.FC<MapPropsType & MapDispatchProps> = (props) => {
+        let {isAuth, ...restProps} = props
+        if (!isAuth) return <Redirect to='/login'/>
+        return <WrappedComponent {...restProps as WCP}/>
+    };
 
-    let ConnectedAuthRedirectComponent=connect(mapStateToPropsForRedirect)(RedirectComponent)
+    let ConnectedAuthRedirectComponent=connect<MapPropsType, MapDispatchProps, WCP, AppStateType>
+    (mapStateToPropsForRedirect)(RedirectComponent)
     return  ConnectedAuthRedirectComponent;
 }