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

small frontend rewrite

Browse Source
This commit is contained in:
Zoe
2023-04-24 20:12:36 -05:00
parent 4890d657b5
commit 5743ae664e
40 changed files with 2630 additions and 2569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
pages/channel/@me/[dmId].vue Normal file
View File

@@ -0,0 +1,89 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<MessagePane
:channel="channel"
:participants="participants"
/>
<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 { useActiveStore } from '~/stores/activeStore';
import { useDmStore } from '~/stores/dmStore';
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IMessage, IServer, SafeUser } from '~/types';
definePageMeta({
middleware: 'auth'
});
export default {
async setup() {
const route = useRoute();
if (useDmStore().dms.find((e) => { return e.id === route.params.dmId; } ) == undefined) navigateTo('/');
if (useActiveStore().server.channel.id !== route.params.dmId) {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const dm: IChannel = await $fetch(`/api/channels/${route.params.dmId}`, { headers });
if (!dm) throw new Error('couldnt find dm.');
useDmStore().addDM(dm);
if (typeof route.params.dmId !== 'string') throw new Error('route.params.dmId must be a string, but got an array presumably?');
useActiveStore().setActiveDM(dm);
useEmojiPickerStore().closeEmojiPicker();
}
const participants: SafeUser[] | undefined = useActiveStore().dm.dmParticipants;
if (!participants) throw new Error('no one is in this dm?');
const channel = useActiveStore().dm;
channel.messages?.forEach((e: IMessage) => {
e.body = parseMessageBody(e.body, participants);
});
const friend = participants.find((e) => e.id !== useUserStore().user?.id)?.username;
useHeadSafe({
title: `@${friend} - Blop`
});
return {
channel,
participants
};
},
data() {
return {
// socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useEmojiPickerStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.right + 'px',
}
};
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useEmojiPickerStore().closeEmojiPicker();
},
}
};
</script>

93
pages/channel/@me/[id].vue
View File

@@ -1,93 +0,0 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<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';
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);
});
const friend = server.dmParticipants?.find((e) => e.id !== useGlobalStore().user.id)?.username;
useHeadSafe({
title: `@${friend} - Blop`
});
return {
server
};
},
data() {
return {
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
}
};
},
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?');
if (useGlobalStore().activeServer.id !== this.server.id) {
useGlobalStore().closeEmojiPicker();
useGlobalStore().setActiveServer('dms', route.params.id);
}
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useGlobalStore().closeEmojiPicker();
},
}
};
</script>
<style>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

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

@@ -6,7 +6,8 @@
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { useActiveStore } from '~/stores/activeStore';
import { useDmStore } from '~/stores/dmStore';
import { IChannel } from '~/types';
definePageMeta({
@@ -20,14 +21,14 @@ export default {
};
},
mounted() {
useGlobalStore().setActiveServer('dms', '@me');
useActiveStore().type = 'dm';
},
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 });
useGlobalStore().addDM(server);
useDmStore().addDM(server);
useRouter().push({ path: '/channel/@me/' + server.id });
}
}

94
pages/channel/[channelId].vue Normal file
View File

@@ -0,0 +1,94 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<MessagePane
:channel="channel"
:participants="server.participants"
/>
<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 { useActiveStore } from '~/stores/activeStore';
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
import { useServerStore } from '~/stores/serverStore';
import { IChannel, IMessage, IServer } from '~/types';
definePageMeta({
middleware: 'auth'
});
export default {
async setup() {
const route = useRoute();
if (useServerStore().servers.find((e) => { return e.channels.some((e) => e.id === route.params.channelId); } ) == undefined) navigateTo('/');
if (useActiveStore().server.channel.id !== route.params.channelId) {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const [channel, server] = await Promise.all([
await $fetch(`/api/channels/${route.params.channelId}`, { headers }) as IChannel,
await $fetch(`/api/channels/${route.params.channelId}/guild`, { headers }) as IServer,
]);
if (!server) throw new Error('server not found, this means that the channel is serverless but not a dm????');
useServerStore().addServer(server);
if (typeof route.params.channelId !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
useActiveStore().setActiveServer(channel, useServerStore().servers);
useEmojiPickerStore().closeEmojiPicker();
}
useEmojiPickerStore().closeEmojiPicker();
const channel = useActiveStore().server.channel;
const server = useActiveStore().server.server;
channel.messages?.forEach((e: IMessage) => {
e.body = parseMessageBody(e.body, server.participants);
});
useHeadSafe({
title: `#${channel.name} | ${server.name} - Blop`
});
return {
channel,
server
};
},
data() {
return {
// socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useEmojiPickerStore()).emojiPickerData,
emojiPickerStyles: {
top: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.top + 'px',
right: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.right + 'px',
}
};
},
mounted() {
const { $io } = useNuxtApp();
$io.on(`addChannel-${this.server.id}`, (ev) => {
const newChannel = ev as IChannel;
useServerStore().addChannel(this.server.id, newChannel);
});
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useEmojiPickerStore().closeEmojiPicker();
},
}
};
</script>

82
pages/channel/[id].vue
View File

