Add ability to edit/delete reviews, refactor review components

api/src/controllers/reviews.ts

@@ -10,6 +10,14 @@ import Vote from '../models/vote';
 import Report from '../models/report';
 const router = express.Router();
 
+async function userWroteReview(userID: string | undefined, reviewID: string) {
+  if (!userID) {
+    return false;
+  }
+
+  return await Review.exists({ _id: reviewID, userID: userID });
+}
+
 /**
  * Get review scores
  */
@@ -220,10 +228,7 @@ router.post('/', async function (req, res) {
       req.body.userDisplay =
         req.body.userDisplay === 'Anonymous Peter' ? 'Anonymous Peter' : req.session.passport.user.name;
       req.body.userID = req.session.passport.user.id;
-      await new Review(req.body).save();
-
-      // echo back body
-      res.json(req.body);
+      res.json(await new Review(req.body).save());
     } catch {
       res.json({ error: 'Cannot add review' });
     }
@@ -237,11 +242,7 @@ router.post('/', async function (req, res) {
  */
 router.delete('/', async (req, res) => {
   try {
-    const checkUser = async () => {
-      return await Review.findOne({ _id: req.body.id as string, userID: req.session.passport?.user.id }).exec();
-    };
-
-    if (req.session.passport?.admin || (await checkUser())) {
+    if (req.session.passport?.admin || (await userWroteReview(req.session.passport?.user.id, req.body.id))) {
       await Review.deleteOne({ _id: req.body.id });
       await Vote.deleteMany({ reviewID: req.body.id });
       await Report.deleteMany({ reviewID: req.body.id });
@@ -332,5 +333,23 @@ router.delete('/clear', async function (req, res) {
     res.json({ error: 'Can only clear on development environment' });
   }
 });
+/**
+ * Updating the review
+ */
+router.patch('/update', async function (req, res) {
+  if (req.session.passport) {
+    if (!(await userWroteReview(req.session.passport.user.id, req.body._id))) {
+      return res.json({ error: 'You are not the author of this review.' });
+    }
+
+    const updatedReviewBody = req.body;
+
+    const { _id, ...updateWithoutId } = updatedReviewBody;
+    await Review.updateOne({ _id }, updateWithoutId);
+    res.json(updatedReviewBody);
+  } else {
+    res.status(401).json({ error: 'Must be logged in to update a review.' });
+  }
+});
 
 export default router;

site/src/component/Review/Review.scss

@@ -212,3 +212,10 @@
     }
   }
 }
+
+.edit-buttons {
+  display: flex;
+  flex-direction: row;
+  float: right;
+  gap: 10px;
+}

site/src/component/Review/Review.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react';
+import { FC, useState, useEffect, useCallback } from 'react';
 import axios, { AxiosResponse } from 'axios';
 import SubReview from './SubReview';
 import ReviewForm from '../ReviewForm/ReviewForm';
@@ -26,8 +26,9 @@ const Review: FC<ReviewProps> = (props) => {
   const [sortingOption, setSortingOption] = useState<SortingOption>(SortingOption.MOST_RECENT);
   const [filterOption, setFilterOption] = useState('');
   const [showOnlyVerifiedReviews, setShowOnlyVerifiedReviews] = useState(false);
+  const showForm = useAppSelector((state) => state.review.formOpen);
 
-  const getReviews = async () => {
+  const getReviews = useCallback(async () => {
     interface paramsProps {
       courseID?: string;
       professorID?: string;
@@ -43,13 +44,13 @@ const Review: FC<ReviewProps> = (props) => {
         const data = res.data.filter((review) => review !== null);
         dispatch(setReviews(data));
       });
-  };
+  }, [dispatch, props.course, props.professor]);
 
   useEffect(() => {
     // prevent reviews from carrying over
     dispatch(setReviews([]));
     getReviews();
-  }, [props.course?.id, props.professor?.ucinetid]);
+  }, [dispatch, getReviews]);
 
   let sortedReviews: ReviewData[];
   // filter verified if option is set
@@ -189,19 +190,13 @@ const Review: FC<ReviewProps> = (props) => {
             </div>
           </div>
           {sortedReviews.map((review) => (
-            <SubReview
-              review={review}
-              key={review._id}
-              course={props.course}
-              professor={props.professor}
-              // updateScore={(newUserVote) => updateScore(review._id!, newUserVote)}
-            />
+            <SubReview review={review} key={review._id} course={props.course} professor={props.professor} />
           ))}
           <button type="button" className="add-review-btn" onClick={openReviewForm}>
             + Add Review
           </button>
         </div>
-        <ReviewForm closeForm={closeForm} {...props} />
+        <ReviewForm closeForm={closeForm} show={showForm} {...props} />
       </>
     );
   }

site/src/component/Review/SubReview.tsx

@@ -1,29 +1,35 @@
-import { FC, useState } from 'react';
+import { FC, useContext, useState } from 'react';
 import axios from 'axios';
 import './Review.scss';
 import Badge from 'react-bootstrap/Badge';
 import Tooltip from 'react-bootstrap/Tooltip';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { useCookies } from 'react-cookie';
 import { Link } from 'react-router-dom';
-import { PersonFill } from 'react-bootstrap-icons';
+import { PencilFill, PersonFill, TrashFill } from 'react-bootstrap-icons';
 import { ReviewData, VoteRequest, CourseGQLData, ProfessorGQLData } from '../../types/types';
 import ReportForm from '../ReportForm/ReportForm';
 import { selectReviews, setReviews } from '../../store/slices/reviewSlice';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { Button, Modal } from 'react-bootstrap';
+import ThemeContext from '../../style/theme-context';
+import ReviewForm from '../ReviewForm/ReviewForm';
 
 interface SubReviewProps {
   review: ReviewData;
   course?: CourseGQLData;
   professor?: ProfessorGQLData;
-  updateScore?: (newUserVote: number) => void;
 }
 
 const SubReview: FC<SubReviewProps> = ({ review, course, professor }) => {
   const dispatch = useAppDispatch();
   const reviewData = useAppSelector(selectReviews);
   const [cookies] = useCookies(['user']);
   const [reportFormOpen, setReportFormOpen] = useState<boolean>(false);
+  const { darkMode } = useContext(ThemeContext);
+  const buttonVariant = darkMode ? 'dark' : 'secondary';
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showReviewForm, setShowReviewForm] = useState(false);
 
   const sendVote = async (voteReq: VoteRequest) => {
     const res = await axios.patch('/api/reviews/vote', voteReq);
@@ -48,6 +54,12 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor }) => {
     );
   };
 
