133 connect vote helpful backend api with front end

frontend/src/Internship/CommentBox.js

@@ -3,23 +3,59 @@ import { useState } from 'react';
 import Button from '@mui/material/Button';
 import CustomTextField from '../Component/CustomTextfield';
 import useTheme from '@mui/material/styles/useTheme';
+import useAuthContext from '../AuthContext';
+import axios from 'axios';
+import { useParams } from 'react-router-dom';
 
-export default function CommentBox({ handleShowCommentBox, postComment, parentType, parentId, rating }) {
+export default function CommentBox({
+  handleShowCommentBox,
+  parentType,
+  parentId,
+  reviewId,
+  postReview,
+  rating,
+  handleAddComments,
+}) {
   const [comment, setComment] = useState('');
   const [clicked, setClicked] = useState(false);
+  const authContext = useAuthContext();
+  const principal = authContext.principal
   const theme = useTheme();
+  const { corporateId, internshipId } = useParams()
   const handleClickPost = () => {
-    setClicked(true)
-    parentType === 'Internship'
-    ? postComment(comment, rating)
-    : postComment(parentType, parentId, comment);
+    setClicked(true);
+    parentType === 'Internship' ? postReview(comment, rating) :
+    postComment();
     setTimeout(() => {
-      setClicked(false)
-    }, 3000)
-  }
+      setClicked(false);
+    }, 3000);
+  };
   const handleValChange = (e) => {
     setComment(e.target.value);
   };
