Completed all tasks and search bar in stretch goals

src/App.js

@@ -5,17 +5,23 @@
 */
 
 // 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 './App.css';
+import "./App.css";
+import Posts from "./components/Posts/Posts";
+import SearchBar from "./components/SearchBar/SearchBar";
+import dummyData from "./dummy-data";
+// console.log(dummyData);
 
 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 likePost = postId => {
+ const [posts, setPosts] = useState(dummyData);
+ const [searchTerm, setSearchTerm] = useState("");
+ console.log(posts);
+ const likePost = (postId) => {
  /*
  This function serves the purpose of increasing the number of likes by one, of the post with a given id.
 
@@ -27,11 +33,28 @@ 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 revisedPost = posts.map((post) => {
+ if (post.id === postId) {
+ return { ...post, likes: post.likes + 1 };
+ } else {
+ return post;
+ }
+ });
+ setPosts(revisedPost);
+ };
+ const searchUser = () => {
+ const termNormalizer = searchTerm.trim().toLowerCase();
+ if (!termNormalizer) return posts;
+ return posts.filter((user) => {
+ return user.username.toLowerCase().includes(termNormalizer);
+ });
  };
 
  return (
- <div className='App'>
- {/* Add SearchBar and Posts here to render them */}
+ <div className="App">
+ <SearchBar setSearchTerm={setSearchTerm} />
+ <Posts posts={searchUser()} likePost={likePost} />
  {/* Check the implementation of each component, to see what props they require, if any! */}
  </div>
  );

src/components/Comments/Comments.js

@@ -1,14 +1,18 @@
-import React from 'react';
-import Comment from './Comment';
-import './Comments.css';
+import React from "react";
+import Comment from "./Comment";
+import "./Comments.css";
 
-const Comments = props => {
+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((comments) => {
+ return <Comment comment={comments} key={comments.id} />;
+ })}
  </div>
  );
 };

src/components/Posts/LikeSection.js

@@ -2,28 +2,25 @@
 // Use a piece of data coming in through props to display the correct number of likes.
 // You will also add an onClick handler that utilizes `likePost` to increase the count of likes.
 // (As a stretch goal, you might want to prevent your user from "liking" the same post more than once.)
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faComment, faHeart } from '@fortawesome/free-regular-svg-icons';
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faComment, faHeart } from "@fortawesome/free-regular-svg-icons";
 
-const LikeSection = props => {
+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'>
+ <div className="like-section" key="likes-icons-container">
+ <div className="like-section-wrapper" onClick={likePost}>
  <FontAwesomeIcon icon={faHeart} />
  </div>
- <div className='like-section-wrapper'>
+ <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

@@ -1,29 +1,25 @@
-import React from 'react';
-import Comments from '../Comments/Comments';
-import LikeSection from './LikeSection';
-import PostHeader from './PostHeader';
+import React from "react";
+import Comments from "../Comments/Comments";
+import LikeSection from "./LikeSection";
+import PostHeader from "./PostHeader";
 
-const Post = props => {
+const Post = (props) => {
  // 🔥 Make sure the parent of Post is passing the right props!
  const { post, likePost } = props;
 
  return (
- <div className='post-border'>
- <PostHeader
- username={post.username}
- thumbnailUrl={post.thumbnailUrl}
- />
- <div className='post-image-wrapper'>
- <img
- alt='post thumbnail'
- className='post-image'
- src={post.imageUrl}
- />
+ <div className="post-border">
+ <PostHeader username={post.username} thumbnailUrl={post.thumbnailUrl} />
+ <div className="post-image-wrapper">
+ <img alt="post thumbnail" className="post-image" src={post.imageUrl} />
  </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

@@ -1,14 +1,17 @@
-import React from 'react';
-import Post from './Post';
-import './Posts.css';
+import React from "react";
+import Post from "./Post";
+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'>
+ <div className="posts-container-wrapper">
  {/* Map through the posts array returning a Post component at each iteration */}
+ {posts.map((post) => {
+ return <Post post={post} likePost={likePost} key={post.id} />;
+ })}
  {/* Check the implementation of Post to see what props it requires! */}
  </div>
  );

src/components/SearchBar/SearchBar.js

@@ -1,21 +1,25 @@
 // You do not need to change any code in this file for MVP
 import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faInstagram } from '@fortawesome/free-brands-svg-icons';
-import { faHeart, faCircle, faCompass } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faInstagram } from "@fortawesome/free-brands-svg-icons";
+import {
+ faHeart,
+ faCircle,
+ faCompass,
+} from "@fortawesome/free-regular-svg-icons";
 import "./SearchBar.css";
 
 const SearchBar = (props) => {
+ const changeHandler = (event) => {
+ props.setSearchTerm(event.target.value);
+ };
  return (
  <div className="search-bar-wrapper">
  <div className="social">
  <FontAwesomeIcon icon={faInstagram} />
  </div>
  <form className="search-form">
- <input
- type="text"
- placeholder="Search"
- />
+ <input onChange={changeHandler} type="text" placeholder="Search" />
  </form>
  <div className="social-wrapper">
  <div className="social">