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

66
stores/activeStore.ts Normal file
View File

@@ -0,0 +1,66 @@
import { IChannel, IMessage, IServer } from '~/types';
import { useServerStore } from './serverStore';
export const useActiveStore = defineStore('activeStore', {
state: () => ({
type: '' as 'dm' | 'server',
dm: {} as IChannel,
server: {
server: {} as IServer,
channel: {} as IChannel
}
}),
actions: {
setActiveDM(dm: IChannel) {
this.type = 'dm';
this.dm = dm;
},
setActiveServer(channel: IChannel, servers: IServer[]) {
this.type = 'server';
const activeServer = servers.find((e: IServer) => {
return e.channels.some((c: IChannel) => c.id === channel.id);
});
if (!activeServer) return;
const activeChannelIndex = activeServer.channels.findIndex((e: IChannel) => e.id === channel.id);
if (activeChannelIndex < 0) return;
activeServer.channels[activeChannelIndex] = channel;
const activeChannel = activeServer.channels[activeChannelIndex];
if (!activeChannel) return;
this.server.server = activeServer;
this.server.channel = activeChannel;
},
addMessage(message: IMessage) {
const channel = (this.type === 'server') ? this.server.channel : this.dm;
channel.messages.push(message);
},
updateMessage(message: IMessage) {
const channel = (this.type === 'server') ? this.server.channel : this.dm;
const messageIndex = channel.messages.findIndex((e: IMessage) => e.id === message.id);
if (messageIndex == -1) return;
channel.messages[messageIndex] = message;
},
removeMessage(messageId: string) {
const channel = (this.type === 'server') ? this.server.channel : this.dm;
const messageIndex = channel.messages.findIndex((e: IMessage) => e.id === messageId);
if (messageIndex == -1) return;
delete(channel.messages[messageIndex]);
}
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useActiveStore, import.meta.hot));
}

27
stores/dmStore.ts Normal file
View File

@@ -0,0 +1,27 @@
import { IChannel } from '~/types';
export const useDmStore = defineStore('dmStore', {
state: () => ({
dms: [] as IChannel[]
}),
actions: {
setDms(dms: IChannel[]) {
this.dms = dms;
},
addDM(dmChannel: IChannel) {
if (this.dms.find((e) => e.id === dmChannel.id)) {
const index = this.dms.findIndex((e) => e.id === dmChannel.id);
this.dms[index] = dmChannel;
return;
}
this.dms.push(dmChannel);
},
getById(id: string) {
return this.dms.find((e) => e.id === id);
}
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useDmStore, import.meta.hot));
}

41
stores/emojiPickerStore.ts Normal file
View File

@@ -0,0 +1,41 @@
import { IPopupData } from '~/types';
export const useEmojiPickerStore = defineStore('emojiPickerStore', {
state: () => ({
emojiPickerData: {type: 'emojiPicker'} as IPopupData,
}),
actions: {
openEmojiPicker(payload: IPopupData) {
this.emojiPickerData.type = 'emojiPicker';
this.emojiPickerData.top = payload.top;
this.emojiPickerData.right = payload.right;
this.emojiPickerData.openedBy = payload.openedBy;
this.emojiPickerData.opened = true;
},
toggleEmojiPicker(payload: IPopupData) {
let messageId;
if (this.emojiPickerData.openedBy === undefined) {
messageId = null;
} else {
messageId = this.emojiPickerData.openedBy.messageId || null;
}
console.log(new Date().getTime());
console.log(!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId, this.emojiPickerData.opened, payload.openedBy?.messageId, messageId);
if (!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId) {
this.openEmojiPicker(payload);
} else {
this.closeEmojiPicker();
}
},
closeEmojiPicker() {
if (this.emojiPickerData.openedBy) this.emojiPickerData.openedBy.messageId = '';
this.emojiPickerData.opened = false;
},
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useEmojiPickerStore, import.meta.hot));
}

34
stores/serverStore.ts Normal file
View File

@@ -0,0 +1,34 @@
import { IChannel, IServer } from '~/types';
export const useServerStore = defineStore('serverStore', {
state: () => ({
servers: [] as IServer[]
}),
actions: {
setServers(servers: IServer[]) {
this.servers = servers;
},
addServer(server: IServer) {
if (this.servers.find((e) => e.id === server.id)) {
const index = this.servers.findIndex((e) => e.id === server.id);
this.servers[index] = server;
return;
}
this.servers.push(server);
},
addChannel(serverId: string, channel: IChannel) {
const serverIndex = this.servers.findIndex(s => s.id === serverId);
const server = this.servers[serverIndex];
if (serverIndex < 0 || !server) return;
if (server.channels.find((c) => c.id === channel.id)) return;
server.channels.push(channel);
},
getByChannelId(channelId: string) {
return this.servers.find((e: IServer) => e.channels.some((c: IChannel) => c.id === channelId));
}
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useServerStore, import.meta.hot));
}

135
stores/store.ts
View File

