store, state oop refactoring

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

@@ -12,7 +12,7 @@ function MyPosts(props) {
         props.addPost();
     }
 
-    let onPostChange = (e) => {
+    let onPostChange = () => {
         let text = newPostElement.current.value;
         props.updateNewPostText(text);
     }

hipstagram/src/Redux/state.js

@@ -1,45 +1,52 @@
-import { rerenderEntireTree } from "../render";
-
-let state = {
-  profilePage: {
-    post: [
-      { id: 1, message: "Hi, how are you?", likesCount: 12 },
-      { id: 2, message: "My first post", likesCount: 9 },
-      { id: 2, message: "Bla Bla Bla", likesCount: 3 },
-      { id: 2, message: "Say you'll haunt me", likesCount: 46 }
-    ],
-    newPostText: "front end"
-  },
-  messagesPage: {
-    dialogsData: [
-      { id: 1, name: "Oleh" },
-      { id: 2, name: "Victor" },
-      { id: 3, name: "Maria" },
-      { id: 4, name: "Valeriy" },
-      { id: 5, name: "John" }
-    ],
-    messagesData: [
-      { id: 1, message: "Hi" },
-      { id: 2, message: "How is your project?" },
-      { id: 3, message: "Looks not ok" }
-    ]
-  }
-};
-
-export let addPost = () => {
-  let newPost = {
-    id: 5,
-    message: state.profilePage.newPostText,
-    likesCount: 0,
-  };
-  state.profilePage.post.push(newPost);
-  state.profilePage.newPostText = '';
-  rerenderEntireTree(state);
-};
-
-export let updateNewPostText = (newText) => {
-    state.profilePage.newPostText = newText;
-    rerenderEntireTree(state);
+let store = {
+    _state: {
+        profilePage: {
+            post: [
+                { id: 1, message: "Hi, how are you?", likesCount: 12 },
+                { id: 2, message: "My first post", likesCount: 9 },
+                { id: 2, message: "Bla Bla Bla", likesCount: 3 },
+                { id: 2, message: "Say you'll haunt me", likesCount: 46 },
+            ],
+            newPostText: "front end",
+        },
+        messagesPage: {
+            dialogsData: [
+                { id: 1, name: "Oleh" },
+                { id: 2, name: "Victor" },
+                { id: 3, name: "Maria" },
+                { id: 4, name: "Valeriy" },
+                { id: 5, name: "John" },
+            ],
+            messagesData: [
+                { id: 1, message: "Hi" },
+                { id: 2, message: "How is your project?" },
+                { id: 3, message: "Looks not ok" },
+            ],
+        },
+    },
+    getState() {
+        return this._state;
+    },
+    _callSubscriber() {
+        console.log("State is changed");
+    },
+    addPost() {
+        let newPost = {
+            id: 5,
+            message: this._state.profilePage.newPostText,
+            likesCount: 0,
+        };
+        this._state.profilePage.post.push(newPost);
+        this._state.profilePage.newPostText = "";
+        this._callSubscriber(this._state);
+    },
+    updateNewPostText(newText) {
+        this._state.profilePage.newPostText = newText;
+        this._callSubscriber(this._state);
+    },
+    subscribe(observer) {
+        this._callSubscriber = observer;
+    },
 };
 
-export default state;
+export default store;

hipstagram/src/index.js

@@ -1,11 +1,27 @@
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
-import state from "./Redux/state";
-import { rerenderEntireTree } from "./render";
+import store from "./Redux/state";
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 
-rerenderEntireTree(state);
+let rerenderEntireTree = (state) => {
+    ReactDOM.render(
+        <React.StrictMode>
+            <BrowserRouter>
+                <App state={ state } addPost={ store.addPost.bind(store) } updateNewPostText={ store.updateNewPostText.bind(store) } />
+            </BrowserRouter>
+        </React.StrictMode>,
+        document.getElementById("root")
+    );
+};
+
+rerenderEntireTree(store.getState());
+
+store.subscribe(rerenderEntireTree);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();

hipstagram/src/render.js

@@ -1,17 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
-import { addPost, updateNewPostText } from "./Redux/state";
-import { BrowserRouter } from "react-router-dom";
-
-export let rerenderEntireTree = (state) => {
-    ReactDOM.render(
-      <React.StrictMode>
-        <BrowserRouter>
-          <App state={state} addPost={addPost} updateNewPostText={ updateNewPostText } />
-        </BrowserRouter>
-      </React.StrictMode>,
-      document.getElementById("root")
-    );
-  };