Move link to ecogesture card

src/components/Ecogesture/EcogestureCard.tsx

@@ -6,22 +6,17 @@ import { importIconbyId } from 'utils/utils'
 import './ecogestureCard.scss'
 import EfficientyRating from './EfficientyRating'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import { Link as RouterLink } from 'react-router-dom'
+import { Link } from '@material-ui/core/'
 
 interface EcogestureCardProps {
   ecogesture: Ecogesture
-  handleClick?: (ecogesture: Ecogesture) => void
-  challengeEcogesture?: number
 }
 
 const EcogestureCard: React.FC<EcogestureCardProps> = ({
   ecogesture,
-  handleClick,
 }: EcogestureCardProps) => {
-  const handleCardclick = () => {
-    handleClick && ecogesture && handleClick(ecogesture)
-  }
   const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
-
   useEffect(() => {
     async function handleEcogestureIcon() {
       const icon = await importIconbyId(ecogesture.id, 'ecogesture')
@@ -37,8 +32,12 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
   }, [ecogesture])
 
   return (
-    <>
-      <StyledEcogestureCard onClick={handleCardclick}>
+    <Link
+      to={`/ecogestures/${ecogesture.id}`}
+      component={RouterLink}
+      className="ecogesture-list-item"
+    >
+      <StyledEcogestureCard>
         <div className="ec">
           <div className={`ec-content `}>
             <div className="ec-content-icon">
@@ -53,7 +52,7 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
           </div>
         </div>
       </StyledEcogestureCard>
-    </>
+    </Link>
   )
 }
 

src/components/Ecogesture/EcogestureList.tsx

@@ -4,7 +4,7 @@ import { useClient } from 'cozy-client'
 
 import { Ecogesture } from 'models'
 import EcogestureService from 'services/ecogesture.service'
-import { Menu, MenuItem, ListItemIcon, Link } from '@material-ui/core/'
+import { Menu, MenuItem, ListItemIcon } from '@material-ui/core/'
 
 import SortIcon from 'assets/icons/ico/sort.svg'
 import CheckIcon from 'assets/icons/ico/check.svg'
@@ -19,7 +19,6 @@ import { ProfileType } from 'models/profileType.model'
 import { Usage } from 'enum/ecogesture.enum'
 import EcogestureInfoModal from './EcogestureInfoModal'
 import { getSeason } from 'utils/utils'
-import { Link as RouterLink } from 'react-router-dom'
 import { FluidType } from 'enum/fluid.enum'
 
 interface EcogestureListProps {
@@ -45,10 +44,6 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
   const [openDropDown, setopenDropDown] = useState<boolean>(false)
   const [openInfoModal, setOpenInfoModal] = useState<boolean>(false)
 
-  const handleClick = (ecogesture: Ecogesture) => {
-    // setSelectedEcogesture(ecogesture)
-    // setOpenEcogestureModal(true)
-  }
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
   const handleCloseClick = useCallback(() => {
@@ -76,7 +71,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
       .filter(ecogesture => Usage[ecogesture.usage] === activeFilter)
       .map((ecogesture, index) => (
         <div key={index} className="ecogesture-list-item">
-          <EcogestureCard ecogesture={ecogesture} handleClick={handleClick} />
+          <EcogestureCard ecogesture={ecogesture} />
         </div>
       ))
     if (filtered.length > 0) {
@@ -212,17 +207,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
             </div>
           ) : ecogestures && activeFilter === Usage[Usage.ALL] ? (
             ecogestures.map((ecogesture, index) => (
-              <Link
-                to={`/ecogestures/${ecogesture.id}`}
-                key={index}
-                component={RouterLink}
-                className="ecogesture-list-item"
-              >
-                <EcogestureCard
-                  ecogesture={ecogesture}
-                  handleClick={handleClick}
-                />
-              </Link>
+              <EcogestureCard ecogesture={ecogesture} key={index} />
             ))
           ) : ecogestures && activeFilter !== Usage[Usage.ALL] ? (
             filterEcogesture(ecogestures)

src/components/Ecogesture/SingleEcogesture.tsx

@@ -9,9 +9,7 @@ import { importIconbyId } from 'utils/utils'
 import EcogestureService from 'services/ecogesture.service'
 import IconButton from '@material-ui/core/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-
 import { Ecogesture } from 'models'
-import Button from '@material-ui/core/Button'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import EfficientyRating from './EfficientyRating'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
@@ -57,6 +55,7 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
   const toggleDoing = useCallback(() => {
     setIsDoing(prev => !prev)
   }, [])
+
   useEffect(() => {
     async function getSingleEcogesture() {
       const ecogestureService = new EcogestureService(client)