From d0f4104b534a2d0c280d5ef2f26f2185e868bbf1 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Fri, 10 Jun 2022 16:11:32 +0200 Subject: [PATCH] connect UI to protocol --- .../ActivityCenter/ActivityButton.tsx | 1 + .../ActivityCenter/ActivityCenter.tsx | 1 + .../ActivityCenter/ActivityMessage.tsx | 1 + .../src/components/chat-menu/index.tsx | 146 +++++++++--------- .../components/channels/channel-item.tsx | 2 +- .../components/channels/index.tsx | 27 +--- .../community-info/community-dialog.tsx | 11 +- .../components/community-info/index.tsx | 11 +- .../components/get-started/index.tsx | 22 +-- .../throwaway-profile-found-dialog.tsx | 12 +- .../components/messages/chat-item.tsx | 5 +- .../components/messages/index.tsx | 1 + .../components/sidebar-item/index.tsx | 6 +- .../src/components/main-sidebar/index.tsx | 12 +- .../member-sidebar/disconnect-dialog.tsx | 23 ++- .../src/components/member-sidebar/index.tsx | 11 +- .../components/member-sidebar/member-item.tsx | 5 +- .../components/member-sidebar/user-item.tsx | 24 ++- .../src/components/reaction-popover/index.tsx | 12 +- .../components/user-profile-dialog/index.tsx | 2 +- .../src/components/welcome-dialog/index.tsx | 33 ++-- .../chat/components/chat-info/index.tsx | 21 ++- .../chat/components/chat-input/index.tsx | 11 +- .../components/chat-input/input-reply.tsx | 23 +-- .../chat/components/chat-message/actions.tsx | 18 ++- .../chat/components/chat-message/index.tsx | 111 +++++++------ .../routes/chat/components/navbar/index.tsx | 6 +- .../status-react/src/routes/chat/index.tsx | 67 +++++--- 28 files changed, 319 insertions(+), 306 deletions(-) diff --git a/packages/status-react/src/components/ActivityCenter/ActivityButton.tsx b/packages/status-react/src/components/ActivityCenter/ActivityButton.tsx index 19c0e0af..2bda3408 100644 --- a/packages/status-react/src/components/ActivityCenter/ActivityButton.tsx +++ b/packages/status-react/src/components/ActivityCenter/ActivityButton.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { useMemo, useRef, useState } from 'react' import styled from 'styled-components' diff --git a/packages/status-react/src/components/ActivityCenter/ActivityCenter.tsx b/packages/status-react/src/components/ActivityCenter/ActivityCenter.tsx index def32ccb..c0578c4b 100644 --- a/packages/status-react/src/components/ActivityCenter/ActivityCenter.tsx +++ b/packages/status-react/src/components/ActivityCenter/ActivityCenter.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { useMemo, useState } from 'react' import styled from 'styled-components' diff --git a/packages/status-react/src/components/ActivityCenter/ActivityMessage.tsx b/packages/status-react/src/components/ActivityCenter/ActivityMessage.tsx index a9cca6d6..d99f2281 100644 --- a/packages/status-react/src/components/ActivityCenter/ActivityMessage.tsx +++ b/packages/status-react/src/components/ActivityCenter/ActivityMessage.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { useEffect, useMemo, useRef, useState } from 'react' import styled from 'styled-components' diff --git a/packages/status-react/src/components/chat-menu/index.tsx b/packages/status-react/src/components/chat-menu/index.tsx index b591592f..9b553171 100644 --- a/packages/status-react/src/components/chat-menu/index.tsx +++ b/packages/status-react/src/components/chat-menu/index.tsx @@ -2,42 +2,42 @@ import React from 'react' import { BellIcon } from '~/src/icons/bell-icon' import { ContextMenu, DropdownMenu } from '~/src/system' -import { useAlertDialog } from '~/src/system/dialog/alert-dialog' -import { useDialog } from '~/src/system/dialog/dialog' +// import { useAlertDialog } from '~/src/system/dialog/alert-dialog' +// import { useDialog } from '~/src/system/dialog/dialog' -import { UserProfileDialog } from '../user-profile-dialog' -import { EditGroupChatDialog } from './edit-group-chat-dialog' +// import { UserProfileDialog } from '../user-profile-dialog' +// import { EditGroupChatDialog } from './edit-group-chat-dialog' interface Props { type: 'dropdown' | 'context' - chatType: 'channel' | 'chat' | 'group-chat' + // chatType: 'channel' | 'chat' | 'group-chat' } export const ChatMenu = (props: Props) => { - const { type, chatType } = props + const { type } = props const Menu = type === 'dropdown' ? DropdownMenu : ContextMenu - const userProfileDialog = useDialog(UserProfileDialog) - const editGroupChatDialog = useDialog(EditGroupChatDialog) + // const userProfileDialog = useDialog(UserProfileDialog) + // const editGroupChatDialog = useDialog(EditGroupChatDialog) - const deleteChatDialog = useAlertDialog({ - title: 'Delete Chat', - description: 'Are you sure you want to delete this chat?', - actionLabel: 'Delete', - actionVariant: 'danger', - cancelLabel: 'Keep', - }) - const leaveGroupDialog = useAlertDialog({ - title: 'Leave Group', - description: 'Are you sure you want to leave this group chat?', - actionLabel: 'Leave', - actionVariant: 'danger', - cancelLabel: 'Stay', - }) + // const deleteChatDialog = useAlertDialog({ + // title: 'Delete Chat', + // description: 'Are you sure you want to delete this chat?', + // actionLabel: 'Delete', + // actionVariant: 'danger', + // cancelLabel: 'Keep', + // }) + // const leaveGroupDialog = useAlertDialog({ + // title: 'Leave Group', + // description: 'Are you sure you want to leave this group chat?', + // actionLabel: 'Leave', + // actionVariant: 'danger', + // cancelLabel: 'Stay', + // }) - const commonMenuItems = ( - <> + return ( + }> For 15 min For 1 hour @@ -52,55 +52,55 @@ export const ChatMenu = (props: Props) => { Last 3 days Last 7 days - - ) - - if (chatType === 'channel') { - return {commonMenuItems} - } - - if (chatType === 'group-chat') { - return ( - - }>Add / remove from group - } - onSelect={() => editGroupChatDialog.open({})} - > - Edit name and image - - - {commonMenuItems} - - } - danger - onSelect={() => leaveGroupDialog.open()} - > - Leave Chat - - - ) - } - - return ( - - } - onSelect={() => userProfileDialog.open({ name: 'Satoshi' })} - > - View Profile - - - {commonMenuItems} - - } - danger - onSelect={() => deleteChatDialog.open()} - > - Delete Chat - ) + + // if (chatType === 'channel') { + // return {commonMenuItems} + // } + + // if (chatType === 'group-chat') { + // return ( + // + // }>Add / remove from group + // } + // onSelect={() => editGroupChatDialog.open({})} + // > + // Edit name and image + // + // + // {commonMenuItems} + // + // } + // danger + // onSelect={() => leaveGroupDialog.open()} + // > + // Leave Chat + // + // + // ) + // } + + // return ( + // + // } + // onSelect={() => userProfileDialog.open({ name: 'Satoshi' })} + // > + // View Profile + // + // + // {commonMenuItems} + // + // } + // danger + // onSelect={() => deleteChatDialog.open()} + // > + // Delete Chat + // + // + // ) } diff --git a/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx b/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx index 4fd2887e..4b865573 100644 --- a/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx +++ b/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx @@ -17,7 +17,7 @@ export const ChannelItem = (props: Props) => { return ( #{children} - + ) } diff --git a/packages/status-react/src/components/main-sidebar/components/channels/index.tsx b/packages/status-react/src/components/main-sidebar/components/channels/index.tsx index 21438e1c..86a4140f 100644 --- a/packages/status-react/src/components/main-sidebar/components/channels/index.tsx +++ b/packages/status-react/src/components/main-sidebar/components/channels/index.tsx @@ -1,43 +1,28 @@ import React from 'react' -import { Box } from '~/src/system' import { useChats } from '~/src/protocol' +import { Box } from '~/src/system' -import { ChannelGroup } from './channel-group' +// import { ChannelGroup } from './channel-group' import { ChannelItem } from './channel-item' - export const Channels = () => { - const chats = useChats() return ( - - {chats.map((chat) => ( + + {chats.map(chat => ( {chat.identity!.displayName} ))} - - {/* {Object.entries(community.chats).map(([group, channels]) => ( - - {channels.map(channel => ( - - {channel} - - ))} - - ))} */} ) } diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx index e22cafd5..a3d22e2d 100644 --- a/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx +++ b/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx @@ -1,12 +1,11 @@ import React from 'react' -import { useCommunity } from '~/src/protocol' +import { useProtocol } from '~/src/protocol' import { Button, CopyInput, Dialog, Flex, Grid, Text } from '~/src/system' export const CommunityDialog = () => { - const { identity, publicKey='0xTODO' } = useCommunity() - const { displayName, description} = identity - + const { community } = useProtocol() + const { displayName, description } = community.identity! return ( @@ -16,7 +15,7 @@ export const CommunityDialog = () => { - + To access this community, paste community public key in Status desktop or mobile app. @@ -54,7 +53,7 @@ export const CommunityDialog = () => { fill="currentColor" /> - + diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx index 9e3aa707..d0a43abb 100644 --- a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx +++ b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx @@ -1,22 +1,23 @@ import React from 'react' -import { useCommunity, useMembers } from '~/src/protocol' +import { useMembers, useProtocol } from '~/src/protocol' import { styled } from '~/src/styles/config' import { Avatar, DialogTrigger, Text } from '~/src/system' import { CommunityDialog } from './community-dialog' export const CommunityInfo = () => { - const community = useCommunity() + const { community } = useProtocol() const members = useMembers() - console.log("file: index.tsx > line 11 > CommunityInfo > community", community) + + const { displayName, color } = community.identity! return ( */} - {/* + {/* */} - - {/* + + {/* {account ? ( @@ -164,7 +164,7 @@ export const GetStarted = () => { )} */} - + ) } diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx index 501f3b47..21747057 100644 --- a/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx +++ b/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx @@ -10,22 +10,22 @@ interface Props { export const ThrowawayProfileFoundDialog = (props: Props) => { const { onSkip } = props - const [account] = useAccount() + const { account } = useAccount() const handleLoadThrowawayProfile = () => { // TODO: load throwaway profile } -if (!account) { - return null -} + if (!account) { + return null + } return ( - - {account.name} + + {account.username} Chatkey: 0x63FaC9201494f0bd17B9892B9fae4d52fe3BD377 diff --git a/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx b/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx index 45525063..a3ce065a 100644 --- a/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx +++ b/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx @@ -1,7 +1,6 @@ import React from 'react' import { ChatMenu } from '~/src/components/chat-menu' -import { useChannel } from '~/src/protocol' import { ContextMenuTrigger } from '~/src/system' import { SidebarItem } from '../sidebar-item' @@ -15,12 +14,10 @@ interface Props extends SidebarItemProps { export const ChatItem = (props: Props) => { const { children, ...sidebarItemProps } = props - const chat = useChannel(children) - return ( {children} - + ) } diff --git a/packages/status-react/src/components/main-sidebar/components/messages/index.tsx b/packages/status-react/src/components/main-sidebar/components/messages/index.tsx index a1d0e92d..2915483a 100644 --- a/packages/status-react/src/components/main-sidebar/components/messages/index.tsx +++ b/packages/status-react/src/components/main-sidebar/components/messages/index.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React from 'react' import { EditIcon } from '~/src/icons/edit-icon' diff --git a/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx b/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx index 40f38df5..955ee38a 100644 --- a/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx +++ b/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx @@ -12,10 +12,12 @@ interface Props { muted: boolean unread: boolean children: React.ReactNode + name?: string + color?: string } const SidebarItem = (props: Props, ref: Ref) => { - const { muted, unread, children, ...buttonProps } = props + const { muted, unread, children, name, color, ...buttonProps } = props return ( ) => { state={muted ? 'muted' : unread ? 'unread' : undefined} {...buttonProps} > - + {children} ) diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx index 21865b3e..e91cba8f 100644 --- a/packages/status-react/src/components/main-sidebar/index.tsx +++ b/packages/status-react/src/components/main-sidebar/index.tsx @@ -1,35 +1,33 @@ import React from 'react' import { useAppState } from '~/src/contexts/app-context' +import { useAccount } from '~/src/protocol' import { styled } from '~/src/styles/config' import { Separator } from '~/src/system' import { Channels } from './components/channels' import { CommunityInfo } from './components/community-info' import { GetStarted } from './components/get-started' -import { useAccount } from '~/src/protocol' // import { Messages } from './components/messages' - export const MainSidebar = () => { const { options } = useAppState() + const { account } = useAccount() if (options.enableSidebar === false) { return null } - const [account] = useAccount() - return ( {/* */} - { !account && ( + {!account && ( <> - - + + )} diff --git a/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx b/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx index 3769e1a2..c29ac6b4 100644 --- a/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx +++ b/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx @@ -3,25 +3,32 @@ import React from 'react' import { useAccount } from '~/src/protocol' import { Avatar, Dialog, EmojiHash, Flex, Heading, Text } from '~/src/system' -export const DisconnectDialog = () => { - const [account] = useAccount() +import type { Account } from '~/src/protocol' + +interface Props { + account: Account +} + +export const DisconnectDialog = (props: Props) => { + const { deleteAccount } = useAccount() + const { account } = props return ( Do you want to disconnect your profile from this browser? - - {account.name} - - Chatkey: {account.chatKey} - + + {account.username} + Chatkey: {account.chatKey} Stay Connected - Disconnect + + Disconnect + ) diff --git a/packages/status-react/src/components/member-sidebar/index.tsx b/packages/status-react/src/components/member-sidebar/index.tsx index acaf0edb..209139e6 100644 --- a/packages/status-react/src/components/member-sidebar/index.tsx +++ b/packages/status-react/src/components/member-sidebar/index.tsx @@ -1,15 +1,16 @@ import React from 'react' +import { useAccount, useMembers } from '~/src/protocol' import { styled } from '~/src/styles/config' import { Grid, Heading } from '~/src/system' import { MemberGroup } from './member-group' import { MemberItem } from './member-item' import { UserItem } from './user-item' -import { useMembers } from '~/src/protocol' export function MemberSidebar() { const members = useMembers() + const { account } = useAccount() return ( @@ -17,9 +18,11 @@ export function MemberSidebar() { Members - - - + {account && ( + + + + )} {members.map(member => ( { return ( - +
diff --git a/packages/status-react/src/components/member-sidebar/user-item.tsx b/packages/status-react/src/components/member-sidebar/user-item.tsx index 624269b3..6d9b7b45 100644 --- a/packages/status-react/src/components/member-sidebar/user-item.tsx +++ b/packages/status-react/src/components/member-sidebar/user-item.tsx @@ -1,27 +1,27 @@ import React from 'react' -import { useAccount } from '~/src/protocol' import { styled } from '~/src/styles/config' import { Avatar, DialogTrigger, EthAddress, Flex, Text } from '~/src/system' import { DisconnectDialog } from './disconnect-dialog' -export const UserItem = () => { - const [account] = useAccount() - console.log("file: user-item.tsx > line 11 > UserItem > account", account) +import type { Account } from '~/src/protocol' - if (!account) { - return null - } +interface Props { + account: Account +} + +export const UserItem = (props: Props) => { + const { account } = props return ( - +
- {account.name} + {account.username} @@ -30,7 +30,6 @@ export const UserItem = () => {
- { /> - {account && ( - - - )} + ) diff --git a/packages/status-react/src/components/reaction-popover/index.tsx b/packages/status-react/src/components/reaction-popover/index.tsx index 1dd3e768..c7c71da3 100644 --- a/packages/status-react/src/components/reaction-popover/index.tsx +++ b/packages/status-react/src/components/reaction-popover/index.tsx @@ -14,27 +14,27 @@ interface Props { } export const emojis: Record = { - heart: { + LOVE: { symbol: '❤️', url: 'https://twemoji.maxcdn.com/v/latest/svg/2764.svg', }, - 'thumbs-up': { + THUMBS_UP: { symbol: '👍️', url: 'https://twemoji.maxcdn.com/v/latest/svg/1f44d.svg', }, - 'thumbs-down': { + THUMBS_DOWN: { symbol: '👎️', url: 'https://twemoji.maxcdn.com/v/latest/svg/1f44e.svg', }, - smile: { + LAUGH: { symbol: '😆', url: 'https://twemoji.maxcdn.com/v/latest/svg/1f606.svg', }, - sad: { + SAD: { symbol: '😭', url: 'https://twemoji.maxcdn.com/v/latest/svg/1f62d.svg', }, - angry: { + ANGRY: { symbol: '😡', url: 'https://twemoji.maxcdn.com/v/latest/svg/1f621.svg', }, diff --git a/packages/status-react/src/components/user-profile-dialog/index.tsx b/packages/status-react/src/components/user-profile-dialog/index.tsx index f6630b87..466e806e 100644 --- a/packages/status-react/src/components/user-profile-dialog/index.tsx +++ b/packages/status-react/src/components/user-profile-dialog/index.tsx @@ -15,7 +15,7 @@ export const UserProfileDialog = (props: Props) => { {name} - Chatkey:0x63FaC9201494f0bd17B9892B9fae4d52fe3BD377 + Chatkey: 0x63FaC9201494f0bd17B9892B9fae4d52fe3BD377 diff --git a/packages/status-react/src/components/welcome-dialog/index.tsx b/packages/status-react/src/components/welcome-dialog/index.tsx index 6a2c959a..4a1a0a85 100644 --- a/packages/status-react/src/components/welcome-dialog/index.tsx +++ b/packages/status-react/src/components/welcome-dialog/index.tsx @@ -1,35 +1,25 @@ import React, { useState } from 'react' -import { useCommunity } from '~/src/protocol/use-community' +import { useProtocol } from '~/src/protocol' import { Avatar, Checkbox, Dialog, Flex, Text } from '~/src/system' export const WelcomeDialog = () => { - const { name, imageUrl, requestNeeded } = useCommunity() + const { community } = useProtocol() + const { identity } = community const [agreed, setAgreed] = useState(false) return ( - + - + - - CryptoKitties sed ut perspiciatis unde omnis iste natus error sit - voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque - ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae - dicta sunt explicabo. -
-
- Ut enim ad minim veniam Excepteur sint occaecat cupidatat non proident - Duis aute irure Dolore eu fugiat nulla pariatur 🚗 consectetur - adipiscing elit. -
-
- Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit - aut fugit, sed quia consequuntur magni dolores eos qui ratione - voluptatem sequi nesciunt. - + {identity?.description} I agree with the above @@ -38,7 +28,8 @@ export const WelcomeDialog = () => { - {requestNeeded ? 'Request to Join' : `Join ${name}`} + Request to Join + {/* {requestNeeded ? 'Request to Join' : `Join ${name}`} */} diff --git a/packages/status-react/src/routes/chat/components/chat-info/index.tsx b/packages/status-react/src/routes/chat/components/chat-info/index.tsx index 834a0090..ba73bb7e 100644 --- a/packages/status-react/src/routes/chat/components/chat-info/index.tsx +++ b/packages/status-react/src/routes/chat/components/chat-info/index.tsx @@ -1,27 +1,26 @@ import React from 'react' -import { useMatch } from 'react-router-dom' +// import { PinIcon } from '~/src/icons/pin-icon' +import { Avatar, Flex, Text } from '~/src/system' -import { PinIcon } from '~/src/icons/pin-icon' -import { Avatar, DialogTrigger, Flex, Text } from '~/src/system' - -import { PinnedMessagesDialog } from './pinned-messages-dialog' - -import type { Channel } from '~/src/protocol' +// import { PinnedMessagesDialog } from './pinned-messages-dialog' +import type { Chat } from '~/src/protocol' interface Props { - chat: Channel + chat: Chat } export const ChatInfo = (props: Props) => { const { chat } = props - console.log("file: index.tsx > line 18 > ChatInfo > chat", chat) - // if (chat.type == 'channel') { return ( - +
#{chat.identity?.displayName} diff --git a/packages/status-react/src/routes/chat/components/chat-input/index.tsx b/packages/status-react/src/routes/chat/components/chat-input/index.tsx index f7c47b14..fbb54069 100644 --- a/packages/status-react/src/routes/chat/components/chat-input/index.tsx +++ b/packages/status-react/src/routes/chat/components/chat-input/index.tsx @@ -14,10 +14,11 @@ interface Props { mode?: 'normal' | 'editing' value?: string editing?: boolean + onSubmit: (value: string) => void } export const ChatInput = (props: Props) => { - const { value, editing } = props + const { value, editing, onSubmit } = props const [inputValue, setInputValue] = useState(value ?? '') const { state } = useChatContext() @@ -32,6 +33,13 @@ export const ChatInput = (props: Props) => { setInputValue(event.target.value) } + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' && event.shiftKey === false) { + onSubmit(inputValue) + setInputValue('') + } + } + return ( @@ -47,6 +55,7 @@ export const ChatInput = (props: Props) => { placeholder="Message" value={inputValue} onChange={handleChange} + onKeyDown={handleKeyDown} /> diff --git a/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx b/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx index 7463bdbf..a3c3ebef 100644 --- a/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx +++ b/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx @@ -25,7 +25,7 @@ export const InputReply = (props: Props) => { - {message.contact.name} + TODO: Add name @@ -36,14 +36,14 @@ export const InputReply = (props: Props) => { - {message.type === 'text' && ( + {message.contentType === 'TEXT_PLAIN' && ( {message.text} )} - {message.type === 'image' && ( + {message.contentType === 'IMAGE' && ( { alt="message" /> )} - {message.type === 'image-text' && ( - - - - {message.text} - - - message - - )} ) } diff --git a/packages/status-react/src/routes/chat/components/chat-message/actions.tsx b/packages/status-react/src/routes/chat/components/chat-message/actions.tsx index 269dd54f..110b1309 100644 --- a/packages/status-react/src/routes/chat/components/chat-message/actions.tsx +++ b/packages/status-react/src/routes/chat/components/chat-message/actions.tsx @@ -2,11 +2,11 @@ import React from 'react' import { ReactionPopover } from '~/src/components/reaction-popover' import { PencilIcon } from '~/src/icons/pencil-icon' -import { PinIcon } from '~/src/icons/pin-icon' +// import { PinIcon } from '~/src/icons/pin-icon' import { ReactionIcon } from '~/src/icons/reaction-icon' import { ReplyIcon } from '~/src/icons/reply-icon' import { TrashIcon } from '~/src/icons/trash-icon' -import { UnpinIcon } from '~/src/icons/unpin-icon' +// import { UnpinIcon } from '~/src/icons/unpin-icon' import { styled } from '~/src/styles/config' import { AlertDialog, @@ -15,7 +15,7 @@ import { Tooltip, } from '~/src/system' -import type { Reactions } from '~/src/protocol/use-messages' +import type { Reaction, Reactions } from '~/src/protocol/use-messages' interface Props { owner: boolean @@ -23,6 +23,7 @@ interface Props { onReplyClick: () => void onEditClick: () => void onPinClick: () => void + onReactionClick: (reaction: Reaction) => void reacting: boolean onReactingChange: (reacting: boolean) => void reactions: Reactions @@ -31,10 +32,11 @@ interface Props { export const Actions = (props: Props) => { const { owner, - pinned, + // pinned, onReplyClick, onEditClick, - onPinClick, + // onPinClick, + onReactionClick, reacting, onReactingChange, reactions, @@ -47,7 +49,7 @@ export const Actions = (props: Props) => { open={reacting} onOpenChange={onReactingChange} onClick={emoji => { - console.log(emoji) + onReactionClick(emoji) onReactingChange(false) }} > @@ -79,7 +81,7 @@ export const Actions = (props: Props) => { )} - + {/* { > {pinned ? : } - + */} {owner && ( diff --git a/packages/status-react/src/routes/chat/components/chat-message/index.tsx b/packages/status-react/src/routes/chat/components/chat-message/index.tsx index b4bd5bfc..97d79703 100644 --- a/packages/status-react/src/routes/chat/components/chat-message/index.tsx +++ b/packages/status-react/src/routes/chat/components/chat-message/index.tsx @@ -1,9 +1,12 @@ import React, { useState } from 'react' +import snarkdown from 'snarkdown' + import { UserProfileDialog } from '~/src/components/user-profile-dialog' import { useChatContext } from '~/src/contexts/chat-context' import { BellIcon } from '~/src/icons/bell-icon' import { PinIcon } from '~/src/icons/pin-icon' +import { useProtocol } from '~/src/protocol/provider' import { styled } from '~/src/styles/config' import { Avatar, @@ -25,10 +28,11 @@ import { Actions } from './actions' import { MessageReply } from './message-reply' import { MessageReactions } from './reactions' -import type { MessageType } from '~/src/protocol/use-messages' +import type { Message, Reaction } from '~/src/protocol/use-messages' interface Props { - message: MessageType + message: Message + previousMessage?: Message } // const MessageLink = forwardRef(function MessageLink( @@ -53,15 +57,17 @@ interface Props { // }) export const ChatMessage = (props: Props) => { - const { message } = props - console.log("🚀 > message", message) + const { client } = useProtocol() - // const { type, contact, owner, mention, pinned, reply, reactions } = message - const owner=false - const mention=false + const { message } = props + + const owner = false + const mention = false const pinned = false const reply = false - const { contentType, text, displayName, reactions } = message + + const { messageId, chatId, contentType, clock, displayName, reactions } = + message const [editing, setEditing] = useState(false) const [reacting, setReacting] = useState(false) @@ -70,26 +76,34 @@ export const ChatMessage = (props: Props) => { const userProfileDialog = useDialog(UserProfileDialog) - const handleReplyClick = () => { - dispatch({ - type: 'SET_REPLY', + const handleMessageSubmit = (message: string) => { + client.community.sendTextMessage( + chatId, message, - }) + '0x0fa999097568d1fdcc39108a08d75340bd2cee5ec59c36799007150d0a9fc896' + ) + } + + const handleReaction = (reaction: Reaction) => { + client.community.sendReaction(chatId, messageId, reaction) + } + + const handleReplyClick = () => { + dispatch({ type: 'SET_REPLY', message }) } const handlePinClick = () => { - // console.log(pinned) - } - - const handleReaction = (reaction: string) => { - console.log(reaction) + // TODO: pin message } const renderMessage = () => { if (editing) { return ( - + - + ) @@ -118,37 +134,30 @@ export const ChatMessage = (props: Props) => { // {' '} return {message.text} } - case 'image': { + case 'EMOJI': { + return ( + + {message.text} + + ) + } + case 'IMAGE': { + const blob = new Blob([message.image.payload], { type: 'image/jpeg' }) + + // TODO?: call URL.revokeObjectURL() return ( message ) } - case 'image-text': { - const { text, imageUrl } = message - - return ( - <> - {text} - - message - - - ) - } } } @@ -161,12 +170,11 @@ export const ChatMessage = (props: Props) => { - {/* */} - {/* {contact.name} */} + {displayName} @@ -197,20 +205,22 @@ export const ChatMessage = (props: Props) => { - {pinned && ( + {/* {pinned && ( - Pinned by carmen.eth + Pinned by {contact.name} - )} + )} */} {displayName} - {/* {contact.name} */} - 10:00 AM + {new Date(Number(clock)).toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit', + })} @@ -229,6 +239,7 @@ export const ChatMessage = (props: Props) => { onEditClick={() => setEditing(true)} onReplyClick={handleReplyClick} onPinClick={handlePinClick} + onReactionClick={handleReaction} reacting={reacting} onReactingChange={setReacting} reactions={reactions} @@ -236,7 +247,7 @@ export const ChatMessage = (props: Props) => { Reply - Pin + {/* Pin */} diff --git a/packages/status-react/src/routes/chat/components/navbar/index.tsx b/packages/status-react/src/routes/chat/components/navbar/index.tsx index 1978dc5a..ae53eb25 100644 --- a/packages/status-react/src/routes/chat/components/navbar/index.tsx +++ b/packages/status-react/src/routes/chat/components/navbar/index.tsx @@ -7,7 +7,7 @@ import { useAppState } from '~/src/contexts/app-context' import { BellIcon } from '~/src/icons/bell-icon' import { DotsIcon } from '~/src/icons/dots-icon' import { GroupIcon } from '~/src/icons/group-icon' -import { useChannel } from '~/src/protocol' +import { useChat } from '~/src/protocol' import { styled } from '~/src/styles/config' import { DropdownMenuTrigger, Flex, IconButton, Separator } from '~/src/system' @@ -23,7 +23,7 @@ export const Navbar = (props: Props) => { const { state, dispatch } = useAppState() const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion - const chat = useChannel(params.id!) + const chat = useChat(params.id!) return ( @@ -44,7 +44,7 @@ export const Navbar = (props: Props) => { - + diff --git a/packages/status-react/src/routes/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx index 044c5637..d3fa05c3 100644 --- a/packages/status-react/src/routes/chat/index.tsx +++ b/packages/status-react/src/routes/chat/index.tsx @@ -1,3 +1,5 @@ +// TODO: handle non-existing chat ID + import React, { useEffect, useRef } from 'react' import { useMatch } from 'react-router-dom' @@ -5,7 +7,8 @@ import { useMatch } from 'react-router-dom' import { MemberSidebar } from '~/src/components/member-sidebar' import { useAppState } from '~/src/contexts/app-context' import { ChatProvider } from '~/src/contexts/chat-context' -import { useChannel } from '~/src/protocol' +import { useChat } from '~/src/protocol' +import { useProtocol } from '~/src/protocol/provider' import { useMessages } from '~/src/protocol/use-messages' import { styled } from '~/src/styles/config' import { Avatar, Flex, Heading, Text } from '~/src/system' @@ -14,59 +17,85 @@ import { ChatInput } from './components/chat-input' import { ChatMessage } from './components/chat-message' import { Navbar } from './components/navbar' -const ChatStart = () => { - // TODO: unify this with the useChat hook - const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion +interface ChatStartProps { + chatId: string +} - const chat = useChannel(params.id!) +const ChatStart = (props: ChatStartProps) => { + const { chatId } = props + + const { identity } = useChat(chatId) return ( - {/* */} - {chat.identity?.displayName} + + {identity?.displayName} - Welcome to the beginning of the #{chat.identity?.displayName} channel! + Welcome to the beginning of the #{identity?.displayName} channel! ) } -const Content = () => { - const contentRef = useRef(null) +interface ContentProps { + chatId: string +} - const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion +const Content = (props: ContentProps) => { + const { chatId } = props + + const contentRef = useRef(null) useEffect(() => { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion contentRef.current!.scrollTop = contentRef.current!.scrollHeight ?? 0 - }, []) + }, [chatId]) - const messages = useMessages(params.id!) + const messages = useMessages(chatId) return ( - - {messages.data.map(message => ( - + {/* */} + + {messages.data.map((message, index) => ( + ))} ) } export const Chat = () => { + const { client } = useProtocol() const { state, options } = useAppState() + const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion + const chatId = params.id! + + const chat = useChat(chatId) + // TODO: Update condition based on a chat type - const enableMembers = options.enableMembers // && (chat.type === 'group' || chat.type === 'channel') + const enableMembers = options.enableMembers ?? false // && (chat.type === 'group' || chat.type === 'channel') const showMembers = enableMembers && state.showMembers + const handleMessageSubmit = (message: string) => { + client.community.sendTextMessage( + chatId, + message + // '0x0fa999097568d1fdcc39108a08d75340bd2cee5ec59c36799007150d0a9fc896' + ) + } + return (
- - + +
{showMembers && }