+
+  const postComment = () => {
+    axios
+      .post(`/corporates/${corporateId}/internships/${internshipId}/reviews/${reviewId}/comments`, {
+        userId: principal.username,
+        parentType: parentType,
+        parentId: parentId,
+        content: comment,
+      })
+      .then((res) => {
+        if (res.data.status === 'SUCCESS') {
+          handleShowCommentBox();
+          handleAddComments({
+            userId: principal.username,
+            id: res.data.id,
+            content: comment,
+            comments: [],
+            datePosted: res.data.datePosted,
+          });
+        }
+      });
+  };
+
   return (
     <Box>
       <CustomTextField

frontend/src/Internship/CommentCard.js

@@ -5,7 +5,6 @@ import { useParams } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import { Button } from '@mui/material';
 import CommentBox from './CommentBox';
-import useAuthContext from '../AuthContext';
 
 export default function CommentCard({
   commentId,
@@ -21,7 +20,6 @@ export default function CommentCard({
   const [showComment, setShowComment] = useState(false);
   const [moreComments, setMoreComments] = useState([]);
   const [clickedDelete, setClickedDelete] = useState(false);
-  const { principal } = useAuthContext();
   const handleDelete = () => {
     console.log(commentId, parentType, parentId, userId);
     setClickedDelete(true);
@@ -44,6 +42,11 @@ export default function CommentCard({
       setClickedDelete(false);
     }, 3000);
   };
+
+  const handleAddComments = (comment) => {
+    setMoreComments([...moreComments, comment]);
+  }
+
   const handleShowCommentBox = () => {
     setShowComment(!showComment);
   };
@@ -58,32 +61,6 @@ export default function CommentCard({
       .then((res) => setMoreComments(res.data));
   };
 
-  const postComment = (parentType, parentId, comment) => {
-    console.log(parentType, parentId, comment, reviewId);
-    axios
-      .post(`/corporates/${corporateId}/internships/${internshipId}/reviews/${reviewId}/comments`, {
-        userId: principal.username,
-        parentType: parentType,
-        parentId: parentId,
-        content: comment,
-      })
-      .then((res) => {
-        if (res.data.status === 'SUCCESS') {
-          setShowComment(false);
-          setMoreComments([
-            ...moreComments,
-            {
-              userId: principal.username,
-              id: res.data.id,
-              content: comment,
-              comments: [],
-              datePosted: res.data.datePosted,
-            },
-          ]);
-        }
-      });
-  };
-
   return (
     <Box
       sx={{
@@ -120,16 +97,16 @@ export default function CommentCard({
         <Box sx={{ mt: 2 }}>
           <CommentBox
             handleShowCommentBox={handleShowCommentBox}
-            postComment={postComment}
             parentType={'Comment'}
             parentId={commentId}
+            reviewId={reviewId}
+            handleAddComments={handleAddComments}
           />
         </Box>
       ) : undefined}
 
       {moreComments.length > 0 &&
         moreComments.map((comment) => {
-          console.log(comment);
           return (
             <CommentCard
               key={comment.id}

frontend/src/Internship/InternshipPage.js

@@ -90,7 +90,7 @@ export default function InternshipPage() {
           <CommentCard
             rating={rating}
             handleShowCommentBox={handleShowCommentBox}
-            postComment={postReview}
+            postReview={postReview}
             parentType={'Internship'}
             parentId={internshipId}
           />

frontend/src/Internship/LikesPanel.js

@@ -0,0 +1,71 @@
+import Paper from '@mui/material/Paper';
+import NumLikes from './NumLikes';
+import NumDislikes from './NumDislikes';
+import { useState } from 'react';
+import axios from 'axios';
+
+export default function LikesPanel({ userId, numLikes, numDislikes, reviewId }) {
+  const [votes, setVotes] = useState({
+    likes: numLikes,
+    dislikes: numDislikes
+  })
+
+  const handleLike = () => {
+    axios
+      .post(`/users/vote-helpful`, {
+        isHelpful: 'Helpful',
+        reviewId: reviewId,
+        userId: userId,
+      })
+      .then((res) => {
+        if (res.data.status === 'SUCCESS') {
+            setVotes({
+                likes: res.data.votes[0],
+                dislikes: res.data.votes[1]
+            })
+        }
+      });
+  };
+
+  const handleDislike = () => {
+    axios
+      .post(`/users/vote-helpful`, {
+        isHelpful: 'Unhelpful',
+        reviewId: reviewId,
+        userId: userId,
+      })
+      .then((res) => {
+        if (res.data.status === 'SUCCESS') {
+            setVotes({
+                likes: res.data.votes[0],
+                dislikes: res.data.votes[1]
+            })
+        }
+      });
+  };
+  return (
+    <Paper
+      sx={{
+        ml: 'auto',
+        display: 'inline-flex',
+        alignItems: 'center',
+        background: 'rgba(35, 36, 35, 0.4)',
+        color: 'white',
+        px: 2,
+        py: 1,
+        borderRadius: 3,
+      }}
+      elevation={5}>
+      <NumLikes
+        userId={userId}
+        reviewId={reviewId}
+        numLikes={votes.likes}
+        handleLike={handleLike}></NumLikes>
+      <NumDislikes
+        userId={userId}
+        reviewId={reviewId}
+        numDislikes={votes.dislikes}
+        handleDislike={handleDislike}></NumDislikes>
+    </Paper>
+  );
+}

frontend/src/Internship/NumDislikes.js

@@ -0,0 +1,13 @@
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+
+export default function NumDislikes ({ numDislikes, handleDislike }) {
+  return (
+    <Button onClick={handleDislike}>
+      <Typography sx={{ mr: 2, fontWeight: 'bold', color: 'white' }}>
+        {' '}
+        👎 {numDislikes}
+      </Typography>
+    </Button>
+  );
+};

frontend/src/Internship/NumLikes.js

@@ -0,0 +1,10 @@
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+
+export default function NumLikes({ numLikes, handleLike }) {
+  return (
+    <Button onClick={handleLike}>
+      <Typography sx={{ mr: 2, fontWeight: 'bold', color: 'white' }}> 👍 {numLikes}</Typography>
+    </Button>
+  );
+}

frontend/src/Internship/ReviewCard.js

@@ -1,16 +1,15 @@
 import { useEffect, useState } from 'react';
 import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import axios from 'axios';
 import CommentBox from './CommentBox';
 import { useParams } from 'react-router-dom';
 import CommentCard from './CommentCard';
-import useAuthContext from '../AuthContext';
 import Rating from '@mui/material/Rating';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import FavoriteIcon from '@mui/icons-material/Favorite';
+import LikesPanel from './LikesPanel';
 
 export default function ReviewCard({
   reviewId,
@@ -25,8 +24,6 @@ export default function ReviewCard({
   const [showComment, setShowComment] = useState(false);
   const [moreComments, setMoreComments] = useState([]);
   const [clickedDelete, setClickedDelete] = useState(false);
-  const authContext = useAuthContext();
-  const principal = authContext.principal;
   const handleDelete = () => {
     setClickedDelete(true);
     axios
@@ -58,31 +55,9 @@ export default function ReviewCard({
       .then((res) => setMoreComments(res.data));
   };
 
-  const postComment = (parentType, parentId, comment) => {
-    console.log(parentType, parentId, comment, reviewId);
-    axios
-      .post(`/corporates/${corporateId}/internships/${internshipId}/reviews/${reviewId}/comments`, {
-        userId: principal.username,
-        parentType: parentType,
-        parentId: parentId,
-        content: comment,
-      })
-      .then((res) => {
-        if (res.data.status === 'SUCCESS') {
-          setShowComment(false);
-          setMoreComments([
-            ...moreComments,
-            {
-              userId: principal.username,
-              id: res.data.id,
-              content: comment,
-              comments: [],
-              datePosted: res.data.datePosted,
-            },
-          ]);
-        }
-      });
-  };
+  const handleAddComments = (comment) => {
+    setMoreComments([...moreComments, comment]);
+  }
 
   return (
     <Box
@@ -98,21 +73,7 @@ export default function ReviewCard({
           <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
             {userId}
           </Typography>
-          <Paper
-            sx={{
-              ml: 'auto',
-              display: 'inline-flex',
-              alignItems: 'center',
-              background: 'rgba(35, 36, 35, 0.4)',
-              color: 'white',
-              px: 2,
-              py: 1,
-              borderRadius: 3,
-            }}
-            elevation={5}>
-            <Typography sx={{ mr: 2, fontWeight: 'bold' }}>👍 {numLikes}</Typography>
-            <Typography sx={{ fontWeight: 'bold' }}>👎 {numDislikes}</Typography>
-          </Paper>
+          <LikesPanel numLikes={numLikes} numDislikes={numDislikes} userId={userId} reviewId={reviewId}/>
         </Box>
         <Rating
           value={rating || 0}
@@ -153,13 +114,15 @@ export default function ReviewCard({
             handleShowCommentBox={handleShowCommentBox}
             parentType={'Review'}
             parentId={reviewId}
-            postComment={postComment}
+            reviewId={reviewId}
+            handleAddComments={handleAddComments}
           />
         </Box>
       ) : undefined}
 
       {moreComments.length > 0 &&
         moreComments.map((comment, i) => {
+          console.log(comment);
           return (
             <CommentCard
               key={i}

src/main/java/service/dao/ReviewDaoMapper.java

@@ -9,12 +9,7 @@
 
 import java.sql.ResultSet;
 import java.sql.SQLException;
-import java.util.ArrayList;
-import java.util.HashMap;
 
-/** The mapper for the Review data access object. Converts review data between object and Json,
- * used for SQL queries.
- */
 public class ReviewDaoMapper implements RowMapper<Review> {
 
     /** Maps the row of the ResultSet to a Review object.
@@ -33,7 +28,6 @@ public Review mapRow(ResultSet rs, int rowNum) throws SQLException {
         try {
             review.setId(rs.getInt("id"));
             review.setInternshipId(rs.getInt("internshipid"));
-            review.setVotedUsers(new HashMap<>());
         } catch (PSQLException e) {
             System.out.print("at ReviewDaoMapper");
             System.out.println(e);