@@ -1,135 +0,0 @@
import { Socket } from 'socket.io-client';
import { SafeUser, IServer, IChannel, IMessage, IPopupData } from '~/types';
export const useGlobalStore = defineStore('global', {
state: () => ({
activeChannel: {} as IChannel,
activeServer: {} as IServer | IChannel,
activeServerType: '' as 'dms' | 'servers' | undefined,
user: {} as SafeUser,
dms: [] as IChannel[],
servers: [] as IServer[],
emojiPickerData: {type: 'emojiPicker'} as IPopupData,
socket: null as unknown
}),
actions: {
setActiveServer(type: 'servers' | 'dms', channelId: string) {
if (channelId === '@me') {
this.activeServer = {} as IServer | IChannel;
this.activeServerType = 'dms';
return;
}
this.activeServerType = type;
const searchableArray: IChannel[] | IServer[] = this[type];
if (!searchableArray) return;
let activeServer: IServer | IChannel;
if (type === 'servers') {
activeServer = searchableArray.find((e: IServer) => {
return e.channels.some((channel: IChannel) => channel.id === channelId);
});
} else {
activeServer = searchableArray.find((e: IChannel) => {
return e.id === channelId;
});
}
this.activeServer = activeServer;
},
setActiveChannel(channel: IChannel) {
this.activeChannel = channel;
},
setActiveServerType(type: 'dms' | 'servers') {
this.activeServerType = type;
},
updateServer(channelId: string, server: IServer) {
const serverIndex = this.servers.findIndex(s => s.channels.some((c) => c.id === channelId));
this.servers[serverIndex] = server;
},
setServers(servers: Array<IServer>) {
this.servers = servers;
},
addChannel(serverId: string, channel: IChannel) {
const serverIndex = this.servers.findIndex(s => s.id === serverId);
const server = this.servers[serverIndex];
if (serverIndex < 0 || !server) return;
if (server.channels.find((c) => c.id === channel.id)) return;
server.channels.push(channel);
},
addDM(dmChannel: IChannel) {
if (this.dms.find((e) => e.id === dmChannel.id)) {
const index = this.dms.findIndex((e) => e.id === dmChannel.id);
this.dms[index] = dmChannel;
return;
}
this.dms.push(dmChannel);
},
addServer(server: IServer) {
if (this.servers.find((e) => e.id === server.id)) {
const index = this.servers.findIndex((e) => e.id === server.id);
this.servers[index] = server;
return;
}
this.servers.push(server);
},
getServerByChannelId(channelId: string) {
let channel: IChannel | IServer | undefined = this.dms.find((e) => e.id === channelId);
if (channel) return channel;
channel = this.servers.find((e) => e.channels.some((c) => c.id === channelId));
return channel;
},
setDms(dms: Array<IChannel>) {
this.dms = dms;
},
setSocket(socket: Socket) {
this.socket = socket;
},
setUser(user: SafeUser) {
this.user = user;
},
updateMessage(messageId: string, message: IMessage) {
const messageIndex = this.activeChannel.messages.findIndex((e) => e.id === messageId);
if (messageIndex < 0) return;
this.activeChannel.messages[messageIndex] = message;
},
removeMessage(messageId: string) {
if (!this.activeChannel.messages.find(m => m.id === messageId)) return;
this.activeChannel.messages = this.activeChannel.messages.filter(m => m.id !== messageId);
},
openEmojiPicker(payload: IPopupData) {
this.emojiPickerData.type = 'emojiPicker';
this.emojiPickerData.top = payload.top;
this.emojiPickerData.right = payload.right;
this.emojiPickerData.openedBy = payload.openedBy;
this.emojiPickerData.opened = true;
},
toggleEmojiPicker(payload: IPopupData) {
let messageId;
if (this.emojiPickerData.openedBy === undefined) {
messageId = null;
} else {
messageId = this.emojiPickerData.openedBy.messageId || null;
}
console.log(new Date().getTime());
console.log(!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId, this.emojiPickerData.opened, payload.openedBy?.messageId, messageId);
if (!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId) {
this.openEmojiPicker(payload);
} else {
this.closeEmojiPicker();
}
},
closeEmojiPicker() {
if (this.emojiPickerData.openedBy) this.emojiPickerData.openedBy.messageId = '';
this.emojiPickerData.opened = false;
},
logout() {
this.dms = [];
this.servers = [];
this.socket = null;
this.activeServer = {} as IChannel;
}
},
});

27
stores/userStore.ts Normal file
View File

@@ -0,0 +1,27 @@
import { SafeUser } from '~/types';
export const useUserStore = defineStore('userStore', {
state: () => ({
user: null as SafeUser | null,
isLoggedIn: false,
}),
actions: {
setUser(user: SafeUser) {
this.user = user;
this.isLoggedIn = true;
},
async logout() {
await $fetch('/api/user/logout');
useCookie('sessionToken').value = null;
useCookie('userId').value = null;
this.user = null;
this.isLoggedIn = false;
return navigateTo('/login');
}
}
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
}