Merge pull request #164 from saseungmin/delete-own-study-review

[Feature] Add delete my study review logic

Author: saseungmin

package-lock.json

@@ -60,6 +60,7 @@
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
+    "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.1.2",
     "@types/jest": "^26.0.15",

package.json

@@ -0,0 +1,14 @@
+const firebase = jest.genMockFromModule('firebase/app');
+
+firebase.firestore = jest.fn().mockImplementation(() => ({
+  collection: jest.fn().mockImplementation(() => ({
+    doc: jest.fn().mockImplementation(() => ({
+      update: jest.fn(),
+      delete: jest.fn(),
+    })),
+  })),
+}));
+
+firebase.auth = jest.fn().mockImplementation(() => ({}));
+
+export default firebase;

src/__mocks__/firebase/app.js

@@ -10,6 +10,8 @@ import palette from '../../styles/palette';
 
 import { changeDateToTime } from '../../util/utils';
 
+import CloseSvg from '../../assets/icons/close.svg';
+
 const ReviewWrapper = styled.div`
   background-color: #f8f8f8;
   display: flex;
@@ -33,22 +35,46 @@ const ReviewContentInfo = styled.div`
   justify-content: space-between;
 `;
 
-const Review = ({ review }) => {
+const ReviewHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const CloseIcon = styled(CloseSvg)`
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  fill: ${palette.gray[6]};
+  transition: fill .2s;
+  
+  &:hover {
+    fill: ${palette.gray[8]};
+  }
+`;
+
+const Review = ({ user, review, onClick }) => {
   const {
     id, rating, content, createDate,
   } = review;
 
   return (
     <ReviewWrapper>
-      <StarRatings
-        rating={rating}
-        starRatedColor="#ffc816"
-        numberOfStars={5}
-        starDimension="20px"
-        starSpacing="0"
-        starHoverColor="#ffc816"
-        name="rating"
-      />
+      <ReviewHeader>
+        <StarRatings
+          rating={rating}
+          starRatedColor="#ffc816"
+          numberOfStars={5}
+          starDimension="20px"
+          starSpacing="0"
+        />
+        {user === id && (
+          <CloseIcon
+            data-testid="close-icon"
+            onClick={() => onClick(id)}
+          />
+        )}
+      </ReviewHeader>
       <ReviewContent>
         {content}
       </ReviewContent>

assets/global.css renamed to src/assets/css/global.css

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 
 import Review from './Review';
 
@@ -12,16 +12,44 @@ describe('Review', () => {
     createDate: new Date(),
   };
 
+  const handleClick = jest.fn();
+
   const renderReview = (review) => render((
     <Review
+      user={given.user}
       review={review}
+      onClick={handleClick}
     />
   ));
 
-  it('Render review contents', () => {
-    const { container } = renderReview(mockReview);
+  context("When it's my review", () => {
+    given('user', () => ('test@test.com'));
+
+    it('Render review contents', () => {
+      const { container, getByTestId } = renderReview(mockReview);
+
+      expect(container).toHaveTextContent('review');
+      expect(container).toHaveTextContent('test@test.com');
+      expect(getByTestId('close-icon')).not.toBeNull();
+    });
+
+    it('Listen delete click events', () => {
+      const { getByTestId } = renderReview(mockReview);
+
+      fireEvent.click(getByTestId('close-icon'));
+
+      expect(handleClick).toBeCalledTimes(1);
+    });
+  });
+
+  context("When it's my review", () => {
+    given('user', () => ('test'));
+
+    it('Render review contents', () => {
+      const { container } = renderReview(mockReview);
 
-    expect(container).toHaveTextContent('review');
-    expect(container).toHaveTextContent('test@test.com');
+      expect(container).toHaveTextContent('review');
+      expect(container).toHaveTextContent('test@test.com');
+    });
   });
 });

src/assets/icons/close.svg

@@ -27,7 +27,7 @@ const EmptyReviewWrapper = styled.div`
   border-radius: 5px;
 `;
 
-const ReviewList = ({ reviews }) => {
+const ReviewList = ({ user, reviews, onDelete }) => {
   if (_.isEmpty(reviews)) {
     return (
       <EmptyReviewWrapper>
@@ -44,7 +44,9 @@ const ReviewList = ({ reviews }) => {
       {reviews.map((review) => (
         <Review
           key={review.id}
+          user={user}
           review={review}
+          onClick={onDelete}
         />
       ))}
     </ReviewWrapper>

src/components/introduce/Review.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 
 import ReviewList from './ReviewList';
 
@@ -12,9 +12,13 @@ describe('ReviewList', () => {
     createdDate: new Date(),
   }];
 
+  const handleClick = jest.fn();
+
   const renderReviewList = (reviews) => render((
     <ReviewList
+      user="test@test.com"
       reviews={reviews}
+      onDelete={handleClick}
     />
   ));
 
@@ -27,6 +31,14 @@ describe('ReviewList', () => {
       expect(container).toHaveTextContent('review');
       expect(container).toHaveTextContent('test@test.com');
     });
+
+    it('Listen delete click events', () => {
+      const { getByTestId } = renderReviewList(mockReviews);
+
+      fireEvent.click(getByTestId('close-icon'));
+
+      expect(handleClick).toBeCalledTimes(1);
+    });
   });
 
   context('Without reviews', () => {

src/components/introduce/Review.test.jsx

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import {
   getAuth, getGroup, isCheckedTimeStatus, changeDateToTime,
 } from '../../util/utils';
-import { changeStudyReviewFields, setStudyReview } from '../../reducers/groupSlice';
+import { changeStudyReviewFields, setStudyReview, deleteStudyReview } from '../../reducers/groupSlice';
 
 import SubTitle from '../../styles/SubTitle';
 
@@ -35,6 +35,10 @@ const ReviewFormContainer = () => {
     }));
   }, [dispatch, user, studyReviewFields]);
 
+  const onDeleteReview = useCallback((reviewId) => {
+    dispatch(deleteStudyReview(reviewId));
+  }, [dispatch]);
+
   if (!group) {
     return null;
   }
@@ -63,7 +67,9 @@ const ReviewFormContainer = () => {
         onSubmit={onSubmitReview}
       />
       <ReviewList
+        user={user}
         reviews={group.reviews ? group.reviews : []}
+        onDelete={onDeleteReview}
       />
     </>
   );