fix(question): click on "or" btn dont trigger left vote

apps/devchoices-next/pages/question/[slug].tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { questions } from '../../public/assets/data/questions'
-import { useCallback, useContext, useEffect, useState } from 'react'
+import { MouseEvent, useCallback, useContext, useEffect, useState } from 'react'
 import { QuestionInterface, VoteInterface } from '@benjamincode/shared/interfaces'
 import { PageTransitionWrapper, Question } from '@benjamincode/shared/ui'
 import { QuestionContext } from '../_app'
@@ -92,7 +92,12 @@ export function QuestionPage(props: QuestionPageProps) {
       await router.push('/question/' + questionContext.questions[questionContext.questions.indexOf(question) + 1].slug)
   }
 
-  const onLeft = () => {
+  const onLeft = (event: MouseEvent<HTMLDivElement>) => {
+    // dont trigger vote if click on "or" btn
+    if (event.target instanceof Element && event.target.id == "or") {
+      return;
+    }
+
     // todo store the +1 in the database
     const form = new FormData()
     form.append('position', '0')

libs/shared/ui/src/lib/card-choice/card-choice.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useCallback, useEffect, useState } from 'react'
+import { CSSProperties, MouseEvent, useCallback, useEffect, useState } from 'react'
 import CountUp from 'react-countup'
 import Or from '../or/or'
 import Image from 'next/future/image'
@@ -8,7 +8,7 @@ export interface CardChoiceProps {
   imgUrl: string
   voteCount: number
   totalCount: number
-  onClick: () => void
+  onClick: (event: MouseEvent<HTMLDivElement>) => void
   showResult: boolean
   position?: 'left' | 'right'
 }
@@ -61,14 +61,14 @@ export function CardChoice(props: CardChoiceProps) {
     setStyle(computeStyle())
   }, [percent, setStyle, showResult, computeStyle])
 
-  const onVote = (): void => {
-    if (!showResult) return onClick()
+  const onVote = (event: MouseEvent<HTMLDivElement>): void => {
+    if (!showResult) return onClick(event)
   }
 
   return (
     <div
-      onClick={() => {
-        onVote()
+      onClick={(event) => {
+        onVote(event)
       }}
       data-testid="card"
       className={`absolute lg-top-0 lg-bottom-0 flex items-center flex-col justify-center transition-size ease duration-1000  ${positionClass} lg:w-1/2 lg:h-full w-full h-1/2`}

libs/shared/ui/src/lib/or/or.tsx

@@ -8,6 +8,7 @@ export function Or(props: OrProps) {
 
   return (
     <div
+      id="or"
       className={`opacity-100 absolute text-2xl lg:right-0  z-10 w-20 h-20 flex items-center justify-center lg:top-1/2 top-full transform lg:translate-x-1/2 -translate-y-1/2 lg:translate-y-1/2 bg-white text-black uppercase font-medium rounded-full ${
         props.className || ''
       } ${showResult ? '!opacity-0 transition-opacity duration-700' : ''}`}

libs/shared/ui/src/lib/question/question.tsx

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react'
 import { CardChoice, CardChoiceProps } from '../card-choice/card-choice'
 import Button from '../button/button'
 import ShareTwitter from '../share-twitter/share-twitter'
@@ -10,7 +11,7 @@ export interface QuestionProps {
   showResult: boolean
   onNext: () => void
   onSkip: () => void
-  onLeft: () => void
+  onLeft: (event: MouseEvent<HTMLDivElement>) => void
   onRight: () => void
   className?: string
   websiteUrl?: string