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
  */
@@ -237,11 +245,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 +336,28 @@ 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);
+ const responseWithId = {
+ _id,
+ ...updateWithoutId,
+ };
+
+ res.json(responseWithId);
+ } 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;
- }
 }