ft(add new comments to state)

Author: PascalUlor

instagram-app/src/App.js

@@ -6,11 +6,16 @@ import './App.css';
 
 function App() {
   const [post] = useState(data);
+
   return (
     <div className="App">
       <SearchBar />
       {post.map((userPost, index)=>{
-        return <PostContainer key={index} post={userPost}/>
+        return (
+        <PostContainer
+        key={index}
+        props={userPost}
+        />)
       })
       }
 

instagram-app/src/components/Form/Form.css

@@ -0,0 +1,7 @@
+.form__input {
+    width: 100%;
+    height: 2rem;
+    border: 0;
+    padding: 1rem;
+    font-size: 1rem;
+}

instagram-app/src/components/Form/Form.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Form.css';
+
+const Form = ({ inputValue, changeHandler, addComment }) => {
+    return (
+    <form onSubmit={(e) => addComment(e)}>
+        <input
+        className="form__input"
+        type="text"
+        value={inputValue}
+        onChange={changeHandler}
+        placeholder="Add a comment..."
+        />
+    </form>)
+}
+
+export default Form;

instagram-app/src/components/PostContainer/PostContainer.css

@@ -4,6 +4,7 @@
     width: 50%;
     margin: 5rem auto;
     border: 1px solid lightgray;
+    overflow: hidden;
 }
 .user__deets {
     width: 100%;
@@ -47,6 +48,7 @@
     justify-content: flex-start;
     align-items: flex-start;
     color: gray;
-    margin-bottom: 1rem;
+    margin: 0 .5rem;
     padding: 1rem;
+    border-bottom: 1px solid lightgrey;
 }

instagram-app/src/components/PostContainer/PostContainer.js

@@ -1,31 +1,54 @@
-import React from 'react';
+import React, { useState } from 'react';
+import uuidv4 from 'uuid/v4';
 import { IoIosHeartEmpty} from "react-icons/io";
 import { FaRegComment } from "react-icons/fa";
 import CommentSection from '../CommentSection/CommentSection';
+import Form from '../Form/Form';
 import './PostContainer.css';
 
-const PostContainer = (props) => {
+const PostContainer = ({ props }) => {
+    const { comments, thumbnailUrl, imageUrl, timestamp, likes, username } = props;
+    const [inputValue, setChange] = useState('');
+    const [inputComment, setComment] = useState(comments);
+    const handleChange = (e) =>{
+        setChange(e.target.value);
+      }
+    const postComment = (e) => {
+        e.preventDefault();
+        const newComment = {
+            id: uuidv4(),
+          username: "user",
+          text: inputValue
+        };
+        setComment(comments.concat(newComment));
+      }
+    
     return (
         <div className="post__container">
             <div className="user__deets">
-                <img className="profile__pix" src={props.post.thumbnailUrl} alt="user-profile" />
-                <p>{props.post.username}</p>
+                <img className="profile__pix" src={thumbnailUrl} alt="user-profile" />
+                <p>{username}</p>
             </div>
             <div className="user__post">
-                <img className="post__image" src={props.post.imageUrl} alt="user-post"/>
+                <img className="post__image" src={imageUrl} alt="user-post"/>
             </div>
             <div className="reaction">
             <div className="post__icons">
             <IoIosHeartEmpty /> <FaRegComment/>
             </div>
-            {props.post.likes} likes</div>
-            {props.post.comments.map((comment, index) =>{
-                console.log("===",comment);
-                return <CommentSection key={index} props={comment}/>
+            {likes} likes</div>
+            {
+                inputComment.map((comment) =>{
+                return <CommentSection key={comment.id} props={comment}/>
             })
             }
             <div className="timestamp">
-            {props.post.timestamp}</div>
+            {timestamp}</div>
+            <Form 
+                inputValue={inputValue}
+                changeHandler={handleChange}
+                addComment={postComment}
+            />
         </div>
     )
 }

instagram-app/src/dummy-data.js

@@ -10,15 +10,18 @@ const dummyData = [
     timestamp: "July 17th 2017, 12:42:40 pm",
     comments: [
       {
+        id: 1,
         username: "philzcoffee",
         text:
           "We've got more than just delicious coffees to offer at our shops!"
       },
       {
+        id: 2,
         username: "biancasaurus",
         text: "Looks delicious!"
       },
       {
+        id: 3,
         username: "martinseludo",
         text: "Can't wait to try it!"
       }
@@ -34,22 +37,27 @@ const dummyData = [
     timestamp: "July 15th 2017, 03:12:09 pm",
     comments: [
       {
+        id: 4,
         username: "twitch",
         text: "Epic Street Fighter action here in Las Vegas at #EVO2017!"
       },
       {
+        id: 5,
         username: "michaelmarzetta",
         text: "Omg that match was crazy"
       },
       {
+        id: 6,
         username: "themexican_leprechaun",
         text: "What a setup"
       },
       {
+        id: 7,
         username: "dennis_futbol",
         text: "It that injustice"
       },
       {
+        id: 8,
         username: "dennis_futbol",
         text: "Is"
       }
@@ -65,14 +73,17 @@ const dummyData = [
     timestamp: "July 14th 2017, 10:04:08 am",
     comments: [
       {
+        id: 9,
         username: "playhearthstone",
         text: "Love this shot!"
       },
       {
+        id: 10,
         username: "awaywetravel",
         text: "Yosemite is my most favorite place in the universe"
       },
       {
+        id: 11,
         username: "awesomebt28",
         text: "I like how Half Dome looks so old and useless"
       }