+  const deleteReview = async (reviewID: string) => {
+    await axios.delete('/api/reviews', { data: { id: reviewID } });
+    dispatch(setReviews(reviewData.filter((review) => review._id !== reviewID)));
+    setShowDeleteModal(false);
+  };
+
   const upvote = async () => {
     if (cookies.user === undefined) {
       alert('You must be logged in to vote.');
@@ -103,6 +115,16 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor }) => {
     setReportFormOpen(true);
   };
 
+  const openReviewForm = () => {
+    setShowReviewForm(true);
+    document.body.style.overflow = 'hidden';
+  };
+
+  const closeReviewForm = () => {
+    setShowReviewForm(false);
+    document.body.style.overflow = 'visible';
+  };
+
   const badgeOverlay = <Tooltip id="verified-tooltip">This review was verified by an administrator.</Tooltip>;
   const authorOverlay = <Tooltip id="authored-tooltip">You are the author of this review.</Tooltip>;
 
@@ -117,12 +139,38 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor }) => {
 
   const authorBadge = (
     <OverlayTrigger overlay={authorOverlay}>
-      <PersonFill size={25} fill="green"></PersonFill>
+      <Badge variant="success" style={{ padding: '1px' }}>
+        <PersonFill size={14}></PersonFill>
+      </Badge>
     </OverlayTrigger>
   );
 
   return (
     <div className="subreview">
+      {cookies.user?.id === review.userID && (
+        <div className="edit-buttons">
+          <Button variant={buttonVariant} className="edit-button" onClick={openReviewForm}>
+            <PencilFill width="16" height="16" />
+          </Button>
+          <Button variant="danger" className="delete-button" onClick={() => setShowDeleteModal(true)}>
+            <TrashFill width="16" height="16" />
+          </Button>
+          <Modal className="ppc-modal" show={showDeleteModal} onHide={() => setShowDeleteModal(false)} centered>
+            <Modal.Header closeButton>
+              <h2>Delete Review</h2>
+            </Modal.Header>
+            <Modal.Body>Deleting a review will remove it permanently. Are you sure you want to proceed?</Modal.Body>
+            <Modal.Footer>
+              <Button variant="secondary" onClick={() => setShowDeleteModal(false)}>
+                Cancel
+              </Button>
+              <Button variant="danger" onClick={() => deleteReview(review._id!)}>
+                Delete
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+      )}
       <div>
         <h3 className="subreview-identifier">
           {professor && (
@@ -137,7 +185,8 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor }) => {
           )}
           {!course && !professor && (
             <div>
-              {review.courseID} {review.professorID}
+              <Link to={{ pathname: `/course/${review.courseID}` }}>{review.courseID}</Link>{' '}
+              <Link to={{ pathname: `/professor/${review.professorID}` }}>{review.professorID}</Link>
             </div>
           )}
         </h3>
@@ -219,6 +268,14 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor }) => {
           reviewContent={review.reviewContent}
           closeForm={() => setReportFormOpen(false)}
         />
+        <ReviewForm
+          course={course}
+          professor={professor}
+          reviewToEdit={review}
+          closeForm={closeReviewForm}
+          show={showReviewForm}
+          editing
+        />
       </div>
     </div>
   );

site/src/component/ReviewForm/ReviewForm.scss

@@ -64,16 +64,15 @@
     cursor: pointer;
   }
 }
-.review-form-grade {
-  margin-left: 1vw;
-}
 .review-form-section {
   background-color: var(--overlay3);
   border-radius: var(--border-radius);
   padding: 1rem;
 }
 .review-form-row {
   display: flex;
+  flex-wrap: wrap;
+  column-gap: 16px;
 }
 .review-form-center {
   display: flex;
@@ -100,7 +99,7 @@
   margin: auto auto 25px auto;
   cursor: pointer;
 }
-.review-form-submit {
+.review-form-captcha-submit {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -124,6 +123,13 @@
   top: 2vh;
 }
 
+.review-form-submit-cancel-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 14px;
+}
+
 @media only screen and (max-width: 800px) {
   .review-form {
     height: 80vh;
@@ -134,22 +140,4 @@
   .review-form-taken {
     margin-bottom: 3vh;
   }
-
-  .review-form-submit {
-    flex-direction: column;
-
-    button {
-      margin-top: 1vh;
-    }
-  }
-}
-
-@media only screen and (max-width: 1700px) {
-  .review-form-row {
-    flex-direction: column;
-  }
-
-  .review-form-grade {
-    margin-left: 0;
-  }
 }