Format tsx files

2021-04-22 17:03:33 +10:00 · 2021-04-22 17:03:33 +10:00 · fae5959d2f
parent 13e93b176d
commit fae5959d2f
4 changed files with 100 additions and 86 deletions
--- a/web-chat/package.json
+++ b/web-chat/package.json
@ -27,11 +27,11 @@
    "eject": "react-scripts eject",
    "fix": "run-s fix:*",
    "test": "run-s build test:*",
-    "test:lint": "eslint src --ext .ts",
-    "test:prettier": "prettier \"src/**/*.ts\" --list-different",
+    "test:lint": "eslint src --ext .ts --ext .tsx",
+    "test:prettier": "prettier \"src/**/*.{ts,tsx}\" --list-different",
    "test:spelling": "cspell \"{README.md,.github/*.md,src/**/*.ts}\"",
-    "fix:prettier": "prettier \"src/**/*.ts\" --write",
-    "fix:lint": "eslint src --ext .ts --fix"
+    "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
+    "fix:lint": "eslint src --ext .ts --ext .tsx --fix"
  },
  "eslintConfig": {
    "extends": [
--- a/web-chat/src/App.tsx
+++ b/web-chat/src/App.tsx
@ -13,14 +13,13 @@ import { WakuContext } from './WakuContext';
 export const ChatContentTopic = 'dingpu';

 interface State {
-  messages: ChatMessage[],
-  waku?: Waku
+  messages: ChatMessage[];
+  waku?: Waku;
 }

 export default function App() {
  let [state, setState] = useState<State>({ messages: [] });

-
  useEffect(() => {
    async function initWaku() {
      try {
@ -28,9 +27,9 @@ export default function App() {
          config: {
            pubsub: {
              enabled: true,
-              emitSelf: true
-            }
-          }
+              emitSelf: true,
+            },
+          },
        });

        setState(({ messages }) => {
@ -40,12 +39,14 @@ export default function App() {
        // FIXME: Connect to a go-waku instance by default, temporary hack until
        //  we have a go-waku instance in the fleet
        waku.libp2p.peerStore.addressBook.add(
-          PeerId.createFromB58String('16Uiu2HAmVVi6Q4j7MAKVibquW8aA27UNrA4Q8Wkz9EetGViu8ZF1'),
-          [multiaddr('/ip4/134.209.113.86/tcp/9001/ws')]);
+          PeerId.createFromB58String(
+            '16Uiu2HAmVVi6Q4j7MAKVibquW8aA27UNrA4Q8Wkz9EetGViu8ZF1'
+          ),
+          [multiaddr('/ip4/134.209.113.86/tcp/9001/ws')]
+        );
      } catch (e) {
        console.log('Issue starting waku ', e);
      }
-
    }

    const handleNewMessages = (event: { data: Uint8Array }) => {
@ -57,7 +58,6 @@ export default function App() {
        console.log('setState on ', messages);
        setState({ messages, waku: state.waku });
      }
-
    };

    if (!state.waku) {
@ -69,7 +69,10 @@ export default function App() {

      // To clean up listener when component unmounts
      return () => {
-        state.waku?.libp2p.pubsub.removeListener(RelayDefaultTopic, handleNewMessages);
+        state.waku?.libp2p.pubsub.removeListener(
+          RelayDefaultTopic,
+          handleNewMessages
+        );
      };
    }
  });
@ -84,7 +87,9 @@ export default function App() {
    } else {
      switch (cmd) {
        case '/help':
-          commandResponses.push('/connect <Multiaddr>: connect to the given peer');
+          commandResponses.push(
+            '/connect <Multiaddr>: connect to the given peer'
+          );
          commandResponses.push('/help: Display this help');
          break;
        case '/connect':
@ -100,7 +105,8 @@ export default function App() {
              } else {
                waku.libp2p.peerStore.addressBook.add(
                  PeerId.createFromB58String(peerId),
-                  [peerMultiaddr]);
+                  [peerMultiaddr]
+                );
              }
            } catch (e) {
              commandResponses.push('Invalid multaddr: ' + e);
@ -109,24 +115,23 @@ export default function App() {
          break;
        case '/peers':
          waku.libp2p.peerStore.peers.forEach((peer, peerId) => {
-            commandResponses.push(peerId + ":")
-            let addresses = "  addresses: ["
-            peer.addresses.forEach(({multiaddr}) => {
-              addresses += " " + multiaddr.toString() + ",";
-            })
-            addresses = addresses.replace(/,$/,"");
-            addresses += "]";
+            commandResponses.push(peerId + ':');
+            let addresses = '  addresses: [';
+            peer.addresses.forEach(({ multiaddr }) => {
+              addresses += ' ' + multiaddr.toString() + ',';
+            });
+            addresses = addresses.replace(/,$/, '');
+            addresses += ']';
            commandResponses.push(addresses);
-            let protos = "  protos: [";
+            let protos = '  protos: [';
            protos += peer.protocols;
-            protos+= "]"
-            commandResponses.push(protos)
-          })
+            protos += ']';
+            commandResponses.push(protos);
+          });
          break;
        default:
          commandResponses.push('Unknown Command');
      }
-
    }
    setState(({ waku, messages }) => {
      commandResponses.forEach((res) => {
@ -137,8 +142,8 @@ export default function App() {
  };

  return (
-    <div className='App'>
-      <div className='chat-room'>
+    <div className="App">
+      <div className="chat-room">
        <WakuContext.Provider value={{ waku: state.waku }}>
          <Paper>
            <Room lines={state.messages} commandHandler={commandHandler} />
--- a/web-chat/src/MessageInput.tsx
+++ b/web-chat/src/MessageInput.tsx
@ -26,24 +26,29 @@ export default function MessageInput(props: Props) {
  };

  return (
-    <Grid container spacing={2} direction='row' alignItems='center'>
+    <Grid container spacing={2} direction="row" alignItems="center">
      <Grid item xs={11}>
-        <TextField variant='outlined'
-                   label='Send a message'
-                   value={inputText}
-                   fullWidth
-                   style={{ margin: 8 }}
-                   margin='normal'
-                   InputLabelProps={{
-                     shrink: true
-                   }}
-                   onChange={messageHandler}
-                   onKeyPress={keyPressHandler}
+        <TextField
+          variant="outlined"
+          label="Send a message"
+          value={inputText}
+          fullWidth
+          style={{ margin: 8 }}
+          margin="normal"
+          InputLabelProps={{
+            shrink: true,
+          }}
+          onChange={messageHandler}
+          onKeyPress={keyPressHandler}
        />
      </Grid>
      <Grid item xs={1}>
-        <Button variant='contained' color='primary' size='large'
-                onClick={sendMessage}>
+        <Button
+          variant="contained"
+          color="primary"
+          size="large"
+          onClick={sendMessage}
+        >
          Send
        </Button>
      </Grid>
--- a/web-chat/src/Room.tsx
+++ b/web-chat/src/Room.tsx
@ -1,10 +1,4 @@
-import {
-  Box,
-  Grid,
-  List,
-  ListItem,
-  ListItemText
-} from '@material-ui/core';
+import { Box, Grid, List, ListItem, ListItemText } from '@material-ui/core';
 import React, { useState } from 'react';
 import { ChatMessage } from 'waku-chat/chat_message';
 import { WakuMessage } from 'waku/waku_message';
@ -13,66 +7,76 @@ import MessageInput from './MessageInput';
 import { useWaku } from './WakuContext';

 interface Props {
-  lines: ChatMessage[],
+  lines: ChatMessage[];
  commandHandler: (cmd: string) => void;
 }

-export default function  Room (props :Props)  {
+export default function Room(props: Props) {
  let [messageToSend, setMessageToSend] = useState<string>('');
  const { waku } = useWaku();

  const messageHandler = (msg: string) => {
    setMessageToSend(msg);
-  }
+  };

  const sendMessage = async () => {
    if (messageToSend.startsWith('/')) {
-      props.commandHandler(messageToSend)
+      props.commandHandler(messageToSend);
    } else {
-      const chatMessage = new ChatMessage(new Date(), 'web-chat', messageToSend);
-      const wakuMsg = WakuMessage.fromBytes(chatMessage.encode(), ChatContentTopic);
+      const chatMessage = new ChatMessage(
+        new Date(),
+        'web-chat',
+        messageToSend
+      );
+      const wakuMsg = WakuMessage.fromBytes(
+        chatMessage.encode(),
+        ChatContentTopic
+      );
      await waku!.relay.send(wakuMsg);
    }
-  }
-
-    return (
-      <Grid container spacing={2}>
-
-        <Grid item xs={12}>
-          <Box height={800} maxHeight={800}
-               style={{ flex: 1, maxHeight: '100%', overflow: 'scroll' }}>
-            <Lines messages={props.lines} />
-          </Box>
-        </Grid>
-
-        <Grid item xs={12}>
-          <MessageInput messageHandler={messageHandler} sendMessage={sendMessage} />
-        </Grid>
+  };

+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Box
+          height={800}
+          maxHeight={800}
+          style={{ flex: 1, maxHeight: '100%', overflow: 'scroll' }}
+        >
+          <Lines messages={props.lines} />
+        </Box>
      </Grid>
-    );
+
+      <Grid item xs={12}>
+        <MessageInput
+          messageHandler={messageHandler}
+          sendMessage={sendMessage}
+        />
+      </Grid>
+    </Grid>
+  );
 }

 interface LinesProps {
-  messages: ChatMessage[]
+  messages: ChatMessage[];
 }

 const Lines = (props: LinesProps) => {
  const renderedLines = [];

  for (const i in props.messages) {
-    renderedLines.push(<ListItem>
-      <ListItemText key={"chat-message-" + i}
-        primary={printMessage(props.messages[i])}
-      />
-    </ListItem>);
+    renderedLines.push(
+      <ListItem>
+        <ListItemText
+          key={'chat-message-' + i}
+          primary={printMessage(props.messages[i])}
+        />
+      </ListItem>
+    );
  }

-  return (
-    <List dense={true}>
-      {renderedLines}
-    </List>
-  );
+  return <List dense={true}>{renderedLines}</List>;
 };

 // TODO: Make it a proper component
@ -82,7 +86,7 @@ function printMessage(chatMsg: ChatMessage) {
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
-    hour12: false
+    hour12: false,
  });
  return `<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`;
 }