Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Messages & chat ui #20

Open
wants to merge 6 commits into
base: Development
Choose a base branch
from
Open

Messages & chat ui #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7bd3acd
Added alt name to prfile image import
ShingaiJP Jan 16, 2018
848e296
Merge branch 'Development' of https://github.com/RetroRabbit/V-Tech i…
ShingaiJP Jan 16, 2018
809bb67
Sidebar updates last message after sending message and switching pers…
ShingaiJP Jan 16, 2018
4397f42
Removed script tags from chat area
ShingaiJP Jan 16, 2018
8aba626
Made message width dynamic and added time display
ShingaiJP Jan 16, 2018
9ba07a0
Added missing time to single store message
ShingaiJP Jan 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions v-tech-app/src/containers/chats/chat_area/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
background:whitesmoke;
}



.text > p:first-of-type{
width:100%;
margin-top:0;
Expand Down Expand Up @@ -42,6 +40,10 @@

background:whitesmoke;
bottom: 10px;
width: 735px;
margin-top: 15px;
height: 50px;
border-radius: 40px;
}
.msj{
float:left;
Expand All @@ -50,9 +52,10 @@
}
.frame{
background:rgb(243, 243, 243);
height:480px;
height:500px;
padding:0px;
width: 735px;
margin-bottom: 38px;

}
.frame > div:last-of-type{
Expand Down Expand Up @@ -92,7 +95,24 @@ input:focus{

.li_msg{

display: inline-block;
display: inline;
padding: 10px;

}
padding-left: 15px;
border-radius: 20px;
min-width: 200px;
max-width: 450px;
}

.time{
clear: left;
font-size: 9pt;
color: rgb(1, 185, 189);
margin-bottom: 10px;
padding-top: 5px;
}

.msg_text{
font-size: 11pt;
display: inline;
min-width: 200px;
}
56 changes: 39 additions & 17 deletions v-tech-app/src/containers/chats/chat_area/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { connect } from 'react-redux';
//import { msg_successful } from '../../../modules/messages_reducer'
import { append_chat } from '../../../modules/chats_reducer'
import { get_all_msgs } from '../../../modules/messages_reducer'
import { chats_on_load } from '../../../modules/chats_reducer'

//-- No use time. It is a javaScript effect.

Expand Down Expand Up @@ -49,6 +50,16 @@ import { get_all_msgs } from '../../../modules/messages_reducer'
// eslint-disable-next-line


/*window.onload = function () {
if (! localStorage.justOnce) {
localStorage.setItem("justOnce", "true");
alert("This works")
window.location.reload();
this.forceUpdate()
}
}*/


class AppChatArea extends React.Component {

handleKeyPress = (event) => {
Expand All @@ -61,32 +72,39 @@ class AppChatArea extends React.Component {
//var array = this.props.get_all_msgs()

this.props.append_chat(text2)

//this.props.messages.map(all_msgs)
}
this.forceUpdate();


}





addMessage() {
//return this.props.friends.map((friend) => {
return this.props.open_chat.map((each_msg) => {
return this.props.chat_set.current_convo.map((each_msg, index) => {

return(


<li >
<div class="msj macro li_msg">
<div class="text">

<p><font color="white">{each_msg}</font></p>
return(
<li class="msg_container">
<div class="msj li_msg">
<div class="msg_text">
{each_msg}
</div>
</div>
</div>
</li>

);
}
<div class="time">
{this.props.chat_set.current_times[index]}
</div>

</li>

);
}

);
}
Expand Down Expand Up @@ -120,8 +138,9 @@ class AppChatArea extends React.Component {

</div>

<button type="button" class="btn attachmentbtn">+</button>
<div class="msj-rta1 macro msg_input">
<button type="button" class="btn attachmentbtn">+</button>

<div class="text text-r" style={{background: 'whitesmoke !important'}}>

<input class="mytext" id='mytext' onKeyPress={this.handleKeyPress.bind(this)} placeholder="Type a message"/>
Expand All @@ -136,14 +155,17 @@ const mapStateToProps = state => ({
//msg_set: state.msgs.msg_set
//convo: state.chats.friends
friends: state.chats.friends,
open_chat: state.chats.current_convo
chat_set: state.chats,
//open_chat: state.chats.current_convo,
//times: state.chats.current_times
})


const mapDispatchToProps = dispatch => bindActionCreators({
//msg_successful,
append_chat,
get_all_msgs
get_all_msgs,
chats_on_load
}, dispatch)


Expand Down
7 changes: 6 additions & 1 deletion v-tech-app/src/containers/chats/side_bar/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,14 @@
.open_chats{
height: 410px;
width: 100%;
/*overflow: scroll;*/
overflow: scroll;
height: 565px;
}
::-webkit-scrollbar{
/*border: 2px solid red !important;*/

}


.chat_friend_name{
margin-left: 20px;
Expand Down
6 changes: 5 additions & 1 deletion v-tech-app/src/containers/chats/side_bar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';
import { get_convo } from '../../../modules/chats_reducer';
import { chats_on_load } from '../../../modules/chats_reducer'
//import { append_chat } from '../../../modules/chats_reducer'

/*function link_chat (){
Expand All @@ -16,6 +17,7 @@ import { get_convo } from '../../../modules/chats_reducer';
}*/



class AppSideBar extends React.Component {

link_chat = (event) => {
Expand All @@ -25,6 +27,7 @@ class AppSideBar extends React.Component {
}



createChatListItems() {
return this.props.friends.map((friend) => {

Expand All @@ -36,7 +39,6 @@ class AppSideBar extends React.Component {
</div>
</div>
);

});
}

Expand All @@ -56,6 +58,7 @@ class AppSideBar extends React.Component {
render() {
return (
<div class="container">
{this.props.chats_on_load()}
<div class="row">
<div class="side_bar">
<div class="search_bar">
Expand Down Expand Up @@ -86,6 +89,7 @@ const mapStateToProps = state => ({

const mapDispatchToProps = dispatch => bindActionCreators({
get_convo,
chats_on_load
}, dispatch)


Expand Down
45 changes: 40 additions & 5 deletions v-tech-app/src/modules/chats_reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,34 @@ export const ADD_FRIEND = 'chats_reducer/ADD_FRIEND'
export const SELECT_FRIEND = 'chats_reducer/SELECT_FRIEND'
export const GET_CONVO = 'chats_reducer/GET_CONVO'
export const APPEND_CONVO = 'chats_reducer/APPEND_CONVO'
export const CHATS_ON_LOAD = 'chats_reducer/CHATS_ON_LOAD'


const initialState = {
friends: [{friend_id: 0, name: "Donald Bridle", chat: ["Blah blah blah blah blah blah blah blah"], last_msg: "Blah blah blah blah blah blah blah blah"},
friends: [{friend_id: 0, name: "Donald Bridle", chat: ["Blah blah blah blah blah blah blah blah"], last_msg: "", msg_times: ["15:56"]},
{friend_id: 1,
name: "John Snow",
chat: ["Was too lazy to type a another message...-_-","Hey, are you free tomorrow evening? Was wondering if you'd be willing to teach me to cook...no ulterior motive 0_0 hehe"],
last_msg: "Hey, are you free tomorrow evening? Was wondering if you'd be willing to teach me to cook...no ulterior motive 0_0 hehe"},
last_msg: "",
msg_times: ["10:21", "11:38"]},

{friend_id: 2,
name: "Shingai Pedzisayi",
chat: ["This is a radio message...",
"Is there still meat in the fridge?"],
last_msg: "Is there still meat in the fridge?"},
last_msg: "",
msg_times: ["08:48", "11:08"]},

{friend_id: 3,
name: "Michael Dawson",
chat: [],
last_msg: "" }],
last_msg: "",
msg_times: [] }],

current_id: "",
current_name: "",
current_convo: []
current_convo: [],
current_times: []
}


Expand Down Expand Up @@ -59,6 +64,7 @@ export default (state = initialState, action) => {
//alert("The for loop runs")
state.current_convo = state.friends[j].chat
state.current_name = state.friends[j].name
state.current_times = state.friends[j].msg_times
break
}
}
Expand All @@ -69,11 +75,15 @@ export default (state = initialState, action) => {
}

case APPEND_CONVO:
var lastIndex
//alert("Hours: "+action.payload.msg_time[0]+" - mins: "+action.payload.msg_time[1])
for (var i=0; i<state.friends.length; i++){
// eslint-disable-next-line
if (state.friends[i].friend_id == state.current_id){

state.friends[i].chat.push(action.payload.msg)
state.friends[i].last_msg = action.payload.msg
state.friends[i].msg_times.push(action.payload.msg_time[0]+":"+action.payload.msg_time[1])
return {
...state
}
Expand All @@ -83,6 +93,22 @@ export default (state = initialState, action) => {
}
return{...state}



case CHATS_ON_LOAD:
// eslint-disable-next-line
var lastIndex
for (i=0; i<state.friends.length; i++){
lastIndex = state.friends[i].chat.length
if (lastIndex>0){
//alert(state.friends[i].name+": "+lastIndex)
//alert(state.friends[i].chat[(state.friends[i].chat.length)-1])
state.friends[i].last_msg = state.friends[i].chat[(state.friends[i].chat.length-1)]
}
}

return {...state}

default:
return state
}
Expand Down Expand Up @@ -115,3 +141,12 @@ export const get_convo = (friend_id) => {
})
}
}

export const chats_on_load = () => {

return dispatch => {
dispatch({
type: CHATS_ON_LOAD
})
}
}