Skip to content

Commit 4b54286

Browse files
jgalianozjgalianoz
committed
[add] scrolled message list
1 parent dfc9e21 commit 4b54286

File tree

7 files changed

+125
-124
lines changed

7 files changed

+125
-124
lines changed

‎npm-debug.log.1835466493‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
0 info it worked if it ends with ok
2+
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
3+
2 info using npm@3.10.8
4+
3 info using node@v7.0.0
5+
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
6+
5 info lifecycle react-chatv2@1.0.0~prebuild: react-chatv2@1.0.0
7+
6 silly lifecycle react-chatv2@1.0.0~prebuild: no script for prebuild, continuing
8+
7 info lifecycle react-chatv2@1.0.0~build: react-chatv2@1.0.0
9+
8 verbose lifecycle react-chatv2@1.0.0~build: unsafe-perm in lifecycle true
10+
9 verbose lifecycle react-chatv2@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/manuel/Documentos/Projects/Reactjs/React-ChatV2/node_modules/.bin:/usr/local/heroku/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
11+
10 verbose lifecycle react-chatv2@1.0.0~build: CWD: /home/manuel/Documentos/Projects/Reactjs/React-ChatV2
12+
11 silly lifecycle react-chatv2@1.0.0~build: Args: [ '-c',
13+
11 silly lifecycle 'browserify -t babelify src/client/app.js > public/bundle.js' ]
14+
12 silly lifecycle react-chatv2@1.0.0~build: Returned: code: 2 signal: null
15+
13 info lifecycle react-chatv2@1.0.0~build: Failed to exec build script
16+
14 verbose stack Error: react-chatv2@1.0.0 build: `browserify -t babelify src/client/app.js > public/bundle.js`
17+
14 verbose stack Exit status 2
18+
14 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
19+
14 verbose stack at emitTwo (events.js:106:13)
20+
14 verbose stack at EventEmitter.emit (events.js:191:7)
21+
14 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
22+
14 verbose stack at emitTwo (events.js:106:13)
23+
14 verbose stack at ChildProcess.emit (events.js:191:7)
24+
14 verbose stack at maybeClose (internal/child_process.js:877:16)
25+
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
26+
15 verbose pkgid react-chatv2@1.0.0
27+
16 verbose cwd /home/manuel/Documentos/Projects/Reactjs/React-ChatV2
28+
17 error Linux 3.19.0-39-generic
29+
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
30+
19 error node v7.0.0
31+
20 error npm v3.10.8
32+
21 error code ELIFECYCLE
33+
22 error react-chatv2@1.0.0 build: `browserify -t babelify src/client/app.js > public/bundle.js`
34+
22 error Exit status 2
35+
23 error Failed at the react-chatv2@1.0.0 build script 'browserify -t babelify src/client/app.js > public/bundle.js'.
36+
23 error Make sure you have the latest version of node.js and npm installed.
37+
23 error If you do, this is most likely a problem with the react-chatv2 package,
38+
23 error not with npm itself.
39+
23 error Tell the author that this fails on your system:
40+
23 error browserify -t babelify src/client/app.js > public/bundle.js
41+
23 error You can get information on how to open an issue for this project with:
42+
23 error npm bugs react-chatv2
43+
23 error Or if that isn't available, you can get their info via:
44+
23 error npm owner ls react-chatv2
45+
23 error There is likely additional logging output above.
46+
24 verbose exit [ 1, true ]

‎npm-debug.log.2765768908‎

Whitespace-only changes.

‎npm-debug.log.2865286534‎

Whitespace-only changes.

‎src/client/Components/Discussions.js‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -27,61 +27,61 @@ export default class Discussions extends React.Component {
2727
const textValue = document.getElementById('textarea');
2828
textValue.addEventListener('keypress', event => {
2929
if ( event.keyCode === 13){
30-
this._dataValue();
30+
this._dataValue(textValue);
3131
event.preventDefault();
3232
}
3333
})
3434
}
3535

