connnect mapStateToProps added

hipstagram/package-lock.json

@@ -12299,6 +12299,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-redux": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
+      "integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

hipstagram/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.6.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "redux": "^4.0.5",

hipstagram/src/Content/Messages/messagesContainer.js

@@ -1,33 +1,53 @@
-import React from "react";
+// import React from "react";
+import { connect } from "react-redux";
 import { sendMessageCreator, updateNewMessageBodyCreator } from "../../Redux/messages-reducer";
-import StoreContext from "../../StoreContext";
+// import StoreContext from "../../StoreContext";
 import Messages from "./messages";
 import "./messages.css";
 
-const MessagesContainer = () => {
+// const MessagesContainer = () => {
 
-    return (
-        <StoreContext.Consumer>
-            {
-                (store) => {
-                    let state = store.getState().messagesPage;
+//     return (
+//         <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>
-    )
+//                     let onSendMessageClick = () => {
+//                         store.dispatch(sendMessageCreator());
+//                     }
+//                     let onNewMessageChange = (body) => {
+//                         store.dispatch(updateNewMessageBodyCreator(body));
+//                     }
+//                     return (
+//                         <Messages updateNewMessageBody={onNewMessageChange}
+//                             sendMessage={onSendMessageClick}
+//                             messagesPage={state}
+//                         />
+//                     )
+//                 }
+//             }
+//         </StoreContext.Consumer>
+//     )
+// }
+
+let mapStateToProps = (state) => {
+    return {
+        messagesPage: state.messagesPage
+    }
+}
+
+let mapDispatchToProps = (dispatch) => {
+    return {
+        updateNewMessageBody: () => {
+            dispatch(sendMessageCreator());
+        },
+        sendMessage: (body) => {
+            dispatch(updateNewMessageBodyCreator(body));
+        },
+    }
 }
 
+const MessagesContainer = connect(mapStateToProps, mapDispatchToProps)(Messages);
+
 export default MessagesContainer;

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

@@ -1,35 +1,57 @@
-import React from 'react';
+// import React from 'react';
 import './myPosts.css';
 import { addPostActionCreator, updateNewPostTextActionCreator } from '../../../Redux/profile-reducer';
 import MyPosts from './myPosts';
-import StoreContext from '../../../StoreContext';
-
-function MyPostsContainer() {
-    return (
-        <StoreContext.Consumer>
-            {
-                (store) => {
-                    let state = store.getState();
-
-                    let addPost = () => {
-                        store.dispatch(addPostActionCreator());
-                    }
-
-                    let onPostChange = (text) => {
-                        let action = updateNewPostTextActionCreator(text);
-                        store.dispatch(action);
-                    }
-
-                    return (
-                        <MyPosts updateNewPostText={onPostChange} addPost={addPost}
-                            post={state.profilePage.post}
-                            newPostText={state.profilePage.newPostText}
-                        />
-                    )
-                }
-            }
-        </StoreContext.Consumer>
-    )
+// import StoreContext from '../../../StoreContext';
+import { connect } from 'react-redux';
+
+// function MyPostsContainer() {
+//     return (
+//         <StoreContext.Consumer>
+//             {
+//                 (store) => {
+//                     let state = store.getState();
+
+//                     let addPost = () => {
+//                         store.dispatch(addPostActionCreator());
+//                     }
+
+//                     let onPostChange = (text) => {
+//                         let action = updateNewPostTextActionCreator(text);
+//                         store.dispatch(action);
+//                     }
+
+//                     return (
+//                         <MyPosts updateNewPostText={onPostChange} addPost={addPost}
+//                             post={state.profilePage.post}
+//                             newPostText={state.profilePage.newPostText}
+//                         />
+//                     )
+//                 }
+//             }
+//         </StoreContext.Consumer>
+//     )
+// }
+
+const mapStateToProps = (state) => {
+    return {
+        post: state.profilePage.post,
+        newPostText: state.profilePage.newPostText
+    }
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateNewPostText: (text) => {
+            let action = updateNewPostTextActionCreator(text);
+            dispatch(action);
+        },
+        addPost: () => {
+            dispatch(addPostActionCreator());
+        }
+    }
 }
 
+const MyPostsContainer = connect(mapStateToProps, mapDispatchToProps)(MyPosts);
+
 export default MyPostsContainer;

hipstagram/src/StoreContext.js

@@ -1,13 +0,0 @@
-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,7 +5,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import { BrowserRouter } from "react-router-dom";
-import { Provider } from "./StoreContext";
+import { Provider } from "react-redux";
 
 let rerenderEntireTree = (state) => {
     ReactDOM.render(