chore(partners): adjust limit for messages

apps/partners/package.json

@@ -17,6 +17,7 @@
     "@graphql-yoga/plugin-response-cache": "^3.8.2",
     "@lucia-auth/adapter-drizzle": "^1.0.7",
     "@node-rs/argon2": "^1.8.3",
+    "@tanstack/react-virtual": "^3.9.0",
     "@umamin/db": "workspace:*",
     "@umamin/gql": "workspace:*",
     "@umamin/ui": "workspace:*",

apps/partners/src/app/dashboard/components/received/card.tsx

@@ -27,7 +27,7 @@ export function ReceivedMessageCard({
   const msg = readFragment(receivedMessageFragment, data);
 
   return (
-    <div id={`umamin-${msg.id}`} className="w-full max-w-[500px]">
+    <div id={`umamin-${msg.id}`} className="w-full">
       <Card>
         <CardHeader className="flex px-12">
           <p className="font-bold text-center leading-normal text-lg min-w-0 break-words">

apps/partners/src/app/dashboard/components/received/list.tsx

@@ -59,7 +59,7 @@ export function ReceivedMessagesList({ messages, initialCursor }: Props) {
   const [cursor, setCursor] = useState(initialCursor);
   const [msgs, setMsgs] = useState([] as ReceivedMessagesResult);
 
-  const [hasMore, setHasMore] = useState(messages?.length === 10);
+  const [hasMore, setHasMore] = useState(messages?.length === 30);
   const [isFetching, setIsFetching] = useState(false);
 
   const loadMessages = useCallback(async () => {
@@ -104,7 +104,7 @@ export function ReceivedMessagesList({ messages, initialCursor }: Props) {
   }, [inView]);
 
   return (
-    <section className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3">
+    <section className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3 w-full">
       {messages?.map((msg) => (
         <div key={msg.id}>
           <ReceivedMessageCard data={msg} />
@@ -122,11 +122,7 @@ export function ReceivedMessagesList({ messages, initialCursor }: Props) {
         </div>
       ))}
 
-      {isFetching && (
-        <div className="container">
-          <Skeleton className="w-full h-[200px] rounded-lg" />
-        </div>
-      )}
+      {isFetching && <Skeleton className="w-full h-[200px] rounded-lg" />}
       {hasMore && <div ref={ref}></div>}
     </section>
   );

apps/partners/src/app/dashboard/queries.ts

@@ -7,7 +7,7 @@ import { receivedMessageFragment } from "./components/received/card";
 const RECEIVED_MESSAGES_QUERY = graphql(
   `
     query ReceivedMessages($type: String!) {
-      messages(type: $type, limit: 20) {
+      messages(type: $type, limit: 30) {
         __typename
         id
         createdAt

apps/partners/src/persisted-operations.json

@@ -1,4 +1,4 @@
 {
-  "f07a17f7e44b839d7a1449115b9810d55447696a558d7416f16dc0b9c978217f": "query ReceivedMessages($type: String!) {\n  messages(type: $type, limit: 20) {\n    __typename\n    id\n    createdAt\n    ...MessageFragment\n  }\n}\n\nfragment MessageFragment on Message {\n  id\n  question\n  content\n  reply\n  createdAt\n  updatedAt\n}",
+  "f07a17f7e44b839d7a1449115b9810d55447696a558d7416f16dc0b9c978217f": "query ReceivedMessages($type: String!) {\n  messages(type: $type, limit: 30) {\n    __typename\n    id\n    createdAt\n    ...MessageFragment\n  }\n}\n\nfragment MessageFragment on Message {\n  id\n  question\n  content\n  reply\n  createdAt\n  updatedAt\n}",
   "10ae521c718fee919520bf95d2cdc74ee1bd0d862d468ca4948ad705bb1e2909": "query ReceivedMessagesFromCursor($input: MessagesFromCursorInput!) {\n  messagesFromCursor(input: $input) {\n    __typename\n    data {\n      __typename\n      id\n      createdAt\n      ...MessageFragment\n    }\n    hasMore\n    cursor {\n      __typename\n      id\n      createdAt\n    }\n  }\n}\n\nfragment MessageFragment on Message {\n  id\n  question\n  content\n  reply\n  createdAt\n  updatedAt\n}"
 }