Skip to content

Commit b752726

Browse files
supalarrysupalarry
committed
display chat messages without time consideration
1 parent e8e6eba commit b752726

File tree

4 files changed

+146
-19
lines changed

4 files changed

+146
-19
lines changed

‎frontend/src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app" class="antialiased" v-bind:style="{background: getBackground}">
3-
<keep-alive include="Browse,Search,History">
3+
<keep-alive include="Browse,Search,History,Matches">
44
<router-view/>
55
</keep-alive>
66
</div>

‎frontend/src/components/app/matches/Chat.vue‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,27 @@
1111
<h1 class="noSelect capitalize opacity-50">←</h1>
1212
</div>
1313
</div>
14-
<div class="messages rounded-md overflow-scroll my-2">
14+
<div class="messages rounded-md overflow-scroll pt-4 pb-2 w-full">
15+
<div
16+
v-bind:class="{
17+
'flex': true,
18+
'mt-1': true,
19+
'justify-start': message.to_id === loggedInUserId,
20+
'justify-end': message.to_id !== loggedInUserId}"
21+
v-for="message in messages" :key="message.id">
22+
<h1 v-if="message.to_id === loggedInUserId"
23+
class="py-2 px-4 rounded-t-md rounded-br-md bg-purple-matcha text-white-matcha">{{message.content}}</h1>
24+
<h1 v-else
25+
class="py-2 px-4 rounded-t-md rounded-bl-md bg-green-500 text-white-matcha">{{message.content}}</h1>
26+
</div>
1527
</div>
1628
<div class="send w-full flex items-stretch">
1729
<div class="w-10/12 h-full">
18-
<input type="text" placeholder="Message..." class="h-full w-full border rounded-md px-3 py-1 focus:outline-none active:outline-none text-gray-matcha">
30+
<input type="text" v-model="message" placeholder="Message..." class="h-full w-full border border-gray-500 rounded-md px-3 py-1 focus:outline-none active:outline-none text-gray-matcha">
1931
</div>
20-
<div class="w-2/12 rounded-md flex justify-center items-center bg-purple-matcha cursor-pointer ml-2">
32+
<div
33+
class="w-2/12 rounded-md flex justify-center items-center bg-purple-matcha cursor-pointer ml-2"
34+
v-on:click="sendMessage()">
2135
<img src="../../../assets/sendWhite.png" class="w-5 py-2">
2236
</div>
2337
</div>
@@ -35,25 +49,34 @@ export default {
3549
data: () => ({
3650
messages: [],
3751
user: null,
52+
message: '',
53+
loggedInUserId: null,
3854
}),
3955
methods: {
4056
closeChat() {
4157
this.$emit('close-chat');
4258
},
59+
async sendMessage() {
60+
await this.$http.post('/messages/send', {
61+
to_uid: this.user.id.toString(),
62+
content: this.message,
63+
});
64+
},
4365
},
4466
async beforeMount() {
4567
const messagesRequest = await this.$http.get(`/conversations/${this.chatWithUserId}`);
4668
this.messages = messagesRequest.data.messages;
4769
const userRequest = await this.$http.get(`/users/${this.chatWithUserId}`);
4870
this.user = userRequest.data;
71+
this.loggedInUserId = this.$store.getters.getLoggedInUser.id;
4972
},
5073
};
5174
</script>
5275

5376
<style scoped>
5477
5578
.chat {
56-
height: 70vh;
79+
height: 75vh;
5780
}
5881
5982
@screen md {

‎frontend/src/components/app/matches/Message.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="flex border-b pb-4 cursor-pointer" v-on:click="chat()">
4+
<div>
5+
<div v-bind:style="{
6+
'background-repeat': 'no-repeat',
7+
'background-position': 'center center',
8+
'background-size' :'cover',
9+
'background-image': 'url(' + getImage() + ')'}"
10+
class="w-12 h-12 rounded-full relative">
11+
<div
12+
v-bind:class="{
13+
'bg-green-500': this.match.is_online,
14+
'bg-red-500': !this.match.is_online,
15+
'rounded-full': true,
16+
'w-3': true,
17+
'h-3': true}">
18+
</div>
19+
</div>
20+
</div>
21+
<div class="ml-4 w-full">
22+
<div class="flex justify-between">
23+
<h1 class="font-bold">{{this.match.first_name}}</h1>
24+
<!-- <h1 class="text-sm opacity-50">{{this.message.last_message_timestamp}}</h1>-->
25+
<h1 class="text-sm opacity-50">sep 25</h1>
26+
</div>
27+
<h1 v-bind:class="{'opacity-50': this.message.is_unseen}">{{getMessage}}</h1>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script>
33+
/* eslint-disable no-else-return */
34+
import imageMan from '@/assets/recommendations/avatars/man1.png';
35+
import imageWoman from '@/assets/recommendations/avatars/woman1.png';
36+
import imageOther from '@/assets/recommendations/avatars/other.png';
37+
38+
export default {
39+
props: ['message'],
40+
data: () => ({
41+
match: null,
42+
}),
43+
methods: {
44+
getImage() {
45+
const { images } = this.match;
46+
if (images.length) {
47+
for (let i = 0; i < images.length; i += 1) {
48+
if (images[i].is_primary) {
49+
return images[i].link;
50+
}
51+
}
52+
return images[0].link;
53+
} else if (this.match.gender === 'male') {
54+
return imageMan;
55+
} else if (this.match.gender === 'female') {
56+
return imageWoman;
57+
}
58+
return imageOther;
59+
},
60+
async chat() {
61+
this.$emit('chat', this.match.id);
62+
},
63+
},
64+
computed: {
65+
getMessage() {
66+
if (this.message.last_message_content.length > 20) {
67+
return `${this.message.last_message_content.substring(1, 20)}...`;
68+
}
69+
return this.message.last_message_content;
70+
},
71+
},
72+
beforeMount() {
73+
this.match = this.message.with_user;
74+
console.log(this.message);
75+
},
76+
};
77+
</script>

