Skip to content

Commit ec2ec41

Browse files
howareyouhelenhowareyouhelen
authored
Merge pull request #19 from yowiputra/feature/chat
Feature/chat
2 parents 120d8eb + 1072d3e commit ec2ec41

File tree

4 files changed

+264
-40
lines changed

4 files changed

+264
-40
lines changed

‎client/package-lock.json

+14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"react-router": "^4.1.2",
2828
"react-router-dom": "^4.1.2",
2929
"react-swipe-card": "^0.1.4",
30-
"react-popupbox":"^2.0.1",
30+
"react-popupbox": "^2.0.1",
3131
"react-tap-event-plugin": "^2.0.1",
3232
"redux": "^3.7.2",
3333
"redux-devtools-extension": "^2.13.2",

‎client/src/MainApp/PopupChat.jsx

+84-37
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,113 @@
11
import React, { Component } from 'react';
22
//Used react-popupbox because of ease of integration. However, if given more time, would have switched it to the official reactjs 'react-modal' package that has the same functionality https://reactcommunity.org/react-modal/
33
import { PopupboxManager, PopupboxContainer } from 'react-popupbox';
4+
import { connect } from 'react-redux';
45

56
class PopupChat extends Component {
7+
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
currentUser: this.props.auth.user.username,
12+
input: '',
13+
}
14+
this.newPost = this.newPost.bind(this);
15+
this.onChange = this.onChange.bind(this);
16+
}
17+
18+
newPost() {
19+
const message = {
20+
type: "postMessage",
21+
username: this.state.currentUser,
22+
message: this.state.input,
23+
}
24+
// ws.send(JSON.stringify(message))
25+
this.setState({ input: ''})
26+
console.log(JSON.stringify(message))
27+
const chatbar = document.getElementById('chatbar');
28+
chatbar.value = '';
29+
}
30+
31+
onChange(e) {
32+
this.setState({ [e.target.name]: e.target.value });
33+
}
34+
635
openPopupbox = () => {
736
const content = (
837
<div>
938
<span>MessageList</span>
10-
<input
11-
className = "chat-message"
12-
placeholder = "Type a message and hit ENTER"
13-
/>
14-
<button className="demo-button" onClick={ this.updatePopupbox }>Send</button>
39+
<input
40+
name="input"
41+
id="chatbar"
42+
className="chat-message"
43+
placeholder="Type a message and hit ENTER"
44+
onChange={this.onChange}
45+
onKeyDown={(event) => {
46+
if (event.key === 'Enter') {
47+
this.newPost();
48+
}
49+
}}
50+
/>
51+
<button className="demo-button" onClick={this.newPost}>Send</button>
1552
</div>
1653
)
1754

18-
PopupboxManager.open({
55+
PopupboxManager.open({
1956
content,
2057
config: {
2158
titleBar: {
2259
enable: true,
23-
text: 'From: Username A'
60+
text: `From: ${this.state.currentUser}`
2461
}
2562
}
2663
})
2764
}
2865

29-
updatePopupbox = () => {
30-
const content = (
31-
<div>
32-
<span>MessageList</span>
33-
<footer>
34-
<input
35-
className = "chat-message"
36-
placeholder = "Type a message and hit ENTER"
37-
/>
38-
<button className="demo-button" onClick={ this.openPopupbox }>Send</button>
39-
</footer>
40-
</div>
41-
)
66+
// updatePopupbox = () => {
67+
// const content = (
68+
// <div>
69+
// <span>MessageList</span>
70+
// <footer>
71+
// <input
72+
// className = "chat-message"
73+
// placeholder = "Type a message and hit ENTER"
74+
// />
75+
// <button className="demo-button" onClick={ this.openPopupbox }>Send</button>
76+
// </footer>
77+
// </div>
78+
// )
4279

43-
PopupboxManager.update({
44-
content,
45-
config: {
46-
titleBar: {
47-
text:'From: Username B',
48-
closeButton: true
49-
}
50-
}
51-
})
52-
}
80+
// PopupboxManager.update({
81+
// content,
82+
// config: {
83+
// titleBar: {
84+
// text:'From: Username B',
85+
// closeButton: true
86+
// }
87+
// }
88+
// })
89+
// }
5390

5491
render() {
5592
return (
56-
//Pop up currently triggered by a button click
57-
//Eventually, the popup should be activated by an accepted invitation from a potential teammate
58-
<div>
59-
<button className="popupbox-trigger" onClick={ this.openPopupbox }>Click me</button>
60-
<PopupboxContainer />
61-
</div>
93+
//Pop up currently triggered by a button click
94+
//Eventually, the popup should be activated by an accepted invitation from a potential teammate
95+
<div>
96+
<button className="popupbox-trigger" onClick={this.openPopupbox}>Click me</button>
97+
<PopupboxContainer />
98+
</div>
6299
)
63100
}
64101
}
65102

66-
export default PopupChat;
103+
PopupChat.PropTypes = {
104+
auth: React.PropTypes.object.isRequired,
105+
}
106+
107+
function mapStateToProps(state) {
108+
return {
109+
auth: state.auth
110+
};
111+
}
112+
113+
export default connect(mapStateToProps)(PopupChat);

‎client/styles/main.scss

+165-2
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,174 @@ nav {
119119
margin-left: 50%;
120120
}
121121

122-
.alert-bottom {
122+
.alert-bottom {
123123
bottom: 0;
124124
background: blue;
125125
border-top-left-radius: 50px;
126126
border-radius: 50px;
127127
transform: translate(-50%, 0);
128128
margin-left: 50%;
129-
}
129+
}
130+
131+
.popupbox {
132+
width:100%;
133+
height:100%;
134+
position: fixed;
135+
top: 0;
136+
left: 0;
137+
display: -webkit-flex;
138+
display: -moz-flex;
139+
display: -ms-flex;
140+
display: -o-flex;
141+
display: flex;
142+
align-items: center;
143+
justify-content: center;
144+
opacity: 0;
145+
pointer-events: none;
146+
z-index: 1000;
147+
};
148+
149+
.popupbox[hidden] {
150+
display: none;
151+
}
152+
153+
.popupbox-overlay {
154+
position:fixed;
155+
top: 0;
156+
left: 0;
157+
width:100%;
158+
height:100%;
159+
z-index:1002;
160+
background: none repeat scroll 0% 0% #000;
161+
}
162+
163+
.popupbox-content {
164+
overflow: hidden;
165+
}
166+
167+
.popupbox-wrapper {
168+
display: -webkit-flex;
169+
display: -moz-flex;
170+
display: -ms-flex;
171+
display: -o-flex;
172+
display: flex;
173+
-webkit-flex-direction: column;
174+
-moz-flex-direction: column;
175+
-ms-flex-direction: column;
176+
-o-flex-direction: column;
177+
flex-direction: column;
178+
z-index: 1003;
179+
position: relative;
180+
}
181+
182+
.popupbox-titleBar {
183+
overflow: hidden;
184+
display: block;
185+
position: relative;
186+
}
187+
188+
.popupbox-btn--close {
189+
z-index: 1004;
190+
}
191+
192+
.popupbox[data-title='bottom'] .popupbox-content { order: 1 }
193+
.popupbox[data-title='bottom'] .popupbox-titleBar { order: 2 }
194+
195+
/* ----- default theme ----- */
196+
197+
.popupbox-wrapper {
198+
border-radius: 3px;
199+
overflow: hidden;
200+
max-width: 80%;
201+
min-width: 300px;
202+
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
203+
background-color: white;
204+
}
205+
206+
.popupbox-content {
207+
height: 300px;
208+
padding: 20px 24px 30px;
209+
}
210+
211+
.popupbox-titleBar {
212+
font-weight: bold;
213+
font-size: 18px;
214+
text-shadow: 0 -1px 1px rgba(0, 0, 0, .2);
215+
padding: 11px 37px 11px 24px;
216+
border-bottom: 1px #ccc solid;
217+
}
218+
219+
.popupbox-btn--close {
220+
transition: all .5s;
221+
position: absolute;
222+
right: 11px;
223+
top: 11px;
224+
color: #c1c1c1;
225+
background: none;
226+
border: none;
227+
outline: none;
228+
}
229+
230+
.popupbox-btn--close:hover {
231+
color: #000;
232+
}
233+
234+
.popupbox.is-active {
235+
opacity: 1;
236+
pointer-events: auto;
237+
}
238+
239+
.popupbox[data-title='bottom'] .popupbox-content { box-shadow: 0 1px 1px rgba(0, 0, 0, .3) }
240+
.popupbox[data-title='bottom'] .popupbox-titleBar { box-shadow: none; border-top: 1px #ccc solid }
241+
242+
//popupbox button style
243+
244+
.popupbox-trigger:hover {
245+
box-shadow: 2px 3px 5px rgba(0,0,0,.2);
246+
margin-top: -12px;
247+
}
248+
249+
.popupbox-trigger {
250+
position: relative;
251+
transition: all .2s;
252+
color: #fff;
253+
text-shadow: 0 -1px 1px #000;
254+
background-color: #263238;
255+
box-shadow: 0 1px 1px rgba(0,0,0,.4);
256+
font-family: Raleway,Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,sans-serif;
257+
font-size: 24px;
258+
padding: 12px 16px 16px;
259+
height: 60px;
260+
width: 200px;
261+
top: 50%;
262+
left: 50%;
263+
margin: -10px 0 0 -116px;
264+
text-align: center;
265+
border-radius: 5px;
266+
cursor: pointer;
267+
display: block;
268+
}
269+
270+
//button within popupbox
271+
.demo-button {
272+
bottom: 55px;
273+
display: block;
274+
margin-top: 8px;
275+
position: fixed;
276+
277+
}
278+
279+
//chat window styles
280+
.chat-message {
281+
bottom: 86px;
282+
display: block;
283+
margin-top: 8px;
284+
position: fixed;
285+
width:250px;
286+
}
287+
288+
.bordered-image {
289+
border: 3px solid black;
290+
width: 25%;
291+
height: 25%;
292+
}

0 commit comments

Comments
 (0)