36-
_dataValue() {
37-
const textValue = document.getElementById('textarea');
36+
_dataValue(valueMsj) {
3837
const avatar = this.props.avatar;
3938
const username = this.props.username;
40-
let message = { avatar: avatar, username: username, message: textValue.value };
39+
let message = { avatar: avatar, username: username, message: valueMsj.value };
4140

42-
if ( textValue.value !== '' ) {
41+
if ( valueMsj.value !== '' ) {
4342
this.socket.emit('new-message', message);
4443
Notification(message);
45-
textValue.value = '';
44+
valueMsj.value = '';
4645
}
4746
}
4847

4948
_Message(message) {
49+
const contMessage = document.getElementById('MessageList');
5050
this.state.messages.push( message );
5151
let MessageGlobal = this.state.messages;
5252
this.setState({ messages: MessageGlobal });
53+
54+
contMessage.scrollTop = contMessage.scrollHeight;
5355
}
5456

5557
render(){
56-
return <div className="conversationBody">
57-
<header className="header-user">
58-
59-
<figure className="avatar">
60-
<img src={this.props.avatar} width="30" height="30" />
61-
</figure>
62-
63-
<h2 className="header-user-username">
64-
{ `${this.props.username}` }
65-
</h2>
66-
67-
</header>
68-
69-
<section className="Message-list">
70-
<MessageList
71-
messages={this.state.messages}/>
72-
73-
<form className="Message-form" method="POST">
74-
<textarea
75-
id="textarea"
76-
rows="1"
77-
placeholder="Write message..."
78-
autoComplete="false"
79-
autoFocus="true"></textarea>
80-
<button type="submit">Send</button>
81-
</form>
82-
83-
</section>
84-
85-
</div>
58+
return <section className="conversationBody">
59+
<div className="header-user">
60+
<figure className="avatar">
61+
<img src={this.props.avatar} width="30" height="30" />
62+
</figure>
63+
64+
<h2 className="header-user-username">
65+
{ `${this.props.username}` }
66+
</h2>
67+
</div>
68+
69+
70+
<MessageList
71+
messages={this.state.messages}/>
72+
73+
<form className="Message-form" method="POST">
74+
<textarea
75+
id="textarea"
76+
rows="1"
77+
placeholder="Write message..."
78+
autoComplete="false"
79+
autoFocus="true"></textarea>
80+
<button type="submit">
81+
<i className="material-icons">send</i>
82+
</button>
83+
</form>
84+
85+
</section>
8686
}
8787
}

‎src/client/Components/MessageList.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import uid from 'uid';
33

44
export default function MessageList (props){
5-
return <div>
5+
return <section id="MessageList" className="ListMessage">
66
{
77
props.messages.map((item) => {
88

@@ -12,7 +12,6 @@ export default function MessageList (props){
1212
<figure className="avatar Message-avatar">
1313
<img title={ item.username } src={ item.avatar } width="40" height="40" />
1414
</figure>
15-
<h3 className="Message-username" >{ item.username }:</h3>
1615
<div className="Message-Body">
1716
<div>
1817
<p>
@@ -24,5 +23,5 @@ export default function MessageList (props){
2423

2524
})
2625
}
27-
</div>
26+
</section>
2827
}

‎src/client/stylus/style.styl‎

Lines changed: 39 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -27,90 +27,47 @@ figure
2727
margin-bottom .5em
2828

2929
.conversationBody
30-
display flex
31-
min-height 100vh
32-
flex-direction row
33-
justify-content space-between
34-
35-
.header-user
36-
background purpe
3730
display flex
3831
flex-direction column
39-
flex-wrap wrap
40-
padding .4em
41-
text-align center
42-
width 300px
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-
55-
56-
.opacity-enter
57-
opacity 0.01
58-
transition .3s
59-
transform scale(.9)
60-
&.opacity-enter-active
61-
opacity 1
62-
transform scale(1)
63-
64-
.opacity-leave
65-
opacity 1
66-
transition .3s
67-
68-
&.opacity-leave-active
69-
opacity 0
70-
transform scale(.9)
71-
72-
.Message
73-
align-items center
74-
display flex
75-
flex-direction row
76-
flex-wrap wrap
77-
padding .1em
78-
margin-bottom 1em
79-
80-
.Message-list
81-
height 98vh
8232
justify-content space-between
83-
display flex
84-
flex-direction column
85-
padding 20px
86-
overflow-y auto
33+
height 100%
8734
width 100%
88-
box-sizing border-box
89-
> div
90-
height 100%
91-
display flex
92-
flex-direction column
93-
justify-content flex-end
94-
95-
96-
.Message-form
97-
display flex
98-
> textarea
99-
box-sizing border-box
100-
width 100%
101-
resize none
102-
padding .8em
103-
outline 0
104-
border 0
105-
border 1px solid #ccc
106-
height 47px
107-
border-radius 5px
108-
109-
110-
.Message-username
111-
font-size 1em
112-
color blues
113-
margin-right .5em
11435

115-
.Message-avatar
116-
margin-right 1em
36+
.header-user
37+
background purpe
38+
padding 1em
39+
40+
.ListMessage
41+
box-sizing border-box
42+
display flex
43+
flex-direction column
44+
height calc(100vh - 186.59px)
45+
overflow-y auto
46+
padding 20px
47+
width 100%
48+
49+
.Message
50+
margin-bottom .5em
51+
&-avatar
52+
float left
53+
54+
.Message-form
55+
position fixed
56+
bottom 0
57+
left 0
58+
padding 20px 30px
59+
display flex
60+
align-items center
61+
width 100%
62+
box-sizing border-box
63+
border-top 1px solid #dcdcdc
64+
> textarea
65+
border 1px solid #dddddc
66+
border-radius 5px
67+
color #273b47
68+
font-size 16px
69+
padding .8em
70+
outline 0
71+
font-family Lato,sans-serif
72+
resize none
73+
width 100%

‎src/client/views/index.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ export default function Index (props) {
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>{ props.title }</title>
99
<link rel="stylesheet" href="style.css" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
1011
</head>
1112
<body>
1213
<section className="container">
13-
<div className="" id="conversation">
14-
15-
</div>
14+
<div className="" id="conversation"></div>
1615
</section>
1716
<script src="bundle.js"></script>
1817
</body>

0 commit comments

Comments
 (0)