diff --git a/apps/devchoices-next/pages/question/[slug].tsx b/apps/devchoices-next/pages/question/[slug].tsx index d02f42d..6cd8a47 100644 --- a/apps/devchoices-next/pages/question/[slug].tsx +++ b/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) => { + // 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') diff --git a/apps/devchoices-next/public/assets/img-previews/preview-merge-or-rebase.jpg b/apps/devchoices-next/public/assets/img-previews/preview-merge-or-rebase.jpg new file mode 100644 index 0000000..b1e1ccc Binary files /dev/null and b/apps/devchoices-next/public/assets/img-previews/preview-merge-or-rebase.jpg differ diff --git a/libs/shared/ui/src/lib/card-choice/card-choice.tsx b/libs/shared/ui/src/lib/card-choice/card-choice.tsx index a183a96..599a034 100644 --- a/libs/shared/ui/src/lib/card-choice/card-choice.tsx +++ b/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) => 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): void => { + if (!showResult) return onClick(event) } return (
{ - 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`} diff --git a/libs/shared/ui/src/lib/or/or.tsx b/libs/shared/ui/src/lib/or/or.tsx index 969506f..88d4c95 100644 --- a/libs/shared/ui/src/lib/or/or.tsx +++ b/libs/shared/ui/src/lib/or/or.tsx @@ -8,6 +8,7 @@ export function Or(props: OrProps) { return (
void onSkip: () => void - onLeft: () => void + onLeft: (event: MouseEvent) => void onRight: () => void className?: string websiteUrl?: string