‎frontend/src/views/app/Matches.vue‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@
2323
</div>
2424
<div class="mt-8">
2525
<div v-if="messages.length">
26-
<h1 class="text-xl md:text-base text-gray-matcha text-center font-bold">Messages</h1>
27-
<div></div>
26+
<h1 class="text-xl md:text-base text-gray-matcha text-left font-bold">Messages</h1>
27+
<div class="overflow-scroll mt-4">
28+
<Message v-on:chat="chat" v-for="message in messages" :key="message.with_user.id" v-bind:message="message"></Message>
29+
</div>
2830
</div>
2931
<div v-else class="flex items-center">
3032
<div>
@@ -42,7 +44,7 @@
4244
v-if="chatWithUserId"
4345
v-bind:chatWithUserId="chatWithUserId"
4446
v-on:close-chat="closeChat()"></Chat>
45-
<div v-if="!chatWithUserId" class="pl-8 w-full text-left max-w-2xl invisible md:visible md:relative md:ml-4">
47+
<div v-if="!chatWithUserId" class="text-center pl-8 py-8 w-full max-w-2xl invisible md:visible md:relative md:ml-4">
4648
<div v-if="!matches.length && !messages.length">
4749
<h1 class="text-4xl text-gray-400 font-bold">Use Browse, Search</h1>
4850
<h1 class="text-4xl text-gray-400 font-bold">to like people</h1>
@@ -65,13 +67,15 @@
6567
import NavBar from '@/components/shared/NavBar.vue';
6668
import Match from '@/components/app/matches/Match.vue';
6769
import Chat from '@/components/app/matches/Chat.vue';
70+
import Message from '@/components/app/matches/Message.vue';
6871
6972
export default {
7073
name: 'Matches',
7174
components: {
7275
Chat,
7376
NavBar,
7477
Match,
78+
Message,
7579
},
7680
data: () => ({
7781
matches: [],
@@ -84,18 +88,17 @@ export default {
8488
const matchesRequest = await this.$http.get('/matches');
8589
const { matches } = matchesRequest.data;
8690
for (let i = 0; i < matches.length; i += 1) {
87-
const userRequest = await this.$http.get(`/users/${matches[i].user_1}`);
88-
this.matches.push(userRequest.data);
91+
for (let j = 0; j < this.messages.length; j += 1) {
92+
if (this.messages[j].length && this.messages[j][0].to_id !== matches[i].user_1) {
93+
const userRequest = await this.$http.get(`/users/${matches[i].user_1}`);
94+
this.matches.push(userRequest.data);
95+
}
96+
}
8997
}
9098
},
9199
async fetchMessages() {
92100
const messagesRequest = await this.$http.get('/conversations');
93-
const messages = messagesRequest.data;
94-
for (let i = 0; i <= messages.length; i += 1) {
95-
const userChattingWith = await this.$http.get(`/users/${messages[i].with_user}`);
96-
messages[i].user = userChattingWith.data;
97-
}
98-
this.messages = messages;
101+
this.messages = messagesRequest.data.conversations;
99102
},
100103
async chat(...args) {
101104
const [id] = args;
@@ -106,11 +109,35 @@ export default {
106109
closeChat() {
107110
this.chatWithUserId = null;
108111
},
112+
openMessageOnMd(e) {
113+
if (e.target.innerWidth >= 768 && !this.chatWithUserId) {
114+
if (this.messages.length && e.target.innerWidth >= 768) {
115+
this.chatWithUserId = this.messages[0].with_user.id;
116+
}
117+
}
118+
},
119+
async fetchData() {
120+
window.addEventListener('resize', this.openMessageOnMd);
121+
await this.fetchMessages();
122+
await this.fetchMatches();
123+
if (window.innerWidth >= 768 && this.messages.length) {
124+
this.chatWithUserId = this.messages[0].with_user.id;
125+
}
126+
this.fetchingDone = true;
127+
},
109128
},
110129
async beforeMount() {
111-
await this.fetchMatches();
112-
await this.fetchMessages();
113-
this.fetchingDone = true;
130+
await this.fetchData();
131+
},
132+
deactivated() {
133+
if (!this.$route.path.startsWith('/users')) {
134+
this.matches = [];
135+
this.messages = [];
136+
this.chatWithUserId = null;
137+
this.fetchingDone = false;
138+
this.fetchData();
139+
this.$el.scrollTop = 0;
140+
}
114141
},
115142
};
116143
</script>

0 commit comments

Comments
 (0)