components/Me/FriendsList.vue

@@ -26,9 +26,7 @@
 <script lang="ts" setup>
 const { fetchFriends } = useApi();
 
-const friends = await fetchFriends().then((response) => {
+const friends = sortUsers(await fetchFriends())
-	return response.sort((a, b) => getDisplayName(a).localeCompare(getDisplayName(b)))
-})
 
 const props = defineProps<{
     variant: string

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

@@ -64,9 +64,7 @@ onActivated(async () => {
 });
 
 async function setArrayVariables() {
-	members.value = await fetchMembers(route.params.serverId as string).then((response) => {
+	members.value = sortMembers(await fetchMembers(route.params.serverId as string))
-		return response.sort((a, b) => getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b)))
-	});
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);

utils/sortMembers.ts

@@ -0,0 +1,7 @@
+import type { GuildMemberResponse } from "~/types/interfaces";
+
+export default function sortMembers(members: GuildMemberResponse[]): GuildMemberResponse[] {
+	return members.sort((a, b) => {
+		return getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b))
+	})
+}

utils/sortUsers.ts

@@ -0,0 +1,7 @@
+import type { UserResponse } from "~/types/interfaces";
+
+export default function sortUsers(users: UserResponse[]): UserResponse[] {
+	return users.sort((a, b) => {
+		return getDisplayName(a).localeCompare(getDisplayName(b))
+	})
+}