tsr/ircz
1
0
Fork 0
forked from notnull/ircz
Code Releases Activity

Compare commits

base: tsr:774fe6e2629da7cb60cc957a3d47707c2141d85e
Branches Tags
tsr:master
tsr:components
tsr:chats
tsr:join
notnull:components
notnull:chats
notnull:privmsg
notnull:master
...
compare: tsr:5bf5c2b9837a3e9b4e6070b280d69be1afbe8955
Branches Tags
tsr:components
tsr:chats
tsr:join
tsr:master
notnull:components
notnull:chats
notnull:privmsg
notnull:master

2 Commits
774fe6e262 ... 5bf5c2b983

Author SHA1 Message Date
data
5bf5c2b983 grey out notifications 2019-07-28 14:27:17 +01:00
data
abcce5c839 addNotification() for nick, join, part and disconnect 2019-07-28 08:49:54 +01:00
1 changed files with 28 additions and 49 deletions
Show Stats Expand all files Collapse all files

77
src/App.js
View File

@ -58,26 +58,14 @@ class App extends React.Component {
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.addNotification(`${oldNick} disconnected`, c)
`${oldNick} disconnected`,
socketId,
'[server]',
c,
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.addNotification(`${oldNick} disconnected`, c)
`${oldNick} disconnected`,
socketId,
'[server]',
c,
c === this.state.namespace ? true : false
)
) )
this.setState({ messages }) this.setState({ messages })
} }
@ -92,13 +80,7 @@ class App extends React.Component {
const user = this.state.allUsers.find(u => u.socketId === socketId) const user = this.state.allUsers.find(u => u.socketId === socketId)
console.log(`${user.nick} joined ${namespace}`) console.log(`${user.nick} joined ${namespace}`)
const messages = this.state.messages.concat( const messages = this.state.messages.concat(
this.formatMessage( this.addNotification(`${user.nick} joined ${namespace}`, namespace)
`${user.nick} joined ${namespace}`,
socketId,
'[server]',
namespace,
namespace === this.state.namespace ? true : false
)
) )
this.setState({ messages }) this.setState({ messages })
}) })
@ -108,13 +90,7 @@ class App extends React.Component {
const user = this.state.allUsers.find(u => u.socketId === socketId) const user = this.state.allUsers.find(u => u.socketId === socketId)
console.log(`${user.nick} left ${namespace}`) console.log(`${user.nick} left ${namespace}`)
const messages = this.state.messages.concat( const messages = this.state.messages.concat(
this.formatMessage( this.addNotification(`${user.nick} left ${namespace}`, namespace)
`${user.nick} left ${namespace}`,
socketId,
'[server]',
namespace,
namespace === this.state.namespace ? true : false
)
) )
this.setState({ messages }) this.setState({ messages })
}) })
@ -128,26 +104,14 @@ class App extends React.Component {
this.state.chats.map(c => { this.state.chats.map(c => {
if (c === user.socketId) { if (c === user.socketId) {
const messages = this.state.messages.concat( const messages = this.state.messages.concat(
this.formatMessage( this.addNotification(`${oldNick} is now known as ${user.nick}`, c)
`${oldNick} is now known as ${user.nick}`,
user.socketId,
'[server]',
c,
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 === user.socketId)) { if (n.namespace === c && n.sockets.find(s => s === user.socketId)) {
const messages = this.state.messages.concat( const messages = this.state.messages.concat(
this.formatMessage( this.addNotification(`${oldNick} is now known as ${user.nick}`, c)
`${oldNick} is now known as ${user.nick}`,
user.socketId,
'[server]',
c,
c === this.state.namespace ? true : false
)
) )
this.setState({ messages }) this.setState({ messages })
} }
@ -222,6 +186,16 @@ class App extends React.Component {
} }
this.setState({ message: '' }) this.setState({ message: '' })
} }
addNotification(text, namespace) {
return this.formatMessage(
text,
'server',
'server',
namespace,
namespace === this.state.namespace ? true : false
)
}
formatMessage(text, from, nick, to, read) { formatMessage(text, from, nick, to, read) {
if (!text || !from || !to || !nick) { if (!text || !from || !to || !nick) {
console.log( console.log(
@ -457,13 +431,18 @@ class App extends React.Component {
(m.from === this.state.user.socketId && (m.from === this.state.user.socketId &&
m.to === this.state.namespace) m.to === this.state.namespace)
) )
.map(m => ( .map(m => {
<div className="d-flex" key={m.id}> const rowColor = m.from === 'server' ? 'text-secondary' : ''
<div className="p-2 text-nowrap">{m.date}</div> return (
<div className="p-2">{m.nick}</div> <div className={`d-flex ${rowColor}`} key={m.id}>
<div className="p-2 flex-grow-1">{m.text}</div> <div className="pr-3 text-nowrap">{m.date}</div>
</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.submitMessage}>
<input <input