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

dockerize, composte, and various improvements

Browse Source
This commit is contained in:
Zoe
2023-06-05 01:44:12 -05:00
parent cb6bfd8880
commit 99c385d211
56 changed files with 5907 additions and 8091 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
pages/channel/@me/[dmId].vue
View File

@@ -1,4 +1,43 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<script lang="ts" setup>
import { useActiveStore } from '~/stores/activeStore';
import { useDmStore } from '~/stores/dmStore';
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, SafeUser } from '~/types';
definePageMeta({
middleware: 'auth'
});
const route = useRoute();
const emojiPickerData = storeToRefs(useEmojiPickerStore()).emojiPickerData
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;
const friend = participants.find((e) => e.id !== useUserStore().user?.id)?.username;
useHeadSafe({
title: `@${friend} - Blop`
});
function pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useEmojiPickerStore().closeEmojiPicker();
}
</script>
<template>
<MessagePane
:channel="channel"
@@ -16,64 +55,4 @@
/>
</Transition>
</div>
</template>
<script lang="ts">
import { useActiveStore } from '~/stores/activeStore';
import { useDmStore } from '~/stores/dmStore';
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IMessage, 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;
const friend = participants.find((e) => e.id !== useUserStore().user?.id)?.username;
useHeadSafe({
title: `@${friend} - Blop`
});
return {
channel,
participants
};
},
data() {
return {
emojiPickerData: storeToRefs(useEmojiPickerStore()).emojiPickerData,
};
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useEmojiPickerStore().closeEmojiPicker();
},
}
};
</script>
</template>

138
pages/channel/@me/index.vue
View File

@@ -1,36 +1,120 @@
<template>
<form @submit.prevent="startDM">
<input v-model="userId">
<input type="submit">
</form>
</template>
<script lang="ts">
<script lang="ts" setup>
import { useActiveStore } from '~/stores/activeStore';
import { useDmStore } from '~/stores/dmStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel } from '~/types';
import { ref, onMounted } from 'vue';
definePageMeta({
middleware: 'auth'
});
export default {
data() {
return {
userId: ''
};
},
mounted() {
useActiveStore().setActiveHome();
},
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 userId = ref('');
const user = useUserStore().user;
const selectedTab = ref('all' as 'all' | 'pending');
useDmStore().addDM(server);
useRouter().push({ path: '/channel/@me/' + server.id });
}
}
};
</script>
async function startDM() {
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: userId.value }, headers });
useDmStore().addDM(server);
useRouter().push({ path: '/channel/@me/' + server.id });
}
function changeTab(type: 'all' | 'pending') {
selectedTab.value = type;
}
onMounted(() => {
useActiveStore().setActiveHome();
});
</script>
<template>
<div
class="h-full relative bg-[var(--primary-bg)] flex flex-col text-[#fefefe]"
>
<header class="py-3 px-2">
<div class="flex flex-row items-center">
<span class="flex items-center mr-4">
<span class="mr-1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="26"
height="26"
viewBox="0 0 24 24"
><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.242 2.242 0 0 0-3.129-.006l-.224.22l-.223-.22a2.242 2.242 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071L18 22z"
/></svg>
</span>
<span class="text-xl">
Friends
</span>
</span>
<div class="flex flex-row gap-x-2">
<button
class="px-2.5 py-0.5 bg-inherit backdrop-filter rounded-md transition-all drop-shadow-sm"
:class="(selectedTab === 'all') ? 'backdrop-brightness-[1.35]' : 'hover:backdrop-brightness-[1.35]'"
@click="changeTab('all')"
>
All
</button>
<button
class="px-2.5 py-0.5 bg-inherit backdrop-filter rounded-md transition-all drop-shadow-sm"
:class="(selectedTab === 'pending') ? 'backdrop-brightness-[1.35]' : 'hover:backdrop-brightness-[1.35]'"
@click="changeTab('pending')"
>
Pending
<span
v-if="user.incomingFriendRequests?.length > 0"
class="text-sm px-1 py-px rounded bg-blue-700"
>{{ user?.incomingFriendRequests?.length }}</span>
</button>
</div>
</div>
</header>
<main class="px-3 py-1.5 w-full">
<div v-if="selectedTab === 'all'">
<div v-if="user.friends?.length > 0">
<div
v-for="friend in user?.friends"
:key="friend.id"
>
<FriendChip
:user="friend"
:request="{ isRequest: false }"
/>
</div>
</div>
<div v-else>
No friends yet...
</div>
</div>
<div v-if="selectedTab === 'pending'">
<div
v-for="outgoingRequest in user?.outgoingFriendRequests"
:key="outgoingRequest.id"
>
<FriendChip
:user="outgoingRequest.recipient"
:request="{ isRequest: true, outgoing: true, id: outgoingRequest.id }"
/>
</div>
<div
v-for="incomingRequest in user?.incomingFriendRequests"
:key="incomingRequest.id"
>
<FriendChip
:user="incomingRequest.sender"
:request="{ isRequest: true, incoming: true, id: incomingRequest.id }"
/>
</div>
</div>
</main>
</div>
</template>

