52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import Aside from '@dailyjs/shared/components/Aside';
|
|
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
|
import { useChat } from '../../contexts/ChatProvider';
|
|
|
|
export const CHAT_ASIDE = 'chat';
|
|
|
|
export const ChatAside = () => {
|
|
const { showAside, setShowAside } = useUIState();
|
|
const { sendMessage, chatHistory, setHasNewMessages } = useChat();
|
|
const [newMessage, setNewMessage] = useState('');
|
|
|
|
useEffect(() => {
|
|
// Clear out any new message otifications if we're showing the chat screen
|
|
if (showAside === CHAT_ASIDE) {
|
|
setHasNewMessages(false);
|
|
}
|
|
}, [showAside, chatHistory.length, setHasNewMessages]);
|
|
|
|
if (!showAside || showAside !== CHAT_ASIDE) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Aside onClose={() => setShowAside(false)}>
|
|
{chatHistory.map((chatItem) => (
|
|
<div key={chatItem.id}>
|
|
{chatItem.sender} - {chatItem.message}
|
|
</div>
|
|
))}
|
|
<hr />
|
|
<input
|
|
type="text"
|
|
value={newMessage}
|
|
onChange={(e) => setNewMessage(e.target.value)}
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={!newMessage}
|
|
onClick={() => {
|
|
sendMessage(newMessage);
|
|
setNewMessage('');
|
|
}}
|
|
>
|
|
Send a test message
|
|
</button>
|
|
</Aside>
|
|
);
|
|
};
|
|
|
|
export default ChatAside;
|