Skip to content

Commit 38c1a7e

Browse files
supalarrysupalarry
committed
chat frontend
1 parent bcfe876 commit 38c1a7e

File tree

6 files changed

+163
-10
lines changed

6 files changed

+163
-10
lines changed

‎frontend/src/assets/send.png‎

26.6 KB
Loading

‎frontend/src/assets/sendWhite.png‎

26.6 KB
Loading

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="chat md:w-full md:max-w-2xl md:shadow-md md:rounded-md md:p-4 md:flex md:flex-col md:justify-start">
4+
<div class="w-1/2 flex items-center justify-between ml-auto">
5+
<div v-if="user" class="-ml-6 text-center">
6+
<ChatUser v-bind:match="user"></ChatUser>
7+
<h1 class="text-gray-matcha opacity-75 text-sm">{{user.first_name}}</h1>
8+
</div>
9+
<div class="md:hidden cursor-pointer text-lg lg:text-2xl w-10 h-10 flex items-center justify-center"
10+
v-on:click="closeChat()">
11+
<h1 class="noSelect capitalize opacity-50">←</h1>
12+
</div>
13+
</div>
14+
<div class="messages rounded-md overflow-scroll my-2">
15+
</div>
16+
<div class="send w-full flex items-stretch">
17+
<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">
19+
</div>
20+
<div class="w-2/12 rounded-md flex justify-center items-center bg-purple-matcha cursor-pointer ml-2">
21+
<img src="../../../assets/sendWhite.png" class="w-5 py-2">
22+
</div>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<script>
28+
import ChatUser from '@/components/app/matches/ChatUser.vue';
29+
30+
export default {
31+
props: ['chatWithUserId'],
32+
components: {
33+
ChatUser,
34+
},
35+
data: () => ({
36+
messages: [],
37+
user: null,
38+
}),
39+
methods: {
40+
closeChat() {
41+
this.$emit('close-chat');
42+
},
43+
},
44+
async beforeMount() {
45+
const messagesRequest = await this.$http.get(`/conversations/${this.chatWithUserId}`);
46+
this.messages = messagesRequest.data.messages;
47+
const userRequest = await this.$http.get(`/users/${this.chatWithUserId}`);
48+
this.user = userRequest.data;
49+
},
50+
};
51+
</script>
52+
53+
<style scoped>
54+
55+
.chat {
56+
height: 70vh;
57+
}
58+
59+
@screen md {
60+
.chat {
61+
height: 85vh;
62+
}
63+
}
64+
65+
.messages {
66+
height: 90%;
67+
}
68+
69+
.send {
70+
height: 10%;
71+
}
72+
</style>

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div v-bind:style="{
3+
'background-repeat': 'no-repeat',
4+
'background-position': 'center center',
5+
'background-size' :'cover',
6+
'background-image': 'url(' + getImage() + ')'}"
7+
class="w-10 h-10 rounded-full relative cursor-pointer"
8+
v-on:click="viewUser()">
9+
<div
10+
v-bind:class="{
11+
'bg-green-500': this.match.is_online,
12+
'bg-red-500': !this.match.is_online,
13+
'rounded-full': true,
14+
'w-3': true,
15+
'h-3': true}">
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
/* eslint-disable no-else-return */
22+
import imageMan from '../../../assets/recommendations/avatars/man1.png';
23+
import imageWoman from '../../../assets/recommendations/avatars/woman1.png';
24+
import imageOther from '../../../assets/recommendations/avatars/other.png';
25+
26+
export default {
27+
props: ['match'],
28+
methods: {
29+
getImage() {
30+
const { images } = this.match;
31+
if (images.length) {
32+
for (let i = 0; i < images.length; i += 1) {
33+
if (images[i].is_primary) {
34+
return images[i].link;
35+
}
36+
}
37+
return images[0].link;
38+
} else if (this.match.gender === 'male') {
39+
return imageMan;
40+
} else if (this.match.gender === 'female') {
41+
return imageWoman;
42+
}
43+
return imageOther;
44+
},
45+
async viewUser() {
46+
await this.$router.push(`/users/${this.match.id}`);
47+
},
48+
},
49+
};
50+
</script>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
'background-position': 'center center',
55
'background-size' :'cover',
66
'background-image': 'url(' + getImage() + ')'}"
7-
class="w-12 h-12 sm:w-16 sm:h-16 rounded-full relative cursor-pointer"
7+
class="w-12 h-12 rounded-full relative cursor-pointer"
88
v-on:click="chat()">
99
<div
1010
v-bind:class="{
@@ -43,7 +43,7 @@ export default {
4343
return imageOther;
4444
},
4545
async chat() {
46-
await this.$router.push(`/chat/${this.match.id}`);
46+
this.$emit('chat', this.match.id);
4747
},
4848
},
4949
};

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

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,58 @@
22
<!-- eslint-disable max-len -->
33
<div class="mx-4 sm:mx-16 lg:mx-32">
44
<NavBar v-bind:currentRoute="'Matches'"></NavBar>
5-
<section class="mx-auto">
6-
<div>
7-
<div class="mt-8">
5+
<section v-if="fetchingDone" class="mx-auto relative md:flex md:items-start">
6+
<div class="md:w-full md:max-w-xs md:shadow-md md:rounded-md md:p-8 md:flex md:flex-col md:justify-start">
7+
<div class="mt-8 sm:mt-0">
88
<div v-if="matches.length">
9-
<h1 class="text-xl text-gray-matcha text-center font-bold">New matches</h1>
9+
<h1 class="text-xl md:text-base text-gray-matcha font-bold">Matches</h1>
1010
<div class="overflow-scroll mt-4">
11-
<Match v-for="match in matches" :key="match.id" v-bind:match="match"></Match>
11+
<Match v-on:chat="chat" v-for="match in matches" :key="match.id" v-bind:match="match"></Match>
1212
</div>
1313
</div>
1414
<div v-else class="flex items-center">
1515
<div>
1616
<img src="../../assets/link.png" class="w-8 opacity-75">
1717
</div>
1818
<div class="ml-4">
19-
<h1 class="text-xl text-gray-matcha font-bold">No new matches</h1>
19+
<h1 class="text-xl md:text-base text-gray-matcha font-bold">Matches</h1>
2020
<h1 class="text-sm text-gray-500">If someone likes you back, that user will appear here</h1>
2121
</div>
2222
</div>
2323
</div>
2424
<div class="mt-8">
2525
<div v-if="messages.length">
26-
<h1 class="text-xl text-gray-matcha text-center font-bold">Messages</h1>
26+
<h1 class="text-xl md:text-base text-gray-matcha text-center font-bold">Messages</h1>
2727
<div></div>
2828
</div>
2929
<div v-else class="flex items-center">
3030
<div>
3131
<img src="../../assets/chat.png" class="w-8 opacity-75">
3232
</div>
3333
<div class="ml-4">
34-
<h1 class="text-xl text-gray-matcha font-bold">No messages</h1>
34+
<h1 class="text-xl md:text-base text-gray-matcha font-bold">Messages</h1>
3535
<h1 class="text-sm text-gray-500">Conversations with your matches will appear here</h1>
3636
</div>
3737
</div>
3838
</div>
3939
</div>
40+
<Chat class="absolute top-0 w-full h-full bg-white-matcha
41+
md:relative md:ml-4"
42+
v-if="chatWithUserId"
43+
v-bind:chatWithUserId="chatWithUserId"
44+
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">
46+
<div v-if="!matches.length && !messages.length">
47+
<h1 class="text-4xl text-gray-400 font-bold">Use Browse, Search</h1>
48+
<h1 class="text-4xl text-gray-400 font-bold">to like people</h1>
49+
<h1 class="text-4xl text-gray-400 font-bold">and get matches</h1>
50+
</div>
51+
<div v-if="matches.length && !messages.length">
52+
<h1 class="text-5xl text-gray-400 font-bold">Time to chat</h1>
53+
<h1 class="text-5xl text-gray-400 font-bold">with your</h1>
54+
<h1 class="text-5xl text-gray-400 font-bold">matches</h1>
55+
</div>
56+
</div>
4057
</section>
4158
</div>
4259
</template>
@@ -47,16 +64,20 @@
4764
4865
import NavBar from '@/components/shared/NavBar.vue';
4966
import Match from '@/components/app/matches/Match.vue';
67+
import Chat from '@/components/app/matches/Chat.vue';
5068
5169
export default {
5270
name: 'Matches',
5371
components: {
72+
Chat,
5473
NavBar,
5574
Match,
5675
},
5776
data: () => ({
5877
matches: [],
5978
messages: [],
79+
chatWithUserId: null,
80+
fetchingDone: false,
6081
}),
6182
methods: {
6283
async fetchMatches() {
@@ -76,10 +97,20 @@ export default {
7697
}
7798
this.messages = messages;
7899
},
100+
async chat(...args) {
101+
const [id] = args;
102+
if (id) {
103+
this.chatWithUserId = id;
104+
}
105+
},
106+
closeChat() {
107+
this.chatWithUserId = null;
108+
},
79109
},
80110
async beforeMount() {
81111
await this.fetchMatches();
82112
await this.fetchMessages();
113+
this.fetchingDone = true;
83114
},
84115
};
85116
</script>

0 commit comments

Comments
 (0)