Initial commit to Account page (#521)

* Initial commit to Account page

* Addition of Post Content Popup

* Requested changes

* Requested changes

Author: vaibhavdaren

package-lock.json

@@ -41,6 +41,7 @@
     "react-responsive": "^8.0.3",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.0",
+    "react-shapes": "^0.1.0",
     "react-spinners": "^0.8.3",
     "react-switch": "^5.0.1",
     "react-toastify": "^6.0.5",

package.json

@@ -1,10 +1,10 @@
-import { GET_COMMENTS_OF_A_POST } from './types'
-import { errorHandler } from '../utils/errorHandler'
-import axios from 'axios'
-import { setRequestStatus } from '../utils/setRequestStatus'
+import { GET_COMMENTS_OF_A_POST, RESET_COMMENTS } from "./types";
+import { errorHandler } from "../utils/errorHandler";
+import axios from "axios";
+import { setRequestStatus } from "../utils/setRequestStatus";
 import { BASE_URL } from './baseApi'
 
-// CREATE COMMENT ON A PARTICULAR POST 
+// CREATE COMMENT ON A PARTICULAR POST
 export const createComment = (postId, comment) => async (dispatch) => {
   try {
     const res = await axios.post(`${BASE_URL}/comment/${postId}`, comment)
@@ -14,10 +14,10 @@ export const createComment = (postId, comment) => async (dispatch) => {
       console.log('created comment ', res.data.comment)
       dispatch(getAllCommentsOfPost(postId));
     }
-  } catch(error) {
-    dispatch(errorHandler(error))
+  } catch (error) {
+    dispatch(errorHandler(error));
   }
-}
+};
 
 // GET ALL COMMENTS OF A POST
 export const getAllCommentsOfPost = (postId) => async (dispatch) => {
@@ -26,19 +26,21 @@ export const getAllCommentsOfPost = (postId) => async (dispatch) => {
     dispatch(setRequestStatus(false))
     if(res.status === 200) {
       dispatch(setRequestStatus(true));
-      console.log('fetching comments of ', postId, res.data.comments);
+      console.log("fetching comments of ", postId, res.data.comments);
       dispatch({
         type: GET_COMMENTS_OF_A_POST,
-        payload: res.data.comments
-      })
+        payload: res.data.comments,
+      });
     }
-  } catch(error) {
-    dispatch(errorHandler(error))
+  } catch (error) {
+    dispatch(errorHandler(error));
   }
-}
+};
 
 // UPDATE COMMENT OF A POST
-export const updateComment = (commentId, updatedComment) => async (dispatch) => {
+export const updateComment = (commentId, updatedComment) => async (
+  dispatch
+) => {
   try {
     const res = await axios.patch(`${BASE_URL}/comment/${commentId}`, updatedComment)
     dispatch(setRequestStatus(false))
@@ -47,10 +49,10 @@ export const updateComment = (commentId, updatedComment) => async (dispatch) =>
       console.log('comment updated ', res.data.comment)
       dispatch(getAllCommentsOfPost())
     }
-  } catch(error) {
-    errorHandler(error)
+  } catch (error) {
+    errorHandler(error);
   }
-}
+};
 
 // DELETE COMMENT
 export const deleteComment = (commentId) => async (dispatch) => {
@@ -59,10 +61,14 @@ export const deleteComment = (commentId) => async (dispatch) => {
     dispatch(setRequestStatus(false))
     if(res.status === 200) {
       dispatch(setRequestStatus(true));
-      console.log('comment deleted ', res.data)
-      dispatch(getAllCommentsOfPost())
+      console.log("comment deleted ", res.data);
+      dispatch(getAllCommentsOfPost());
     }
-  } catch(error) {
-    dispatch(errorHandler(error))
+  } catch (error) {
+    dispatch(errorHandler(error));
   }
-}
+};
+
+export const resetComments = () => async (dispatch) => {
+  dispatch({ type: RESET_COMMENTS });
+};

src/actions/commentAction.js

@@ -38,8 +38,10 @@ export const GET_ALL_PINNED_POSTS = "GET_ALL_PINNED_POSTS";
 export const GET_EVENT_BY_ID = "GET_EVENT_BY_ID";
 export const GET_ADMIN = "GET_ADMIN";
 export const GET_COMMENTS_OF_A_POST = "GET_COMMENTS_OF_A_POST";
+export const RESET_COMMENTS = "RESET_COMMENTS";
 export const GET_SINGLE_PROJECT = "GET_SINGLE_PROJECT";
-export const PASSWORD_CHANGE_REQUEST_SUCCESS = "PASSWORD_CHANGE_REQUEST_SUCCESS";
+export const PASSWORD_CHANGE_REQUEST_SUCCESS =
+  "PASSWORD_CHANGE_REQUEST_SUCCESS";
 export const PASSWORD_SUCCESSFULLY_CHANGED = "PASSWORD_SUCCESSFULLY_CHANGED";
 export const GET_INVITE_LINK = "GET_INVITE_LINK";
 export const PROCESS_INVITE_LINK = "PROCESS_INVITE_LINK";

src/actions/types.js

@@ -1,19 +1,24 @@
-import { GET_COMMENTS_OF_A_POST } from '../actions/types'
+import { GET_COMMENTS_OF_A_POST, RESET_COMMENTS } from "../actions/types";
 
 const initialState = {
-  allComments: []
-}
+  allComments: [],
+};
 
 export default (state = initialState, action) => {
-  switch(action.type) {
+  switch (action.type) {
     case GET_COMMENTS_OF_A_POST: {
       return {
         ...state,
-        allComments: action.payload
-      }
+        allComments: action.payload,
+      };
+    }
+    case RESET_COMMENTS: {
+      return {
+        allComments: [],
+      };
     }
     default: {
-      return state
+      return state;
     }
   }
-}
+};

