Issue #1351 - Don't wrap ProjectCard in Link, instead handle click event

src/projects/list/components/Projects/ProjectCard.jsx

@@ -1,19 +1,23 @@
 import React from 'react'
 import PT from 'prop-types'
-import {Link} from 'react-router-dom'
+import { withRouter } from 'react-router-dom'
 import { getProjectRoleForCurrentUser } from '../../../../helpers/projectHelper'
 import AvatarGroup from '../../../../components/AvatarGroup/AvatarGroup'
 import ProjectCardHeader from './ProjectCardHeader'
 import ProjectCardBody from './ProjectCardBody'
 import './ProjectCard.scss'
 
-function ProjectCard({ project, duration, disabled, currentUser }) {
-
+function ProjectCard({ project, duration, disabled, currentUser, history }) {
   let className = `ProjectCard ${ disabled ? 'disabled' : 'enabled'}`
   if (!project) return null
   const currentMemberRole = getProjectRoleForCurrentUser({ project, currentUserId: currentUser.userId})
   return (
-    <Link to={`/projects/${project.id}/`} className={className}>
+    <div
+      className={className}
+      onClick={() => {
+        history.push(`/projects/${project.id}/`)
+      }}
+    >
       <div className="card-header">
           <ProjectCardHeader
             project={project}
@@ -29,7 +33,7 @@ function ProjectCard({ project, duration, disabled, currentUser }) {
       <div className="card-footer">
         <AvatarGroup users={ project.members } />
       </div>
-    </Link>
+    </div>
   )
 }
 
@@ -42,4 +46,4 @@ ProjectCard.propTypes = {
   // duration: PT.object.isRequired,
 }
 
-export default ProjectCard
+export default withRouter(ProjectCard)

src/projects/list/components/Projects/ProjectCard.scss

@@ -2,6 +2,7 @@
 
 .ProjectCard {
   display: flex;
+  cursor: pointer;
   flex-direction: column;
   height: 100%;
   background-color: $tc-white;