rewrite git history

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": "^8.0.0",
     "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",
@@ -26,11 +28,11 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:5000/",
+  "proxy": "http://localhost:5000",
   "eslintConfig": {
     "extends": "react-app"
   },

client/src/Routes.js

@@ -3,7 +3,7 @@ import { Route, Switch } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 
 import { getPhotos } from "./redux/actions/photoActions";
-import { getUsers } from "./redux/actions/userActions";
+import { getUsers, getUser } from "./redux/actions/userActions";
 import Navbar from "./components/Navbar";
 import Community from "./pages/Community";
 import Register from "./pages/Register";
@@ -33,10 +33,14 @@ const Routes = () => {
   const user = useSelector((state) => state.user);
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [isEditPopupOpen, setIsEditPopupOpen] = useState(false);
-
+
+  // TODO fix later on
   useEffect(() => {
     dispatch(getPhotos());
     dispatch(getUsers());
+    if(user.user) {
+      dispatch(getUser(user?.user._id));
+    }
   }, [dispatch]);
 
   const closePopup = () => {

client/src/components/AddComment/index.js

@@ -1,12 +1,10 @@
 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 Picker from "@emoji-mart/react";
 
 import { addComment, getComments } from "../../redux/actions/commentActions";
 
-
 import "./style.scss";
 
 const AddComment = ({ photoId, closeCommentField, setCommentClose }, props) => {
@@ -35,6 +33,8 @@ const AddComment = ({ photoId, closeCommentField, setCommentClose }, props) => {
   const { text } = comment;
 
   const addEmoji = (e) => {
+    console.log(e)
+
     let emoji = e.native;
     setComment({
       text: text + emoji,
@@ -67,7 +67,7 @@ const AddComment = ({ photoId, closeCommentField, setCommentClose }, props) => {
               className="add-comment-form__emoji-menu animate-pop hide-tablet-mobile"
               onMouseLeave={closeMenu}
             >
-              <Picker onSelect={addEmoji} emojiTooltip={true} />
+              <Picker onEmojiSelect={addEmoji} emojiTooltip={true} />
             </span>
           </>
         ) : (

client/src/components/AddCommentLikeForm/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 
 import "./style.scss";

client/src/components/AddCommentReply/index.js

@@ -1,9 +1,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 Picker from "@emoji-mart/react";
 import {
   getComments,
   addCommentReply,
@@ -70,7 +68,7 @@ const AddCommentReply = ({ photoId, commentId, closeCommentReply }) => {
               className="add-commentreply-form__emoji-menu animate-pop hide-tablet-mobile"
               onMouseLeave={closeMenu}
             >
-              <Picker onSelect={addEmoji} emojiTooltip={true} />
+              <Picker onEmojiSelect={addEmoji} emojiTooltip={true} />
             </span>
           </>
         ) : (

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/AddPhoto/style.scss

@@ -16,7 +16,7 @@
     border-radius: 14px;
     font-weight: 700;
     background-color: white;
-    width: 43vw;
+    width: 40rem;
     box-shadow: 0 2rem 2rem rgba(172, 159, 159, 0.5);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
@@ -27,7 +27,7 @@
   &__cancel-wrapper {
     display: flex;
     justify-content: flex-end;
-    width: 39vw;
+    width: 100%;
   }
 
   &__input-topics {

client/src/components/AddPhotoButton/style.scss

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

client/src/components/Comment/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable array-callback-return */
 import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 import { useDispatch } from "react-redux";
@@ -35,6 +36,7 @@ const Comment = ({
   lockScrolling,
   unlockScrolling,
 }) => {
+
   const dispatch = useDispatch();
   const [isEditDeleteOpen, setIsEditDeleteOpen] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -197,8 +199,7 @@ const Comment = ({
                       ></i>
                     </div>
                     {comment.likes !== undefined &&
-                      users.map((user) => {
-                        console.log('comment likes', comment.likes)
+                      users.map((user) => { 
                         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/CurrentUser/style.scss

@@ -73,11 +73,13 @@
   &__photos {
     margin-top: 3rem;
     @include three-col-grid;
+    align-items: stretch;
     grid-gap: 1rem;
     padding: 0 2rem;
   }
   &__photos.switched {
     overflow-y: scroll;
+    align-items: flex-start;
     height: 40rem;
   }
 }

client/src/components/EditComment/index.js

@@ -1,8 +1,6 @@
 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 Picker from "@emoji-mart/react";
 
 import {
   getComments,
@@ -40,7 +38,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();
@@ -81,7 +78,7 @@ const EditComment = ({ photoId, commentId, closeEditComment }, props) => {
               className="edit-comment__emoji-menu animate-pop hide-tablet-mobile"
               onMouseLeave={closeMenu}
             >
-              <Picker onSelect={addEmoji} emojiTooltip={true} />
+              <Picker onEmojiSelect={addEmoji} emojiTooltip={true} />
             </span>
           </>
         ) : (

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,