119
pages/channel/[channelId].vue
View File

@@ -1,4 +1,57 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<script lang="ts" setup>
import { useActiveStore } from '~/stores/activeStore';
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
import { useServerStore } from '~/stores/serverStore';
import { IChannel, IServer } from '~/types';
import { onMounted } from 'vue';
definePageMeta({
middleware: 'auth'
});
const route = useRoute();
const emojiPickerData = storeToRefs(useEmojiPickerStore()).emojiPickerData;
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 server = useActiveStore().server;
useHeadSafe({
title: `#${server.channel.name} | ${server.server.name} - Blop`
});
function pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useEmojiPickerStore().closeEmojiPicker();
}
onMounted(async () => {
const { $io } = useNuxtApp();
(await $io).on(`addChannel-${server.server.id}`, (ev) => {
const newChannel = ev as IChannel;
useServerStore().addChannel(server.server.id, newChannel);
});
});
</script>
<template>
<MessagePane
:channel="server.channel"
@@ -16,68 +69,4 @@
/>
</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 server = useActiveStore().server;
useHeadSafe({
title: `#${server.channel.name} | ${server.server.name} - Blop`
});
return {
server
};
},
data() {
return {
emojiPickerData: storeToRefs(useEmojiPickerStore()).emojiPickerData,
};
},
async mounted() {
const { $io } = useNuxtApp();
(await $io).on(`addChannel-${this.server.server.id}`, (ev) => {
const newChannel = ev as IChannel;
useServerStore().addChannel(this.server.server.id, newChannel);
});
},
methods: {
pickedEmoji(emoji: string) {
const { $emit } = useNuxtApp();
$emit('pickedEmoji', emoji);
useEmojiPickerStore().closeEmojiPicker();
},
}
};
</script>
</template>

37
pages/index.vue
View File

@@ -1,31 +1,18 @@
<template>
<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">
Sign Up
</nuxt-link>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { useUserStore } from '~/stores/userStore';
definePageMeta({
middleware: 'auth'
});
export default {
setup() {
return { user: useUserStore() };
}
};
</script>
const user = useUserStore();
</script>
<template>
<div>
Hello, {{ user.user?.username }}
<button @click="user.logout">
Logout
</button>
</div>
</template>

82
pages/login.vue
View File

