upvote and downvote comments

backend/api/src/reaction.ts

@@ -5,17 +5,21 @@ import { assertUnreachable } from 'common/util/types'
 import { log } from 'shared/utils'
 
 export const addOrRemoveReaction: APIHandler<'react'> = async (props, auth) => {
-  const { contentId, contentType, remove } = props
+  const { contentId, contentType, remove, reactionType = 'like' } = props
   const userId = auth.uid
 
   const pg = createSupabaseDirectClient()
 
-  if (remove) {
+  const deleteReaction = async (deleteReactionType: string) => {
     await pg.none(
       `delete from user_reactions
-       where user_id = $1 and content_id = $2 and content_type = $3`,
-      [userId, contentId, contentType]
+       where user_id = $1 and content_id = $2 and content_type = $3 and reaction_type = $4`,
+      [userId, contentId, contentType, deleteReactionType]
     )
+  }
+
+  if (remove) {
+    await deleteReaction(reactionType)
   } else {
     // get the id of the person this content belongs to, to denormalize the owner
     let ownerId: string
@@ -53,37 +57,75 @@ export const addOrRemoveReaction: APIHandler<'react'> = async (props, auth) => {
       [contentId, contentType, userId]
     )
 
+    console.log(
+      'existingReactions*****************************************************************',
+      existingReactions
+    )
     if (existingReactions.length > 0) {
-      log('Reaction already exists, do nothing')
-      return { result: { success: true }, continue: async () => {} }
+      const existingReactionType = existingReactions[0].reaction_type
+      // if it's the same reaction type, do nothing
+      if (existingReactionType === reactionType) {
+        log('Reaction already exists, do nothing')
+        return { result: { success: true }, continue: async () => {} }
+      } else {
+        console.log(
+          'NOT EQUAL, DELETING***************************************************************8'
+        )
+        // otherwise, remove the other reaction type
+        await deleteReaction(existingReactionType)
+      }
     }
 
+    console.log(
+      'DOINT INSERT NOW ***************************************************************8'
+    )
+
     // actually do the insert
     const reactionRow = await pg.one(
       `insert into user_reactions
-       (content_id, content_type, content_owner_id, user_id)
-       values ($1, $2, $3, $4)
+       (content_id, content_type, content_owner_id, user_id, reaction_type)
+       values ($1, $2, $3, $4, $5)
        returning *`,
-      [contentId, contentType, ownerId, userId]
+      [contentId, contentType, ownerId, userId, reactionType]
     )
 
-    await createLikeNotification(reactionRow)
+    console.log(
+      'INSERT RESULT*****************************************************************',
+      reactionRow
+    )
+
+    if (reactionType === 'like') {
+      await createLikeNotification(reactionRow)
+    }
   }
 
   return {
     result: { success: true },
     continue: async () => {
       if (contentType === 'comment') {
-        const count = await pg.one(
+        const likeCount = await pg.one(
+          `select count(*) from user_reactions
+           where content_id = $1 and content_type = $2 and reaction_type = $3`,
+          [contentId, contentType, 'like'],
+          (r) => r.count
+        )
+        const dislikeCount = await pg.one(
           `select count(*) from user_reactions
-           where content_id = $1 and content_type = $2`,
-          [contentId, contentType],
+           where content_id = $1 and content_type = $2 and reaction_type = $3`,
+          [contentId, contentType, 'dislike'],
           (r) => r.count
         )
-        log('new like count ' + count)
+
+        log('new like count ' + likeCount)
+        log('new dislike count ' + dislikeCount)
+
         await pg.none(
           `update contract_comments set likes = $1 where comment_id = $2`,
-          [count, contentId]
+          [likeCount, contentId]
+        )
+        await pg.none(
+          `update contract_comments set dislikes = $1 where comment_id = $2`,
+          [dislikeCount, contentId]
         )
       }
     },

common/src/api/schema.ts

@@ -1014,6 +1014,7 @@ export const API = (_apiTypeCheck = {
         contentId: z.string(),
         contentType: z.enum(['comment', 'contract']),
         remove: z.boolean().optional(),
+        reactionType: z.string().optional().default('like'),
       })
       .strict(),
     returns: { success: true },

common/src/reaction.ts

@@ -4,4 +4,6 @@ export type Reaction = Row<'user_reactions'>
 
 export type ReactionContentTypes = 'contract' | 'comment'
 
+export type ReactionType = 'like' | 'dislike'
+
 // export type ReactionTypes = 'like'

web/components/comments/comment-actions.tsx

@@ -2,20 +2,20 @@ import { ReplyIcon } from '@heroicons/react/solid'
 import clsx from 'clsx'
 import { ContractComment } from 'common/comment'
 import { Contract } from 'common/contract'
+import { TRADE_TERM } from 'common/envs/constants'
 import { richTextToString } from 'common/util/parse'
 import { useState } from 'react'
-import { FaArrowTrendUp, FaArrowTrendDown } from 'react-icons/fa6'
-import { useUser, usePrivateUser, isBlocked } from 'web/hooks/use-user'
+import { FaArrowTrendDown, FaArrowTrendUp } from 'react-icons/fa6'
+import { isBlocked, usePrivateUser, useUser } from 'web/hooks/use-user'
+import { track } from 'web/lib/service/analytics'
 import { BuyPanel } from '../bet/bet-panel'
 import { IconButton } from '../buttons/button'
-import { LikeButton } from '../contract/like-button'
+import { AwardBountyButton } from '../contract/bountied-question'
+import { ReactButton } from '../contract/react-button'
 import { Col } from '../layout/col'
 import { Modal, MODAL_CLASS } from '../layout/modal'
 import { Row } from '../layout/row'
 import { Tooltip } from '../widgets/tooltip'
-import { track } from 'web/lib/service/analytics'
-import { AwardBountyButton } from '../contract/bountied-question'
-import { TRADE_TERM } from 'common/envs/constants'
 
 export function CommentActions(props: {
   onReplyClick?: (comment: ContractComment) => void
@@ -99,7 +99,19 @@ export function CommentActions(props: {
           </Tooltip>
         </IconButton>
       )}
-      <LikeButton
+      <ReactButton
+        contentCreatorId={comment.userId}
+        contentId={comment.id}
+        user={user}
+        contentType={'comment'}
+        size={'xs'}
+        contentText={richTextToString(comment.content)}
+        disabled={isBlocked(privateUser, comment.userId)}
+        trackingLocation={trackingLocation}
+        iconType={'thumb'}
+        reactionType={'like'}
+      />
+      <ReactButton
         contentCreatorId={comment.userId}
         contentId={comment.id}
         user={user}
@@ -108,6 +120,8 @@ export function CommentActions(props: {
         contentText={richTextToString(comment.content)}
         disabled={isBlocked(privateUser, comment.userId)}
         trackingLocation={trackingLocation}
+        iconType={'thumb'}
+        reactionType={'dislike'}
       />
       {showBetModal && (
         <Modal

web/components/contract/contract-summary-stats.tsx

@@ -3,12 +3,12 @@ import { Contract } from 'common/contract'
 import { formatWithToken, shortFormatNumber } from 'common/util/format'
 import { Row } from 'web/components/layout/row'
 import { isBlocked, usePrivateUser, useUser } from 'web/hooks/use-user'
+import { MoneyDisplay } from '../bet/money-display'
 import { TierTooltip } from '../tiers/tier-tooltip'
 import { Tooltip } from '../widgets/tooltip'
 import { BountyLeft } from './bountied-question'
 import { CloseOrResolveTime } from './contract-details'
-import { LikeButton } from './like-button'
-import { MoneyDisplay } from '../bet/money-display'
+import { ReactButton } from './react-button'
 
 export function ContractSummaryStats(props: {
   contractId: string
@@ -42,7 +42,7 @@ export function ContractSummaryStats(props: {
         <Row className="ml-auto gap-4">
           {marketTier && <TierTooltip tier={marketTier} contract={contract} />}
           {!isBlocked(privateUser, contract.creatorId) && (
-            <LikeButton
+            <ReactButton
               user={user}
               size={'2xs'}
               contentId={contractId}

web/components/contract/feed-contract-card.tsx

@@ -51,7 +51,7 @@ import { PollPanel } from '../poll/poll-panel'
 import { TierTooltip } from '../tiers/tier-tooltip'
 import { UserHovercard } from '../user/user-hovercard'
 import { ClickFrame } from '../widgets/click-frame'
-import { LikeButton } from './like-button'
+import { ReactButton } from './react-button'
 import { TradesButton } from './trades-button'
 
 const DEBUG_FEED_CARDS =
@@ -456,7 +456,7 @@ const BottomActionRow = (props: {
         <CommentsButton contract={contract} user={user} className={'h-full'} />
       </BottomRowButtonWrapper>
       <BottomRowButtonWrapper>
-        <LikeButton
+        <ReactButton
           contentId={contract.id}
           contentCreatorId={contract.creatorId}
           user={user}