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

various improvements

Browse Source
This commit is contained in:
Zoe
2023-04-20 21:19:22 -05:00
parent b6d3b045aa
commit 3ea8167569
60 changed files with 12369 additions and 7625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
pages/channel/@me/[id].vue Normal file → Executable file
View File

@@ -1,79 +1,87 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<MessagePane />
<div class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
<Transition>
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerData.opened" />
</Transition>
</div>
<MessagePane />
<div
class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
>
<Transition>
<Popup
:opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@picked-emoji="pickedEmoji($event)"
/>
<!-- <EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerData.opened" /> -->
</Transition>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store'
import { IChannel } from '~/types'
import { useGlobalStore } from '~/stores/store';
import { IChannel } from '~/types';
definePageMeta({
middleware: 'auth'
})
});
export default {
async setup() {
const route = useRoute();
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers });
if (!server) throw new Error('could not find the dm');
useGlobalStore().addDM(server);
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
useGlobalStore().setActiveServer('dms', route.params.id);
useGlobalStore().setActiveChannel(server);
useGlobalStore().closeEmojiPicker();
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
});
return {
server
};
},
data() {
return {
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px',
top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
}
}
},
async setup() {
const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
if (!server) throw new Error('could not find the dm')
useGlobalStore().addDM(server);
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
useGlobalStore().setActiveServer('dms', route.params.id);
useGlobalStore().setActiveChannel(server)
useGlobalStore().closeEmojiPicker()
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
})
return {
server
}
};
},
async updated() {
const route = useRoute()
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
const route = useRoute();
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
if (useGlobalStore().activeServer.id !== this.server.id) {
useGlobalStore().closeEmojiPicker()
useGlobalStore().setActiveServer('dms', route.params.id)
useGlobalStore().closeEmojiPicker();
useGlobalStore().setActiveServer('dms', route.params.id);
}
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp()
$emit('pickedEmoji', emoji)
useGlobalStore().closeEmojiPicker()
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useGlobalStore().closeEmojiPicker();
},
}
}
};
</script>
<style>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
opacity: 0;
}
</style>

30
pages/channel/@me/index.vue Normal file → Executable file
View File

@@ -1,35 +1,35 @@
<template>
<form @submit.prevent="startDM">
<input v-model="userId" />
<input type="submit" />
</form>
<form @submit.prevent="startDM">
<input v-model="userId">
<input type="submit">
</form>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store'
import { IChannel } from '~/types'
import { useGlobalStore } from '~/stores/store';
import { IChannel } from '~/types';
definePageMeta({
middleware: 'auth'
})
middleware: 'auth'
});
export default {
data() {
return {
userId: ''
}
};
},
mounted() {
useGlobalStore().setActiveServer('dms', '@me')
useGlobalStore().setActiveServer('dms', '@me');
},
methods: {
async startDM() {
const headers = useRequestHeaders(['cookie']) as Record<string, string>
const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers })
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers });
useGlobalStore().addDM(server)
useRouter().push({ path: '/channel/@me/' + server.id })
useGlobalStore().addDM(server);
useRouter().push({ path: '/channel/@me/' + server.id });
}
}
}
};
</script>

109
pages/channel/[id].vue Normal file → Executable file
View File

