Bump loader-utils from 2.0.3 to 2.0.4 in /client

client/.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

client/package.json

@@ -3,21 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emoji-mart/data": "^1.0.6",
+    "@emoji-mart/react": "^1.0.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.21.1",
-    "emoji-mart": "^3.0.0",
+    "emoji-mart": "^5.2.2",
     "moment": "^2.29.1",
+    "node-sass": "^7.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-facebook-login": "^4.1.1",
     "react-google-login": "^5.2.2",
-    "react-js-pull-to-refresh": "^1.2.2",
     "react-paginate": "^6.3.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^5.0.1",
     "react-validator": "^0.1.0",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",
@@ -30,7 +32,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:5000/",
+  "proxy": "http://localhost:5000",
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -46,4 +48,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

client/src/components/AddComment/index.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 import { Picker } from "emoji-mart";
-import "emoji-mart/css/emoji-mart.css";
+// import "emoji-mart/css/emoji-mart.css";
 
 import { addComment, getComments } from "../../redux/actions/commentActions";
 

client/src/components/AddCommentReply/index.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 import { Picker } from "emoji-mart";
-import "emoji-mart/css/emoji-mart.css";
+// import "emoji-mart/css/emoji-mart.css";
 
 import {
   getComments,

client/src/components/AddPhoto/index.js

@@ -28,12 +28,12 @@ const AddPhoto = ({ history }) => {
     selectedFile: null,
   });
   const [mediumArr, setMediumArr] = useState([]);
-  const [isMediumDup, setIsMediumDup] = useState(false)
+  const [isMediumDup, setIsMediumDup] = useState(false);
   const [warning, setWarning] = useState("");
 
   useEffect(() => {
     if (!isAuthenticated) {
-     history.push("/login");
+      history.push("/login");
     }
   }, [isAuthenticated, history]);
 
@@ -85,18 +85,16 @@ const AddPhoto = ({ history }) => {
   const addToMedium = (e) => {
     e.preventDefault();
     const mediumIndex = mediumArr.indexOf(medium);
-    console.log(medium.length)
     if (medium.length < 1) {
       setWarning("Please enter a value");
-    } else
-    if (mediumIndex !== -1) {
+    } else if (mediumIndex !== -1) {
       setWarning("Tag already present");
-      prompt('tag already present')
+      prompt("tag already present");
       setIsMediumDup(true);
     } else {
       setMediumArr([...mediumArr, medium]);
       setText({ ...text, medium: "" });
-      console.log(mediumArr);
+
       setWarning("");
       setIsMediumDup(false);
     }
@@ -168,9 +166,7 @@ const AddPhoto = ({ history }) => {
               type="text"
               name="medium"
               value={medium}
-              placeholder={
-                "eg(oil, acrylics, dripping, photography etc)"
-              }
+              placeholder={"eg(oil, acrylics, dripping, photography etc)"}
               onChange={handleChange}
             />
             <button
@@ -197,7 +193,7 @@ const AddPhoto = ({ history }) => {
             ))}
           </div>
           <span className="add-photo__medium-warning">{warning}</span>
-          {medium.length < 1 || medium !== '' || isMediumDup && warning}
+          {medium.length < 1 || medium !== "" || (isMediumDup && warning)}
         </div>
 
         <div className="add-photo__input-topics">

client/src/components/AddPhotoButton/style.scss

@@ -29,4 +29,4 @@
   .add-photo-link {
     display: none;
   }
-}
+}

client/src/components/Comment/index.js

