Convert some components to Typescript
Gitlab: #30
Change-Id: I9fbd857ef93866609682fb46be8b04904ee4e66f
diff --git a/client/src/components/SendMessageForm.tsx b/client/src/components/SendMessageForm.tsx
new file mode 100644
index 0000000..1a3b11c
--- /dev/null
+++ b/client/src/components/SendMessageForm.tsx
@@ -0,0 +1,74 @@
+import { Divider, InputBase } from '@mui/material';
+import { Stack } from '@mui/system';
+import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
+
+import {
+ RecordVideoMessageButton,
+ RecordVoiceMessageButton,
+ SelectEmojiButton,
+ SendMessageButton,
+ UploadFileButton,
+} from './Button';
+
+type SendMessageFormProps = {
+ onSend: (message: string) => void;
+};
+
+export default function SendMessageForm(props: SendMessageFormProps) {
+ const [currentMessage, setCurrentMessage] = useState('');
+
+ const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+ e.preventDefault();
+ if (currentMessage) {
+ props.onSend(currentMessage);
+ setCurrentMessage('');
+ }
+ };
+ const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setCurrentMessage(event.target.value);
+
+ const onEmojiSelected = useCallback(
+ (emoji: string) => setCurrentMessage((currentMessage) => currentMessage + emoji),
+ [setCurrentMessage]
+ );
+
+ return (
+ <Stack padding="30px 16px 0px 16px">
+ <Divider
+ sx={{
+ bordeTop: '1px solid #E5E5E5',
+ }}
+ />
+ <Stack
+ component="form"
+ onSubmit={handleSubmit}
+ direction="row"
+ alignItems="center"
+ flexGrow={1}
+ spacing="20px"
+ padding="16px 0px"
+ >
+ <UploadFileButton />
+ <RecordVoiceMessageButton />
+ <RecordVideoMessageButton />
+
+ <Stack flexGrow={1}>
+ <InputBase
+ placeholder="Write something nice"
+ value={currentMessage}
+ onChange={handleInputChange}
+ sx={{
+ fontSize: '15px',
+ color: 'black',
+ '& ::placeholder': {
+ color: '#7E7E7E',
+ opacity: 1,
+ },
+ }}
+ />
+ </Stack>
+ <SelectEmojiButton onEmojiSelected={onEmojiSelected} />
+ {currentMessage && <SendMessageButton type="submit" />}
+ </Stack>
+ </Stack>
+ );
+}