@@ -1,5 +1,40 @@
<script lang="ts" setup>
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IServer, SafeUser } from '~/types';
import { ref } from 'vue';
definePageMeta({
layout: 'clean'
});
const username = ref('');
const password = ref('');
async function login() {
if (!username.value || !password.value) return;
const loginData = await $fetch('/api/login', {
method: 'post', body: {
username: username.value,
password: password.value
},
}) as { token: string; user: SafeUser; };
const token = useCookie('sessionToken');
token.value = loginData.token;
useUserStore().setUser(loginData.user);
useServerStore().setServers(loginData.user.servers || [] as IServer[]);
useDmStore().setDms(loginData.user.channels || [] as IChannel[]);
return navigateTo('/');
}
</script>
<template>
<div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
<div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)] text-[#fefefe]">
<div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
<img
src="/nahil-naseer-xljtGZ2-P3Y-unsplash.jpg"
@@ -41,47 +76,4 @@
</div>
</div>
</div>
</template>
<script lang="ts">
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IServer, SafeUser } from '~/types';
definePageMeta({
layout: 'clean'
});
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
if (!this.username || !this.password) return;
const loginData = await $fetch('/api/login', {
method: 'post', body: {
username: this.username,
password: this.password
},
}) as { token: string; user: SafeUser; };
const userId = useCookie('userId');
userId.value = loginData.user.id;
const token = useCookie('sessionToken');
token.value = loginData.token;
useUserStore().setUser(loginData.user);
useServerStore().setServers(loginData.user.servers || [] as IServer[]);
useDmStore().setDms(loginData.user.channels || [] as IChannel[]);
return navigateTo('/');
}
}
};
</script>
</template>

86
pages/signup.vue
View File

@@ -1,5 +1,42 @@
<script lang="ts" setup>
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IServer, SafeUser } from '~/types';
import { ref } from 'vue';
definePageMeta({
layout: 'clean'
});
const username = ref('');
const password = ref('');
const email = ref('');
async function signup() {
if (!username.value || !password.value || !email.value) return;
const signupData = await $fetch('/api/signup', {
method: 'post', body: {
username: username.value,
email: email.value,
password: password.value
},
}) as { token: string; user: SafeUser; };
const token = useCookie('sessionToken');
token.value = signupData.token;
useUserStore().setUser(signupData.user);
useServerStore().setServers(signupData.user.servers || [] as IServer[]);
useDmStore().setDms(signupData.user.channels || [] as IChannel[]);
return navigateTo('/');
}
</script>
<template>
<div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
<div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)] text-[#fefefe]">
<div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
<img
src="/annie-spratt-8mqOw4DBBSg-unsplash.jpg"
@@ -48,49 +85,4 @@
</div>
</div>
</div>
</template>
<script lang="ts">
import { useDmStore } from '~/stores/dmStore';
import { useServerStore } from '~/stores/serverStore';
import { useUserStore } from '~/stores/userStore';
import { IChannel, IServer, SafeUser } from '~/types';
definePageMeta({
layout: 'clean'
});
export default {
data() {
return {
username: '',
email: '',
password: ''
};
},
methods: {
async signup() {
if (!this.username || !this.password || !this.email) return;
const signupData = await $fetch('/api/signup', {
method: 'post', body: {
username: this.username,
email: this.email,
password: this.password
},
}) as { token: string; user: SafeUser; };
const userId = useCookie('userId');
userId.value = signupData.user.id;
const token = useCookie('sessionToken');
token.value = signupData.token;
useUserStore().setUser(signupData.user);
useServerStore().setServers(signupData.user.servers || [] as IServer[]);
useDmStore().setDms(signupData.user.channels || [] as IChannel[]);
return navigateTo('/');
}
}
};
</script>
</template>

28
pages/test.vue
View File

@@ -1,16 +1,3 @@
<template>
<div class="bg-[var(--primary-bg)] h-full">
<Popup
:opened="true"
:openedBy="'userInfo'"
/>
<Popup
:opened="true"
:openedBy="'emojiPicker'"
/>
</div>
</template>
<script lang="ts">
import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
@@ -28,4 +15,17 @@ export default {
useEmojiPickerStore().openEmojiPicker({ opened: true, type: 'userInfo', right: 0, top: 0 });
}
};
</script>
</script>
<template>
<div class="bg-[var(--primary-bg)] h-full">
<Popup
:opened="true"
:openedBy="'userInfo'"
/>
<Popup
:opened="true"
:openedBy="'emojiPicker'"
/>
</div>
</template>