@@ -35,6 +35,7 @@ const Comment = ({
   lockScrolling,
   unlockScrolling,
 }) => {
+
   const dispatch = useDispatch();
   const [isEditDeleteOpen, setIsEditDeleteOpen] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -198,7 +199,6 @@ const Comment = ({
                     </div>
                     {comment.likes !== undefined &&
                       users.map((user) => {
-                        console.log('comment likes', comment.likes)
                         for (let i = 0; i < comment.likes.length; i++) {
                           const like = comment.likes[i];
                           if (user._id === like) {

client/src/components/CommentLike/index.js

@@ -34,4 +34,4 @@ CommentLike.propTypes = {
   userId: PropTypes.string,
   name: PropTypes.string,
   avatar: PropTypes.string
-};
+};

client/src/components/CommentReply/index.js

@@ -172,7 +172,6 @@ const CommentReply = ({
               </div>
               {commentReply.likes !== undefined &&
                 users.map((user) => {
-                  console.log(commentReply.likes)
                   for (let i = 0; i < commentReply.likes.length; i++) {
                     const like = commentReply.likes[i];
                     if (user._id === like) {

client/src/components/EditComment/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 import { Picker } from "emoji-mart";
-import "emoji-mart/css/emoji-mart.css";
+// import "emoji-mart/css";
 
 import {
   getComments,
@@ -40,7 +40,6 @@ const EditComment = ({ photoId, commentId, closeEditComment }, props) => {
   const handleSubmit = (e) => {
     e.preventDefault();
     let updatedComment = comment;
-    console.log(updatedComment);
     dispatch(editComment(photoId, commentId, updatedComment));
     setTimeout(() => {
       closeEditComment();

client/src/components/EditPhoto/index.js

@@ -77,7 +77,6 @@ const EditPhoto = (props) => {
   };
 
   const fileSelectedHandler = (e) => {
-    console.log(e.target.files[0]);
     const file = e.target.files[0];
     setUpdatedImage(file);
     setFileInput(e.target.value);
@@ -96,7 +95,6 @@ const EditPhoto = (props) => {
       const result = reader.result;
       setPreviewSource(result);
       setIsImageChanged(true);
-      console.log("before file preview", photo);
       photo.image = result;
       setPhoto({
         ...photo,

client/src/components/EditUser/index.js

@@ -22,7 +22,6 @@ const EditUser = (props) => {
   // const [err, loadedUser] = useUser();
   const isAuthenticated = useSelector((state) => state.user.isAuthenticated);
   const isGoogleUser = useSelector((state) => state.user.isGoogleUser);
-  console.log(isGoogleUser)
   const [isImageEditing, setIsImageEditing] = useState(false);
   const [updatedImage, setUpdatedImage] = useState(null);
   const [previewSource, setPreviewSource] = useState(null);
@@ -35,7 +34,6 @@ const EditUser = (props) => {
   const id = props.match.params.id;
 
   const handleSubmit = (e) => {
-    console.log('calling', user)
     e.preventDefault();
     user.medium = mediumArr;
     if (isImageChanged) {
@@ -126,15 +124,13 @@ const EditUser = (props) => {
     mediumArr.splice(mediumIndex, 1);
     setMediumArr([...mediumArr]);
   };
-
   let { name, email, avatar, medium, bio } = user;
   if (avatar === undefined || avatar === "") {
     avatar =
       "https://i2.wp.com/www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png?fit=256%2C256&quality=100&ssl=1";
   }
 
   return (
-
     <div className="edit-user">
       <form onSubmit={handleSubmit} className="edit-user__form animate-modal">
         <div className="edit-user__cancel-wrapper">

client/src/components/ErrorLoading/index.js

@@ -15,4 +15,4 @@ const ErrorLoading = ({ refreshPage }) => {
 export default ErrorLoading;
 ErrorLoading.propTypes = {
   refreshPage: PropTypes.func
-};
+};

client/src/components/LikeComment/index.js

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from "react";
+import { NavLink } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+
+import {
+  getComment,
+  getComments,
+  getCommentLikes,
+  likeComment,
+} from "../../redux/actions/commentActions";
+import CommentLike from "../CommentLike/index";
+
+import "../LikePhoto/style.scss";
+import "./style.scss";
+
+const LikeComment = ({ photoId, commentId, likes, history, match }, props) => {
+  const dispatch = useDispatch();
+
+  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
+  const user = useSelector((state) => state.auth.user);
+  const likedComment = useSelector((state) => state.comments.comment);
+  const commentLikes = useSelector((state) => state.comments.commentLikes);
+
+  // const isCommentLiked = useSelector((state) => state.comments.isCommentLiked);
+  const [isLikesShowing, setIsLikeShowing] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!isAuthenticated && !user) {
+      history.push("/login");
+    } else {
+      if (isAuthenticated && user) {
+        dispatch(getComment(match.params.id, commentId));
+        dispatch(likeComment(photoId, commentId, likedComment));
+
+        setTimeout(() => {
+          dispatch(getComments(photoId));
+          dispatch(getCommentLikes(photoId, commentId));
+        }, 1500);
+      }
+    }
+  };
+
+  useEffect(() => {
+    dispatch(getCommentLikes(photoId, commentId));
+  }, [dispatch]);
+
+  const showCommentLikes = () => {
+    setIsLikeShowing(true);
+  };
+  const closeCommentLikes = () => {
+    setIsLikeShowing(false);
+  };
+
+  const formattedLikes = commentLikes.map((like) => (
+    <CommentLike
+      key={like._id}
+      userId={like._id}
+      avatar={like.avatar}
+      name={like.name}
+    />
+  ));
+
+  if (!likedComment) {
+    return <p>loading...</p>;
+  }
+  return (
+    <div className="like-comment__form__container">
+      <form className="like-container" onSubmit={handleSubmit}>
+        {isAuthenticated &&
+        commentLikes.some((like) => like._id === user._id) ? (
+          <button className="like-comment__btn grow">
+            <i className="fas fa-heart full-heart"></i> Unlike
+          </button>
+        ) : (
+          <button className="like-comment__btn grow">
+            <i className="far fa-heart empty-heart"></i> Like
+          </button>
+        )}
+        {likes.length > 0 ? (
+          <NavLink
+            to={`/photos/${photoId}/comments/${commentId}/likes`}
+            className="likes-number grow"
+            onClick={showCommentLikes}
+          >
+            {likes.length}
+            {likes.length === 1 ? (
+              <span className="like-comments-num"> Like</span>
+            ) : (
+              <span> Likes</span>
+            )}
+          </NavLink>
+        ) : null}
+      </form>
+      {isLikesShowing ? (
+        <div className="likes-comments-box">
+          <div className="likes-comments-box__header">
+            <NavLink
+              to={`/photos/${photoId}/comments/`}
+              onClick={closeCommentLikes}
+            >
+              <i className="fas fa-times-circle grow"></i>
+            </NavLink>
+          </div>
+          <div className="likes-comments-box__body">{formattedLikes}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default LikeComment;