From 71a4ba8dd089937d9cf56a57c4e04691a3697de1 Mon Sep 17 00:00:00 2001
From: arsalan rahimi <years1373@yahoo.com>
Date: Tue, 5 Oct 2021 23:38:32 -0700
Subject: [PATCH] completed

---
 src/App.js                    | 15 ++++++++++-----
 src/components/Posts/Posts.js |  7 ++++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 6409520c4..8ef322ef8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,17 +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 dummyData from './dummy-data';
 import './App.css';
-
+import posts from './components/Posts/Posts';
+import Posts from './components/Posts/Posts';
+import SearchBar from './components/SearchBar/SearchBar'
 const App = () => {
+  const [posts, setPosts] = useState(dummyData);
+  
   // 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 likePost = postId => {
+  const likePost  = postId => {
     /*
       This function serves the purpose of increasing the number of likes by one, of the post with a given id.
 
@@ -31,8 +36,8 @@ const App = () => {
 
   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}/>      {/* Check the implementation of each component, to see what props they require, if any! */}
     </div>
   );
 };
diff --git a/src/components/Posts/Posts.js b/src/components/Posts/Posts.js
index 18404081a..481f25ab7 100644
--- a/src/components/Posts/Posts.js
+++ b/src/components/Posts/Posts.js
@@ -7,8 +7,13 @@ const Posts = (props) => {
   const { likePost, posts } = props;
 
   return (
+
     <div className='posts-container-wrapper'>
-      {/* Map through the posts array returning a Post component at each iteration */}
+      {
+        posts.map(post => (
+          <Post key={post.id} post={post}/>
+        ))
+      }
       {/* Check the implementation of Post to see what props it requires! */}
     </div>
   );