From 5de030d3ca4b33bf3f732368cc02fb623cb6ccb2 Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Tue, 29 Jun 2021 12:10:24 +1000
Subject: [PATCH] Deconstruct properties for more concise code

---
 examples/eth-dm/src/SendMessage.tsx                   | 8 +++-----
 examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx | 6 ++----
 examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx | 4 +---
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/examples/eth-dm/src/SendMessage.tsx b/examples/eth-dm/src/SendMessage.tsx
index 28504a2fbb..95de6cb41f 100644
--- a/examples/eth-dm/src/SendMessage.tsx
+++ b/examples/eth-dm/src/SendMessage.tsx
@@ -28,13 +28,11 @@ export interface Props {
   recipients: Map<string, string>;
 }
 
-export function SendMessage(props: Props) {
+export function SendMessage({ waku, recipients }: Props) {
   const classes = useStyles();
   const [recipient, setRecipient] = useState<string>('');
   const [message, setMessage] = useState<string>();
 
-  const waku = props.waku;
-
   const handleRecipientChange = (
     event: ChangeEvent<{ name?: string; value: unknown }>
   ) => {
@@ -45,7 +43,7 @@ export function SendMessage(props: Props) {
     setMessage(event.target.value);
   };
 
-  const items = Array.from(props.recipients.keys()).map((recipient) => {
+  const items = Array.from(recipients.keys()).map((recipient) => {
     return (
       <MenuItem key={recipient} value={recipient}>
         {recipient}
@@ -63,7 +61,7 @@ export function SendMessage(props: Props) {
       if (!waku) return;
       if (!recipient) return;
       if (!message) return;
-      const publicKey = props.recipients.get(recipient);
+      const publicKey = recipients.get(recipient);
       if (!publicKey) return;
 
       sendMessage(waku, recipient, publicKey, message, (res) => {
diff --git a/examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx b/examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx
index 63739cb6e7..23b864d295 100644
--- a/examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx
+++ b/examples/eth-dm/src/key_pair_handling/LoadKeyPair.tsx
@@ -8,11 +8,9 @@ export interface Props {
   disabled: boolean;
 }
 
-export function LoadKeyPair(props: Props) {
+export function LoadKeyPair({ disabled, setEthDmKeyPair }: Props) {
   const [password, setPassword] = useState<string>();
 
-  const disabled = props.disabled;
-
   const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
   };
@@ -23,7 +21,7 @@ export function LoadKeyPair(props: Props) {
     loadKeyPairFromStorage(password).then((keyPair: KeyPair | undefined) => {
       if (!keyPair) return;
       console.log('EthDm KeyPair loaded from storage');
-      props.setEthDmKeyPair(keyPair);
+      setEthDmKeyPair(keyPair);
     });
   };
 
diff --git a/examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx b/examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx
index 6b2a8543f6..2d476a3a70 100644
--- a/examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx
+++ b/examples/eth-dm/src/key_pair_handling/SaveKeyPair.tsx
@@ -7,11 +7,9 @@ export interface Props {
   ethDmKeyPair: KeyPair | undefined;
 }
 
-export function SaveKeyPair(props: Props) {
+export function SaveKeyPair({ ethDmKeyPair }: Props) {
   const [password, setPassword] = useState<string>();
 
-  const ethDmKeyPair = props.ethDmKeyPair;
-
   const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
   };