src/reducers/commentReducer.js

@@ -14,6 +14,7 @@ import {
   CardMedia,
 } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
+import { Button } from "react-bootstrap";
 import AddEventModal from "./popups/AddEventModal";
 import AddProjectModal from "./popups/AddProjectModal";
 import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
@@ -42,11 +43,11 @@ const styles = makeStyles((theme) => ({
     background: "#ffffff",
     border: "1px solid #cccccc",
     boxShadow: "1px 2px 5px rgba(0, 0, 0, 0.1)",
-    borderRadius: "5px"
+    borderRadius: "5px",
   },
   listStyle2: {
     paddingTop: 0,
-    marginTop: "-4px"
+    marginTop: "-4px",
   },
   info: {
     position: "absolute",
@@ -84,7 +85,7 @@ const styles = makeStyles((theme) => ({
   reply: {
     color: "rgba(0, 0, 0, 0.4)",
     fontSize: "36px",
-    paddingLeft: "17px"
+    paddingLeft: "17px",
   },
   paper: {
     marginBottom: "15px",
@@ -99,7 +100,7 @@ function NewsFeed(props) {
   const [showEvent, setShowEvent] = useState(false);
   const [writePost, showPostModal] = useState(false);
   const [showComment, toggle] = useState(false);
-  const [commentId, setCommentId] = useState('');
+  const [commentId, setCommentId] = useState("");
   const [events, setEvents] = useState([]);
   const [projects, setAllProjects] = useState([]);
   const [posts, setAllPosts] = useState([]);
@@ -112,7 +113,7 @@ function NewsFeed(props) {
   }, [props.allEvents, props.allPosts, props.allProjects, props]);
 
   let handleClick = (atrb) => () => {
-    console.log('attr ', atrb);
+    console.log("attr ", atrb);
     changeType(atrb);
     // second("s");
   };
@@ -124,7 +125,7 @@ function NewsFeed(props) {
       setShowEvent(true);
     }
   };
-  
+
   let handleClose = (modalName) => {
     if (modalName === "project") {
       setShowProject(false);
@@ -134,35 +135,35 @@ function NewsFeed(props) {
   };
 
   let openPostModal = () => {
-    showPostModal(true)
-  }
+    showPostModal(true);
+  };
 
   let closePostModal = () => {
-    showPostModal(false)
-  }
+    showPostModal(false);
+  };
 
   let commentToggle = (postId) => {
     console.log("Comment toggle clicked!", postId);
-    props.getAllCommentsOfPost(postId)
+    props.getAllCommentsOfPost(postId);
     setCommentId(postId);
     toggle(!showComment);
-  }
+  };
 
   let onUpvote = (postId) => {
-    console.log('upvote clicked!', postId);
-    props.upVotePost(postId)
-  }
+    console.log("upvote clicked!", postId);
+    props.upVotePost(postId);
+  };
 
   let onRsvpYes = (eventId) => {
-    console.log('On rsvp yes ', eventId);
+    console.log("On rsvp yes ", eventId);
     const info = {
-      yes: localStorage.getItem('userId')
-    }
+      yes: localStorage.getItem("userId"),
+    };
     props.rsvpYes(eventId, info);
-  }
+  };
 
   let onViewProject = (projectId) => {
-    console.log('Redirecting to project ', projectId);
+    console.log("Redirecting to project ", projectId);
     props.history.push(`/${projectId}/proj-info`);
   }
 
@@ -173,7 +174,7 @@ function NewsFeed(props) {
 
   let postContent = posts?.map((post) => {
     return (
-        <div className="grid" key={post._id}>
+      <div className="grid" key={post._id}>
         <Paper elevation={1} className={classes.paper}>
           <Card className={classes.root}>
             <List className={classes.listStyle}>
@@ -196,13 +197,15 @@ function NewsFeed(props) {
               </ListItem>
               <div className="post-details2">{parse(post?.content)}</div>
               <ListItem>
-                <IconButton 
+                <IconButton
                   className={classes.vote}
                   onClick={() => onUpvote(post._id)}
-                  >
+                >
                   <ArrowDropUpIcon className="up-vote" />
                 </IconButton>
-                <span className="up-vote">{post?.votes?.upVotes?.user.length}</span>
+                <span className="up-vote">
+                  {post?.votes?.upVotes?.user.length}
+                </span>
                 <span className="space"></span>
                 <span className="com-btn">
                   <ChatBubbleIcon className={classes.chat} />
@@ -218,8 +221,8 @@ function NewsFeed(props) {
           </Card>
         </Paper>
       </div>
-    )
-  })
+    );
+  });
 
   let projectsContent = projects?.map((project) => {
     return (
@@ -345,16 +348,16 @@ function NewsFeed(props) {
     )
   })
 
- let content;
- if (type === "Project") {
-  content = projectsContent
- }
- if (type === "Post") {
-  content = postContent
- }
- if (type === "Event") {
-  content = eventsContent
- }
+  let content;
+  if (type === "Project") {
+    content = projectsContent;
+  }
+  if (type === "Post") {
+    content = postContent;
+  }
+  if (type === "Event") {
+    content = eventsContent;
+  }
 
   return (
     <>
@@ -540,18 +543,18 @@ function NewsFeed(props) {
   );
 }
 
-// map state to props 
+// map state to props
 const mapStateToProps = (state) => ({
   auth: state.auth,
   error: state.error,
   event: state.event,
   post: state.post,
   status: state.status,
-  comment: state.comment
-})
+  comment: state.comment,
+});
 
 export default connect(mapStateToProps, {
   getAllCommentsOfPost,
   upVotePost,
-  rsvpYes
-})(withRouter(NewsFeed))
+  rsvpYes,
+})(withRouter(NewsFeed));