Show all my messages (#1864)

Closes #1306
Lets you page through your own messages.

I also make it easier to show your own deleted messages (there's now an
optional include_deleted=true param). But I don't turn this on, because
we don't properly currently apply the badge correct to such deleted
messages (not sure why)

---------

Co-authored-by: notmd <tinhmeo10@gmail.com>

website/src/components/UserMessageConversation.tsx

@@ -0,0 +1,47 @@
+import { Button, CircularProgress, Flex, Spacer } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { get } from "src/lib/api";
+import { FetchUserMessagesCursorResponse } from "src/types/Conversation";
+import useSWRImmutable from "swr/immutable";
+
+import { useCursorPagination } from "./DataTable/useCursorPagination";
+import { MessageConversation } from "./Messages/MessageConversation";
+
+const UserMessageConversation = () => {
+  const { pagination, toNextPage, toPreviousPage } = useCursorPagination();
+  const { t } = useTranslation("leaderboard");
+
+  const { data, error, isLoading } = useSWRImmutable<FetchUserMessagesCursorResponse>(
+    `/api/messages/user?cursor=${encodeURIComponent(pagination.cursor)}&direction=${pagination.direction}`, // If we want to show own deleted messages, add:  &include_deleted=true
+    get,
+    {
+      revalidateOnMount: true,
+    }
+  );
+
+  if (isLoading && !data) {
+    return <CircularProgress isIndeterminate />;
+  }
+
+  if (error) {
+    return <>Unable to load messages.</>;
+  }
+
+  const userMessages = data?.items || [];
+
+  return (
+    <div>
+      <Flex mb="2">
+        <Button onClick={() => toPreviousPage(data)} isDisabled={!data?.prev}>
+          {t("previous")}
+        </Button>
+        <Spacer />
+        <Button onClick={() => toNextPage(data)} isDisabled={!data?.next}>
+          {t("next")}
+        </Button>
+      </Flex>
+      <MessageConversation enableLink messages={userMessages} />
+    </div>
+  );
+};
+export default UserMessageConversation;

website/src/lib/oasst_api_client.ts

@@ -351,6 +351,23 @@ export class OasstApiClient {
     return this.get<Message[]>(`/api/v1/messages?${params}`);
   }
 
+  fetch_my_messages_cursor(
+    user: BackendUserCore,
+    {
+      direction,
+      cursor,
+      ...rest
+    }: { include_deleted?: boolean; max_count?: number; cursor?: string; direction: "forward" | "back"; desc?: boolean }
+  ) {
+    return this.get<FetchUserMessagesCursorResponse>(`/api/v1/messages/cursor`, {
+      ...rest,
+      username: user.id,
+      auth_method: user.auth_method,
+      after: direction === "forward" ? cursor : undefined,
+      before: direction === "back" ? cursor : undefined,
+    });
+  }
+
   fetch_recent_messages(lang: string) {
     return this.get<Message[]>(`/api/v1/messages`, { lang });
   }

website/src/lib/users.ts

@@ -7,7 +7,7 @@ import type { BackendUserCore } from "src/types/Users";
  * @param {string} id The user's web auth id.
  *
  */
-export const getBackendUserCore = async (id: string): Promise<BackendUserCore | null> => {
+export const getBackendUserCore = async (id: string): Promise<BackendUserCore> => {
   const user = await prisma.user.findUnique({
     where: { id },
     select: {
@@ -18,7 +18,7 @@ export const getBackendUserCore = async (id: string): Promise<BackendUserCore |
   });
 
   if (!user) {
-    return null;
+    throw new Error("User not found");
   }
 
   // If there are no linked accounts, just use what we have locally.

website/src/pages/api/messages/user.ts

@@ -2,10 +2,20 @@ import { withoutRole } from "src/lib/auth";
 import { createApiClientFromUser } from "src/lib/oasst_client_factory";
 import { getBackendUserCore } from "src/lib/users";
 
+const LIMIT = 10;
+
 const handler = withoutRole("banned", async (req, res, token) => {
   const user = await getBackendUserCore(token.sub);
   const client = createApiClientFromUser(user);
-  const messages = await client.fetch_my_messages(user);
+  const { cursor, direction } = req.query;
+
+  const messages = await client.fetch_my_messages_cursor(user, {
+    direction: direction as "back",
+    cursor: cursor as string,
+    max_count: LIMIT,
+    desc: true,
+  });
+
   res.status(200).json(messages);
 });
 

website/src/pages/messages/index.tsx

@@ -6,6 +6,7 @@ import { MessageConversation } from "src/components/Messages/MessageConversation
 import { get } from "src/lib/api";
 import useSWRImmutable from "swr/immutable";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+import UserMessageConversation from "src/components/UserMessageConversation";
 import { useCurrentLocale } from "src/hooks/locale/useCurrentLocale";
 import { getLocaleDisplayName } from "src/lib/languages";
 import { API_ROUTES } from "src/lib/routes";
@@ -17,7 +18,6 @@ const MessagesDashboard = () => {
 
   const lang = useCurrentLocale();
   const { data: messages } = useSWRImmutable(API_ROUTES.RECENT_MESSAGES({ lang }), get, { revalidateOnMount: true });
-  const { data: userMessages } = useSWRImmutable(`/api/messages/user`, get, { revalidateOnMount: true });
 
   const currentLanguage = useCurrentLocale();
 
@@ -55,11 +55,7 @@ const MessagesDashboard = () => {
             borderRadius="xl"
             className="p-6 shadow-sm"
           >
-            {userMessages ? (
-              <MessageConversation enableLink messages={userMessages} />
-            ) : (
-              <CircularProgress isIndeterminate />
-            )}
+            <UserMessageConversation />
           </Box>
         </Box>
       </SimpleGrid>