@@ -1,83 +1,84 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<MessagePane />
<div class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
<Transition>
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerData.opened" />
</Transition>
</div>
<MessagePane />
<div
class="fixed mr-3"
:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
>
<Transition>
<Popup
:opened="emojiPickerData.opened"
:openedBy="emojiPickerData.type"
@pickedEmoji="pickedEmoji($event)"
/>
</Transition>
</div>
</template>
<script lang="ts">
import { Server } from 'socket.io';
import { useGlobalStore } from '~/stores/store'
import { IChannel } from '~/types'
import { useGlobalStore } from '~/stores/store';
import { IChannel, IServer } from '~/types';
definePageMeta({
middleware: 'auth'
})
});
export default {
async setup() {
const route = useRoute();
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers });
// if (!useGlobalStore().servers.find((e) => e.id == server.serverId)?.participants) {
const realServer: IServer = await $fetch(`/api/guilds/${server.serverId}`, { headers });
if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
useGlobalStore().addServer(realServer);
// }
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
useGlobalStore().setActiveServer('servers', route.params.id);
useGlobalStore().setActiveChannel(server);
useGlobalStore().closeEmojiPicker();
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
});
return {
server,
};
},
data() {
return {
socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px',
top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
}
}
};
},
mounted() {
this.socket.on(`addChannel-${this.server.serverId}`, (ev) => {
const newChannel = ev as IChannel
useGlobalStore().addChannel(this.server.serverId, newChannel)
})
const newChannel = ev as IChannel;
useGlobalStore().addChannel(this.server.serverId, newChannel);
});
},
async updated() {
const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
if (!this.server) return;
this.server = await $fetch(`/api/channels/${route.params.id}`, { headers });
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
const route = useRoute();
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?');
if (useGlobalStore().activeChannel.id !== this.server.id) {
useGlobalStore().closeEmojiPicker()
useGlobalStore().setActiveServer('servers', route.params.id)
// update the server with the refreshed data
useGlobalStore().updateServer(route.params.id, this.server.server)
}
},
async setup() {
const route = useRoute()
const headers = useRequestHeaders(['cookie']) as Record<string, string>
const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
const realServer = useGlobalStore().servers?.find((e) => e.channels.some((el) => el.id == route.params.id))
if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
useGlobalStore().addServer(realServer);
if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
useGlobalStore().setActiveServer('servers', route.params.id)
useGlobalStore().setActiveChannel(server)
useGlobalStore().closeEmojiPicker()
server.messages?.forEach((e) => {
e.body = parseMessageBody(e.body, useGlobalStore().activeChannel)
})
return {
server,
useGlobalStore().closeEmojiPicker();
useGlobalStore().setActiveServer('servers', route.params.id);
}
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp()
$emit('pickedEmoji', emoji)
useGlobalStore().closeEmojiPicker()
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useGlobalStore().closeEmojiPicker();
},
}
}
};
</script>

12
pages/index.vue Normal file → Executable file
View File

@@ -1,13 +1,17 @@
<template>
<div>
Hello there traveler
<nuxt-link to="/login">Login</nuxt-link>
<nuxt-link to="/signup">Signup</nuxt-link>
<nuxt-link to="/login">
Login
</nuxt-link>
<nuxt-link to="/signup">
Signup
</nuxt-link>
</div>
</template>
<script setup>
definePageMeta({
middleware: 'auth'
})
middleware: 'auth'
});
</script>

95
pages/login.vue Normal file → Executable file
View File

