containers added to messages and myPosts

hipstagram/src/App.js

@@ -2,12 +2,12 @@ import React from "react";
 import "./App.css";
 import Header from "./Header/header";
 import Navigation from "./Content/Navigation/navigation";
-import Messages from "./Content/Messages/messages";
 import News from "./Content/News/news";
 import { Redirect, Route } from "react-router-dom";
 import Music from "./Content/Music/music";
 import Profile from "./Content/Profile/profile";
 import Settings from "./Content/Settings/settings";
+import MessagesContainer from "./Content/Messages/messagesContainer";
 
 function App(props) {
     return (
@@ -21,13 +21,11 @@ function App(props) {
                     <Redirect exact from="/" to="/profile" />
                     <Route
                         path="/profile"
-                        render={() => <Profile profilePage={props.state.profilePage}
-                            dispatch={props.dispatch}
-                        />}
+                        render={() => <Profile store={props.store} />}
                     />
                     <Route
                         path="/messages"
-                        render={() => <Messages store={props.store} />}
+                        render={() => <MessagesContainer store={props.store} />}
                     />
                     <Route path="/news" component={News} />
                     <Route path="/music" component={Music} />

hipstagram/src/Content/Messages/messages.js

@@ -1,23 +1,22 @@
 import React from "react";
-import { sendMessageCreator, updateNewMessageBodyCreator } from "../../Redux/messages-reducer";
 import MessageItem from "./DialogItem/dialogItem";
 import Message from "./Message/message";
 import "./messages.css";
 
 const Messages = (props) => {
 
-    let state = props.store.getState().messagesPage;
+    let state = props.messagesPage;
 
     let dialog = state.dialogsData.map(d => <MessageItem name={d.name} id={d.id} />);
     let messages = state.messagesData.map(m => <Message message={m.message} />);
     let newMessageBody = state.newMessageBody;
 
     let onSendMessageClick = () => {
-        props.store.dispatch(sendMessageCreator());
+        props.sendMessage();
     }
     let onNewMessageChange = (e) => {
         let body = e.target.value;
-        props.store.dispatch(updateNewMessageBodyCreator(body));
+        props.updateNewMessageBody(body);
     }
 
     return (

hipstagram/src/Content/Messages/messagesContainer.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { sendMessageCreator, updateNewMessageBodyCreator } from "../../Redux/messages-reducer";
+import Messages from "./messages";
+import "./messages.css";
+
+const MessagesContainer = (props) => {
+    let state = props.store.getState().messagesPage;
+
+    let onSendMessageClick = () => {
+        props.store.dispatch(sendMessageCreator());
+    }
+    let onNewMessageChange = (body) => {
+        props.store.dispatch(updateNewMessageBodyCreator(body));
+    }
+
+    return (
+        <Messages updateNewMessageBody={onNewMessageChange} 
+            sendMessage={onSendMessageClick} 
+            messagesPage={state}
+        />
+    )
+}
+
+export default MessagesContainer;

hipstagram/src/Content/Profile/MyPosts/MyPostsContainer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import './myPosts.css';
+import { addPostActionCreator, updateNewPostTextActionCreator } from '../../../Redux/profile-reducer';
+import MyPosts from './myPosts';
+
+function MyPostsContainer(props) {
+let state = props.store.getState();
+
+    let addPost = () => {
+        props.store.dispatch(addPostActionCreator());
+    }
+
+    let onPostChange = (text) => {
+        let action = updateNewPostTextActionCreator(text);
+        props.store.dispatch(action);
+    }
+
+    return (
+        <MyPosts updateNewPostText={ onPostChange } addPost={addPost} 
+            post={state.profilePage.post}
+            newPostText={state.profilePage.newPostText}
+        />
+    )
+}
+
+export default MyPostsContainer;

hipstagram/src/Content/Profile/MyPosts/myPosts.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Post from './Post/post';
 import './myPosts.css';
-import { addPostActionCreator, updateNewPostTextActionCreator } from '../../../Redux/profile-reducer';
 
 function MyPosts(props) {
 
@@ -9,14 +8,13 @@ function MyPosts(props) {
 
     let newPostElement = React.createRef();
 
-    let addPost = () => {
-        props.dispatch(addPostActionCreator());
+    let onAddPost = () => {
+        props.addPost();
     }
 
     let onPostChange = () => {
         let text = newPostElement.current.value;
-        let action = updateNewPostTextActionCreator(text);
-        props.dispatch(action);
+        props.updateNewPostText(text);
     }
 
     return(
@@ -25,7 +23,7 @@ function MyPosts(props) {
             <div>
                 <div className='myposts-content__block'>
                     <textarea onChange={ onPostChange } ref={ newPostElement } value={ props.newPostText } />
-                    <button onClick={ addPost }>Add post</button>
+                    <button onClick={ onAddPost }>Add post</button>
                 </div>
 
                 New post

hipstagram/src/Content/Profile/profile.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MyPosts from './MyPosts/myPosts';
+import MyPostsContainer from './MyPosts/MyPostsContainer';
 import './profile.css';
 import ProfileInfo from './ProfileInfo/profileInfo';
 
@@ -9,10 +9,7 @@ function Profile(props) {
 
             <div className='content'>
                 <ProfileInfo />
-                <MyPosts post={ props.profilePage.post }
-                    newPostText={ props.profilePage.newPostText } 
-                    dispatch={ props.dispatch }
-                />
+                <MyPostsContainer store={props.store} />
             </div>
        </div>
     );