react-icons/fa#FaThumbsDown JavaScript Examples

The following examples show how to use react-icons/fa#FaThumbsDown. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: MyPostsPage.jsx    From Socialgram with Apache License 2.0 6 votes vote down vote up 
Post = ({ post }) => {
  return (
    <div key={post.id} className="container bg-dark mt-3 mb-3 p-3 post rounded">
      <h3 className="mb-3">{parse(post.title)}</h3>
      <div className="icon-container d-flex">
        <div className="icons" title="like">
          <FaThumbsUp className="pe-1" />
          <span>{post.likes}</span>
        </div>
        <div className="icons" title="dislike">
          <FaThumbsDown className="pe-1" />
          <span>{post.dislikes}</span>
        </div>
        <div className="icons hearts" title="heart">
          <FaHeart className="pe-1" />
          <span>{post.hearts}</span>
        </div>
      </div>

      {post.comments.map((comment) => (
        <div
          key={comment.id}
          className="container p-3 mb-2 shadow-lg rounded-lg"
        >
          {parse(comment.comments)}
        </div>
      ))}
    </div>
  );
}
Example #2
Source File: Post.jsx    From Socialgram with Apache License 2.0 4 votes vote down vote up 
Post = ({
  post,
  addLikes,
  addComment,
  disLikes,
  hearts,
  commentText,
  setCommentText,
}) => {
  const [user, setUser] = useState("");

  useEffect(() => {
    const ac = new AbortController();
    const fetchIds = async () => {
      try {
        apiPlain.getSingle(`userId`, ac.signal, "").then((res) => {
          if (!Array.isArray(res)) {
            return;
          }
          const userData = res?.filter((ids) => ids._id === post.userId);
          if (userData?.length) {
            setUser(userData[0]?.fname);
          } else {
            setUser("Deleted User");
          }
        });
      } catch (error) {
        console.log(error);
      }
    };
    fetchIds();
    return () => ac.abort();
  }, [post._id, post.userId, post]);

  return (
    <React.Fragment>
      <div
        key={post.id}
        className="container bg-dark mt-3 mb-3 p-3 post rounded"
      >
        <h3 className="mb-3">{parse(post.title)}</h3>
        <div className="my-4 d-flex justify-content-between">
          <p className="text-muted">Posted By: {user}</p>
          <p className="text-muted">
            {post.date ? convertDate(post.date) : "Just now"}
          </p>
        </div>
        <div className="icon-container d-flex">
          <div
            className="icons"
            title="like"
            onClick={() => addLikes(post.id, post.likes)}
          >
            <FaThumbsUp className="pe-1" />
            <span>{post.likes}</span>
          </div>
          <div
            className="icons"
            title="dislike"
            onClick={() => disLikes(post.id, post.dislikes)}
          >
            <FaThumbsDown className="pe-1" />
            <span>{post.dislikes}</span>
          </div>
          <div
            className="icons hearts"
            title="heart"
            onClick={() => hearts(post.id, post.hearts)}
          >
            <FaHeart className="pe-1" />
            <span>{post.hearts}</span>
          </div>
        </div>
        <div className="input-group mb-3 mt-3">
          <form className="w-100">
            <div className="form-group w-100">
              <input
                type="text"
                className="form-control w-100"
                placeholder="comment"
                value={commentText}
                onChange={(event) => setCommentText(event.target.value)}
                required
              />
            </div>
            <div className="button-container text-center mt-3 mb-3">
              <button
                style={{ width: "100%" }}
                className="btn btn-primary"
                onClick={(event) => {
                  event.preventDefault();
                  addComment(post.id, post.comments);
                }}
              >
                Add Comment
              </button>
            </div>
          </form>
        </div>
        <div
          style={{ maxHeight: "20vh", overflowY: "auto" }}
          className="d-flex flex-column-reverse"
        >
          {post.comments.map((comment) => (
            <div
              key={comment.id}
              className="container p-3 mb-2 shadow-lg rounded-lg w-100"
            >
              {parse(comment.comments)}
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}