(null);
const { channel, setChannel } = useChannel();
const { clientId } = useClientId();
@@ -36,38 +33,38 @@ export default () => {
'message:message'(data: IMessage) {
if(data.channel !== channel) return;
- setMessages([...messages, data]);
+ setMessages(messages => ([...messages, data]));
},
'message:recent'(data: { messages: IMessage[] }) {
setMessages(data.messages.reverse());
},
- }, [messages]);
+ }, [channel]);
useEffect(() => {
send('message:recent', { channel });
- }, [channel, sessionToken]);
+ }, [channel]);
- const sendMessage = useCallback(() => {
- if(textBoxRef.current === null) return;
- if(channel === null) return;
- if(clientId === null) return;
- if(sessionToken === null) return;
- send(
- 'message:message',
- createMessage(
- clientId,
- textBoxRef.current.innerText,
- channel,
- )
- );
- textBoxRef.current.innerText = '';
- }, [channel, sessionToken]);
+ // const sendMessage = useCallback(() => {
+ // if(textBoxRef.current === null) return;
+ // if(channel === null) return;
+ // if(clientId === null) return;
+ // if(sessionToken === null) return;
+ // send(
+ // 'message:message',
+ // createMessage(
+ // clientId,
+ // textBoxRef.current.innerText,
+ // channel,
+ // )
+ // );
+ // textBoxRef.current.innerText = '';
+ // }, [channel, sessionToken]);
- const keyDown = useCallback((evt: any) => {
- if(evt.key === 'Enter') {
- sendMessage();
- }
- }, [sendMessage]);
+ // const keyDown = useCallback((evt: any) => {
+ // if(evt.key === 'Enter') {
+ // sendMessage();
+ // }
+ // }, [sendMessage]);
return (
{
width: '100%',
display: 'grid',
background: 'var(--neutral-4)',
- gridTemplateColumns: `1fr ${CHATBOX_SIZE}px`,
- gridTemplateRows: `1fr ${CHATBOX_SIZE}px`,
+ gridTemplateColumns: `1fr min-content`,
+ gridTemplateRows: `1fr min-content`,
gridTemplateAreas: '"content content" "message send"',
}}
>
@@ -97,45 +94,29 @@ export default () => {
))}
- {
- textBoxRef.current?.focus();
- }}style={{
- margin: PADDING + 'px',
- marginRight: '0px',
- borderRadius: ((CHATBOX_SIZE - PADDING*2) / 2) + 'px',
- background: 'var(--neutral-5)',
- gridArea: 'message',
- display: 'grid',
- placeItems: 'center center',
- padding: '0px 16px',
- cursor: 'text',
- overflow: 'auto',
- }}>
-
-
+
u === 'second' ? 'Now' : ('' + t + u[0])}
>
-
-
- {clientName[message.from]}
+
+
+ {clientName[message.from]}
+
+
+ {message.text}
+
-
- {message.text}
-
-
+ {!!message.file && (
+
+
+
+ )}
+
*/}
+