@@ -1,82 +0,0 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<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, IServer } from '~/types';
definePageMeta({
middleware: 'auth'
});
export default {
async setup() {
const route = useRoute();
if (useGlobalStore().servers.find((e) => { return e.channels.some((e) => e.id === route.params.id); } ) == undefined) navigateTo('/');
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const [server, realServer] = await Promise.all([
await $fetch(`/api/channels/${route.params.id}`, { headers }) as IChannel,
await $fetch(`/api/channels/${route.params.id}/guild`, { headers }) as IServer,
]);
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);
});
useHeadSafe({
title: `#${server.name} | ${realServer.name} - Blop`
});
return {
server,
};
},
data() {
return {
socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
emojiPickerStyles: {
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);
});
},
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?');
if (useGlobalStore().activeChannel.id !== this.server.id) {
useGlobalStore().closeEmojiPicker();
useGlobalStore().setActiveServer('servers', route.params.id);
}
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useGlobalStore().closeEmojiPicker();
},
}
};
</script>

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

@@ -1,17 +1,31 @@
<template>
<div>
Hello there traveler
<div v-if="user.isLoggedIn">
Hello, {{ user.user?.username }}
<button @click="user.logout">
Logout
</button>
</div>
<div v-else>
<nuxt-link to="/login">
Login
</nuxt-link>
or
<nuxt-link to="/signup">
Signup
Sign Up
</nuxt-link>
</div>
</template>
<script setup>
<script lang="ts">
import { useUserStore } from '~/stores/userStore';
definePageMeta({
middleware: 'auth'
});
export default {
setup() {
return { user: useUserStore() };
}
};
</script>

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

@@ -1,47 +1,52 @@
<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
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"
<div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
<div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
<img
src="/plants.jpg"
class="h-96 w-64 object-cover"
/>
<div class="p-4 flex flex-col text-center">
<h1 class="font-semibold text-2xl">
Login
</h1>
<form
class="flex flex-col gap-y-3 my-2"
@submit.prevent="login"
>
<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>
<input
v-model="username"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
placeholder="username"
/>
<input
v-model="password"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
placeholder="password"
/>
<input
type="submit"
value="Submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded-md cursor-pointer"
/>
</form>
<p>
or
<nuxt-link to="/signup">
Sign Up
</nuxt-link>
</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { SafeUser } from '~/types';
definePageMeta({
@@ -56,34 +61,26 @@ export default {
};
},
methods: {
async signup() {
const globalStore = useGlobalStore();
async login() {
if (!this.username || !this.password) return;
const user = await $fetch('/api/login', {
const loginData = await $fetch('/api/login', {
method: 'post', body: {
username: this.username,
password: this.password
},
}) as { userId: string; token: string; user: SafeUser; };
}) as { token: string; user: SafeUser; };
const userId = useCookie('userId');
userId.value = user.userId;
userId.value = loginData.user.id;
const token = useCookie('sessionToken');
token.value = user.token;
token.value = loginData.token;
setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` };
const { servers, dms } = await $fetch('/api/user/getServers', { headers });
useUserStore().setUser(loginData.user);
if (!servers || !dms) return;
useServerStore().setServers(loginData.user.servers);
useDmStore().setDms(loginData.user.channels);
globalStore.setServers(servers);
globalStore.setDms(dms);
globalStore.setUser(user.user);
navigateTo('/channel/@me');
});
return navigateTo('/');
}
}
};

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

@@ -1,53 +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">
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"
<div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
<div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
<img
src="/flowery-plants.jpg"
class="h-96 w-64 object-cover filter brightness-95"
/>
<div class="p-4 flex flex-col text-center">
<h1 class="font-semibold text-2xl">
Sign Up
</h1>
<form
class="flex flex-col gap-y-3 my-2"
@submit.prevent="signup"
>
<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>
<input
v-model="username"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="username"
placeholder="username"
/>
<input
v-model="email"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
type="email"
name="email"
placeholder="email"
/>
<input
v-model="password"
class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
name="password"
type="password"
placeholder="password"
/>
<input
type="submit"
value="Submit"
class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
/>
</form>
<p>
or
<nuxt-link to="/login">
Login
</nuxt-link>
</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { SafeUser } from '~/types';
definePageMeta({
@@ -64,34 +70,26 @@ export default {
},
methods: {
async signup() {
const globalStore = useGlobalStore();
if (!this.username || !this.password || !this.email) return;
const user = await $fetch('/api/signup', {
const signupData = await $fetch('/api/signup', {
method: 'post', body: {
username: this.username,
email: this.email,
password: this.password
},
}) as { userId: string; token: string; user: SafeUser; };
}) as { token: string; user: SafeUser; };
const userId = useCookie('userId');
userId.value = user.userId;
userId.value = signupData.user.id;
const token = useCookie('sessionToken');
token.value = user.token;
token.value = signupData.token;
setTimeout(async () => {
const headers = { Cookie: `sessionToken=${token.value}` };
const { servers, dms } = await $fetch('/api/user/getServers', { headers });
useUserStore().setUser(signupData.user);
if (!servers || !dms) return;
useServerStore().setServers(signupData.user.servers);
useDmStore().setDms(signupData.user.channels);
globalStore.setServers(servers);
globalStore.setDms(dms);
globalStore.setUser(user.user);
navigateTo('/channel/@me');
});
return navigateTo('/');
}
}
};

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

@@ -1,3 +1,3 @@
<template>
<div>lorem ipsum</div>
<p>hey</p>
</template>