Move messaging components to single component

examples/eth-dm/src/App.tsx

@@ -6,15 +6,9 @@ import { Waku } from 'js-waku';
 import { ethers } from 'ethers';
 import { Web3Provider } from '@ethersproject/providers';
 import { KeyPair } from './crypto';
-import Messages, { Message } from './messaging/Messages';
+import { Message } from './messaging/Messages';
 import 'fontsource-roboto';
-import {
+import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core';
-  AppBar,
-  IconButton,
-  Toolbar,
-  Typography,
-} from '@material-ui/core';
-import SendMessage from './messaging/SendMessage';
 import KeyPairHandling from './key_pair_handling/KeyPairHandling';
 import InitWaku from './InitWaku';
 import {
@@ -25,6 +19,7 @@ import {
 import { teal, purple, green } from '@material-ui/core/colors';
 import WifiIcon from '@material-ui/icons/Wifi';
 import BroadcastPublicKey from './BroadcastPublicKey';
+import Messaging from './messaging/Messaging';
 
 declare let window: any;
 
@@ -131,8 +126,11 @@ function App() {
             </fieldset>
             <fieldset>
               <legend>Messaging</legend>
-              <SendMessage recipients={publicKeys} waku={waku} />
+              <Messaging
-              <Messages messages={messages} />
+                recipients={publicKeys}
+                waku={waku}
+                messages={messages}
+              />
             </fieldset>
           </main>
         </div>

examples/eth-dm/src/messaging/Messaging.tsx

@@ -0,0 +1,30 @@
+import Messages, { Message } from './Messages';
+import { Waku } from 'js-waku';
+import SendMessage from './SendMessage';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'left',
+    flexDirection: 'column',
+    margin: '5px',
+  },
+});
+
+interface Props {
+  waku: Waku | undefined;
+  recipients: Map<string, string>;
+  messages: Message[];
+}
+
+export default function Messaging({ waku, recipients, messages }: Props) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <SendMessage recipients={recipients} waku={waku} />
+      <Messages messages={messages} />
+    </div>
+  );
+}