logos-messaging/js-waku
1
0
Fork 0
mirror of https://github.com/logos-messaging/js-waku.git synced 2026-01-07 16:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format tsx files

Browse Source
This commit is contained in:
Franck Royer 2021-04-22 17:03:33 +10:00
parent 13e93b176d
commit fae5959d2f
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
4 changed files with 100 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web-chat/package.json
View File

@ -27,11 +27,11 @@
"eject": "react-scripts eject", "eject": "react-scripts eject",
"fix": "run-s fix:*", "fix": "run-s fix:*",
"test": "run-s build test:*", "test": "run-s build test:*",
"test:lint": "eslint src --ext .ts", "test:lint": "eslint src --ext .ts --ext .tsx",
"test:prettier": "prettier \"src/**/*.ts\" --list-different", "test:prettier": "prettier \"src/**/*.{ts,tsx}\" --list-different",
"test:spelling": "cspell \"{README.md,.github/*.md,src/**/*.ts}\"", "test:spelling": "cspell \"{README.md,.github/*.md,src/**/*.ts}\"",
"fix:prettier": "prettier \"src/**/*.ts\" --write", "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
"fix:lint": "eslint src --ext .ts --fix" "fix:lint": "eslint src --ext .ts --ext .tsx --fix"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [

59
web-chat/src/App.tsx
View File

@ -13,14 +13,13 @@ import { WakuContext } from './WakuContext';
export const ChatContentTopic = 'dingpu'; export const ChatContentTopic = 'dingpu';
interface State { interface State {
messages: ChatMessage[], messages: ChatMessage[];
waku?: Waku waku?: Waku;
} }
export default function App() { export default function App() {
let [state, setState] = useState<State>({ messages: [] }); let [state, setState] = useState<State>({ messages: [] });
useEffect(() => { useEffect(() => {
async function initWaku() { async function initWaku() {
try { try {
@ -28,9 +27,9 @@ export default function App() {
config: { config: {
pubsub: { pubsub: {
enabled: true, enabled: true,
emitSelf: true emitSelf: true,
} },
} },
}); });
setState(({ messages }) => { setState(({ messages }) => {
@ -40,12 +39,14 @@ export default function App() {
// FIXME: Connect to a go-waku instance by default, temporary hack until // FIXME: Connect to a go-waku instance by default, temporary hack until
// we have a go-waku instance in the fleet // we have a go-waku instance in the fleet
waku.libp2p.peerStore.addressBook.add( waku.libp2p.peerStore.addressBook.add(
PeerId.createFromB58String('16Uiu2HAmVVi6Q4j7MAKVibquW8aA27UNrA4Q8Wkz9EetGViu8ZF1'), PeerId.createFromB58String(
[multiaddr('/ip4/134.209.113.86/tcp/9001/ws')]); '16Uiu2HAmVVi6Q4j7MAKVibquW8aA27UNrA4Q8Wkz9EetGViu8ZF1'
),
[multiaddr('/ip4/134.209.113.86/tcp/9001/ws')]
);
} catch (e) { } catch (e) {
console.log('Issue starting waku ', e); console.log('Issue starting waku ', e);
} }
} }
const handleNewMessages = (event: { data: Uint8Array }) => { const handleNewMessages = (event: { data: Uint8Array }) => {
@ -57,7 +58,6 @@ export default function App() {
console.log('setState on ', messages); console.log('setState on ', messages);
setState({ messages, waku: state.waku }); setState({ messages, waku: state.waku });
} }
}; };
if (!state.waku) { if (!state.waku) {
@ -69,7 +69,10 @@ export default function App() {
// To clean up listener when component unmounts // To clean up listener when component unmounts
return () => { return () => {
state.waku?.libp2p.pubsub.removeListener(RelayDefaultTopic, handleNewMessages); state.waku?.libp2p.pubsub.removeListener(
RelayDefaultTopic,
handleNewMessages
);
}; };
} }
}); });
@ -84,7 +87,9 @@ export default function App() {
} else { } else {
switch (cmd) { switch (cmd) {
case '/help': 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'); commandResponses.push('/help: Display this help');
break; break;
case '/connect': case '/connect':
@ -100,7 +105,8 @@ export default function App() {
} else { } else {
waku.libp2p.peerStore.addressBook.add( waku.libp2p.peerStore.addressBook.add(
PeerId.createFromB58String(peerId), PeerId.createFromB58String(peerId),
[peerMultiaddr]); [peerMultiaddr]
);
} }
} catch (e) { } catch (e) {
commandResponses.push('Invalid multaddr: ' + e); commandResponses.push('Invalid multaddr: ' + e);
@ -109,24 +115,23 @@ export default function App() {
break; break;
case '/peers': case '/peers':
waku.libp2p.peerStore.peers.forEach((peer, peerId) => { waku.libp2p.peerStore.peers.forEach((peer, peerId) => {
commandResponses.push(peerId + ":") commandResponses.push(peerId + ':');
let addresses = " addresses: [" let addresses = ' addresses: [';
peer.addresses.forEach(({multiaddr}) => { peer.addresses.forEach(({ multiaddr }) => {
addresses += " " + multiaddr.toString() + ","; addresses += ' ' + multiaddr.toString() + ',';
}) });
addresses = addresses.replace(/,$/,""); addresses = addresses.replace(/,$/, '');
addresses += "]"; addresses += ']';
commandResponses.push(addresses); commandResponses.push(addresses);
let protos = " protos: ["; let protos = ' protos: [';
protos += peer.protocols; protos += peer.protocols;
protos+= "]" protos += ']';
commandResponses.push(protos) commandResponses.push(protos);
}) });
break; break;
default: default:
commandResponses.push('Unknown Command'); commandResponses.push('Unknown Command');
} }
} }
setState(({ waku, messages }) => { setState(({ waku, messages }) => {
commandResponses.forEach((res) => { commandResponses.forEach((res) => {
@ -137,8 +142,8 @@ export default function App() {
}; };
return ( return (
<div className='App'> <div className="App">
<div className='chat-room'> <div className="chat-room">
<WakuContext.Provider value={{ waku: state.waku }}> <WakuContext.Provider value={{ waku: state.waku }}>
<Paper> <Paper>
<Room lines={state.messages} commandHandler={commandHandler} /> <Room lines={state.messages} commandHandler={commandHandler} />

33
web-chat/src/MessageInput.tsx
View File

@ -26,24 +26,29 @@ export default function MessageInput(props: Props) {
}; };
return ( return (
<Grid container spacing={2} direction='row' alignItems='center'> <Grid container spacing={2} direction="row" alignItems="center">
<Grid item xs={11}> <Grid item xs={11}>
<TextField variant='outlined' <TextField
label='Send a message' variant="outlined"
value={inputText} label="Send a message"
fullWidth value={inputText}
style={{ margin: 8 }} fullWidth
margin='normal' style={{ margin: 8 }}
InputLabelProps={{ margin="normal"
shrink: true InputLabelProps={{
}} shrink: true,
onChange={messageHandler} }}
onKeyPress={keyPressHandler} onChange={messageHandler}
onKeyPress={keyPressHandler}
/> />
</Grid> </Grid>
<Grid item xs={1}> <Grid item xs={1}>
<Button variant='contained' color='primary' size='large' <Button
onClick={sendMessage}> variant="contained"
color="primary"
size="large"
onClick={sendMessage}
>
Send Send
</Button> </Button>
</Grid> </Grid>

86
web-chat/src/Room.tsx
View File

@ -1,10 +1,4 @@
import { import { Box, Grid, List, ListItem, ListItemText } from '@material-ui/core';
Box,
Grid,
List,
ListItem,
ListItemText
} from '@material-ui/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ChatMessage } from 'waku-chat/chat_message'; import { ChatMessage } from 'waku-chat/chat_message';
import { WakuMessage } from 'waku/waku_message'; import { WakuMessage } from 'waku/waku_message';
@ -13,66 +7,76 @@ import MessageInput from './MessageInput';
import { useWaku } from './WakuContext'; import { useWaku } from './WakuContext';
interface Props { interface Props {
lines: ChatMessage[], lines: ChatMessage[];
commandHandler: (cmd: string) => void; commandHandler: (cmd: string) => void;
} }
export default function Room (props :Props) { export default function Room(props: Props) {
let [messageToSend, setMessageToSend] = useState<string>(''); let [messageToSend, setMessageToSend] = useState<string>('');
const { waku } = useWaku(); const { waku } = useWaku();
const messageHandler = (msg: string) => { const messageHandler = (msg: string) => {
setMessageToSend(msg); setMessageToSend(msg);
} };
const sendMessage = async () => { const sendMessage = async () => {
if (messageToSend.startsWith('/')) { if (messageToSend.startsWith('/')) {
props.commandHandler(messageToSend) props.commandHandler(messageToSend);
} else { } else {
const chatMessage = new ChatMessage(new Date(), 'web-chat', messageToSend); const chatMessage = new ChatMessage(
const wakuMsg = WakuMessage.fromBytes(chatMessage.encode(), ChatContentTopic); new Date(),
'web-chat',
messageToSend
);
const wakuMsg = WakuMessage.fromBytes(
chatMessage.encode(),
ChatContentTopic
);
await waku!.relay.send(wakuMsg); 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>
);
<Grid item xs={12}>
<MessageInput
messageHandler={messageHandler}
sendMessage={sendMessage}
/>
</Grid>
</Grid>
);
} }
interface LinesProps { interface LinesProps {
messages: ChatMessage[] messages: ChatMessage[];
} }
const Lines = (props: LinesProps) => { const Lines = (props: LinesProps) => {
const renderedLines = []; const renderedLines = [];
for (const i in props.messages) { for (const i in props.messages) {
renderedLines.push(<ListItem> renderedLines.push(
<ListItemText key={"chat-message-" + i} <ListItem>
primary={printMessage(props.messages[i])} <ListItemText
/> key={'chat-message-' + i}
</ListItem>); primary={printMessage(props.messages[i])}
/>
</ListItem>
);
} }
return ( return <List dense={true}>{renderedLines}</List>;
<List dense={true}>
{renderedLines}
</List>
);
}; };
// TODO: Make it a proper component // TODO: Make it a proper component
@ -82,7 +86,7 @@ function printMessage(chatMsg: ChatMessage) {
day: 'numeric', day: 'numeric',
hour: 'numeric', hour: 'numeric',
minute: '2-digit', minute: '2-digit',
hour12: false hour12: false,
}); });
return `<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`; return `<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`;
} }