From 7bd3acdf36643d809b1cbab8da8278fa128e5685 Mon Sep 17 00:00:00 2001 From: ShingiJP Date: Tue, 16 Jan 2018 10:39:54 +0200 Subject: [PATCH 1/5] Added alt name to prfile image import --- v-tech-app/src/containers/chats/profile/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/v-tech-app/src/containers/chats/profile/index.js b/v-tech-app/src/containers/chats/profile/index.js index e5b18bd..4d5c4b9 100644 --- a/v-tech-app/src/containers/chats/profile/index.js +++ b/v-tech-app/src/containers/chats/profile/index.js @@ -36,7 +36,7 @@ class Profile extends React.Component { let {imagePreviewUrl} = this.state; let $imagePreview = null; if (imagePreviewUrl) { - $imagePreview = (); + $imagePreview = ({"User); } else { $imagePreview = ({"ChatterBox); From 809bb6709e6cc72d8adf3c4fca98a7202bfad350 Mon Sep 17 00:00:00 2001 From: ShingiJP Date: Tue, 16 Jan 2018 15:35:48 +0200 Subject: [PATCH 2/5] Sidebar updates last message after sending message and switching person. Sent messages store send in store. --- .../src/containers/chats/chat_area/index.css | 12 ++++-- .../src/containers/chats/chat_area/index.js | 21 +++++++++- .../src/containers/chats/side_bar/index.css | 7 +++- .../src/containers/chats/side_bar/index.js | 8 +++- v-tech-app/src/modules/chats_reducer.js | 41 +++++++++++++++++-- 5 files changed, 76 insertions(+), 13 deletions(-) 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..7dbb57c 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{ @@ -95,4 +98,5 @@ input:focus{ display: inline-block; padding: 10px; -} \ No newline at end of file +} + 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..d4bdbaf 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,14 +72,18 @@ 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) => { @@ -120,8 +135,9 @@ class AppChatArea extends React.Component { +
- +
@@ -143,7 +159,8 @@ const mapStateToProps = state => ({ 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..57679f5 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 (){ @@ -23,7 +24,7 @@ class AppSideBar extends React.Component { this.props.get_convo(active_id); } - + createChatListItems() { return this.props.friends.map((friend) => { @@ -36,7 +37,6 @@ class AppSideBar extends React.Component {
); - }); } @@ -56,6 +56,9 @@ class AppSideBar extends React.Component { render() { return (
+
@@ -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..9e18f3a 100644 --- a/v-tech-app/src/modules/chats_reducer.js +++ b/v-tech-app/src/modules/chats_reducer.js @@ -2,25 +2,29 @@ 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: []}, {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: "", @@ -69,11 +73,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 +139,12 @@ export const get_convo = (friend_id) => { }) } } + +export const chats_on_load = () => { + + return dispatch => { + dispatch({ + type: CHATS_ON_LOAD + }) + } +} From 4397f4208f60f85f4c066eef3c945c0d8e58f9e6 Mon Sep 17 00:00:00 2001 From: ShingiJP Date: Tue, 16 Jan 2018 16:09:23 +0200 Subject: [PATCH 3/5] Removed script tags from chat area --- .../src/containers/chats/chat_area/index.js | 30 ++++++++++--------- .../src/containers/chats/side_bar/index.js | 6 ++-- v-tech-app/src/modules/chats_reducer.js | 4 ++- 3 files changed, 22 insertions(+), 18 deletions(-) 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 d4bdbaf..79af49a 100644 --- a/v-tech-app/src/containers/chats/chat_area/index.js +++ b/v-tech-app/src/containers/chats/chat_area/index.js @@ -88,20 +88,20 @@ class AppChatArea extends React.Component { //return this.props.friends.map((friend) => { return this.props.open_chat.map((each_msg) => { - return( - - -
  • -
    -
    - -

    {each_msg}

    + return( + + +
  • +
    +
    + +

    {each_msg}

    +
    -
    • - - - ); - } + + + ); + } ); } @@ -152,7 +152,9 @@ const mapStateToProps = state => ({ //msg_set: state.msgs.msg_set //convo: state.chats.friends friends: state.chats.friends, - open_chat: state.chats.current_convo + test: state.chats, + open_chat: state.chats.current_convo, + times: state.chats.current_times }) 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 57679f5..11618bf 100644 --- a/v-tech-app/src/containers/chats/side_bar/index.js +++ b/v-tech-app/src/containers/chats/side_bar/index.js @@ -17,6 +17,7 @@ import { chats_on_load } from '../../../modules/chats_reducer' }*/ + class AppSideBar extends React.Component { link_chat = (event) => { @@ -24,7 +25,8 @@ class AppSideBar extends React.Component { this.props.get_convo(active_id); } - + + createChatListItems() { return this.props.friends.map((friend) => { @@ -56,9 +58,7 @@ class AppSideBar extends React.Component { render() { return (
    -
    diff --git a/v-tech-app/src/modules/chats_reducer.js b/v-tech-app/src/modules/chats_reducer.js index 9e18f3a..c712c7c 100644 --- a/v-tech-app/src/modules/chats_reducer.js +++ b/v-tech-app/src/modules/chats_reducer.js @@ -28,7 +28,8 @@ export const CHATS_ON_LOAD = 'chats_reducer/CHATS_ON_LOAD' current_id: "", current_name: "", - current_convo: [] + current_convo: [], + current_times: [] } @@ -63,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 } } From 8aba626c75807ea10afddf40c489f20242d922ab Mon Sep 17 00:00:00 2001 From: ShingiJP Date: Tue, 16 Jan 2018 16:58:04 +0200 Subject: [PATCH 4/5] Made message width dynamic and added time display --- .../src/containers/chats/chat_area/index.css | 20 +++++++++++++++++-- .../src/containers/chats/chat_area/index.js | 19 ++++++++++-------- 2 files changed, 29 insertions(+), 10 deletions(-) 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 7dbb57c..5d4f164 100644 --- a/v-tech-app/src/containers/chats/chat_area/index.css +++ b/v-tech-app/src/containers/chats/chat_area/index.css @@ -95,8 +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; +} 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 79af49a..c5be7db 100644 --- a/v-tech-app/src/containers/chats/chat_area/index.js +++ b/v-tech-app/src/containers/chats/chat_area/index.js @@ -86,18 +86,21 @@ class AppChatArea extends React.Component { 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}

    +
    +
    + {each_msg}
    +
    + {this.props.chat_set.current_times[index]} +
    +
    • ); @@ -152,9 +155,9 @@ const mapStateToProps = state => ({ //msg_set: state.msgs.msg_set //convo: state.chats.friends friends: state.chats.friends, - test: state.chats, - open_chat: state.chats.current_convo, - times: state.chats.current_times + chat_set: state.chats, + //open_chat: state.chats.current_convo, + //times: state.chats.current_times }) From 9ba07a0a2eccedbac668b58056275083fb85eec7 Mon Sep 17 00:00:00 2001 From: ShingiJP Date: Tue, 16 Jan 2018 17:02:03 +0200 Subject: [PATCH 5/5] Added missing time to single store message --- v-tech-app/src/modules/chats_reducer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/v-tech-app/src/modules/chats_reducer.js b/v-tech-app/src/modules/chats_reducer.js index c712c7c..77e74c8 100644 --- a/v-tech-app/src/modules/chats_reducer.js +++ b/v-tech-app/src/modules/chats_reducer.js @@ -6,7 +6,7 @@ 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: "", msg_times: []}, + 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"],