diff --git a/v-tech-app/src/containers/chats/chat_area/index.css b/v-tech-app/src/containers/chats/chat_area/index.css index e215a3f..5d4f164 100644 --- a/v-tech-app/src/containers/chats/chat_area/index.css +++ b/v-tech-app/src/containers/chats/chat_area/index.css @@ -4,8 +4,6 @@ background:whitesmoke; } - - .text > p:first-of-type{ width:100%; margin-top:0; @@ -42,6 +40,10 @@ background:whitesmoke; bottom: 10px; + width: 735px; + margin-top: 15px; + height: 50px; + border-radius: 40px; } .msj{ float:left; @@ -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{ @@ -92,7 +95,24 @@ input:focus{ .li_msg{ - display: inline-block; + display: inline; padding: 10px; - -} \ No newline at end of file + 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; +} diff --git a/v-tech-app/src/containers/chats/chat_area/index.js b/v-tech-app/src/containers/chats/chat_area/index.js index ca30501..c5be7db 100644 --- a/v-tech-app/src/containers/chats/chat_area/index.js +++ b/v-tech-app/src/containers/chats/chat_area/index.js @@ -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. @@ -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) => { @@ -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( - - -
  • -
    -
    - -

    {each_msg}

    + return( + + +
  • +
    +
    + {each_msg} +
    - -
    • - - ); - } +
    + {this.props.chat_set.current_times[index]} +
    + + + + ); + } ); } @@ -120,8 +138,9 @@ class AppChatArea extends React.Component { +
    - +
    @@ -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) diff --git a/v-tech-app/src/containers/chats/side_bar/index.css b/v-tech-app/src/containers/chats/side_bar/index.css index 4abe483..61db900 100644 --- a/v-tech-app/src/containers/chats/side_bar/index.css +++ b/v-tech-app/src/containers/chats/side_bar/index.css @@ -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; diff --git a/v-tech-app/src/containers/chats/side_bar/index.js b/v-tech-app/src/containers/chats/side_bar/index.js index 8888b09..11618bf 100644 --- a/v-tech-app/src/containers/chats/side_bar/index.js +++ b/v-tech-app/src/containers/chats/side_bar/index.js @@ -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 (){ @@ -16,6 +17,7 @@ import { get_convo } from '../../../modules/chats_reducer'; }*/ + class AppSideBar extends React.Component { link_chat = (event) => { @@ -25,6 +27,7 @@ class AppSideBar extends React.Component { } + createChatListItems() { return this.props.friends.map((friend) => { @@ -36,7 +39,6 @@ class AppSideBar extends React.Component {
    ); - }); } @@ -56,6 +58,7 @@ class AppSideBar extends React.Component { render() { return (
    + {this.props.chats_on_load()}
    @@ -86,6 +89,7 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => bindActionCreators({ get_convo, + chats_on_load }, dispatch) diff --git a/v-tech-app/src/modules/chats_reducer.js b/v-tech-app/src/modules/chats_reducer.js index 530f553..77e74c8 100644 --- a/v-tech-app/src/modules/chats_reducer.js +++ b/v-tech-app/src/modules/chats_reducer.js @@ -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: [] } @@ -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 } } @@ -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 { } return{...state} + + + case CHATS_ON_LOAD: + // eslint-disable-next-line + var lastIndex + for (i=0; i0){ + //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 } @@ -115,3 +141,12 @@ export const get_convo = (friend_id) => { }) } } + +export const chats_on_load = () => { + + return dispatch => { + dispatch({ + type: CHATS_ON_LOAD + }) + } +}