Convert some components to Typescript
Gitlab: #30
Change-Id: I9fbd857ef93866609682fb46be8b04904ee4e66f
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
deleted file mode 100644
index dbf78e1..0000000
--- a/client/src/components/ConversationAvatar.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Avatar } from '@mui/material';
-
-export default function ConversationAvatar({ displayName, ...props }) {
- return <Avatar {...props} alt={displayName} src="/broken" />;
-}
diff --git a/client/src/components/ConversationAvatar.tsx b/client/src/components/ConversationAvatar.tsx
new file mode 100644
index 0000000..decdb65
--- /dev/null
+++ b/client/src/components/ConversationAvatar.tsx
@@ -0,0 +1,8 @@
+import { Avatar, AvatarProps } from '@mui/material';
+
+type ConversationAvatarProps = AvatarProps & {
+ displayName?: string;
+};
+export default function ConversationAvatar({ displayName, ...props }: ConversationAvatarProps) {
+ return <Avatar {...props} alt={displayName} src="/broken" />;
+}
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.tsx
similarity index 87%
rename from client/src/components/ConversationList.js
rename to client/src/components/ConversationList.tsx
index e25dd9c..59ccfc3 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.tsx
@@ -8,7 +8,12 @@
import { useAppSelector } from '../../redux/hooks';
import ConversationListItem from './ConversationListItem';
-export default function ConversationList(props) {
+type ConversationListProps = {
+ accountId: string;
+ conversations: Conversation[];
+ search?: Conversation;
+};
+export default function ConversationList(props: ConversationListProps) {
const { refresh } = useAppSelector((state) => state.app);
useEffect(() => {
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index ac738b4..16f6710 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -5,7 +5,7 @@
import { SocketContext } from '../contexts/Socket';
import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/Conversation';
import ConversationAvatar from './ConversationAvatar';
-import LoadingPage from './loading';
+import LoadingPage from './Loading';
import MessageList from './MessageList';
import SendMessageForm from './SendMessageForm';
diff --git a/client/src/components/Header.js b/client/src/components/Header.tsx
similarity index 82%
rename from client/src/components/Header.js
rename to client/src/components/Header.tsx
index 637b529..00d5ebb 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.tsx
@@ -1,13 +1,13 @@
import { Box, Button, Menu, MenuItem } from '@mui/material';
-import { useState } from 'react';
+import { MouseEvent, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import authManager from '../AuthManager';
export default function Header() {
const navigate = useNavigate();
- const [anchorEl, setAnchorEl] = useState(null);
- const handleClick = (event) => setAnchorEl(event.currentTarget);
+ const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+ const handleClick = (event: MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
const handleClose = () => setAnchorEl(null);
const params = useParams();
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.tsx
similarity index 82%
rename from client/src/components/JamiIdCard.js
rename to client/src/components/JamiIdCard.tsx
index e25610b..2f54d91 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.tsx
@@ -1,6 +1,12 @@
import { Box, Card, CardContent, Typography } from '@mui/material';
-export default function JamiIdCard(props) {
+import Account from '../../../model/Account';
+
+type JamiIdCardProps = {
+ account: Account;
+};
+
+export default function JamiIdCard(props: JamiIdCardProps) {
const account = props.account;
const registeredName = account.getRegisteredName();
return (
diff --git a/client/src/components/loading.js b/client/src/components/Loading.tsx
similarity index 100%
rename from client/src/components/loading.js
rename to client/src/components/Loading.tsx
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.tsx
similarity index 68%
rename from client/src/components/NewContactForm.js
rename to client/src/components/NewContactForm.tsx
index 9862453..06d0222 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.tsx
@@ -1,16 +1,21 @@
import { SearchRounded } from '@mui/icons-material';
import { InputAdornment, InputBase } from '@mui/material';
-import { useState } from 'react';
+import { ChangeEvent, FormEvent, useState } from 'react';
-export default function NewContactForm(props) {
+type NewContactFormProps = {
+ onChange?: (v: string) => void;
+ onSubmit?: (v: string) => void;
+};
+
+export default function NewContactForm(props: NewContactFormProps) {
const [value, setValue] = useState('');
- const handleChange = (event) => {
+ const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value);
if (props.onChange) props.onChange(event.target.value);
};
- const handleSubmit = (event) => {
+ const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (value && props.onSubmit) props.onSubmit(value);
};
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.tsx
similarity index 75%
rename from client/src/components/SendMessageForm.js
rename to client/src/components/SendMessageForm.tsx
index 5685c8a..1a3b11c 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.tsx
@@ -1,6 +1,6 @@
import { Divider, InputBase } from '@mui/material';
import { Stack } from '@mui/system';
-import { useCallback, useState } from 'react';
+import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
import {
RecordVideoMessageButton,
@@ -8,22 +8,26 @@
SelectEmojiButton,
SendMessageButton,
UploadFileButton,
-} from './Button.tsx';
+} from './Button';
-export default function SendMessageForm(props) {
+type SendMessageFormProps = {
+ onSend: (message: string) => void;
+};
+
+export default function SendMessageForm(props: SendMessageFormProps) {
const [currentMessage, setCurrentMessage] = useState('');
- const handleSubmit = (e) => {
+ const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (currentMessage) {
props.onSend(currentMessage);
setCurrentMessage('');
}
};
- const handleInputChange = (event) => setCurrentMessage(event.target.value);
+ const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setCurrentMessage(event.target.value);
const onEmojiSelected = useCallback(
- (emoji) => setCurrentMessage((currentMessage) => currentMessage + emoji),
+ (emoji: string) => setCurrentMessage((currentMessage) => currentMessage + emoji),
[setCurrentMessage]
);
diff --git a/client/src/components/avatar.js b/client/src/components/avatar.js
deleted file mode 100644
index e69de29..0000000
--- a/client/src/components/avatar.js
+++ /dev/null
diff --git a/client/src/pages/AccountSelection.tsx b/client/src/pages/AccountSelection.tsx
index 9f6fcc8..9085309 100644
--- a/client/src/pages/AccountSelection.tsx
+++ b/client/src/pages/AccountSelection.tsx
@@ -9,7 +9,7 @@
import ConversationAvatar from '../components/ConversationAvatar';
import Header from '../components/Header';
import ListItemLink from '../components/ListItemLink';
-import LoadingPage from '../components/loading';
+import LoadingPage from '../components/Loading';
const variants = {
enter: { opacity: 1, y: 0 },
diff --git a/client/src/pages/Messenger.tsx b/client/src/pages/Messenger.tsx
index c9449cd..d22bbc3 100644
--- a/client/src/pages/Messenger.tsx
+++ b/client/src/pages/Messenger.tsx
@@ -10,7 +10,7 @@
import ConversationList from '../components/ConversationList';
import ConversationView from '../components/ConversationView';
import Header from '../components/Header';
-import LoadingPage from '../components/loading';
+import LoadingPage from '../components/Loading';
import NewContactForm from '../components/NewContactForm';
import AddContactPage from './AddContactPage';