WIP refactoring
This commit is contained in:
parent
6da52f2770
commit
85190a0ce3
@ -18,23 +18,27 @@ module.exports = io => {
|
|||||||
io.to(message.to).emit('message', message)
|
io.to(message.to).emit('message', message)
|
||||||
})
|
})
|
||||||
|
|
||||||
socket.on('join', namespace => {
|
socket.on('join', room => {
|
||||||
const socketId = socket.id
|
console.log(`${socket.id} joins ${room}`)
|
||||||
console.log(`${socketId} joins ${namespace}`)
|
socket.join(room, () => {
|
||||||
socket.join(namespace, () => {
|
io.to(room).emit('user joined', { room, socketId: socket.id })
|
||||||
io.to(namespace).emit('user joined', { namespace, socketId })
|
io.of(room).clients((error, clients) => {
|
||||||
sendNamespace(namespace)
|
if (error) throw error
|
||||||
|
socket.emit('got client list', clients)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
socket.on('get all clients', () => {
|
||||||
socket.on('part', namespace => {
|
io.clients((e, c) => {
|
||||||
const socketId = socket.id
|
if (e) console.log(e)
|
||||||
console.log('part', socketId, namespace)
|
console.log('all clients:', c)
|
||||||
socket.leave(namespace, () => {
|
|
||||||
io.to(namespace).emit('user left', { namespace, socketId })
|
|
||||||
sendNamespace(namespace)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
socket.on('part', namespace => {
|
||||||
|
console.log('part', socket.id, namespace)
|
||||||
|
io.to(namespace).emit('user left', { namespace, socketId: socket.id })
|
||||||
|
socket.leave(namespace)
|
||||||
|
})
|
||||||
|
|
||||||
socket.on('change nick', nick => {
|
socket.on('change nick', nick => {
|
||||||
io.emit('changed nick', { socketId: socket.id, nick: nick })
|
io.emit('changed nick', { socketId: socket.id, nick: nick })
|
||||||
@ -56,14 +60,5 @@ module.exports = io => {
|
|||||||
console.log(`${socket.id} has disconnected.`)
|
console.log(`${socket.id} has disconnected.`)
|
||||||
//sendNamespaces()
|
//sendNamespaces()
|
||||||
})
|
})
|
||||||
|
|
||||||
const sendNamespace = namespace => {
|
|
||||||
if (!io.sockets.adapter.rooms[namespace]) return
|
|
||||||
const newNamespace = {
|
|
||||||
namespace,
|
|
||||||
sockets: Object.keys(io.sockets.adapter.rooms[namespace].sockets),
|
|
||||||
}
|
|
||||||
io.emit('got namespace', newNamespace)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
423
src/App.js
423
src/App.js
@ -1,19 +1,16 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import socket from './socket'
|
import socket from './socket'
|
||||||
|
import { Topbar, Sidebar, Messages } from './components'
|
||||||
|
|
||||||
import { Navbar, Nav, Dropdown, Button } from 'react-bootstrap'
|
|
||||||
import uuid from 'uuid'
|
import uuid from 'uuid'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
loading: true,
|
loading: true,
|
||||||
messages: [],
|
allSockets: [],
|
||||||
message: '',
|
allMessages: [],
|
||||||
allNamespaces: [],
|
buffers: [],
|
||||||
chats: [],
|
buffer: '/',
|
||||||
namespace: '/',
|
|
||||||
allUsers: [],
|
|
||||||
user: {},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
@ -21,10 +18,13 @@ class App extends React.Component {
|
|||||||
super()
|
super()
|
||||||
this.state = initialState
|
this.state = initialState
|
||||||
this.socket = socket
|
this.socket = socket
|
||||||
this.handleChange = this.handleChange.bind(this)
|
|
||||||
this.submitMessage = this.submitMessage.bind(this)
|
this.submitMessage = this.submitMessage.bind(this)
|
||||||
this.join = this.join.bind(this)
|
this.join = this.join.bind(this)
|
||||||
this.readMessages = this.readMessages.bind(this)
|
this.readMessages = this.readMessages.bind(this)
|
||||||
|
this.countUnreadMessages = this.countUnreadMessages.bind(this)
|
||||||
|
this.readMessages = this.readMessages.bind(this)
|
||||||
|
this.activateChat = this.activateChat.bind(this)
|
||||||
|
this.query = this.query.bind(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchData() {
|
async fetchData() {
|
||||||
@ -34,10 +34,9 @@ class App extends React.Component {
|
|||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
this.socket.on('connect', () => {
|
this.socket.on('connect', () => {
|
||||||
console.log(`I am ${socket.id}`)
|
console.log(`I am ${this.socket.id}`)
|
||||||
this.join('#projex')
|
this.join('#projex')
|
||||||
const user = { socketId: this.socket.id, nick: this.socket.id }
|
this.socket.nick = this.socket.id
|
||||||
this.setState({ user })
|
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('user connected', user => {
|
this.socket.on('user connected', user => {
|
||||||
@ -48,119 +47,122 @@ class App extends React.Component {
|
|||||||
|
|
||||||
this.socket.on('user disconnected', socketId => {
|
this.socket.on('user disconnected', socketId => {
|
||||||
console.log(`${socketId} disconnected.`)
|
console.log(`${socketId} disconnected.`)
|
||||||
const allUsers = this.state.allUsers.map(u => {
|
// const allUsers = this.state.allUsers.map(u => {
|
||||||
if (u.socketId === socketId) u.offline = true
|
// if (u.socketId === socketId) u.offline = true
|
||||||
return u
|
// return u
|
||||||
})
|
// })
|
||||||
const oldNick = allUsers.find(u => u.socketId === socketId).nick
|
// const oldNick = allUsers.find(u => u.socketId === socketId).nick
|
||||||
this.setState({ allUsers })
|
// this.setState({ allUsers })
|
||||||
// inform channels user was part of
|
// // inform channels user was part of
|
||||||
this.state.chats.map(c => {
|
// this.state.chats.map(c => {
|
||||||
if (c === socketId) {
|
// if (c === socketId) {
|
||||||
const messages = this.state.messages.concat(
|
// const messages = this.state.messages.concat(
|
||||||
this.formatMessage(
|
// this.formatMessage(
|
||||||
`${oldNick} disconnected`,
|
// `${oldNick} disconnected`,
|
||||||
socketId,
|
// socketId,
|
||||||
'[server]',
|
// '[server]',
|
||||||
c,
|
// c,
|
||||||
c === this.state.namespace ? true : false
|
// c === this.state.namespace ? true : false
|
||||||
)
|
// )
|
||||||
)
|
// )
|
||||||
this.setState({ messages })
|
// this.setState({ messages })
|
||||||
}
|
// }
|
||||||
this.state.allNamespaces.map(n => {
|
// this.state.allNamespaces.map(n => {
|
||||||
if (n.namespace === c && n.sockets.find(s => s === socketId)) {
|
// if (n.namespace === c && n.sockets.find(s => s === socketId)) {
|
||||||
const messages = this.state.messages.concat(
|
// const messages = this.state.messages.concat(
|
||||||
this.formatMessage(
|
// this.formatMessage(
|
||||||
`${oldNick} disconnected`,
|
// `${oldNick} disconnected`,
|
||||||
socketId,
|
// socketId,
|
||||||
'[server]',
|
// '[server]',
|
||||||
c,
|
// c,
|
||||||
c === this.state.namespace ? true : false
|
// c === this.state.namespace ? true : false
|
||||||
)
|
// )
|
||||||
)
|
// )
|
||||||
this.setState({ messages })
|
// this.setState({ messages })
|
||||||
}
|
// }
|
||||||
return n
|
// return n
|
||||||
})
|
// })
|
||||||
return c
|
// return c
|
||||||
})
|
// })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('user joined', data => {
|
this.socket.on('user joined', data => {
|
||||||
const { namespace, socketId } = data
|
console.log(data)
|
||||||
const user = this.state.allUsers.find(u => u.socketId === socketId)
|
// const { namespace, socketId } = data
|
||||||
console.log(`${user.nick} joined ${namespace}`)
|
// const user = this.state.allUsers.find(u => u.socketId === socketId)
|
||||||
const messages = this.state.messages.concat(
|
// console.log(`${user.nick} joined ${namespace}`)
|
||||||
this.formatMessage(
|
// const messages = this.state.messages.concat(
|
||||||
`${user.nick} joined ${namespace}`,
|
// this.formatMessage(
|
||||||
socketId,
|
// `${user.nick} joined ${namespace}`,
|
||||||
'[server]',
|
// socketId,
|
||||||
namespace,
|
// '[server]',
|
||||||
namespace === this.state.namespace ? true : false
|
// namespace,
|
||||||
)
|
// namespace === this.state.namespace ? true : false
|
||||||
)
|
// )
|
||||||
this.setState({ messages })
|
// )
|
||||||
|
// this.setState({ messages })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('user left', data => {
|
this.socket.on('user left', data => {
|
||||||
const { namespace, socketId } = data
|
console.log(data)
|
||||||
const user = this.state.allUsers.find(u => u.socketId === socketId)
|
// const { namespace, socketId } = data
|
||||||
console.log(`${user.nick} left ${namespace}`)
|
// const user = this.state.allUsers.find(u => u.socketId === socketId)
|
||||||
const messages = this.state.messages.concat(
|
// console.log(`${user.nick} left ${namespace}`)
|
||||||
this.formatMessage(
|
// const messages = this.state.messages.concat(
|
||||||
`${user.nick} left ${namespace}`,
|
// this.formatMessage(
|
||||||
socketId,
|
// `${user.nick} left ${namespace}`,
|
||||||
'[server]',
|
// socketId,
|
||||||
namespace,
|
// '[server]',
|
||||||
namespace === this.state.namespace ? true : false
|
// namespace,
|
||||||
)
|
// namespace === this.state.namespace ? true : false
|
||||||
)
|
// )
|
||||||
this.setState({ messages })
|
// )
|
||||||
|
// this.setState({ messages })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('changed nick', user => {
|
this.socket.on('changed nick', user => {
|
||||||
if (user.socketId === this.state.user.socketId) return
|
console.log(user)
|
||||||
console.log(`${user.socketId} is now known as ${user.nick}.`)
|
// if (user.socketId === this.state.user.socketId) return
|
||||||
const allUsers = this.state.allUsers
|
// console.log(`${user.socketId} is now known as ${user.nick}.`)
|
||||||
const oldNick = allUsers.find(u => u.socketId === user.socketId).nick
|
// const allUsers = this.state.allUsers
|
||||||
// inform channels user is part of
|
// const oldNick = allUsers.find(u => u.socketId === user.socketId).nick
|
||||||
this.state.chats.map(c => {
|
// // inform channels user is part of
|
||||||
if (c === user.socketId) {
|
// this.state.chats.map(c => {
|
||||||
const messages = this.state.messages.concat(
|
// if (c === user.socketId) {
|
||||||
this.formatMessage(
|
// const messages = this.state.messages.concat(
|
||||||
`${oldNick} is now known as ${user.nick}`,
|
// this.formatMessage(
|
||||||
user.socketId,
|
// `${oldNick} is now known as ${user.nick}`,
|
||||||
'[server]',
|
// user.socketId,
|
||||||
c,
|
// '[server]',
|
||||||
c === this.state.namespace ? true : false
|
// c,
|
||||||
)
|
// c === this.state.namespace ? true : false
|
||||||
)
|
// )
|
||||||
this.setState({ messages })
|
// )
|
||||||
}
|
// this.setState({ messages })
|
||||||
this.state.allNamespaces.map(n => {
|
// }
|
||||||
if (n.namespace === c && n.sockets.find(s => s === user.socketId)) {
|
// this.state.allNamespaces.map(n => {
|
||||||
const messages = this.state.messages.concat(
|
// if (n.namespace === c && n.sockets.find(s => s === user.socketId)) {
|
||||||
this.formatMessage(
|
// const messages = this.state.messages.concat(
|
||||||
`${oldNick} is now known as ${user.nick}`,
|
// this.formatMessage(
|
||||||
user.socketId,
|
// `${oldNick} is now known as ${user.nick}`,
|
||||||
'[server]',
|
// user.socketId,
|
||||||
c,
|
// '[server]',
|
||||||
c === this.state.namespace ? true : false
|
// c,
|
||||||
)
|
// c === this.state.namespace ? true : false
|
||||||
)
|
// )
|
||||||
this.setState({ messages })
|
// )
|
||||||
}
|
// this.setState({ messages })
|
||||||
return n
|
// }
|
||||||
})
|
// return n
|
||||||
return c
|
// })
|
||||||
})
|
// return c
|
||||||
// update nick
|
// })
|
||||||
allUsers.map(u => {
|
// // update nick
|
||||||
if (u.socketId === user.socketId) u.nick = user.nick
|
// allUsers.map(u => {
|
||||||
return u
|
// if (u.socketId === user.socketId) u.nick = user.nick
|
||||||
})
|
// return u
|
||||||
this.setState({ allUsers })
|
// })
|
||||||
|
// this.setState({ allUsers })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('got namespace', namespace => {
|
this.socket.on('got namespace', namespace => {
|
||||||
@ -201,10 +203,6 @@ class App extends React.Component {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange(e) {
|
|
||||||
this.setState({ [e.target.name]: e.target.value })
|
|
||||||
}
|
|
||||||
|
|
||||||
parseCommand() {
|
parseCommand() {
|
||||||
const args = this.state.message.split(' ')
|
const args = this.state.message.split(' ')
|
||||||
const cmd = args[0].slice(1)
|
const cmd = args[0].slice(1)
|
||||||
@ -239,15 +237,14 @@ class App extends React.Component {
|
|||||||
}
|
}
|
||||||
return message
|
return message
|
||||||
}
|
}
|
||||||
submitMessage(e) {
|
submitMessage(msg) {
|
||||||
e.preventDefault()
|
console.log(msg)
|
||||||
|
if (msg[0] === '/') return this.parseCommand()
|
||||||
if (this.state.message[0] === '/') return this.parseCommand()
|
if (!msg.length > 0) return
|
||||||
if (!this.state.message.length > 0) return
|
|
||||||
|
|
||||||
this.sendMessage(
|
this.sendMessage(
|
||||||
this.formatMessage(
|
this.formatMessage(
|
||||||
this.state.message,
|
msg,
|
||||||
this.state.user.socketId,
|
this.state.user.socketId,
|
||||||
this.state.user.nick,
|
this.state.user.nick,
|
||||||
this.state.namespace
|
this.state.namespace
|
||||||
@ -262,13 +259,13 @@ class App extends React.Component {
|
|||||||
renderError() {
|
renderError() {
|
||||||
return <div>something went wrong.</div>
|
return <div>something went wrong.</div>
|
||||||
}
|
}
|
||||||
join(namespace) {
|
join(room) {
|
||||||
if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
|
if (room[0] !== '#') return alert('Use a leading #, silly!')
|
||||||
if (this.state.chats.find(c => c === namespace)) return
|
if (this.state.chats.find(c => c === room)) return
|
||||||
console.log('joining', namespace)
|
console.log('joining', room)
|
||||||
const chats = this.state.chats.concat(namespace)
|
const chats = this.state.chats.concat(room)
|
||||||
this.socket.emit('join', namespace)
|
this.socket.emit('join', room, ack => console.log('ack', ack))
|
||||||
this.setState({ namespace, chats })
|
this.setState({ room, chats })
|
||||||
}
|
}
|
||||||
part(namespace) {
|
part(namespace) {
|
||||||
console.log(`leaving ${namespace}`)
|
console.log(`leaving ${namespace}`)
|
||||||
@ -335,157 +332,21 @@ class App extends React.Component {
|
|||||||
: this.state.namespace === this.state.user.socketId
|
: this.state.namespace === this.state.user.socketId
|
||||||
? 'Namespace'
|
? 'Namespace'
|
||||||
: 'Chat with'
|
: 'Chat with'
|
||||||
|
console.log(this.socket)
|
||||||
return (
|
return (
|
||||||
<main role="main" className="d-flex h-100 flex-column">
|
<main role="main" className="d-flex h-100 flex-column">
|
||||||
{/*Navbar*/}
|
<Topbar query={this.query} join={this.join} {...this.state} />
|
||||||
<Navbar bg="dark" variant="dark" expand="lg">
|
|
||||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
|
||||||
<Navbar.Collapse id="basic-navbar-nav">
|
|
||||||
<Nav className="ml-auto mr-3">
|
|
||||||
<Dropdown>
|
|
||||||
<Dropdown.Toggle variant="dark" id="dropdown-basic">
|
|
||||||
Users
|
|
||||||
</Dropdown.Toggle>
|
|
||||||
|
|
||||||
<Dropdown.Menu className="bg-dark">
|
|
||||||
{this.state.allUsers
|
|
||||||
.filter(
|
|
||||||
u => u.socketId !== this.socket.id && u.offline !== true
|
|
||||||
)
|
|
||||||
.map(u => (
|
|
||||||
<Dropdown.Item
|
|
||||||
key={u.socketId}
|
|
||||||
className="bg-dark text-light"
|
|
||||||
onClick={() => this.query(u)}
|
|
||||||
>
|
|
||||||
{u.nick}
|
|
||||||
</Dropdown.Item>
|
|
||||||
))}
|
|
||||||
</Dropdown.Menu>
|
|
||||||
</Dropdown>
|
|
||||||
<Dropdown>
|
|
||||||
<Dropdown.Toggle variant="dark" id="dropdown-basic">
|
|
||||||
Channels
|
|
||||||
</Dropdown.Toggle>
|
|
||||||
|
|
||||||
<Dropdown.Menu className="bg-dark">
|
|
||||||
{this.state.allNamespaces
|
|
||||||
.filter(n => n.namespace[0] === '#')
|
|
||||||
.map(r => (
|
|
||||||
<Dropdown.Item
|
|
||||||
key={r.namespace}
|
|
||||||
className="bg-dark text-light"
|
|
||||||
onClick={() => this.join(r.namespace)}
|
|
||||||
>
|
|
||||||
{r.namespace}
|
|
||||||
</Dropdown.Item>
|
|
||||||
))}
|
|
||||||
</Dropdown.Menu>
|
|
||||||
</Dropdown>
|
|
||||||
</Nav>
|
|
||||||
</Navbar.Collapse>
|
|
||||||
</Navbar>
|
|
||||||
|
|
||||||
<div className="d-flex h-100">
|
<div className="d-flex h-100">
|
||||||
{/*Side Bar 2*/}
|
<Sidebar
|
||||||
<div
|
activateChat={this.activateChat}
|
||||||
className="d-flex flex-column col-sm-2 bg-dark text-light p-2"
|
countUnreadMessages={this.countUnreadMessages}
|
||||||
id="sidebar2"
|
{...this.state}
|
||||||
>
|
/>
|
||||||
<h5 className=" border-bottom pb-2">Chats</h5>
|
<Messages
|
||||||
<Button
|
title={title}
|
||||||
key="/"
|
submitMessage={this.submitMessage}
|
||||||
className="btn btn-dark d-flex"
|
{...this.state}
|
||||||
onClick={() => this.activateChat('/')}
|
/>
|
||||||
>
|
|
||||||
<div className="mr-auto">server</div>
|
|
||||||
{/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
|
|
||||||
</Button>
|
|
||||||
{this.state.chats.map(c => (
|
|
||||||
<Button
|
|
||||||
key={c}
|
|
||||||
className="btn btn-dark d-flex"
|
|
||||||
onClick={() => this.activateChat(c)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`mr-auto ${
|
|
||||||
this.countUnreadMessages(c) > 0 ? 'text-danger' : ''
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{c[0] === '#' ||
|
|
||||||
!this.state.allUsers.find(u => u.socketId === c)
|
|
||||||
? c
|
|
||||||
: this.state.allUsers.find(u => u.socketId === c)['nick']}
|
|
||||||
</div>
|
|
||||||
{this.countUnreadMessages(c) > 0 ? (
|
|
||||||
<div className="mr-auto badge bg-danger">
|
|
||||||
{this.countUnreadMessages(c)}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
{/* user count for channels */}
|
|
||||||
{c[0] === '#' &&
|
|
||||||
this.state.allNamespaces &&
|
|
||||||
this.state.allNamespaces.find(n => n.namespace === c) ? (
|
|
||||||
<div className="ml-auto">
|
|
||||||
{
|
|
||||||
this.state.allNamespaces.find(n => n.namespace === c)
|
|
||||||
.sockets.length
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/*Main Section*/}
|
|
||||||
<div className="bg-secondary d-flex flex-column flex-grow-1 px-2 pb-4">
|
|
||||||
{/*Main Section Header*/}
|
|
||||||
<div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
|
|
||||||
<h4 className="mr-auto ml-3">
|
|
||||||
{title} {this.state.namespace}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
{/*Main Section Content*/}
|
|
||||||
<div className="d-flex flex-column border border-secondary flex-grow-1">
|
|
||||||
<div className="bg-dark flex-grow-1 p-2 text-light">
|
|
||||||
{this.state.messages
|
|
||||||
.filter(
|
|
||||||
m =>
|
|
||||||
(m.to[0] === '#' && m.to === this.state.namespace) ||
|
|
||||||
(m.to[0] !== '#' && m.from === this.state.namespace) ||
|
|
||||||
(m.from === this.state.user.socketId &&
|
|
||||||
m.to === this.state.namespace)
|
|
||||||
)
|
|
||||||
.map(m => (
|
|
||||||
<div
|
|
||||||
className="row d-flex justify-content-between"
|
|
||||||
key={m.id}
|
|
||||||
>
|
|
||||||
<div className="col">{m.date}</div>
|
|
||||||
<div className="col">{m.nick}</div>
|
|
||||||
<div>{m.text}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<form onSubmit={this.submitMessage}>
|
|
||||||
<input
|
|
||||||
className="bg-light p-2 w-100"
|
|
||||||
name="message"
|
|
||||||
value={this.state.message}
|
|
||||||
placeholder="Enter message"
|
|
||||||
onChange={this.handleChange}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
className="btn btn-dark"
|
|
||||||
type="submit"
|
|
||||||
onSubmit={this.submitMessage}
|
|
||||||
>
|
|
||||||
submit as {this.state.user.nick}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
)
|
)
|
||||||
|
|||||||
42
src/components/MessageEntryForm.js
Normal file
42
src/components/MessageEntryForm.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Button } from 'react-bootstrap'
|
||||||
|
|
||||||
|
class MessageEntryForm extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.state = { message: '' }
|
||||||
|
this.handleChange = this.handleChange.bind(this)
|
||||||
|
this.handleSubmit = this.handleSubmit.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange(e) {
|
||||||
|
this.setState({ [e.target.name]: e.target.value })
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSubmit(e) {
|
||||||
|
e.preventDefault()
|
||||||
|
this.props.submitMessage(this.state.message)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<form onSubmit={this.handleSubmit}>
|
||||||
|
<input
|
||||||
|
className="bg-light p-2 w-100"
|
||||||
|
name="message"
|
||||||
|
value={this.state.message}
|
||||||
|
placeholder="Enter message"
|
||||||
|
onChange={this.handleChange}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
className="btn btn-dark"
|
||||||
|
type="submit"
|
||||||
|
onSubmit={this.handleSubmit}
|
||||||
|
>
|
||||||
|
submit as {this.props.user.nick}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MessageEntryForm
|
||||||
37
src/components/Messages.js
Normal file
37
src/components/Messages.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import MessageEntryForm from './MessageEntryForm'
|
||||||
|
const Messages = props => {
|
||||||
|
const { title, namespace, messages, user, submitMessage } = props
|
||||||
|
return (
|
||||||
|
<div className="bg-secondary d-flex flex-column flex-grow-1 px-2 pb-4">
|
||||||
|
{/*Main Section Header*/}
|
||||||
|
<div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
|
||||||
|
<h4 className="mr-auto ml-3">
|
||||||
|
{title} {namespace}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
{/*Main Section Content*/}
|
||||||
|
<div className="d-flex flex-column border border-secondary flex-grow-1">
|
||||||
|
<div className="bg-dark flex-grow-1 p-2 text-light">
|
||||||
|
{messages
|
||||||
|
.filter(
|
||||||
|
m =>
|
||||||
|
(m.to[0] === '#' && m.to === namespace) ||
|
||||||
|
(m.to[0] !== '#' && m.from === namespace) ||
|
||||||
|
(m.from === user.socketId && m.to === namespace)
|
||||||
|
)
|
||||||
|
.map(m => (
|
||||||
|
<div className="row d-flex justify-content-between" key={m.id}>
|
||||||
|
<div className="col">{m.date}</div>
|
||||||
|
<div className="col">{m.nick}</div>
|
||||||
|
<div>{m.text}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<MessageEntryForm submitMessage={submitMessage} user={user} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Messages
|
||||||
60
src/components/Sidebar.js
Normal file
60
src/components/Sidebar.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Button } from 'react-bootstrap'
|
||||||
|
|
||||||
|
const Sidebar = props => {
|
||||||
|
const {
|
||||||
|
activateChat,
|
||||||
|
chats,
|
||||||
|
allUsers,
|
||||||
|
countUnreadMessages,
|
||||||
|
allNamespaces,
|
||||||
|
} = props
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="d-flex flex-column col-sm-2 bg-dark text-light p-2"
|
||||||
|
id="sidebar2"
|
||||||
|
>
|
||||||
|
<h5 className=" border-bottom pb-2">Chats</h5>
|
||||||
|
<Button
|
||||||
|
key="/"
|
||||||
|
className="btn btn-dark d-flex"
|
||||||
|
onClick={() => activateChat('/')}
|
||||||
|
>
|
||||||
|
<div className="mr-auto">server</div>
|
||||||
|
{/*<div className="ml-auto">{allUsers.length}</div>*/}
|
||||||
|
</Button>
|
||||||
|
{chats.map(c => (
|
||||||
|
<Button
|
||||||
|
key={c}
|
||||||
|
className="btn btn-dark d-flex"
|
||||||
|
onClick={() => activateChat(c)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`mr-auto ${
|
||||||
|
countUnreadMessages(c) > 0 ? 'text-danger' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{c[0] === '#' || !allUsers.find(u => u.socketId === c)
|
||||||
|
? c
|
||||||
|
: allUsers.find(u => u.socketId === c)['nick']}
|
||||||
|
</div>
|
||||||
|
{countUnreadMessages(c) > 0 ? (
|
||||||
|
<div className="mr-auto badge bg-danger">
|
||||||
|
{countUnreadMessages(c)}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{/* user count for channels */}
|
||||||
|
{c[0] === '#' &&
|
||||||
|
allNamespaces &&
|
||||||
|
allNamespaces.find(n => n.namespace === c) ? (
|
||||||
|
<div className="ml-auto">
|
||||||
|
{allNamespaces.find(n => n.namespace === c).sockets.length}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Sidebar
|
||||||
56
src/components/Topbar.js
Normal file
56
src/components/Topbar.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Navbar, Nav, Dropdown } from 'react-bootstrap'
|
||||||
|
|
||||||
|
const Topbar = props => {
|
||||||
|
const { allUsers, user, allNamespaces, query, join } = props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Navbar bg="dark" variant="dark" expand="lg">
|
||||||
|
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||||
|
<Navbar.Collapse id="basic-navbar-nav">
|
||||||
|
<Nav className="ml-auto mr-3">
|
||||||
|
<Dropdown>
|
||||||
|
<Dropdown.Toggle variant="dark" id="dropdown-basic">
|
||||||
|
Users
|
||||||
|
</Dropdown.Toggle>
|
||||||
|
|
||||||
|
<Dropdown.Menu className="bg-dark">
|
||||||
|
{allUsers
|
||||||
|
.filter(u => u.socketId !== user.id && u.offline !== true)
|
||||||
|
.map(u => (
|
||||||
|
<Dropdown.Item
|
||||||
|
key={u.socketId}
|
||||||
|
className="bg-dark text-light"
|
||||||
|
onClick={() => query(u)}
|
||||||
|
>
|
||||||
|
{u.nick}
|
||||||
|
</Dropdown.Item>
|
||||||
|
))}
|
||||||
|
</Dropdown.Menu>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown>
|
||||||
|
<Dropdown.Toggle variant="dark" id="dropdown-basic">
|
||||||
|
Channels
|
||||||
|
</Dropdown.Toggle>
|
||||||
|
|
||||||
|
<Dropdown.Menu className="bg-dark">
|
||||||
|
{allNamespaces
|
||||||
|
.filter(n => n.namespace[0] === '#')
|
||||||
|
.map(r => (
|
||||||
|
<Dropdown.Item
|
||||||
|
key={r.namespace}
|
||||||
|
className="bg-dark text-light"
|
||||||
|
onClick={() => join(r.namespace)}
|
||||||
|
>
|
||||||
|
{r.namespace}
|
||||||
|
</Dropdown.Item>
|
||||||
|
))}
|
||||||
|
</Dropdown.Menu>
|
||||||
|
</Dropdown>
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Navbar>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Topbar
|
||||||
3
src/components/index.js
Normal file
3
src/components/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export { default as Messages } from './Messages'
|
||||||
|
export { default as Sidebar } from './Sidebar'
|
||||||
|
export { default as Topbar } from './Topbar'
|
||||||
Loading…
Reference in New Issue
Block a user