connect added

hipstagram/src/App.js

@@ -21,11 +21,11 @@ function App(props) {
                     <Redirect exact from="/" to="/profile" />
                     <Route
                         path="/profile"
-                        render={() => <Profile store={props.store} />}
+                        render={() => <Profile />}
                     />
                     <Route
                         path="/messages"
-                        render={() => <MessagesContainer store={props.store} />}
+                        render={() => <MessagesContainer />}
                     />
                     <Route path="/news" component={News} />
                     <Route path="/music" component={Music} />

hipstagram/src/Content/Messages/messagesContainer.js

@@ -1,23 +1,32 @@
 import React from "react";
 import { sendMessageCreator, updateNewMessageBodyCreator } from "../../Redux/messages-reducer";
+import StoreContext from "../../StoreContext";
 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));
-    }
+const MessagesContainer = () => {
 
     return (
-        <Messages updateNewMessageBody={onNewMessageChange} 
-            sendMessage={onSendMessageClick} 
-            messagesPage={state}
-        />
+        <StoreContext.Consumer>
+            {
+                (store) => {
+                    let state = store.getState().messagesPage;
+
+                    let onSendMessageClick = () => {
+                        store.dispatch(sendMessageCreator());
+                    }
+                    let onNewMessageChange = (body) => {
+                        store.dispatch(updateNewMessageBodyCreator(body));
+                    }
+                    return (
+                        <Messages updateNewMessageBody={onNewMessageChange}
+                            sendMessage={onSendMessageClick}
+                            messagesPage={state}
+                        />
+                    )
+                }
+            }
+        </StoreContext.Consumer>
     )
 }
 

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

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

hipstagram/src/Content/Profile/profile.js

@@ -9,9 +9,9 @@ function Profile(props) {
 
             <div className='content'>
                 <ProfileInfo />
-                <MyPostsContainer store={props.store} />
+                <MyPostsContainer />
             </div>
-       </div>
+        </div>
     );
 }
 

hipstagram/src/StoreContext.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const StoreContext = React.createContext(null);
+
+export const Provider = (props) => {
+    return (
+        <StoreContext.Provider value={props.store}>
+            {props.children}
+        </StoreContext.Provider>
+    )
+}
+
+export default StoreContext;

hipstagram/src/index.js

@@ -5,12 +5,15 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import { BrowserRouter } from "react-router-dom";
+import { Provider } from "./StoreContext";
 
 let rerenderEntireTree = (state) => {
     ReactDOM.render(
         <React.StrictMode>
             <BrowserRouter>
-                <App state={ state } dispatch={ store.dispatch.bind(store) } store={ store } />
+                <Provider store={store}>
+                    <App />
+                </Provider>
             </BrowserRouter>
         </React.StrictMode>,
         document.getElementById("root")