2011-useClickTracker-HoaxView

Author: basarbk

frontend/src/components/HoaxView.js

@@ -1,64 +1,80 @@
-import React, { Component } from 'react';
+import React, { useRef } from 'react';
 import ProfileImageWithDefault from './ProfileImageWithDefault';
 import { format } from 'timeago.js';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
+import useClickTracker from '../shared/useClickTracker';
 
-class HoaxView extends Component {
-  render() {
-    const { hoax, onClickDelete } = this.props;
-    const { user, date } = hoax;
-    const { username, displayName, image } = user;
-    const relativeDate = format(date);
-    const attachmentImageVisible =
-      hoax.attachment && hoax.attachment.fileType.startsWith('image');
+const HoaxView = (props) => {
+  const actionArea = useRef();
+  const dropDownVisible = useClickTracker(actionArea);
+  const { hoax, onClickDelete } = props;
+  const { user, date } = hoax;
+  const { username, displayName, image } = user;
+  const relativeDate = format(date);
+  const attachmentImageVisible =
+    hoax.attachment && hoax.attachment.fileType.startsWith('image');
 
-    const ownedByLoggedInUser = user.id === this.props.loggedInUser.id;
-    return (
-      <div className="card p-1">
-        <div className="d-flex">
-          <ProfileImageWithDefault
-            className="rounded-circle m-1"
-            width="32"
-            height="32"
-            image={image}
-          />
-          <div className="flex-fill m-auto pl-2">
-            <Link to={`/${username}`} className="list-group-item-action">
-              <h6 className="d-inline">
-                {displayName}@{username}
-              </h6>
-            </Link>
-            <span className="text-black-50"> - </span>
-            <span className="text-black-50">{relativeDate}</span>
-          </div>
-          {ownedByLoggedInUser && (
-            <button
-              className="btn btn-outline-danger btn-sm"
-              onClick={onClickDelete}
-            >
-              <i className="far fa-trash-alt" />
-            </button>
-          )}
+  const ownedByLoggedInUser = user.id === props.loggedInUser.id;
+
+  let dropDownClass = 'p-0 shadow dropdown-menu';
+  if (dropDownVisible) {
+    dropDownClass += ' show';
+  }
+
+  return (
+    <div className="card p-1">
+      <div className="d-flex">
+        <ProfileImageWithDefault
+          className="rounded-circle m-1"
+          width="32"
+          height="32"
+          image={image}
+        />
+        <div className="flex-fill m-auto pl-2">
+          <Link to={`/${username}`} className="list-group-item-action">
+            <h6 className="d-inline">
+              {displayName}@{username}
+            </h6>
+          </Link>
+          <span className="text-black-50"> - </span>
+          <span className="text-black-50">{relativeDate}</span>
         </div>
-        <div className="pl-5">{hoax.content}</div>
-        {attachmentImageVisible && (
-          <div className="pl-5">
-            <img
-              alt="attachment"
-              src={`/images/attachments/${hoax.attachment.name}`}
-              className="img-fluid"
+        {ownedByLoggedInUser && (
+          <div className="dropdown">
+            <span
+              className="btn btn-sm btn-light dropdown-toggle"
+              data-testid="hoax-actions"
+              ref={actionArea}
             />
+            <div className={dropDownClass} data-testid="hoax-action-dropdown">
+              <button
+                className="btn btn-outline-danger btn-sm btn-block text-left"
+                onClick={onClickDelete}
+              >
+                <i className="far fa-trash-alt" /> Delete
+              </button>
+            </div>
           </div>
         )}
       </div>
-    );
-  }
-}
+      <div className="pl-5">{hoax.content}</div>
+      {attachmentImageVisible && (
+        <div className="pl-5">
+          <img
+            alt="attachment"
+            src={`/images/attachments/${hoax.attachment.name}`}
+            className="img-fluid"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
 
 const mapStateToProps = (state) => {
   return {
-    loggedInUser: state
+    loggedInUser: state,
   };
 };
 

frontend/src/components/HoaxView.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import HoaxView from './HoaxView';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
@@ -12,7 +12,7 @@ const loggedInStateUser1 = {
   displayName: 'display1',
   image: 'profile1.png',
   password: 'P4ssword',
-  isLoggedIn: true
+  isLoggedIn: true,
 };
 
 const loggedInStateUser2 = {
@@ -21,7 +21,7 @@ const loggedInStateUser2 = {
   displayName: 'display2',
   image: 'profile2.png',
   password: 'P4ssword',
-  isLoggedIn: true
+  isLoggedIn: true,
 };
 
 const hoaxWithoutAttachment = {
@@ -31,8 +31,8 @@ const hoaxWithoutAttachment = {
     id: 1,
     username: 'user1',
     displayName: 'display1',
-    image: 'profile1.png'
-  }
+    image: 'profile1.png',
+  },
 };
 
 const hoaxWithAttachment = {
@@ -42,12 +42,12 @@ const hoaxWithAttachment = {
     id: 1,
     username: 'user1',
     displayName: 'display1',
-    image: 'profile1.png'
+    image: 'profile1.png',
   },
   attachment: {
     fileType: 'image/png',
-    name: 'attached-image.png'
-  }
+    name: 'attached-image.png',
+  },
 };
 
 const hoaxWithPdfAttachment = {
@@ -57,12 +57,12 @@ const hoaxWithPdfAttachment = {
     id: 1,
     username: 'user1',
     displayName: 'display1',
-    image: 'profile1.png'
+    image: 'profile1.png',
   },
   attachment: {
     fileType: 'application/pdf',
-    name: 'attached.pdf'
-  }
+    name: 'attached.pdf',
+  },
 };
 
 const setup = (hoax = hoaxWithoutAttachment, state = loggedInStateUser1) => {
@@ -129,5 +129,17 @@ describe('HoaxView', () => {
       const { container } = setup(hoaxWithoutAttachment, loggedInStateUser2);
       expect(container.querySelector('button')).not.toBeInTheDocument();
     });
+    it('does not show the dropdown menu when not clicked', () => {
+      const { queryByTestId } = setup();
+      const dropDownMenu = queryByTestId('hoax-action-dropdown');
+      expect(dropDownMenu).not.toHaveClass('show');
+    });
+    it('shows the dropdown menu after clicking the indicator', () => {
+      const { queryByTestId } = setup();
+      const indicator = queryByTestId('hoax-actions');
+      fireEvent.click(indicator);
+      const dropDownMenu = queryByTestId('hoax-action-dropdown');
+      expect(dropDownMenu).toHaveClass('show');
+    });
   });
 });