feat: change grouped messages being called compact to grouped

components/InvitePopup.vue

@@ -20,7 +20,7 @@ const route = useRoute();
 
 async function generateInvite(): Promise<void> {
   const createdInvite: InviteResponse | undefined = await fetchWithApi(
-    `/servers/${route.params.serverId}/invites`,
+    `/guilds/${route.params.serverId}/invites`,
     { method: "POST", body: { custom_id: "oijewfoiewf" } }
   );
 

components/Message.vue

@@ -18,7 +18,7 @@
 			</div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" class="message compact-message">
+	<div v-else ref="messageElement" class="message grouped-message">
 		<div class="left-column">
 			<div>
 				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
@@ -42,7 +42,7 @@ const props = defineProps<{
 	text: string,
 	timestamp: number,
 	format: "12" | "24",
-	type: "normal" | "compact",
+	type: "normal" | "grouped",
 	marginBottom: boolean
 }>();
 

components/MessageArea.vue

@@ -27,12 +27,13 @@ import scrollToBottom from '~/utils/scrollToBottom';
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
 const messageTimestamps = ref<Record<string, number>>({});
-const messagesType = ref<Record<string, "normal" | "compact">>({});
+const messagesType = ref<Record<string, "normal" | "grouped">>({});
 
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
 	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 );
+
 if (messagesRes) {
 	messagesRes.reverse();
 	console.log("messages res:", messagesRes.map(msg => msg.message));
@@ -77,7 +78,7 @@ if (messagesRes) {
 			continue;
 		}
 		console.log("RETURNING " + lessThanMax.toString().toUpperCase());
-		messagesType.value[message.uuid] = "compact";
+		messagesType.value[message.uuid] = "grouped";
 	}
 }
 

layouts/client.vue

@@ -11,7 +11,7 @@
 				<Icon name="lucide:house" class="white" size="2rem" />
 			</NuxtLink>
 			<div id="servers-list">
-				<NuxtLink v-for="server of servers" :href="`/servers/${server.uuid}`">
+				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
 					<Icon name="lucide:server" class="white" size="2rem" />
 				</NuxtLink>
 			</div>
@@ -26,7 +26,7 @@ import type { GuildResponse } from '~/types/interfaces';
 
 const loading = useState("loading", () => false);
 
-const servers: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("servers:", servers);

pages/servers/[serverId]/channels/[channelId].vue

@@ -5,7 +5,7 @@
 				<h3>
 					{{ server?.name }}
 					<span>
-						<button @click="showServerSettings">
+						<button @click="showGuildSettings">
 							<Icon name="lucide:settings" />
 						</button>
 					</span>
@@ -20,7 +20,7 @@
 			<div id="channels-list">
 				<Channel v-for="channel of channels" :name="channel.name"
 					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-					:href="`/guilds/${route.params.serverId}/channels/${channel.uuid}`" />
+					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
@@ -40,7 +40,7 @@ const route = useRoute();
 
 const loading = useState("loading");
 
-const channelUrlPath = `/channels/${route.params.channelId}`;
+const channelUrlPath = `channels/${route.params.channelId}`;
 
 const server = ref<GuildResponse | undefined>();
 const channels = ref<ChannelResponse[] | undefined>();
@@ -102,18 +102,19 @@ const members = [
 
 onMounted(async () => {
 	console.log("channelid: set loading to true");
-	server.value = await fetchWithApi(`servers/${route.params.serverId}`);
+	const guildUrl = `guilds/${route.params.serverId}`;
+	server.value = await fetchWithApi(guildUrl);
 
-	channels.value = await fetchWithApi(`/channels`);
+	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);
-	channel.value = await fetchWithApi(route.path);
+	channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
 	console.log("channel:", channel.value);
 
 	console.log("channelid: channel:", channel);
 	console.log("channelid: set loading to false");
 });
 
-function showServerSettings() { }
+function showGuildSettings() { }
 
 function toggleInvitePopup(e: Event) {
 	e.preventDefault();

pages/servers/[serverId]/index.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts" setup>
-const server = await fetchWithApi(`/guilds/${useRoute().params.serverId}`);
-console.log("server:", server);
+const guild = await fetchWithApi(`/guilds/${useRoute().params.serverId}`);
+console.log("guild:", guild);
 
 </script>