Skip to content

Commit 851cf9c

Browse files
jgalianozjgalianoz
committed
Message list
1 parent d5b36f6 commit 851cf9c

File tree

8 files changed

+204
-32
lines changed

8 files changed

+204
-32
lines changed

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"scripts": {
77
"stylus": "stylus -u nib -c -o public src/client/stylus/style.styl",
88
"build": "browserify -t babelify src/client/app.js > public/bundle.js",
9-
"server": "babel-node src/server/index.js"
9+
"server": "babel-node src/server/index.js",
10+
"start": "npm run stylus && npm run build && npm run server"
1011
},
1112
"author": "@Manuel_Galindez",
1213
"license": "MIT",
@@ -24,6 +25,9 @@
2425
"dependencies": {
2526
"react": "^15.3.2",
2627
"react-addons-css-transition-group": "^15.3.2",
27-
"react-dom": "^15.3.2"
28+
"react-dom": "^15.3.2",
29+
"socket.io": "^1.5.0",
30+
"socket.io-client": "^1.5.0",
31+
"uid": "0.0.2"
2832
}
2933
}

‎src/client/Components/ConversationUser.js‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default class ConversationUser extends React.Component {
2929
_onChange(input) {
3030
const setValue = {};
3131
setValue[input.target.name] = input.target.value;
32-
console.log(setValue);
3332
this.setState(setValue);
3433
}
3534

@@ -39,7 +38,7 @@ export default class ConversationUser extends React.Component {
3938
let name, avatar;
4039

4140
if ( this.state.username === '' ) {
42-
name = 'Anonimo';
41+
name = 'Anonymous';
4342
} else {
4443
name = this.state.username;
4544
}
@@ -72,24 +71,26 @@ export default class ConversationUser extends React.Component {
7271
let form;
7372

7473
if ( this.state.active ) {
75-
form = <form onSubmit={this._onSubmit} className="conversationUser">
76-
<label className="labelA">Insert you username</label>
77-
<input
78-
className="inputA"
79-
type="text"
80-
name="username"
81-
placeholder="Write you username"
82-
onChange={this._onChange} />
83-
<label className="labelA">Insert you avatar</label>
84-
<input
85-
className="inputA"
86-
type="text"
87-
name="avatar"
88-
placeholder="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unof.svg.png"
89-
onChange={this._onChange} />
90-
91-
<input className="btn-sub" type="submit" value="Send"/>
92-
</form>
74+
form = <div className="discussions-wrapper">
75+
<form onSubmit={this._onSubmit} className="conversationUser">
76+
<label className="labelA">Insert you username</label>
77+
<input
78+
className="inputA"
79+
type="text"
80+
name="username"
81+
placeholder="Write you username"
82+
onChange={this._onChange} />
83+
<label className="labelA">Paste you url avatar</label>
84+
<input
85+
className="inputA"
86+
type="text"
87+
name="avatar"
88+
placeholder="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unof.svg.png"
89+
onChange={this._onChange} />
90+
91+
<input className="btn-sub" type="submit" value="Send"/>
92+
</form>
93+
</div>
9394

9495
} else {
9596
form = null

‎src/client/Components/Discussions.js‎

Lines changed: 60 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,65 @@
11
import React from 'react';
2+
import io from 'socket.io-client';
3+
import MessageList from './MessageList';
24

3-
export default function Discussions(props){
4-
return <div>
5-
<h1>
6-
{ `${props.username}` }
7-
</h1>
85

9-
<img src={props.avatar} width="30" height="30" />
6+
export default class Discussions extends React.Component {
107

11-
</div>
8+
constructor(props){
9+
super(props)
10+
this.state = { messages: [] };
11+
this._dataValue = this._dataValue.bind(this);
12+
this._MessageSend = this._MessageSend.bind(this);
13+
}
14+
15+
componentDidMount(){
16+
this.socket = io('localhost:3000');
17+
}
18+
19+
_dataValue(text) {
20+
let textValue = text.target.value;
21+
const avatar = this.props.avatar;
22+
const username = this.props.username;
23+
24+
let message = { avatar: avatar, username: username, message: textValue };
25+
this.state.messages.push( message );
26+
}
27+
28+
_MessageSend(ev) {
29+
ev.preventDefault();
30+
let MessageGlobal = this.state.messages;
31+
32+
for ( let cont = 0; cont <= MessageGlobal.length -1; cont++) {
33+
if ( cont === MessageGlobal.length -1 ) {
34+
let dataMessage = [ MessageGlobal[cont] ];
35+
this.setState({ messages: dataMessage })
36+
}
37+
}
38+
document.getElementById('textarea').value = '';
39+
}
40+
41+
render(){
42+
return <div className="conversationBody">
43+
<header className="header-user">
44+
<h2 className="header-user-username">
45+
{ `${this.props.username}` }
46+
</h2>
47+
48+
<figure className="avatar">
49+
<img src={this.props.avatar} width="30" height="30" />
50+
</figure>
51+
</header>
52+
53+
<section className="Message-list">
54+
<MessageList messages={this.state.messages} />
55+
</section>
56+
57+
58+
<form className="Message-form" method="POST">
59+
<textarea id="textarea" placeholder="Write message..." onChange={this._dataValue}></textarea>
60+
<button type="submit" onClick={ this._MessageSend }>Click</button>
61+
</form>
62+
63+
</div>
64+
}
1265
}

‎src/client/Components/MessageList.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import uid from 'uid';
3+
4+
export default function MessageList (props){
5+
return <div>
6+
{
7+
props.messages.map((item) => {
8+
9+
let id = uid()
10+
11+
return <article key={id} className="Message">
12+
<figure className="avatar Message-avatar">
13+
<img title={ item.username } src={ item.avatar } width="40" height="40" />
14+
</figure>
15+
<h3 className="Message-username" >{ item.username }:</h3>
16+
<div className="Message-Body">
17+
<div>
18+
<p>
19+
{ item.message }
20+
</p>
21+
</div>
22+
</div>
23+
</article>
24+
})
25+
}
26+
</div>
27+
}

‎src/client/stylus/colours.styl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
oranges = #F77A52
22
gray = #8d8d8d
33
blues = #2FA48A
4+
greens = #6ca717

‎src/client/stylus/style.styl‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@
77
body
88
font-size 16px
99

10+
h1
11+
h2
12+
h3
13+
figure
14+
margin 0
15+
padding 0
16+
1017
.conversationUser
1118
display flex
1219
flex-direction column
@@ -19,6 +26,32 @@ body
1926
.labelA
2027
margin-bottom .5em
2128

29+
.conversationBody
30+
display flex
31+
min-height 100vh
32+
flex-direction column
33+
justify-content space-between
34+
35+
.header-user
36+
background greens
37+
display flex
38+
flex-direction row
39+
flex-wrap wrap
40+
justify-content space-between
41+
align-items center
42+
padding .4em
43+
z-index 1
44+
45+
46+
&-username
47+
font-size 1.2em
48+
color #FFF
49+
font-weight bold
50+
51+
.avatar
52+
> img
53+
border-radius 50%
54+
2255

2356
.opacity-enter
2457
opacity 0.01
@@ -35,3 +68,40 @@ body
3568
&.opacity-leave-active
3669
opacity 0
3770
transform scale(.9)
71+
72+
.Message
73+
display flex
74+
flex-direction row
75+
flex-wrap wrap
76+
align-items center
77+
78+
.Message-list
79+
height 80vh
80+
display flex
81+
flex-direction column-reverse
82+
padding 20px
83+
overflow-y auto
84+
width 100%
85+
box-sizing border-box
86+
87+
88+
.Message-form
89+
> textarea
90+
box-sizing border-box
91+
width 100%
92+
resize none
93+
padding .8em
94+
outline 0
95+
border 0
96+
border 1px solid #ccc
97+
height 47px
98+
border-radius 5px
99+
100+
101+
.Message-username
102+
font-size 1em
103+
color blues
104+
margin-right .5em
105+
106+
.Message-avatar
107+
margin-right 1em

‎src/client/stylus/util.styl‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
.conversation-wrapper
2-
max-width 680px
2+
max-width 1000px
33
margin 0 auto
44
padding 0 1em
5+
6+
.discussions-wrapper
7+
max-width 680px
8+
margin 0 auto

‎src/server/index.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import express from 'express';
2+
import http from 'http';
23
import engine from 'react-engine';
34
import path from 'path';
5+
import sckengine from 'socket.io';
46

57

68
const port = process.env.PORT || 3000;
@@ -15,7 +17,6 @@ app.engine('.jsx', engine.server.create());
1517
//Configuramos las rutas de las vistas
1618
app.set('views', path.join(__dirname, '../client/views'));
1719

18-
1920
//Indicamos que el engine a usar es el de archivos .jsx
2021
app.set('view engine', 'jsx');
2122

@@ -24,4 +25,15 @@ app.set('view', engine.expressView);
2425

2526
app.get('/', (req, res) => res.render('index', { title: 'Chat using React.js' }));
2627

27-
app.listen(port, () => console.log(`Server listen in localhost ${port}`));
28+
let server = http.createServer(app).listen(port, () => console.log(`Server listen in localhost ${port}`) )
29+
30+
const io = sckengine.listen(server);
31+
32+
io.on('connection', (socket) => {
33+
console.log('New user connect');
34+
35+
socket.on('new messages', (msj) => {
36+
io.emit('message', msj);
37+
})
38+
39+
})

0 commit comments

Comments
 (0)