messages adding (broken)

hipstagram/src/App.js

@@ -27,7 +27,7 @@ function App(props) {
                     />
                     <Route
                         path="/messages"
-                        render={() => <Messages state={props.state.messagesPage} />}
+                        render={() => <Messages store={props.store} />}
                     />
                     <Route path="/news" component={News} />
                     <Route path="/music" component={Music} />

hipstagram/src/Content/Messages/messages.js

@@ -1,24 +1,48 @@
 import React from "react";
+import { sendMessageCreator, updateNewMessageBodyCreator } from "../../Redux/state";
 import MessageItem from "./DialogItem/dialogItem";
 import Message from "./Message/message";
 import "./messages.css";
 
 const Messages = (props) => {
 
-  let dialog = props.state.dialogsData.map(d => <MessageItem name={ d.name } id={ d.id } /> ); 
-  let messages = props.state.messagesData.map( m => <Message message={ m.message } />)
+    let state = props.store.getState().messagesPage;
 
-  return (
-    <div className="message-wrapper">
-      <div className="dialogs-items">
-        { dialog }
-      </div>
+    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;
 
-      <div className="messages">
-        { messages }
-      </div>
-    </div>
-  )
+    let onSendMessageClick = () => {
+        props.store.dispatch(sendMessageCreator());
+    }
+    let onNewMessageChange = (e) => {
+        let body = e.target.value;
+        props.store.dispatch(updateNewMessageBodyCreator(body));
+    }
+
+    return (
+        <div className="message-wrapper">
+            <div className="dialogs-items">
+                {dialog}
+            </div>
+
+            <div className="messages">
+                <div>
+                    {messages}
+                </div>
+                <div>
+                    <div><textarea value={newMessageBody}
+                        onChange={onNewMessageChange}
+                        placeholder='Enter your message'></textarea></div>
+                    <div>
+                        <button onClick={onSendMessageClick}>
+                            Send
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
 }
 
 export default Messages;

hipstagram/src/Content/Profile/My posts/myPosts.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import Post from './Post/post';
 import './myPosts.css';
-// import { addPostActionCreator, updateNewPostTextActionCreator } from '../../../Redux/state';
 import { addPostActionCreator, updateNewPostTextActionCreator } from '../../../Redux/state.js';
-// import { addPostActionCreator } from '../../../Redux/state';
 
 function MyPosts(props) {
 
@@ -17,7 +15,6 @@ function MyPosts(props) {
 
     let onPostChange = () => {
         let text = newPostElement.current.value;
-        // let action = ({ type: 'UPDATE-NEW-POST-TEXT', newText: text});
         let action = updateNewPostTextActionCreator(text);
         props.dispatch(action);
     }

hipstagram/src/Content/Profile/profile.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MyPosts from './My posts/myPosts';
+import MyPosts from './MyPosts/myPosts';
 import './profile.css';
 import ProfileInfo from './ProfileInfo/profileInfo';
 

hipstagram/src/Redux/state.js

@@ -1,5 +1,7 @@
 const ADD_POST = 'ADD-POST';
 const UPDATE_NEW_POST_TEXT = 'UPDATE-NEW-POST-TEXT';
+const UPDATE_NEW_MESSAGE_BODY = 'UPDATE-NEW-MESSAGE-BODY';
+const SEND_MESSAGE = 'SEND-MESSAGE';
 
 let store = {
     _state: {
@@ -25,6 +27,7 @@ let store = {
                 { id: 2, message: "How is your project?" },
                 { id: 3, message: "Looks not ok" },
             ],
+            newMessageBody: ""
         },
     },
     getState() {
@@ -46,12 +49,19 @@ let store = {
         } else if(action.type === UPDATE_NEW_POST_TEXT) {
             this._state.profilePage.newPostText = action.newText;
             this._callSubscriber(this._state);
+        } else if(action.type === UPDATE_NEW_MESSAGE_BODY) {
+            this._state.messagesPage.newMessageBody = action.body;
+            this._callSubscriber(this._state);
+        } else if(action.type === SEND_MESSAGE) {
+            let body = this._state.messagesPage.newMessageBody = action.body;
+            this._state.messagesPage.newMessageBody = 0;
+            this._state.messagesPage.newMessageBody.push({ id: 4, message: body });
+            this._callSubscriber(this._state);
         }
     }
 };
 
 export const addPostActionCreator = () => ({ type: 'ADD-POST' });
-
 export const updateNewPostTextActionCreator = (text) => {
     return {
         type: 'UPDATE-NEW-POST-TEXT', 
@@ -59,4 +69,12 @@ export const updateNewPostTextActionCreator = (text) => {
     }
 }
 
+export const sendMessageCreator = () => ({ type: 'SEND-MESSAGE' });
+export const updateNewMessageBodyCreator = (body) => {
+    return {
+        type: 'UPDATE-NEW-MESSAGE-BODY', 
+        body: body
+    }
+}
+
 export default store;

hipstagram/src/index.js

@@ -10,7 +10,7 @@ let rerenderEntireTree = (state) => {
     ReactDOM.render(
         <React.StrictMode>
             <BrowserRouter>
-                <App state={ state } dispatch={ store.dispatch.bind(store) } />
+                <App state={ state } dispatch={ store.dispatch.bind(store) } store={ store } />
             </BrowserRouter>
         </React.StrictMode>,
         document.getElementById("root")