feat: users can delete their messages

Author: coderbyheart

src/Chat/SlashCommands.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client'
-import { Message as MessageItemMessage } from './components/MessageItem'
+import { Message } from 'twilio-chat/lib/message'
 import { Status } from './components/StatusItem'
 import { v4 } from 'uuid'
 import {
@@ -20,11 +20,9 @@ type UpdateMessages = React.Dispatch<
 	React.SetStateAction<{
 		messages: (
 			| {
-					sid: string
-					message: MessageItemMessage
+					message: Message
 			  }
 			| {
-					sid: string
 					status: Status
 			  }
 		)[]

src/Chat/Twilio/ChannelView.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react'
 import { useState, useEffect, useLayoutEffect } from 'react'
-import {
-	MessageItem,
-	Message as MessageItemMessage,
-	stringToColor,
-} from '../components/MessageItem'
+import { MessageItem, stringToColor } from '../components/MessageItem'
 import { StatusItem, Status } from '../components/StatusItem'
 import { Channel } from 'twilio-chat/lib/channel'
 import { Client, User } from 'twilio-chat'
@@ -67,15 +63,11 @@ export const ChannelView = ({
 	}
 	const [message, setMessage] = useState<string>('')
 	const [messages, updateMessages] = useState<{
-		messages: (
-			| { sid: string; message: MessageItemMessage }
-			| { sid: string; status: Status }
-		)[]
+		messages: ({ message: Message } | { status: Status })[]
 		lastIndex?: number
 	}>({
 		messages: [
 			{
-				sid: v4(),
 				status: {
 					message: `Hint: type /help to list available commands.`,
 					timestamp: new Date(),
@@ -133,16 +125,6 @@ export const ChannelView = ({
 		setMessage('')
 	}
 
-	const toMessage = (message: Message) => ({
-		sid: message.sid,
-		message: {
-			timestamp: message.timestamp,
-			from: message.author,
-			message: message.body,
-			fromUser: message.author === identity,
-		},
-	})
-
 	const userChangedNickHandler = ({
 		updateReasons,
 		user,
@@ -176,7 +158,7 @@ export const ChannelView = ({
 	const newMessageHandler = (message: Message) => {
 		updateMessages(prevMessages => ({
 			...prevMessages,
-			messages: [...prevMessages.messages, toMessage(message)],
+			messages: [...prevMessages.messages, { message }],
 			lastIndex: prevMessages.lastIndex
 				? prevMessages.lastIndex
 				: message.index,
@@ -202,6 +184,15 @@ export const ChannelView = ({
 		}
 	}
 
+	const messageRemovedHandler = (message: Message) => {
+		updateMessages(prevMessages => ({
+			...prevMessages,
+			messages: prevMessages.messages.filter(
+				m => 'status' in m || m.message.sid !== message.sid,
+			),
+		}))
+	}
+
 	const memberJoinedHandler = (member: Member) => {
 		updateMessages(prevMessages => ({
 			...prevMessages,
@@ -237,13 +228,18 @@ export const ChannelView = ({
 	useEffect(() => {
 		if (channelConnection) {
 			channelConnection.channel.on('messageAdded', newMessageHandler)
+			channelConnection.channel.on('messageRemoved', messageRemovedHandler)
 			channelConnection.channel.on('memberJoined', memberJoinedHandler)
 			channelConnection.channel.on('memberLeft', memberLeftHandler)
 			return () => {
 				channelConnection.channel.removeListener(
 					'messageAdded',
 					newMessageHandler,
 				)
+				channelConnection.channel.removeListener(
+					'messageRemoved',
+					messageRemovedHandler,
+				)
 				channelConnection.channel.removeListener(
 					'memberJoined',
 					memberJoinedHandler,
@@ -295,7 +291,7 @@ export const ChannelView = ({
 				updateMessages(prevMessages => ({
 					...prevMessages,
 					messages: [
-						...messages.items.map(toMessage),
+						...messages.items.map(message => ({ message })),
 						...prevMessages.messages,
 					],
 					lastIndex: messages.items[0]?.index ?? undefined,
@@ -432,17 +428,19 @@ export const ChannelView = ({
 									}}
 								/>
 							)}
-							{messages.messages.map(m =>
+							{messages.messages.map((m, i) =>
 								'status' in m ? (
-									<StatusItem key={m.sid} status={m.status} />
+									<StatusItem key={i} status={m.status} />
 								) : (
 									<MessageItem
-										key={m.sid}
+										key={m.message.sid}
 										message={{
-											...m.message,
-											from: m.message.from,
+											timestamp: m.message.timestamp,
+											from: m.message.author,
+											message: m.message.body,
+											fromUser: m.message.author === identity,
 										}}
-										nick={authorNicks[m.message.from]}
+										nick={authorNicks[m.message.author]}
 										onRendered={() => {
 											// Scroll to the last item in the list
 											// if not at beginning
@@ -457,6 +455,17 @@ export const ChannelView = ({
 												}
 											}, 250)
 										}}
+										onDelete={() => {
+											if (confirm('Really delete this message?')) {
+												console.log(`Deleting message ${m.message.sid}`)
+												m.message
+													.remove()
+													.then(() => {
+														console.log('Removed')
+													})
+													.catch(console.error)
+											}
+										}}
 									/>
 								),
 							)}

src/Chat/Twilio/TwilioChat.tsx

@@ -25,7 +25,7 @@ export const TwilioChat = ({
 	const [error, setError] = useState<{ type: string; message: string }>()
 	const [selectedChannel, setSelectedChannel] = useState<string>(context)
 	const [channelConnection, setConnectedChannel] = useState<
-		{ channel: Channel; client: Client } | undefined
+		{ channel: Channel; client: Client; token: string } | undefined
 	>()
 	const [joinedChannels, setJoinedChannels] = useState<string[]>([
 		...new Set(['general', 'random', context]),

src/Chat/Twilio/api.ts

@@ -102,9 +102,13 @@ export const authenticateClient = ({
 	apollo: ApolloClient<NormalizedCacheObject>
 }) =>
 	pipe(
-		TE.right({ apollo, deviceId, token }),
-		chain(createChatToken),
-		chain(createClient),
+		createChatToken({ apollo, deviceId, token }),
+		chain(token =>
+			pipe(
+				createClient(token),
+				TE.map(client => ({ client, token })),
+			),
+		),
 	)
 
 export const connectToChannel = async ({
@@ -117,16 +121,18 @@ export const connectToChannel = async ({
 	deviceId: string
 	token: string
 	apollo: ApolloClient<NormalizedCacheObject>
-}): Promise<Either<ErrorInfo, { client: Client; channel: Channel }>> =>
+}): Promise<Either<
+	ErrorInfo,
+	{ client: Client; channel: Channel; token: string }
+>> =>
 	pipe(
-		TE.right({ apollo, deviceId, token }),
-		chain(authenticateClient),
-		chain(client =>
+		authenticateClient({ apollo, deviceId, token }),
+		chain(({ client, token }) =>
 			pipe(
 				fetchSubscribedChannels(client),
 				TE.map(maybeAlreadyJoinedChannel(context)),
 				getOrElse(joinChannel({ client, channel: context })),
-				TE.map(channel => ({ client, channel })),
+				TE.map(channel => ({ client, channel, token })),
 			),
 		),
 	)()

src/Chat/components/ChannelView.ts

@@ -53,9 +53,7 @@ export const UIButton = styled.button`
 	background-color: transparent;
 	height: 30px;
 	width: 30px;
-	${Header} & {
-		color: inherit;
-	}
+	color: inherit;
 	cursor: pointer;
 `
 

src/Chat/components/MessageItem.tsx

@@ -3,6 +3,9 @@ import { useLayoutEffect } from 'react'
 import styled from 'styled-components'
 import { Timestamp } from './Timestamp'
 import { emojify } from './Emojify'
+import { UIButton } from './ChannelView'
+
+import DeleteIcon from 'feather-icons/dist/icons/trash-2.svg'
 
 const MessageView = styled.div`
 	border-radius: 10px;
@@ -128,10 +131,12 @@ export const MessageItem = ({
 	message: { from, message, timestamp, fromUser },
 	nick,
 	onRendered,
+	onDelete,
 }: {
 	message: Message
 	nick?: string
 	onRendered: () => void
+	onDelete: () => void
 }) => {
 	const V = fromUser ? UserMessageView : MessageView
 
@@ -145,6 +150,11 @@ export const MessageItem = ({
 			<Text>{emojify(message)}</Text>
 			<Meta>
 				<Timestamp from={timestamp} />
+				{fromUser && (
+					<UIButton onClick={onDelete}>
+						<DeleteIcon />
+					</UIButton>
+				)}
 			</Meta>
 		</V>
 	)

src/types.d.ts

@@ -1,4 +1,4 @@
 declare module '*.svg' {
-	const content: string
+	const content: React.StatelessComponent<React.SVGAttributes<SVGElement>>
 	export default content
 }