diff --git a/apps/partners/package.json b/apps/partners/package.json index e04d5a26..65b295d3 100644 --- a/apps/partners/package.json +++ b/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:*", diff --git a/apps/partners/src/app/dashboard/components/received/card.tsx b/apps/partners/src/app/dashboard/components/received/card.tsx index 84333055..9ee980eb 100644 --- a/apps/partners/src/app/dashboard/components/received/card.tsx +++ b/apps/partners/src/app/dashboard/components/received/card.tsx @@ -27,7 +27,7 @@ export function ReceivedMessageCard({ const msg = readFragment(receivedMessageFragment, data); return ( -
+

diff --git a/apps/partners/src/app/dashboard/components/received/list.tsx b/apps/partners/src/app/dashboard/components/received/list.tsx index 82fb3834..6ff66e3b 100644 --- a/apps/partners/src/app/dashboard/components/received/list.tsx +++ b/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 ( -

+
{messages?.map((msg) => (
@@ -122,11 +122,7 @@ export function ReceivedMessagesList({ messages, initialCursor }: Props) {
))} - {isFetching && ( -
- -
- )} + {isFetching && } {hasMore &&
}
); diff --git a/apps/partners/src/app/dashboard/queries.ts b/apps/partners/src/app/dashboard/queries.ts index 5a10ff8b..4e2dd238 100644 --- a/apps/partners/src/app/dashboard/queries.ts +++ b/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 diff --git a/apps/partners/src/persisted-operations.json b/apps/partners/src/persisted-operations.json index 6b0efed7..5b04c621 100644 --- a/apps/partners/src/persisted-operations.json +++ b/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}" } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4e84e4e3..0adeee3c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: '@node-rs/argon2': specifier: ^1.8.3 version: 1.8.3 + '@tanstack/react-virtual': + specifier: ^3.9.0 + version: 3.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@umamin/db': specifier: workspace:* version: link:../../packages/db @@ -2827,6 +2830,15 @@ packages: peerDependencies: tailwindcss: '>=3.0.0 || insiders' + '@tanstack/react-virtual@3.9.0': + resolution: {integrity: sha512-5TeTSQBMV1PIFzBP9cduIX5klRaTvbOw+CxRx3LaUhwqiZLEZBZqz8anEIqG4eHNhDAe+BLarRDeNE9cNM1/EA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + + '@tanstack/virtual-core@3.9.0': + resolution: {integrity: sha512-Saga7/QRGej/IDCVP5BgJ1oDqlDT2d9rQyoflS3fgMS8ntJ8JGw/LBqK2GorHa06+VrNFc0tGz65XQHJQJetFQ==} + '@tybys/wasm-util@0.8.3': resolution: {integrity: sha512-Z96T/L6dUFFxgFJ+pQtkPpne9q7i6kIPYCFnQBHSgSPV9idTsKfIhCss0h5iM9irweZCatkrdeP8yi5uM1eX6Q==} @@ -4551,6 +4563,7 @@ packages: libsql@0.3.19: resolution: {integrity: sha512-Aj5cQ5uk/6fHdmeW0TiXK42FqUlwx7ytmMLPSaUQPin5HKKKuUPD62MAbN4OEweGBBI7q1BekoEN4gPUEL6MZA==} + cpu: [x64, arm64, wasm32] os: [darwin, linux, win32] lilconfig@2.1.0: @@ -8117,6 +8130,14 @@ snapshots: postcss-selector-parser: 6.0.10 tailwindcss: 3.4.7 + '@tanstack/react-virtual@3.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/virtual-core': 3.9.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@tanstack/virtual-core@3.9.0': {} + '@tybys/wasm-util@0.8.3': dependencies: tslib: 2.6.3 @@ -9256,7 +9277,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -9328,7 +9349,7 @@ snapshots: enhanced-resolve: 5.17.1 eslint: 8.57.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -9403,7 +9424,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5