state added

hipstagram/src/App.js

@@ -10,7 +10,6 @@ import Profile from "./Content/Profile/profile";
 import Settings from "./Content/Settings/settings";
 
 function App(props) {
-
   return (
     <BrowserRouter>
       <div className="app-wrapper">
@@ -21,8 +20,10 @@ function App(props) {
 
           <div className="app-wrapper-content">
             <Redirect exact from="/" to="/profile" />
-            <Route path="/profile" render={ () => <Profile post={ props.post } />} />
-            <Route path="/messages" render={ () => <Messages dialogsData={ props.dialogsData } messagesData={ props.messagesData } /> } />
+            <Route path="/profile" 
+              render={ () => <Profile state={ props.state.profilePage } />} />
+            <Route path="/messages" 
+              render={ () => <Messages state={ props.state.messagesPage }  /> } />
             <Route path="/news" component={News} />
             <Route path="/music" component={Music} />
             <Route path="/settings" component={Settings} />
@@ -33,4 +34,4 @@ function App(props) {
   );
 }
 
-export default App;
+export default App;

hipstagram/src/Content/Messages/messages.js

@@ -3,12 +3,10 @@ import MessageItem from "./DialogItem/dialogItem";
 import Message from "./Message/message";
 import "./messages.css";
 
-
-
 const Messages = (props) => {
 
-  let dialog = props.dialogsData.map(d => <MessageItem name={ d.name } id={ d.id } /> ); 
-  let messages = props.messagesData.map( m => <Message message={ m.message } />)
+  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 } />)
 
   return (
     <div className="message-wrapper">

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

@@ -2,8 +2,6 @@ import React from 'react';
 import Post from './Post/post';
 import './my posts.css';
 
-
-
 function MyPosts(props) {
 
     let postsElements = props.post.map( p => <Post message={ p.message } likesCount={ p.likesCount } />)

hipstagram/src/Content/Profile/profile.js

@@ -3,9 +3,6 @@ import MyPosts from './My posts/my posts';
 import './profile.css';
 import ProfileInfo from './ProfileInfo/profileInfo';
 
-
-
-
 function Profile(props) {
 
     return(
@@ -13,7 +10,7 @@ function Profile(props) {
 
             <div className='content'>
                 <ProfileInfo />
-                <MyPosts post={ props.post } />
+                <MyPosts post={ props.state.post } />
             </div>
        </div>
     );

hipstagram/src/Redux/state.js

@@ -0,0 +1,26 @@
+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 },
+    ],
+  },
+  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 default state;

hipstagram/src/index.js

@@ -3,31 +3,11 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-
-let 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: 9},
-  {id: 2, message: 'Say you\'ll haunt me', likesCount: 9}
-]
-
-let dialogsData = [
-  {id: 1, name: 'Oleh'},
-  {id: 2, name: 'Victor'},
-  {id: 3, name: 'Maria'},
-  {id: 4, name: 'Valeriy'},
-  {id: 5, name: 'John'}
-]
-
-let messagesData = [
-  {id: 1, message: 'Hi'},
-  {id: 2, message: 'How is your project?'},
-  {id: 3, message: 'Looks not ok'}
-]
+import state from './Redux/state';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App post={ post } dialogsData={ dialogsData } messagesData={ messagesData } />
+    <App state={ state } />
   </React.StrictMode>,
   document.getElementById('root')
 );