From a46a05a5ea515d231fe30e8afdbd2e112870b5bf Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Tue, 29 Jun 2021 15:53:59 +1000
Subject: [PATCH] Move messaging components to single component

---
 examples/eth-dm/src/App.tsx                 | 18 ++++++-------
 examples/eth-dm/src/messaging/Messaging.tsx | 30 +++++++++++++++++++++
 2 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 examples/eth-dm/src/messaging/Messaging.tsx

diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx
index 674910afaf..b375f0cfbc 100644
--- a/examples/eth-dm/src/App.tsx
+++ b/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 {
-  AppBar,
-  IconButton,
-  Toolbar,
-  Typography,
-} from '@material-ui/core';
-import SendMessage from './messaging/SendMessage';
+import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core';
 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} />
-              <Messages messages={messages} />
+              <Messaging
+                recipients={publicKeys}
+                waku={waku}
+                messages={messages}
+              />
             </fieldset>
           </main>
         </div>
diff --git a/examples/eth-dm/src/messaging/Messaging.tsx b/examples/eth-dm/src/messaging/Messaging.tsx
new file mode 100644
index 0000000000..60d07ff98b
--- /dev/null
+++ b/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>
+  );
+}