forked from notnull/ircz
Compare commits
No commits in common. "5bf5c2b9837a3e9b4e6070b280d69be1afbe8955" and "0630f346b5776ef5b7e46660081be38b44e4f4bd" have entirely different histories.
5bf5c2b983
...
0630f346b5
@ -4,41 +4,47 @@ module.exports = io => {
|
|||||||
io.on('connection', async socket => {
|
io.on('connection', async socket => {
|
||||||
console.log(`A socket connection to the server has been made: ${socket.id}`)
|
console.log(`A socket connection to the server has been made: ${socket.id}`)
|
||||||
users[socket.id] = { socketId: socket.id, nick: socket.id }
|
users[socket.id] = { socketId: socket.id, nick: socket.id }
|
||||||
|
socket.join('#projex', () => {
|
||||||
// announce to all
|
sendUsers() // back to socket
|
||||||
socket.broadcast.emit('user connected', users[socket.id])
|
sendUser(users[socket.id]) // announced to all
|
||||||
// send all users TODO remove
|
sendNamespaces()
|
||||||
socket.emit(
|
})
|
||||||
'got users',
|
|
||||||
Object.keys(io.sockets.sockets).map(socketId => users[socketId])
|
|
||||||
)
|
|
||||||
|
|
||||||
socket.on('message', message => {
|
socket.on('message', message => {
|
||||||
console.log('sending message to ', message.to, message)
|
console.log('sending message to namespace', message.namespace, message)
|
||||||
io.to(message.to).emit('message', message)
|
io.to(message.namespace).emit('message', message)
|
||||||
})
|
})
|
||||||
|
|
||||||
socket.on('join', namespace => {
|
socket.on('join', namespace => {
|
||||||
const socketId = socket.id
|
console.log('join:', namespace)
|
||||||
console.log(`${socketId} joins ${namespace}`)
|
|
||||||
socket.join(namespace, () => {
|
socket.join(namespace, () => {
|
||||||
io.to(namespace).emit('user joined', { namespace, socketId })
|
sendNamespaces()
|
||||||
sendNamespace(namespace)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
socket.on('chat', user => {
|
||||||
|
const target = io.sockets.sockets[user.socketId]
|
||||||
|
if (!target) return
|
||||||
|
if (socket.id === target.id) {
|
||||||
|
console.log('Not allowing chat with itself', socket.id, target.id)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// create a shared namespace
|
||||||
|
const namespace = `${socket.id.substr(0, 5)}.${target.id.substr(0, 5)}`
|
||||||
|
console.log(`${socket.id} starts chat with ${target.id} in ${namespace}`)
|
||||||
|
socket.join(namespace)
|
||||||
|
target.join(namespace)
|
||||||
|
sendNamespaces()
|
||||||
|
})
|
||||||
|
|
||||||
socket.on('part', namespace => {
|
socket.on('part', namespace => {
|
||||||
const socketId = socket.id
|
console.log('part', socket.id, namespace)
|
||||||
console.log('part', socketId, namespace)
|
|
||||||
socket.leave(namespace, () => {
|
socket.leave(namespace, () => {
|
||||||
io.to(namespace).emit('user left', { namespace, socketId })
|
sendNamespaces()
|
||||||
sendNamespace(namespace)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
socket.on('change nick', nick => {
|
socket.on('change nick', nick => {
|
||||||
io.emit('changed nick', { socketId: socket.id, nick: nick })
|
io.emit('nick changed', { socketId: socket.id, nick: nick })
|
||||||
users[socket.id]['nick'] = nick
|
|
||||||
})
|
})
|
||||||
|
|
||||||
socket.on('get namespaces', () => sendNamespaces())
|
socket.on('get namespaces', () => sendNamespaces())
|
||||||
@ -51,19 +57,14 @@ module.exports = io => {
|
|||||||
io.emit('got namespaces', namespaces)
|
io.emit('got namespaces', namespaces)
|
||||||
}
|
}
|
||||||
|
|
||||||
socket.on('disconnect', async () => {
|
const sendUser = user => socket.broadcast.emit('user connected', user)
|
||||||
io.emit('user disconnected', socket.id)
|
const sendUsers = () =>
|
||||||
console.log(`${socket.id} has disconnected.`)
|
socket.emit('got users', Object.keys(users).map(u => users[u]))
|
||||||
//sendNamespaces()
|
|
||||||
})
|
|
||||||
|
|
||||||
const sendNamespace = namespace => {
|
socket.on('disconnect', async () => {
|
||||||
if (!io.sockets.adapter.rooms[namespace]) return
|
io.emit('user disconnected', { socketId: socket.id })
|
||||||
const newNamespace = {
|
console.log(`${socket.id} has disconnected.`)
|
||||||
namespace,
|
sendNamespaces()
|
||||||
sockets: Object.keys(io.sockets.adapter.rooms[namespace].sockets),
|
})
|
||||||
}
|
|
||||||
io.emit('got namespace', newNamespace)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
340
src/App.js
340
src/App.js
@ -9,8 +9,7 @@ const initialState = {
|
|||||||
loading: true,
|
loading: true,
|
||||||
messages: [],
|
messages: [],
|
||||||
message: '',
|
message: '',
|
||||||
allNamespaces: [],
|
namespaces: [],
|
||||||
chats: [],
|
|
||||||
namespace: '/',
|
namespace: '/',
|
||||||
allUsers: [],
|
allUsers: [],
|
||||||
user: {},
|
user: {},
|
||||||
@ -22,7 +21,7 @@ class App extends React.Component {
|
|||||||
this.state = initialState
|
this.state = initialState
|
||||||
this.socket = socket
|
this.socket = socket
|
||||||
this.handleChange = this.handleChange.bind(this)
|
this.handleChange = this.handleChange.bind(this)
|
||||||
this.submitMessage = this.submitMessage.bind(this)
|
this.handleSubmit = this.handleSubmit.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)
|
||||||
}
|
}
|
||||||
@ -35,109 +34,35 @@ class App extends React.Component {
|
|||||||
this.fetchData()
|
this.fetchData()
|
||||||
this.socket.on('connect', () => {
|
this.socket.on('connect', () => {
|
||||||
console.log(`I am ${socket.id}`)
|
console.log(`I am ${socket.id}`)
|
||||||
this.join('#projex')
|
|
||||||
const user = { socketId: this.socket.id, nick: this.socket.id }
|
const user = { socketId: this.socket.id, nick: this.socket.id }
|
||||||
this.setState({ user })
|
this.setState({ user, namespace: this.socket.id })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('user connected', user => {
|
this.socket.on('user connected', user => {
|
||||||
console.log(`${user.nick} connected.`)
|
console.log('a new user connected!', user.nick)
|
||||||
const allUsers = this.state.allUsers.concat(user)
|
const allUsers = this.state.allUsers.concat(user)
|
||||||
this.setState({ allUsers })
|
this.setState({ allUsers })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('user disconnected', socketId => {
|
this.socket.on('nick changed', user => {
|
||||||
console.log(`${socketId} disconnected.`)
|
|
||||||
const allUsers = this.state.allUsers.map(u => {
|
|
||||||
if (u.socketId === socketId) u.offline = true
|
|
||||||
return u
|
|
||||||
})
|
|
||||||
const oldNick = allUsers.find(u => u.socketId === socketId).nick
|
|
||||||
this.setState({ allUsers })
|
|
||||||
// inform channels user was part of
|
|
||||||
this.state.chats.map(c => {
|
|
||||||
if (c === socketId) {
|
|
||||||
const messages = this.state.messages.concat(
|
|
||||||
this.addNotification(`${oldNick} disconnected`, c)
|
|
||||||
)
|
|
||||||
this.setState({ messages })
|
|
||||||
}
|
|
||||||
this.state.allNamespaces.map(n => {
|
|
||||||
if (n.namespace === c && n.sockets.find(s => s === socketId)) {
|
|
||||||
const messages = this.state.messages.concat(
|
|
||||||
this.addNotification(`${oldNick} disconnected`, c)
|
|
||||||
)
|
|
||||||
this.setState({ messages })
|
|
||||||
}
|
|
||||||
return n
|
|
||||||
})
|
|
||||||
return c
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
this.socket.on('user joined', data => {
|
|
||||||
const { namespace, socketId } = data
|
|
||||||
const user = this.state.allUsers.find(u => u.socketId === socketId)
|
|
||||||
console.log(`${user.nick} joined ${namespace}`)
|
|
||||||
const messages = this.state.messages.concat(
|
|
||||||
this.addNotification(`${user.nick} joined ${namespace}`, namespace)
|
|
||||||
)
|
|
||||||
this.setState({ messages })
|
|
||||||
})
|
|
||||||
|
|
||||||
this.socket.on('user left', data => {
|
|
||||||
const { namespace, socketId } = data
|
|
||||||
const user = this.state.allUsers.find(u => u.socketId === socketId)
|
|
||||||
console.log(`${user.nick} left ${namespace}`)
|
|
||||||
const messages = this.state.messages.concat(
|
|
||||||
this.addNotification(`${user.nick} left ${namespace}`, namespace)
|
|
||||||
)
|
|
||||||
this.setState({ messages })
|
|
||||||
})
|
|
||||||
|
|
||||||
this.socket.on('changed nick', user => {
|
|
||||||
if (user.socketId === this.state.user.socketId) return
|
|
||||||
console.log(`${user.socketId} is now known as ${user.nick}.`)
|
|
||||||
const allUsers = this.state.allUsers
|
const allUsers = this.state.allUsers
|
||||||
const oldNick = allUsers.find(u => u.socketId === user.socketId).nick
|
|
||||||
// inform channels user is part of
|
|
||||||
this.state.chats.map(c => {
|
|
||||||
if (c === user.socketId) {
|
|
||||||
const messages = this.state.messages.concat(
|
|
||||||
this.addNotification(`${oldNick} is now known as ${user.nick}`, c)
|
|
||||||
)
|
|
||||||
this.setState({ messages })
|
|
||||||
}
|
|
||||||
this.state.allNamespaces.map(n => {
|
|
||||||
if (n.namespace === c && n.sockets.find(s => s === user.socketId)) {
|
|
||||||
const messages = this.state.messages.concat(
|
|
||||||
this.addNotification(`${oldNick} is now known as ${user.nick}`, c)
|
|
||||||
)
|
|
||||||
this.setState({ messages })
|
|
||||||
}
|
|
||||||
return n
|
|
||||||
})
|
|
||||||
return c
|
|
||||||
})
|
|
||||||
// update nick
|
|
||||||
allUsers.map(u => {
|
allUsers.map(u => {
|
||||||
if (u.socketId === user.socketId) u.nick = user.nick
|
if (u.socketId === user.socketId) u.nick = user.nick
|
||||||
return u
|
return u
|
||||||
})
|
})
|
||||||
|
console.log('new nick', user)
|
||||||
|
this.setState({ allUsers })
|
||||||
|
})
|
||||||
|
this.socket.on('user disconnected', socketId => {
|
||||||
|
console.log('a user disconnected.', socketId)
|
||||||
|
const oldUsers = this.state.allUsers
|
||||||
|
const allUsers = oldUsers.filter(u => u.socketId !== socketId)
|
||||||
this.setState({ allUsers })
|
this.setState({ allUsers })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('got namespace', namespace => {
|
this.socket.on('got namespaces', namespaces => {
|
||||||
console.log('got namespace:', namespace)
|
console.log('got namespaces:', namespaces)
|
||||||
const allNamespaces = this.state.allNamespaces
|
this.setState({ namespaces })
|
||||||
.filter(n => n.namespace !== namespace.namespace)
|
|
||||||
.concat(namespace)
|
|
||||||
this.setState({ allNamespaces })
|
|
||||||
})
|
|
||||||
|
|
||||||
this.socket.on('got namespaces', allNamespaces => {
|
|
||||||
console.log('got namespaces:', allNamespaces)
|
|
||||||
this.setState({ allNamespaces })
|
|
||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('got users', allUsers => {
|
this.socket.on('got users', allUsers => {
|
||||||
@ -146,23 +71,14 @@ class App extends React.Component {
|
|||||||
})
|
})
|
||||||
|
|
||||||
this.socket.on('message', msg => {
|
this.socket.on('message', msg => {
|
||||||
if (
|
if (msg.namespace === this.state.namespace) msg.read = true
|
||||||
msg.to === this.state.user.socketId &&
|
|
||||||
!this.state.chats.find(c => c === msg.from)
|
|
||||||
) {
|
|
||||||
console.log(`${msg.from} wants to chat with me.`)
|
|
||||||
const chats = this.state.chats.concat(msg.from)
|
|
||||||
this.setState({ chats })
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
(msg.to[0] === '#' && msg.to === this.state.namespace) ||
|
|
||||||
(msg.to[0] !== '#' && msg.from === this.state.namespace)
|
|
||||||
)
|
|
||||||
msg.read = true
|
|
||||||
const messages = this.state.messages.concat(msg)
|
const messages = this.state.messages.concat(msg)
|
||||||
console.log(msg)
|
|
||||||
this.setState({ messages })
|
this.setState({ messages })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this.socket.on('nick change', user => {
|
||||||
|
console.log('new nick', user)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange(e) {
|
handleChange(e) {
|
||||||
@ -172,61 +88,29 @@ class App extends React.Component {
|
|||||||
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)
|
||||||
if (cmd === 'join') {
|
console.log('command:', cmd)
|
||||||
if (!args[1]) {
|
if (cmd === 'join') this.join(args[1])
|
||||||
alert('did you forget a channel to join?')
|
else if (cmd === 'part') this.part(args[1])
|
||||||
return
|
else if (cmd === 'nick') this.nick(args[1])
|
||||||
}
|
|
||||||
this.join(args[1])
|
|
||||||
} else if (cmd === 'part' || cmd === 'leave') {
|
|
||||||
this.part(args[1] ? args[1] : this.state.namespace)
|
|
||||||
} else if (cmd === 'nick') this.nick(args[1])
|
|
||||||
else {
|
|
||||||
alert(`unknown command: ${cmd}`)
|
|
||||||
}
|
|
||||||
this.setState({ message: '' })
|
this.setState({ message: '' })
|
||||||
}
|
}
|
||||||
|
handleSubmit(e) {
|
||||||
addNotification(text, namespace) {
|
|
||||||
return this.formatMessage(
|
|
||||||
text,
|
|
||||||
'server',
|
|
||||||
'server',
|
|
||||||
namespace,
|
|
||||||
namespace === this.state.namespace ? true : false
|
|
||||||
)
|
|
||||||
}
|
|
||||||
formatMessage(text, from, nick, to, read) {
|
|
||||||
if (!text || !from || !to || !nick) {
|
|
||||||
console.log(
|
|
||||||
'[formatMessage] Dropping malformed message (requiring text, from, nick and to).'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
const message = {
|
|
||||||
id: uuid(),
|
|
||||||
date: moment().format('MMMM D YYYY, h:mm a'),
|
|
||||||
text: text,
|
|
||||||
from: from,
|
|
||||||
nick: nick,
|
|
||||||
to: to,
|
|
||||||
read: read,
|
|
||||||
}
|
|
||||||
return message
|
|
||||||
}
|
|
||||||
submitMessage(e) {
|
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
if (this.state.message[0] === '/') return this.parseCommand()
|
if (this.state.message[0] === '/') return this.parseCommand()
|
||||||
if (!this.state.message.length > 0) return
|
|
||||||
|
|
||||||
this.sendMessage(
|
const message = {
|
||||||
this.formatMessage(
|
id: uuid(),
|
||||||
this.state.message,
|
date: moment().format('MMMM D YYYY, h:mm a'),
|
||||||
this.state.user.socketId,
|
socketId: this.socket.id,
|
||||||
this.state.user.nick,
|
text: this.state.message,
|
||||||
this.state.namespace
|
namespace: this.state.namespace,
|
||||||
)
|
from: this.state.nick,
|
||||||
)
|
to: this.state.namespace,
|
||||||
|
read: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
this.sendMessage(message)
|
||||||
this.setState({ message: '' })
|
this.setState({ message: '' })
|
||||||
}
|
}
|
||||||
renderLoading() {
|
renderLoading() {
|
||||||
@ -238,59 +122,37 @@ class App extends React.Component {
|
|||||||
}
|
}
|
||||||
join(namespace) {
|
join(namespace) {
|
||||||
if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
|
if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
|
||||||
if (this.state.chats.find(c => c === namespace)) return
|
|
||||||
console.log('joining', namespace)
|
console.log('joining', namespace)
|
||||||
const chats = this.state.chats.concat(namespace)
|
|
||||||
this.socket.emit('join', namespace)
|
this.socket.emit('join', namespace)
|
||||||
this.setState({ namespace, chats })
|
this.setState({ namespace })
|
||||||
}
|
}
|
||||||
part(namespace) {
|
part(namespace) {
|
||||||
console.log(`leaving ${namespace}`)
|
console.log(`leaving ${namespace}`)
|
||||||
socket.emit('part', namespace)
|
socket.emit('part', namespace)
|
||||||
const chats = this.state.chats.filter(c => c !== namespace)
|
|
||||||
this.setState({ chats, namespace: '/' })
|
|
||||||
}
|
}
|
||||||
nick(nick) {
|
nick(nick) {
|
||||||
if (nick[0] === '#') {
|
|
||||||
alert('nick cannot start with #, sorry!')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
console.log(`Changing nick to ${nick}`)
|
console.log(`Changing nick to ${nick}`)
|
||||||
const user = this.state.user
|
|
||||||
user.nick = nick
|
|
||||||
this.setState({ user })
|
|
||||||
this.socket.emit('change nick', nick)
|
this.socket.emit('change nick', nick)
|
||||||
}
|
}
|
||||||
query(user) {
|
query(user) {
|
||||||
if (this.state.chats.find(c => c === user.socketId)) {
|
console.log(`starting query with ${user.nick}`)
|
||||||
this.setState({ namespace: user.socketId })
|
this.socket.emit('chat', user)
|
||||||
return
|
this.setState({ namespace: user.socketId })
|
||||||
}
|
|
||||||
console.log(`starting chat with ${user.nick}`)
|
|
||||||
const chats = this.state.chats.concat(user.socketId)
|
|
||||||
this.setState({ namespace: user.socketId, chats })
|
|
||||||
}
|
}
|
||||||
sendMessage(msg) {
|
sendMessage(msg) {
|
||||||
this.socket.emit('message', msg)
|
this.socket.emit('message', msg)
|
||||||
if (msg.to[0] !== '#') {
|
|
||||||
if (msg.to === this.state.namespace) msg.read = true
|
|
||||||
const messages = this.state.messages.concat(msg)
|
|
||||||
this.setState({ messages })
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
countUnreadMessages(nsp) {
|
findUnreadMessages(nsp) {
|
||||||
return this.state.messages.filter(
|
return this.state.messages.filter(
|
||||||
m =>
|
m => m.read === false && m.namespace === nsp
|
||||||
!m.read &&
|
|
||||||
(m.to === nsp || (m.to === this.state.user.socketId && m.from === nsp))
|
|
||||||
).length
|
).length
|
||||||
}
|
}
|
||||||
|
|
||||||
readMessages(nsp) {
|
readMessages(nsp) {
|
||||||
const messages = this.state.messages
|
const messages = this.state.messages
|
||||||
messages.map(m => {
|
messages.map(m => {
|
||||||
if (!m.read && (m.to === nsp || m.from === nsp)) {
|
if (m.namespace === nsp && m.read === false) {
|
||||||
m.read = true
|
m.read = true
|
||||||
}
|
}
|
||||||
return m
|
return m
|
||||||
@ -307,8 +169,8 @@ class App extends React.Component {
|
|||||||
this.state.namespace[0] === '#'
|
this.state.namespace[0] === '#'
|
||||||
? 'Channel'
|
? 'Channel'
|
||||||
: this.state.namespace === this.state.user.socketId
|
: this.state.namespace === this.state.user.socketId
|
||||||
? 'Namespace'
|
? 'Me'
|
||||||
: 'Chat with'
|
: 'User'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main role="main" className="d-flex h-100 flex-column">
|
<main role="main" className="d-flex h-100 flex-column">
|
||||||
@ -324,9 +186,7 @@ class App extends React.Component {
|
|||||||
|
|
||||||
<Dropdown.Menu className="bg-dark">
|
<Dropdown.Menu className="bg-dark">
|
||||||
{this.state.allUsers
|
{this.state.allUsers
|
||||||
.filter(
|
.filter(u => u.nick !== this.state.user.nick)
|
||||||
u => u.socketId !== this.socket.id && u.offline !== true
|
|
||||||
)
|
|
||||||
.map(u => (
|
.map(u => (
|
||||||
<Dropdown.Item
|
<Dropdown.Item
|
||||||
key={u.socketId}
|
key={u.socketId}
|
||||||
@ -344,7 +204,7 @@ class App extends React.Component {
|
|||||||
</Dropdown.Toggle>
|
</Dropdown.Toggle>
|
||||||
|
|
||||||
<Dropdown.Menu className="bg-dark">
|
<Dropdown.Menu className="bg-dark">
|
||||||
{this.state.allNamespaces
|
{this.state.namespaces
|
||||||
.filter(n => n.namespace[0] === '#')
|
.filter(n => n.namespace[0] === '#')
|
||||||
.map(r => (
|
.map(r => (
|
||||||
<Dropdown.Item
|
<Dropdown.Item
|
||||||
@ -369,47 +229,48 @@ class App extends React.Component {
|
|||||||
>
|
>
|
||||||
<h5 className=" border-bottom pb-2">Chats</h5>
|
<h5 className=" border-bottom pb-2">Chats</h5>
|
||||||
<Button
|
<Button
|
||||||
key="/"
|
key={this.state.user.socketId}
|
||||||
className="btn btn-dark d-flex"
|
className="btn btn-dark d-flex"
|
||||||
onClick={() => this.activateChat('/')}
|
onClick={() => this.activateChat(this.state.user.socketId)}
|
||||||
>
|
>
|
||||||
<div className="mr-auto">server</div>
|
<div className="mr-auto">server</div>
|
||||||
{/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
|
{/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
|
||||||
</Button>
|
</Button>
|
||||||
{this.state.chats.map(c => (
|
{this.state.namespaces
|
||||||
<Button
|
.filter(
|
||||||
key={c}
|
r =>
|
||||||
className="btn btn-dark d-flex"
|
r.sockets &&
|
||||||
onClick={() => this.activateChat(c)}
|
r.sockets.includes(this.state.user.socketId) &&
|
||||||
>
|
r.namespace !== this.state.user.socketId
|
||||||
<div
|
)
|
||||||
className={`mr-auto ${
|
.map(r => (
|
||||||
this.countUnreadMessages(c) > 0 ? 'text-danger' : ''
|
<Button
|
||||||
}`}
|
key={r.namespace}
|
||||||
|
className="btn btn-dark d-flex"
|
||||||
|
onClick={() => this.activateChat(r.namespace)}
|
||||||
>
|
>
|
||||||
{c[0] === '#' ||
|
<div
|
||||||
!this.state.allUsers.find(u => u.socketId === c)
|
className={`mr-auto ${
|
||||||
? c
|
this.findUnreadMessages(r.namespace) > 0
|
||||||
: this.state.allUsers.find(u => u.socketId === c)['nick']}
|
? 'text-danger'
|
||||||
</div>
|
: ''
|
||||||
{this.countUnreadMessages(c) > 0 ? (
|
}`}
|
||||||
<div className="mr-auto badge bg-danger">
|
>
|
||||||
{this.countUnreadMessages(c)}
|
{r.namespace}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
{/*<div className="mr-auto badge bg-success">
|
||||||
{/* user count for channels */}
|
this.state.messages.filter(
|
||||||
{c[0] === '#' &&
|
m => m.namespace === r.namespace
|
||||||
this.state.allNamespaces &&
|
).length
|
||||||
this.state.allNamespaces.find(n => n.namespace === c) ? (
|
</div> */}
|
||||||
<div className="ml-auto">
|
{this.findUnreadMessages(r.namespace) > 0 ? (
|
||||||
{
|
<div className="mr-auto badge bg-danger">
|
||||||
this.state.allNamespaces.find(n => n.namespace === c)
|
{this.findUnreadMessages(r.namespace)}
|
||||||
.sockets.length
|
</div>
|
||||||
}
|
) : null}
|
||||||
</div>
|
<div className="ml-auto">{r.sockets.length}</div>
|
||||||
) : null}
|
</Button>
|
||||||
</Button>
|
))}
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/*Main Section*/}
|
{/*Main Section*/}
|
||||||
@ -417,34 +278,23 @@ class App extends React.Component {
|
|||||||
{/*Main Section Header*/}
|
{/*Main Section Header*/}
|
||||||
<div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
|
<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">
|
<h4 className="mr-auto ml-3">
|
||||||
{title} {this.state.namespace}
|
{title}: {this.state.namespace}
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
{/*Main Section Content*/}
|
{/*Main Section Content*/}
|
||||||
<div className="d-flex flex-column border border-secondary flex-grow-1">
|
<div className="d-flex flex-column border border-secondary flex-grow-1">
|
||||||
<div className="bg-dark flex-grow-1 p-2 text-light">
|
<div className="bg-dark flex-grow-1 p-2 text-light">
|
||||||
{this.state.messages
|
{this.state.messages
|
||||||
.filter(
|
.filter(m => m.namespace === this.state.namespace)
|
||||||
m =>
|
.map(m => (
|
||||||
(m.to[0] === '#' && m.to === this.state.namespace) ||
|
<div className="d-flex justify-content-between" key={m.id}>
|
||||||
(m.to[0] !== '#' && m.from === this.state.namespace) ||
|
<div>{m.date}</div>
|
||||||
(m.from === this.state.user.socketId &&
|
<div>{m.from}</div>
|
||||||
m.to === this.state.namespace)
|
<div>{m.text}</div>
|
||||||
)
|
</div>
|
||||||
.map(m => {
|
))}
|
||||||
const rowColor = m.from === 'server' ? 'text-secondary' : ''
|
|
||||||
return (
|
|
||||||
<div className={`d-flex ${rowColor}`} key={m.id}>
|
|
||||||
<div className="pr-3 text-nowrap">{m.date}</div>
|
|
||||||
{m.from === 'server' ? null : (
|
|
||||||
<div className="pr-3 text-nowrap">{m.nick}:</div>
|
|
||||||
)}
|
|
||||||
<div className="pr-3 flex-grow-1">{m.text}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
<form onSubmit={this.submitMessage}>
|
<form onSubmit={this.handleSubmit}>
|
||||||
<input
|
<input
|
||||||
className="bg-light p-2 w-100"
|
className="bg-light p-2 w-100"
|
||||||
name="message"
|
name="message"
|
||||||
@ -455,9 +305,9 @@ class App extends React.Component {
|
|||||||
<Button
|
<Button
|
||||||
className="btn btn-dark"
|
className="btn btn-dark"
|
||||||
type="submit"
|
type="submit"
|
||||||
onSubmit={this.submitMessage}
|
onSubmit={this.handleSubmit}
|
||||||
>
|
>
|
||||||
submit as {this.state.user.nick}
|
submit as {this.state.nick}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user