project done

client/src/components/posts/PostForm.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { addPost } from '../../actions/post';
+
+const PostForm = ({ addPost }) => {
+  const [text, setText] = useState('');
+
+  return (
+    <div className='post-form'>
+      <div className='bg-primary p'>
+        <h3>Say Something...</h3>
+      </div>
+      <form
+        className='form my-1'
+        onSubmit={e => {
+          e.preventDefault();
+          addPost({ text });
+          setText('');
+        }}
+      >
+        <textarea
+          name='text'
+          cols='30'
+          rows='5'
+          placeholder='Create a post'
+          value={text}
+          onChange={e => setText(e.target.value)}
+          required
+        />
+        <input type='submit' className='btn btn-dark my-1' value='Submit' />
+      </form>
+    </div>
+  );
+};
+
+PostForm.propTypes = {
+  addPost: PropTypes.func.isRequired
+};
+
+export default connect(
+  null,
+  { addPost }
+)(PostForm);

client/src/components/posts/PostItem.js

@@ -0,0 +1,84 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import formatDate from '../../utils/formatDate';
+import { connect } from 'react-redux';
+import { addLike, removeLike, deletePost } from '../../actions/post';
+
+const PostItem = ({
+  addLike,
+  removeLike,
+  deletePost,
+  auth,
+  post: { _id, text, name, avatar, user, likes, comments, date },
+  showActions
+}) => (
+  <div className="post bg-white p-1 my-1">
+    <div>
+      <Link to={`/profile/${user}`}>
+        <img className="round-img" src={avatar} alt="" />
+        <h4>{name}</h4>
+      </Link>
+    </div>
+    <div>
+      <p className="my-1">{text}</p>
+      <p className="post-date">Posted on {formatDate(date)}</p>
+
+      {showActions && (
+        <Fragment>
+          <button
+            onClick={() => addLike(_id)}
+            type="button"
+            className="btn btn-light"
+          >
+            <i className="fas fa-thumbs-up" />{' '}
+            <span>{likes.length > 0 && <span>{likes.length}</span>}</span>
+          </button>
+          <button
+            onClick={() => removeLike(_id)}
+            type="button"
+            className="btn btn-light"
+          >
+            <i className="fas fa-thumbs-down" />
+          </button>
+          <Link to={`/posts/${_id}`} className="btn btn-primary">
+            Discussion{' '}
+            {comments.length > 0 && (
+              <span className="comment-count">{comments.length}</span>
+            )}
+          </Link>
+          {!auth.loading && user === auth.user._id && (
+            <button
+              onClick={() => deletePost(_id)}
+              type="button"
+              className="btn btn-danger"
+            >
+              <i className="fas fa-times" />
+            </button>
+          )}
+        </Fragment>
+      )}
+    </div>
+  </div>
+);
+
+PostItem.defaultProps = {
+  showActions: true
+};
+
+PostItem.propTypes = {
+  post: PropTypes.object.isRequired,
+  auth: PropTypes.object.isRequired,
+  addLike: PropTypes.func.isRequired,
+  removeLike: PropTypes.func.isRequired,
+  deletePost: PropTypes.func.isRequired,
+  showActions: PropTypes.bool
+};
+
+const mapStateToProps = (state) => ({
+  auth: state.auth
+});
+
+export default connect(mapStateToProps, { addLike, removeLike, deletePost })(
+  PostItem
+);

client/src/components/posts/Posts.js

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import PostItem from './PostItem';
+import PostForm from './PostForm';
+import { getPosts } from '../../actions/post';
+
+const Posts = ({ getPosts, post: { posts } }) => {
+  useEffect(() => {
+    getPosts();
+  }, [getPosts]);
+
+  return (
+    <section className="container">
+      <h1 className="large text-primary">Posts</h1>
+      <p className="lead">
+        <i className="fas fa-user" /> Welcome to the community
+      </p>
+      <PostForm />
+      <div className="posts">
+        {posts.map((post) => (
+          <PostItem key={post._id} post={post} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+Posts.propTypes = {
+  getPosts: PropTypes.func.isRequired,
+  post: PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) => ({
+  post: state.post
+});
+
+export default connect(mapStateToProps, { getPosts })(Posts);