From dae60381be9574abf8833929e1c299efdbfb1478 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 3 Nov 2022 15:37:31 -0700
Subject: [PATCH] fix: :alembic: messaging pagination

---
 docker-compose.yml                            |  1 +
 package.json                                  |  2 +-
 packages/client/src/pages/messaging/index.vue | 67 ++++++++++---------
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index feea00ae2..3017d3ffc 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,6 +2,7 @@ version: "3"
 
 services:
   web:
+    image: thatonecalculator/calckey
     build: .
     restart: always
     links:
diff --git a/package.json b/package.json
index 2ae48e37a..524950d0e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.6.5",
+	"version": "12.119.0-calc.7",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index db0652bef..40c122473 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -3,42 +3,44 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
 		<div v-size="{ max: [400] }" class="yweeujhr">
-			<MkButton primary class="start" @click="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
+			<MkButton primary class="start" @click="start"><i class="fas fa-plus"></i> {{ i18n.ts.startMessaging }}</MkButton>
 
 			<div v-if="messages.length > 0" class="history">
-				<MkA
-					v-for="(message, i) in messages"
-					:key="message.id"
-					v-anim="i"
-					class="message _block"
-					:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
-					:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
-					:data-index="i"
-				>
-					<div>
-						<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
-						<header v-if="message.groupId">
-							<span class="name">{{ message.group.name }}</span>
-							<MkTime :time="message.createdAt" class="time"/>
-						</header>
-						<header v-else>
-							<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-							<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
-							<MkTime :time="message.createdAt" class="time"/>
-						</header>
-						<div class="body">
-							<p class="text">
-								<span v-if="isMe(message)" class="me">{{ $ts.you }}: </span>
-								<span v-if="message.text != null && message.text.length > 0">{{ message.text }}</span>
-								<span v-else> 📎</span>
-							</p>
+				<MkPagination v-slot="{items}" :pagination="pagination">
+					<MkA
+						v-for="(message, i) in items"
+						:key="message.id"
+						v-anim="i"
+						class="message _block"
+						:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
+						:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
+						:data-index="i"
+					>
+						<div>
+							<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
+							<header v-if="message.groupId">
+								<span class="name">{{ message.group.name }}</span>
+								<MkTime :time="message.createdAt" class="time"/>
+							</header>
+							<header v-else>
+								<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
+								<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
+								<MkTime :time="message.createdAt" class="time"/>
+							</header>
+							<div class="body">
+								<p class="text">
+									<span v-if="isMe(message)" class="me">{{ i18n.ts.you }}: </span>
+									<span v-if="message.text != null && message.text.length > 0">{{ message.text }}</span>
+									<span v-else> 📎</span>
+								</p>
+							</div>
 						</div>
-					</div>
-				</MkA>
+					</MkA>
+				</MkPagination>
 			</div>
 			<div v-if="!fetching && messages.length == 0" class="_fullinfo">
 				<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-				<div>{{ $ts.noHistory }}</div>
+				<div>{{ i18n.ts.noHistory }}</div>
 			</div>
 			<MkLoading v-if="fetching"/>
 		</div>
@@ -67,6 +69,11 @@ let connection = $ref(null);
 
 const getAcct = Acct.toString;
 
+const pagination = {
+	endpoint: 'messaging' as const,
+	limit: 10,
+};
+
 function isMe(message) {
 	return message.userId === $i.id;
 }