Browse Source

profile addPost function added

pocu46 4 years ago
parent
commit
0ca89a276f

+ 2 - 1
hipstagram/src/App.js

@@ -21,7 +21,8 @@ function App(props) {
           <Redirect exact from="/" to="/profile" />
           <Route
             path="/profile"
-            render={() => <Profile state={props.state.profilePage} />}
+            render={() => <Profile state={props.state.profilePage} 
+            addPost={ props.addPost }/>}
           />
           <Route
             path="/messages"

+ 0 - 1
hipstagram/src/Content/Messages/Message/message.js

@@ -1,6 +1,5 @@
 import "./../messages.css";
 
-
 const Message = (props) => {
     return (
       <div className="message"> { props.message } </div>

+ 9 - 2
hipstagram/src/Content/Profile/My posts/my posts.js

@@ -6,13 +6,20 @@ function MyPosts(props) {
 
     let postsElements = props.post.map( p => <Post message={ p.message } likesCount={ p.likesCount } />)
 
+    let newPostElement = React.createRef();
+
+    let addPost = () => {
+        let text = newPostElement.current.value;
+        props.addPost(text);
+    }
+
     return(
         <div className="myposts-block">
             My posts
             <div>
                 <div className='myposts-content__block'>
-                    <textarea></textarea>
-                    <button>Add post</button>
+                    <textarea ref={ newPostElement }></textarea>
+                    <button onClick={ addPost }>Add post</button>
                 </div>
 
                 New post

+ 3 - 1
hipstagram/src/Content/Profile/profile.js

@@ -10,7 +10,9 @@ function Profile(props) {
 
             <div className='content'>
                 <ProfileInfo />
-                <MyPosts post={ props.state.post } />
+                <MyPosts post={ props.state.post } 
+                    addPost={ props.addPost }
+                />
             </div>
        </div>
     );

+ 9 - 0
hipstagram/src/Redux/state.js

@@ -23,4 +23,13 @@ let state = {
   },
 };
 
+export let addPost = (postMessage) => { 
+  let newPost = { 
+    id: 5,
+    message: postMessage,
+    likesCount: 0
+  }
+  state.profilePage.post.push(newPost);
+ }
+
 export default state;

+ 4 - 1
hipstagram/src/index.js

@@ -4,12 +4,15 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import state from './Redux/state';
+import { addPost } from './Redux/state';
 import { BrowserRouter } from 'react-router-dom';
 
+// addPost('Hi you guys');
+
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App state={ state } />
+      <App state={ state } addPost={ addPost }/>
     </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')