zoeissleeping/discord-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved a bunch of things

Browse Source
This commit is contained in:
Zoe
2023-01-12 00:12:10 -06:00
parent 21a9b11547
commit 3bad12c646
13 changed files with 252 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/MessagePane.vue
View File

@@ -19,11 +19,25 @@
<div>
<div v-for="invite in message.invites">
<div class="w-6/12 bg-[hsl(223,6.9%,19.8%)] p-4 rounded-md shadow-md mr-2">
<p class="text-sm font-semibold">You've been invited</p>
<p class="text-sm font-semibold text-zinc-100">You've been invited to join a
server</p>
<span class="text-xl font-bold capitalize">{{ invite.server.name }}</span>
<div class="flex items-center">
<span
class="before:bg-[hsl(214,9.9%,50.4%)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"></span>
<span>{{ invite.server.participants.length }} Members</span>
</div>
<div class="flex w-full justify-end">
<button @click="joinServer(invite)"
class="font-semibold rounded px-4 py-2 bg-green-700 hover:bg-green-600 transition-colors">Join</button>
class="font-semibold rounded px-4 py-2 transition-colors"
:class="(invite.server.participants.find((e) => e.id === user.id)) ? 'bg-green-800 cursor-not-allowed' : 'bg-green-700 hover:bg-green-600'">
<span v-if="invite.server.participants.find((e) => e.id === user.id)">
Joined
</span>
<span v-else>
Join
</span>
</button>
</div>
</div>
</div>
@@ -77,7 +91,8 @@ export default {
user: storeToRefs(useGlobalStore()).user,
messageContent: '',
conversation: this.server.messages as IMessage[],
canSendNotifications: false
canSendNotifications: false,
servers: storeToRefs(useGlobalStore()).servers
}
},
mounted() {
@@ -146,7 +161,7 @@ export default {
const route = useRoute()
if (!this.messageContent) return;
const message: IChannel = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: route.params.id } })
const message: IMessage = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: route.params.id } })
if (!message) return;
if (this.conversation.includes(message)) return;
@@ -162,7 +177,7 @@ export default {
async joinServer(invite: IInviteCode) {
const { server } = await $fetch('/api/guilds/joinGuild', { method: 'POST', body: { inviteId: invite.id } })
if (!server) return;
this.user.servers?.push(server)
this.servers?.push(server)
},
scrollToBottom() {
const conversationDiv = document.getElementById('conversation-pane');

4
components/Nav.vue
View File

@@ -19,7 +19,7 @@
</nuxt-link>
</div>
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
<nuxt-link v-for="server in user.servers" :to="'/channel/' + server.channels[0].id">
<nuxt-link v-for="server in servers" :to="'/channel/' + server.channels[0].id">
<div :key="server.id"
@click="openServer(server.id, 'servers')"
class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300 h-[56px] w-[56px]">
@@ -93,6 +93,7 @@ import { IServer } from '~/types';
export default {
data() {
return {
servers: storeToRefs(useGlobalStore()).servers,
createServerModelOpen: false,
serverName: ''
}
@@ -109,6 +110,5 @@ export default {
useGlobalStore().setActive(type, id)
}
},
props: ['user']
}
</script>

47
components/Sidebar.vue
View File

@@ -3,7 +3,7 @@
class="bg-[hsl(223,calc(1*6.9%),19.8%)] min-w-60 w-60 h-screen shadow-sm text-white select-none grid grid-rows-[93.5%_1fr]">
<div v-if="!server.id || server.DM == true">
<div>
<nuxt-link v-for="dm in user.channels"
<nuxt-link v-for="dm in dms"
:to="'/channel/@me/' + dm.id">
<div
class="mx-2 my-4 hover:bg-[hsl(223,calc(1*6.9%),25.8%)] px-2 py-2 w-[calc(240px-1rem)] max-h-10 h-10 overflow-ellipsis rounded-md transition-colors">
@@ -17,7 +17,7 @@
<div class="flex p-4 border-b border-zinc-600/80">
<h4 class="text-lg font-semibold grid gap-1 grid-cols-[1fr_28px] w-full">
<span>{{ server.name }}</span>
<button class="cursor-pointer p-1 hover:backdrop-brightness-110 transition-all">
<button class="cursor-pointer p-1 bg-[hsl(223,calc(1*6.9%),19.8%)] hover:bg-[hsl(223,calc(1*6.9%),26.4%)] transition-all">
<span class="h-fit w-[20px]">
<svg xmlns="http://www.w3.org/2000/svg"
width="20"
@@ -36,9 +36,9 @@
</div>
<div class="flex gap-y-1.5 px-1.5 mt-2 flex-col">
<button @click="createInvite"
v-if="userIsOwnerOrAdmin">make invite</button>
v-if="userIsOwner || userIsAdmin">make invite</button>
<button
class="flex text-center hover:bg-zinc-600/70 px-2 py-1.5 w-full transition-colors rounded drop-shadow-sm gap-1/5 cursor-pointer"
class="flex text-center hover:bg-[hsl(223,calc(1*6.9%),26.4%)] px-2 py-1.5 w-full transition-colors rounded drop-shadow-sm gap-1/5 cursor-pointer"
v-for="channel in server.channels"
@click="openChannel(channel.id)"
:key="channel.id">
@@ -57,9 +57,9 @@
</span>
<span>{{ channel.name }}</span>
</button>
<button v-if="userIsOwnerOrAdmin"
<button v-if="userIsOwner || userIsAdmin"
@click="openCreateChannelModel"
class="flex text-center hover:bg-zinc-600/70 px-2 py-1.5 w-full transition-colors rounded drop-shadow-sm cursor-pointer">
class="flex text-center hover:bg-[hsl(223,calc(1*6.9%),26.4%)] px-2 py-1.5 w-full transition-colors rounded drop-shadow-sm cursor-pointer">
<span>
<svg xmlns="http://www.w3.org/2000/svg"
width="20"
@@ -132,34 +132,42 @@
</template>
<script lang="ts">
import { IRole, IServer } from '~/types';
import { useGlobalStore } from '~/stores/store';
import { IChannel, IRole, IServer } from '~/types';
export default {
data() {
return {
server: storeToRefs(useGlobalStore()).activeServer,
user: storeToRefs(useGlobalStore()).user,
dms: storeToRefs(useGlobalStore()).dms,
createChannelModelOpen: false,
channelName: '',
userIsOwnerOrAdmin: false
userIsOwner: false,
userIsAdmin: false,
}
},
mounted() {
setTimeout(() => {
if (!this.server.roles) {
console.log(this.server)
throw new Error('server must be null');
}
this.userIsOwnerOrAdmin = this.server.roles.find((e: IRole) => e.users.some((el) => el.id === this.user.id)).owner ||
this.server.roles.find((e: IRole) => e.users.some((el) => el.id === this.user.id)).administrator
})
async mounted() {
const that = this;
var interval = setInterval(function () {
// get elem
if (typeof that.server.roles == 'undefined') return;
clearInterval(interval);
that.userIsOwner = that.server.roles?.find((e: IRole) => e.users.some((el) => el.id === that.user.id))?.owner || false
that.userIsAdmin = that.server.roles?.find((e: IRole) => e.users.some((el) => el.id === that.user.id))?.administer || false
}, 10);
},
methods: {
openCreateChannelModel() {
this.createChannelModelOpen = true;
},
async createChannel() {
const channel = await $fetch(`/api/guilds/${this.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName } })
const channel = await $fetch(`/api/guilds/${this.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName } }) as IChannel
this.server.channels.push(channel)
if (!channel) return;
this.server.channels?.push(channel)
this.createChannelModelOpen = false;
},
openChannel(id: string) {
@@ -171,6 +179,5 @@ export default {
const inviteCode = await $fetch(`/api/guilds/${this.server.id}/createInvite`, { method: 'POST' })
},
},
props: ['server', 'user']
}
</script>