diff --git a/src/pages/Chat/ChatPage.tsx b/src/pages/Chat/ChatPage.tsx index 753e860c625803850797c389fab160b3d322886d..314a80f4ac72a2e6c30bc20fefd58d35c203da60 100644 --- a/src/pages/Chat/ChatPage.tsx +++ b/src/pages/Chat/ChatPage.tsx @@ -1,4 +1,4 @@ -import React, { Component, ChangeEvent } from 'react'; +import React, { Component, ChangeEvent, KeyboardEvent } from 'react'; import { Box, Button, Center, Flex, Grid, GridItem, Input, Avatar, Text } from '@chakra-ui/react'; import logoSpotyphie from '../../assets/logo_spotyphie.png'; import Navbar from "../../components/Navbar/Navbar"; @@ -8,6 +8,12 @@ interface ChatMessage { content: string; } +interface ChatPageState { + messages: ChatMessage[]; + newMessage: string; + activeChatRoom: string; +} + // Component for rendering messages in chat history const ChatHistoryMessage: React.FC<ChatMessage> = ({ content }) => ( <Flex alignItems="center" mb={1} bg="gray"> @@ -47,14 +53,14 @@ class ChatPage extends Component<{}, ChatPageState> { if (newMessage) { const newId = messages.length + 1; const activeChatRoom = {/* tentukan cara mendapatkan ruang chat yang aktif saat ini */}; - + this.setState((prevState) => { const lastMessage = prevState.messages[prevState.messages.length - 1]; - + // Check if there are existing messages and if the active chat room is different if (lastMessage && lastMessage.chatRoom !== activeChatRoom) { const newMessageObject = { id: newId, content: newMessage, chatRoom: activeChatRoom }; - + return { messages: [...prevState.messages, newMessageObject], newMessage: '', @@ -62,7 +68,7 @@ class ChatPage extends Component<{}, ChatPageState> { } else if (!lastMessage) { // If there are no existing messages, add the new message const newMessageObject = { id: newId, content: newMessage, chatRoom: activeChatRoom }; - + return { messages: [newMessageObject], newMessage: '', @@ -70,7 +76,7 @@ class ChatPage extends Component<{}, ChatPageState> { } else { // If the active chat room is the same, update the last message content lastMessage.content = newMessage; - + return { messages: [...prevState.messages], newMessage: '', @@ -84,6 +90,12 @@ class ChatPage extends Component<{}, ChatPageState> { this.setState({ newMessage: event.target.value }); }; + handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => { + if (event.key === 'Enter') { + this.addMessage(); + } + }; + handleNewChatRoom = () => { const { messages, activeChatRoom } = this.state; const newChatRoom = prompt('Enter a new chat room name:') || 'default'; // Menggunakan 'default' jika pengguna tidak memasukkan nama @@ -119,7 +131,6 @@ class ChatPage extends Component<{}, ChatPageState> { {messages.map((message) => ( <SentMessage key={message.id} {...message} /> ))} - </Flex> ); }; @@ -193,9 +204,11 @@ class ChatPage extends Component<{}, ChatPageState> { type='text' value={this.state.newMessage} onChange={this.handleInputChange} + onKeyPress={this.handleKeyPress} placeholder='Type your message...' width='90%' - height='10vh' /> + height='10vh' + /> <Button onClick={this.addMessage} bgColor='green' color="white" height='10vh' width='10%' flexShrink={0} marginTop='-5px'> Send </Button> diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index c12345a09ff11e61e6766ee4c8cdbd0b253126ee..16ed6d498790536f7624b7371a06bd1e52e1d8c3 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -48,6 +48,7 @@ class Login extends React.Component <{}, {isLogin : boolean, failLogin : string} // Set Local Storage localStorage.setItem('user_id', response.data.user_id); localStorage.setItem('username', response.data.username); + localStorage.setItem('is_premium', response.data.is_premium); localStorage.setItem('is_admin', response.data.is_admin); localStorage.setItem('credits', response.data.credits); window.location.reload();