Done with MVP

README.md

@@ -14,12 +14,12 @@
 
 This project was put together using create-react-app (CRA). You will not need to install CRA in order to make this project work. Follow the steps below to setup the project with the proper dependencies.
 
-- [ ]  Create a forked copy of this project.
-- [ ]  Clone your OWN version of the repository in your terminal
-- [ ]  CD into the project base directory `cd React-Components-Insta-Clone`
-- [ ]  Download project dependencies by running `npm install`
-- [ ]  Start up the app using `npm start`
-- [ ]  Push commits: git push origin `main`.
+- [x]  Create a forked copy of this project.
+- [x]  Clone your OWN version of the repository in your terminal
+- [x]  CD into the project base directory `cd React-Components-Insta-Clone`
+- [x]  Download project dependencies by running `npm install`
+- [x]  Start up the app using `npm start`
+- [x]  Push commits: git push origin `main`.
 
 ### Task 2a: MVP
 

src/App.js

@@ -5,15 +5,22 @@
 */
 
 // Import the state hook
-import React from 'react';
+import React, { useState } from 'react';
 // Import the Posts (plural!) and SearchBar components, since they are used inside App component
 // Import the dummyData
+import SearchBar from './components/SearchBar/SearchBar';
+import Posts from './components/Posts/Posts';
+import PostHeader from './components/Posts/PostHeader';
+import Post from './components/Posts/Post';
+import LikeSection from './components/Posts/LikeSection';
+import dummyData from './dummy-data';
 import './App.css';
 
 const App = () => {
   // Create a state called `posts` to hold the array of post objects, **initializing to dummyData**.
   // This state is the source of truth for the data inside the app. You won't be needing dummyData anymore.
   // To make the search bar work (which is stretch) we'd need another state to hold the search term.
+  const [posts, setPosts] = useState(dummyData);
 
   const likePost = postId => {
     /*
@@ -27,12 +34,23 @@ const App = () => {
         - if the `id` of the post matches `postId`, return a new post object with the desired values (use the spread operator).
         - otherwise just return the post object unchanged.
      */
+    const likes = posts.map(e => {
+      if(e.id === postId){
+        return {...e, likes: e.likes + 1}
+      }
+      else{
+        return e
+      }
+    })
+    setPosts(likes);
   };
 
   return (
     <div className='App'>
       {/* Add SearchBar and Posts here to render them */}
       {/* Check the implementation of each component, to see what props they require, if any! */}
+      <SearchBar/>
+      <Posts posts={posts} likePost={likePost}/>
     </div>
   );
 };

src/components/Comments/Comment.js

@@ -4,7 +4,6 @@ import React from 'react';
 const Comment = props => {
   // 🔥 Make sure the parent of Comment is passing the right props!
   const { comment } = props;
-
   return (
     <div className='comment-text'>
       <span className='user'>{comment.username}</span>

src/components/Comments/Comments.js

@@ -5,10 +5,12 @@ import './Comments.css';
 const Comments = props => {
   // 🔥 Make sure the parent of Comments is passing the right props!
   const { comments } = props;
-
   return (
     <div>
       {/* map through the comments prop and render a Comment for every piece of data */}
+      {comments.map(comment =>{
+      return <Comment comment={comment} key={comment.id} />
+      })}
     </div>
   );
 };

src/components/Posts/LikeSection.js

@@ -9,21 +9,20 @@ import { faComment, faHeart } from '@fortawesome/free-regular-svg-icons';
 const LikeSection = props => {
   // 🔥 Make sure the parent of LikeSection is passing the right props!
   const { likePost, numberOfLikes } = props;
-
   return (
     <div>
       <div
         className='like-section'
         key='likes-icons-container'
       >
-        <div className='like-section-wrapper'>
-          <FontAwesomeIcon icon={faHeart} />
+        <div className='like-section-wrapper' onClick={likePost}>
+          <FontAwesomeIcon icon={faHeart}/>
         </div>
         <div className='like-section-wrapper'>
           <FontAwesomeIcon icon={faComment} />
         </div>
       </div>
-      <p className='like-number'>100 likes</p>
+      <p className='like-number'>{numberOfLikes} likes</p>
     </div>
   );
 };

src/components/Posts/Post.js

@@ -6,7 +6,6 @@ import PostHeader from './PostHeader';
 const Post = props => {
   // 🔥 Make sure the parent of Post is passing the right props!
   const { post, likePost } = props;
-
   return (
     <div className='post-border'>
       <PostHeader
@@ -21,9 +20,9 @@ const Post = props => {
         />
       </div>
       {/* Is LikeSection getting all the props it needs to work correctly? */}
-      <LikeSection likePost={() => likePost(post.id)} />
+      <LikeSection likePost={() => likePost(post.id)} numberOfLikes={post.likes}/>
       {/* Comments also wants its props! */}
-      <Comments />
+      <Comments comments={post.comments}/>
     </div>
   );
 };

src/components/Posts/Posts.js

@@ -5,11 +5,14 @@ import './Posts.css';
 const Posts = (props) => {
   // 🔥 Make sure the parent of Posts is passing the right props!
   const { likePost, posts } = props;
-
+  
   return (
     <div className='posts-container-wrapper'>
       {/* Map through the posts array returning a Post component at each iteration */}
       {/* Check the implementation of Post to see what props it requires! */}
+      {posts.map(post=>{
+        return <Post post={post} likePost={likePost} key={post.id}/>
+    })};
     </div>
   );
 };