@linktr.ee/messaging-react 3.37.1 → 3.38.0-rc-1786343622

package/src/components/CustomMessage/MessageVoteButtons.stories.tsx

@@ -1,95 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react'
-import React, { useState } from 'react'
-
-import type { VoteSelection } from '../../hooks/useMessageVote'
-
-import { MessageVoteButtons } from './MessageVoteButtons'
-
-type ComponentProps = React.ComponentProps<typeof MessageVoteButtons>
-
-const meta: Meta<ComponentProps> = {
-  title: 'MessageVoteButtons',
-  component: MessageVoteButtons,
-  parameters: {
-    layout: 'centered',
-  },
-}
-export default meta
-
-const Template: StoryFn<ComponentProps> = (args) => (
-  <div className="p-12">
-    <MessageVoteButtons {...args} />
-  </div>
-)
-
-// Per-state stories (Unselected, GoodResponse, BadResponse) are individually
-// covered by rows of AllVariants — skip in Chromatic. Interactive has no
-// useful steady-state snapshot.
-const skipInChromatic = { chromatic: { disableSnapshot: true } }
-
-export const Unselected: StoryFn<ComponentProps> = Template.bind({})
-Unselected.args = {
-  selected: null,
-  onVoteUp: () => {},
-  onVoteDown: () => {},
-}
-Unselected.parameters = skipInChromatic
-
-export const GoodResponse: StoryFn<ComponentProps> = Template.bind({})
-GoodResponse.args = {
-  selected: 'up',
-  onVoteUp: () => {},
-  onVoteDown: () => {},
-}
-GoodResponse.parameters = skipInChromatic
-
-export const BadResponse: StoryFn<ComponentProps> = Template.bind({})
-BadResponse.args = {
-  selected: 'down',
-  onVoteUp: () => {},
-  onVoteDown: () => {},
-}
-BadResponse.parameters = skipInChromatic
-
-export const Interactive: StoryFn = () => {
-  const [selected, setSelected] = useState<VoteSelection>(null)
-  return (
-    <div className="p-12">
-      <MessageVoteButtons
-        selected={selected}
-        onVoteUp={() => setSelected(selected === 'up' ? null : 'up')}
-        onVoteDown={() => setSelected(selected === 'down' ? null : 'down')}
-      />
-    </div>
-  )
-}
-Interactive.parameters = skipInChromatic
-
-export const AllVariants: StoryFn = () => (
-  <div className="p-12 flex flex-col gap-6">
-    <div className="flex items-center gap-4">
-      <span className="text-sm w-32">Unselected:</span>
-      <MessageVoteButtons
-        selected={null}
-        onVoteUp={() => {}}
-        onVoteDown={() => {}}
-      />
-    </div>
-    <div className="flex items-center gap-4">
-      <span className="text-sm w-32">Good response:</span>
-      <MessageVoteButtons
-        selected="up"
-        onVoteUp={() => {}}
-        onVoteDown={() => {}}
-      />
-    </div>
-    <div className="flex items-center gap-4">
-      <span className="text-sm w-32">Bad response:</span>
-      <MessageVoteButtons
-        selected="down"
-        onVoteUp={() => {}}
-        onVoteDown={() => {}}
-      />
-    </div>
-  </div>
-)

package/src/components/CustomMessage/MessageVoteButtons.tsx

@@ -1,47 +0,0 @@
-import { ThumbsUpIcon, ThumbsDownIcon } from '@phosphor-icons/react'
-import classNames from 'classnames'
-import React from 'react'
-
-import type { VoteSelection } from '../../hooks/useMessageVote'
-
-interface MessageVoteButtonsProps {
-  selected: VoteSelection
-  onVoteUp: () => void
-  onVoteDown: () => void
-}
-
-export const MessageVoteButtons: React.FC<MessageVoteButtonsProps> = ({
-  selected,
-  onVoteUp,
-  onVoteDown,
-}) => (
-  <div className="message-vote-buttons">
-    <button
-      type="button"
-      className={classNames('message-vote-button focus-ring', {
-        'message-vote-button--selected': selected === 'up',
-      })}
-      onClick={onVoteUp}
-      aria-label="Good response"
-      aria-pressed={selected === 'up'}
-      data-tooltip="Good response"
-    >
-      <ThumbsUpIcon size={16} weight={selected === 'up' ? 'fill' : 'regular'} />
-    </button>
-    <button
-      type="button"
-      className={classNames('message-vote-button focus-ring', {
-        'message-vote-button--selected': selected === 'down',
-      })}
-      onClick={onVoteDown}
-      aria-label="Bad response"
-      aria-pressed={selected === 'down'}
-      data-tooltip="Bad response"
-    >
-      <ThumbsDownIcon
-        size={16}
-        weight={selected === 'down' ? 'fill' : 'regular'}
-      />
-    </button>
-  </div>
-)

package/src/hooks/useMessageVote.ts

@@ -1,77 +0,0 @@
-import { useCallback, useMemo } from 'react'
-import type { LocalMessage } from 'stream-chat'
-import { useChannelStateContext, useChatContext } from 'stream-chat-react'
-
-export type VoteSelection = 'up' | 'down' | null
-
-const VOTE_UP = 'vote_up'
-const VOTE_DOWN = 'vote_down'
-
-function getVoteFromReactions(
-  ownReactions: LocalMessage['own_reactions']
-): VoteSelection {
-  if (!ownReactions?.length) return null
-  if (ownReactions.some((r) => r.type === VOTE_DOWN)) return 'down'
-  if (ownReactions.some((r) => r.type === VOTE_UP)) return 'up'
-  return null
-}
-
-interface UseMessageVoteResult {
-  selected: VoteSelection
-  voteUp: () => void
-  voteDown: () => void
-}
-
-/**
- * Hook that wraps Stream Chat reactions to provide toggle-style
- * upvote/downvote behavior on a message.
- *
- * Uses enforce_unique so sending a new reaction type automatically
- * removes the previous one. Uses skip_push to avoid notifying the
- * Linker on every vote.
- */
-export function useMessageVote(message: LocalMessage): UseMessageVoteResult {
-  const { channel } = useChannelStateContext()
-  const { client } = useChatContext('useMessageVote')
-
-  const selected = useMemo(
-    () => getVoteFromReactions(message.own_reactions),
-    [message.own_reactions]
-  )
-
-  const voteUp = useCallback(async () => {
-    if (!client?.userID) return
-    try {
-      if (selected === 'up') {
-        await channel.deleteReaction(message.id, VOTE_UP)
-      } else {
-        await channel.sendReaction(
-          message.id,
-          { type: VOTE_UP },
-          { enforce_unique: true, skip_push: true }
-        )
-      }
-    } catch {
-      // Silently fail — voting is non-critical
-    }
-  }, [channel, client?.userID, message.id, selected])
-
-  const voteDown = useCallback(async () => {
-    if (!client?.userID) return
-    try {
-      if (selected === 'down') {
-        await channel.deleteReaction(message.id, VOTE_DOWN)
-      } else {
-        await channel.sendReaction(
-          message.id,
-          { type: VOTE_DOWN },
-          { enforce_unique: true, skip_push: true }
-        )
-      }
-    } catch {
-      // Silently fail — voting is non-critical
-    }
-  }, [channel, client?.userID, message.id, selected])
-
-  return { selected, voteUp, voteDown }
-}