diff --git a/src/components/chat-view-container/chat-view-container.tsx b/src/components/chat-view-container/chat-view-container.tsx index 7be9597f5..0aa77ee9b 100644 --- a/src/components/chat-view-container/chat-view-container.tsx +++ b/src/components/chat-view-container/chat-view-container.tsx @@ -151,9 +151,13 @@ export class Container extends React.Component { }; get messages() { - const messagesById = mapMessagesById(this.channel?.messages || []); - const messagesByRootId = mapMessagesByRootId(this.channel?.messages || []); - const messages = linkMessages(this.channel?.messages || [], messagesById, messagesByRootId); + const allMessages = this.channel?.messages || []; + + const chatMessages = allMessages.filter((message) => !message.isPost); + + const messagesById = mapMessagesById(chatMessages); + const messagesByRootId = mapMessagesByRootId(chatMessages); + const messages = linkMessages(chatMessages, messagesById, messagesByRootId); return messages.sort((a, b) => compareDatesAsc(a.createdAt, b.createdAt)); } diff --git a/src/components/messenger/feed/components/create-post/index.tsx b/src/components/messenger/feed/components/create-post/index.tsx index dff2e3b80..f9fe964d1 100644 --- a/src/components/messenger/feed/components/create-post/index.tsx +++ b/src/components/messenger/feed/components/create-post/index.tsx @@ -3,28 +3,44 @@ import { useEffect, useRef, useState } from 'react'; import { Avatar, Button, IconButton } from '@zero-tech/zui/components'; import { IconCamera1, IconPlus, IconMicrophone2 } from '@zero-tech/zui/icons'; +import { Key } from '../../../../../lib/keyboard-search'; + import styles from './styles.module.scss'; -export const CreatePost = () => { +interface CreatePostProps { + isSubmitting?: boolean; + + onSubmit: (message: string) => void; +} + +export const CreatePost = ({ isSubmitting, onSubmit }: CreatePostProps) => { const [value, setValue] = useState(''); - const [isLoading, setIsLoading] = useState(false); + const isDisabled = !value.trim() || isSubmitting; const handleOnChange = (event: React.ChangeEvent) => { setValue(event.target.value); }; + const handleKeyDown = (event: React.KeyboardEvent) => { + if (!event.shiftKey && event.key === Key.Enter && value.trim()) { + event.preventDefault(); + onSubmit(value); + setValue(''); + } + }; + const handleOnSubmit = () => { - setIsLoading(true); - setTimeout(() => { - setIsLoading(false); - }, 2000); + if (value.trim()) { + onSubmit(value); + setValue(''); + } }; return (
- +
@@ -32,7 +48,7 @@ export const CreatePost = () => { {}} /> {}} />
-
@@ -43,10 +59,11 @@ export const CreatePost = () => { interface PostInputProps { onChange: (event: React.ChangeEvent) => void; + onKeyDown: (event: React.KeyboardEvent) => void; value: string; } -const PostInput = ({ onChange, value }: PostInputProps) => { +const PostInput = ({ onChange, onKeyDown, value }: PostInputProps) => { const ref = useRef(null); useEffect(() => { @@ -66,6 +83,7 @@ const PostInput = ({ onChange, value }: PostInputProps) => {