Deconstruct properties for more concise code

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) => {

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);
     });
   };
 

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);
   };