@@ -1,44 +1,59 @@
<template>
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
<div
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg">
<h2 class="text-xl font-semibold text-center">Login</h2>
<form class="flex flex-col gap-y-2 my-2"
@submit.prevent="signup()">
<input
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
v-model="username"
placeholder="username" />
<input
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
v-model="password"
placeholder="password" />
<input type="submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" />
</form>
<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500"
to="/signup">Signup</nuxt-link></div>
</div>
</div>
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
<div
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg"
>
<h2 class="text-xl font-semibold text-center">
Login
</h2>
<form
class="flex flex-col gap-y-2 my-2"
@submit.prevent="signup()"
>
<input
v-model="username"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
placeholder="username"
>
<input
v-model="password"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
placeholder="password"
>
<input
type="submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
>
</form>
<div class="text-center">
Or <nuxt-link
class="hover:underline text-blue-500"
to="/signup"
>
Signup
</nuxt-link>
</div>
</div>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store'
import { useGlobalStore } from '~/stores/store';
import { SafeUser } from '~/types';
definePageMeta({
layout: 'clean'
})
});
export default {
data() {
return {
username: '',
password: ''
}
};
},
methods: {
async signup() {
@@ -49,27 +64,27 @@ export default {
username: this.username,
password: this.password
},
}) as { userId: string; token: string; user: SafeUser; }
}) as { userId: string; token: string; user: SafeUser; };
const userId = useCookie('userId')
userId.value = user.userId
const token = useCookie('sessionToken')
token.value = user.token
const userId = useCookie('userId');
userId.value = user.userId;
const token = useCookie('sessionToken');
token.value = user.token;
setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` }
const { servers, dms } = await $fetch('/api/user/getServers', { headers })
const headers = { Cookie: `sessionToken=${token.value}` };
const { servers, dms } = await $fetch('/api/user/getServers', { headers });
if (!servers || !dms) return;
globalStore.setServers(servers)
globalStore.setDms(dms)
globalStore.setServers(servers);
globalStore.setDms(dms);
globalStore.setUser(user.user)
globalStore.setUser(user.user);
navigateTo('/channel/@me')
})
navigateTo('/channel/@me');
});
}
}
}
};
</script>

107
pages/signup.vue Normal file → Executable file
View File

@@ -1,43 +1,58 @@
<template>
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
<div
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg">
<h2 class="text-xl font-semibold text-center">Sign up</h2>
<form class="flex flex-col gap-y-2 my-2"
@submit.prevent="signup()">
<input
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
v-model="username"
placeholder="username" />
<input
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="email"
v-model="email"
placeholder="email" />
<input
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
v-model="password"
placeholder="password" />
<input type="submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" />
</form>
<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500"
to="/login">Login</nuxt-link></div>
</div>
</div>
<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
<div
class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg"
>
<h2 class="text-xl font-semibold text-center">
Sign up
</h2>
<form
class="flex flex-col gap-y-2 my-2"
@submit.prevent="signup()"
>
<input
v-model="username"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
placeholder="username"
>
<input
v-model="email"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="email"
placeholder="email"
>
<input
v-model="password"
class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
placeholder="password"
>
<input
type="submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
>
</form>
<div class="text-center">
Or <nuxt-link
class="hover:underline text-blue-500"
to="/login"
>
Login
</nuxt-link>
</div>
</div>
</div>
</template>
<script lang="ts">
import { NuxtLink } from '~/.nuxt/components';
import { useGlobalStore } from '~/stores/store'
import { useGlobalStore } from '~/stores/store';
import { SafeUser } from '~/types';
definePageMeta({
layout: 'clean'
})
});
export default {
data() {
@@ -45,7 +60,7 @@ export default {
username: '',
email: '',
password: ''
}
};
},
methods: {
async signup() {
@@ -57,27 +72,27 @@ export default {
email: this.email,
password: this.password
},
}) as { userId: string; token: string; user: SafeUser; }
}) as { userId: string; token: string; user: SafeUser; };
const userId = useCookie('userId')
userId.value = user.userId
const token = useCookie('sessionToken')
token.value = user.token
const userId = useCookie('userId');
userId.value = user.userId;
const token = useCookie('sessionToken');
token.value = user.token;
setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` }
const { servers, dms } = await $fetch('/api/user/getServers', { headers })
const headers = { Cookie: `sessionToken=${token.value}` };
const { servers, dms } = await $fetch('/api/user/getServers', { headers });
if (!servers || !dms) return;
globalStore.setServers(servers)
globalStore.setDms(dms)
globalStore.setServers(servers);
globalStore.setDms(dms);
globalStore.setUser(user.user)
globalStore.setUser(user.user);
navigateTo('/channel/@me')
})
navigateTo('/channel/@me');
});
}
}
}
};
</script>

17
pages/test.vue Normal file → Executable file
View File

@@ -1,14 +1,5 @@
<template>
<span class="test"></span>
</template>
<style>
.test {
background: url(/32.png);
width: 16px;
height: 16px;
display: inline-block;
background-position: -544px -510px;
background-size: 6480% 6480%;
}
</style>
<div>
<Popup />
</div>
</template>