From 964343ccc81f1c01703d885ed8fcaa4a30402ed1 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 28 Feb 2023 14:53:27 +0700
Subject: [PATCH] implemented infinite loading
---
package.json | 4 +-
pnpm-lock.yaml | 112 +++++++++++++++--------------
src/components/connectors/note.tsx | 3 +-
src/components/thread.tsx | 53 --------------
src/pages/feed/following.tsx | 65 ++++++++++++++---
src/utils/getDate.tsx | 6 ++
6 files changed, 122 insertions(+), 121 deletions(-)
delete mode 100644 src/components/thread.tsx
diff --git a/package.json b/package.json
index 5d433f7a..2816c16c 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,8 @@
"@types/node": "^18.14.2",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
- "@typescript-eslint/eslint-plugin": "^5.53.0",
- "@typescript-eslint/parser": "^5.53.0",
+ "@typescript-eslint/eslint-plugin": "^5.54.0",
+ "@typescript-eslint/parser": "^5.54.0",
"autoprefixer": "^10.4.13",
"csstype": "^3.1.1",
"eslint": "^8.35.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3f6df6f..505384a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,8 +13,8 @@ specifiers:
'@types/node': ^18.14.2
'@types/react': ^18.0.28
'@types/react-dom': ^18.0.11
- '@typescript-eslint/eslint-plugin': ^5.53.0
- '@typescript-eslint/parser': ^5.53.0
+ '@typescript-eslint/eslint-plugin': ^5.54.0
+ '@typescript-eslint/parser': ^5.54.0
'@uiw/react-markdown-preview': ^4.1.9
'@uiw/react-md-editor': ^3.20.5
autoprefixer: ^10.4.13
@@ -90,8 +90,8 @@ devDependencies:
'@types/node': 18.14.2
'@types/react': 18.0.28
'@types/react-dom': 18.0.11
- '@typescript-eslint/eslint-plugin': 5.53.0_cjo54hduev4bqhpjw5znwiokqu
- '@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
+ '@typescript-eslint/eslint-plugin': 5.54.0_6mj2wypvdnknez7kws2nfdgupi
+ '@typescript-eslint/parser': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
autoprefixer: 10.4.13_postcss@8.4.21
csstype: 3.1.1
eslint: 8.35.0
@@ -1240,8 +1240,8 @@ packages:
resolution: { integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ== }
dev: false
- /@typescript-eslint/eslint-plugin/5.53.0_cjo54hduev4bqhpjw5znwiokqu:
- resolution: { integrity: sha512-alFpFWNucPLdUOySmXCJpzr6HKC3bu7XooShWM+3w/EL6J2HIoB2PFxpLnq4JauWVk6DiVeNKzQlFEaE+X9sGw== }
+ /@typescript-eslint/eslint-plugin/5.54.0_6mj2wypvdnknez7kws2nfdgupi:
+ resolution: { integrity: sha512-+hSN9BdSr629RF02d7mMtXhAJvDTyCbprNYJKrXETlul/Aml6YZwd90XioVbjejQeHbb3R8Dg0CkRgoJDxo8aw== }
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
peerDependencies:
'@typescript-eslint/parser': ^5.0.0
@@ -1251,10 +1251,10 @@ packages:
typescript:
optional: true
dependencies:
- '@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
- '@typescript-eslint/scope-manager': 5.53.0
- '@typescript-eslint/type-utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
- '@typescript-eslint/utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
+ '@typescript-eslint/parser': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
+ '@typescript-eslint/scope-manager': 5.54.0
+ '@typescript-eslint/type-utils': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
+ '@typescript-eslint/utils': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
debug: 4.3.4
eslint: 8.35.0
grapheme-splitter: 1.0.4
@@ -1268,8 +1268,8 @@ packages:
- supports-color
dev: true
- /@typescript-eslint/parser/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu:
- resolution: { integrity: sha512-MKBw9i0DLYlmdOb3Oq/526+al20AJZpANdT6Ct9ffxcV8nKCHz63t/S0IhlTFNsBIHJv+GY5SFJ0XfqVeydQrQ== }
+ /@typescript-eslint/parser/5.54.0_ycpbpc6yetojsgtrx3mwntkhsu:
+ resolution: { integrity: sha512-aAVL3Mu2qTi+h/r04WI/5PfNWvO6pdhpeMRWk9R7rEV4mwJNzoWf5CCU5vDKBsPIFQFjEq1xg7XBI2rjiMXQbQ== }
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1278,9 +1278,9 @@ packages:
typescript:
optional: true
dependencies:
- '@typescript-eslint/scope-manager': 5.53.0
- '@typescript-eslint/types': 5.53.0
- '@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5
+ '@typescript-eslint/scope-manager': 5.54.0
+ '@typescript-eslint/types': 5.54.0
+ '@typescript-eslint/typescript-estree': 5.54.0_typescript@4.9.5
debug: 4.3.4
eslint: 8.35.0
typescript: 4.9.5
@@ -1288,16 +1288,16 @@ packages:
- supports-color
dev: true
- /@typescript-eslint/scope-manager/5.53.0:
- resolution: { integrity: sha512-Opy3dqNsp/9kBBeCPhkCNR7fmdSQqA+47r21hr9a14Bx0xnkElEQmhoHga+VoaoQ6uDHjDKmQPIYcUcKJifS7w== }
+ /@typescript-eslint/scope-manager/5.54.0:
+ resolution: { integrity: sha512-VTPYNZ7vaWtYna9M4oD42zENOBrb+ZYyCNdFs949GcN8Miwn37b8b7eMj+EZaq7VK9fx0Jd+JhmkhjFhvnovhg== }
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
dependencies:
- '@typescript-eslint/types': 5.53.0
- '@typescript-eslint/visitor-keys': 5.53.0
+ '@typescript-eslint/types': 5.54.0
+ '@typescript-eslint/visitor-keys': 5.54.0
dev: true
- /@typescript-eslint/type-utils/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu:
- resolution: { integrity: sha512-HO2hh0fmtqNLzTAme/KnND5uFNwbsdYhCZghK2SoxGp3Ifn2emv+hi0PBUjzzSh0dstUIFqOj3bp0AwQlK4OWw== }
+ /@typescript-eslint/type-utils/5.54.0_ycpbpc6yetojsgtrx3mwntkhsu:
+ resolution: { integrity: sha512-WI+WMJ8+oS+LyflqsD4nlXMsVdzTMYTxl16myXPaCXnSgc7LWwMsjxQFZCK/rVmTZ3FN71Ct78ehO9bRC7erYQ== }
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
peerDependencies:
eslint: '*'
@@ -1306,8 +1306,8 @@ packages:
typescript:
optional: true
dependencies:
- '@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5
- '@typescript-eslint/utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
+ '@typescript-eslint/typescript-estree': 5.54.0_typescript@4.9.5
+ '@typescript-eslint/utils': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
debug: 4.3.4
eslint: 8.35.0
tsutils: 3.21.0_typescript@4.9.5
@@ -1316,13 +1316,13 @@ packages:
- supports-color
dev: true
- /@typescript-eslint/types/5.53.0:
- resolution: { integrity: sha512-5kcDL9ZUIP756K6+QOAfPkigJmCPHcLN7Zjdz76lQWWDdzfOhZDTj1irs6gPBKiXx5/6O3L0+AvupAut3z7D2A== }
+ /@typescript-eslint/types/5.54.0:
+ resolution: { integrity: sha512-nExy+fDCBEgqblasfeE3aQ3NuafBUxZxgxXcYfzYRZFHdVvk5q60KhCSkG0noHgHRo/xQ/BOzURLZAafFpTkmQ== }
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
dev: true
- /@typescript-eslint/typescript-estree/5.53.0_typescript@4.9.5:
- resolution: { integrity: sha512-eKmipH7QyScpHSkhbptBBYh9v8FxtngLquq292YTEQ1pxVs39yFBlLC1xeIZcPPz1RWGqb7YgERJRGkjw8ZV7w== }
+ /@typescript-eslint/typescript-estree/5.54.0_typescript@4.9.5:
+ resolution: { integrity: sha512-X2rJG97Wj/VRo5YxJ8Qx26Zqf0RRKsVHd4sav8NElhbZzhpBI8jU54i6hfo9eheumj4oO4dcRN1B/zIVEqR/MQ== }
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
peerDependencies:
typescript: '*'
@@ -1330,8 +1330,8 @@ packages:
typescript:
optional: true
dependencies:
- '@typescript-eslint/types': 5.53.0
- '@typescript-eslint/visitor-keys': 5.53.0
+ '@typescript-eslint/types': 5.54.0
+ '@typescript-eslint/visitor-keys': 5.54.0
debug: 4.3.4
globby: 11.1.0
is-glob: 4.0.3
@@ -1342,17 +1342,17 @@ packages:
- supports-color
dev: true
- /@typescript-eslint/utils/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu:
- resolution: { integrity: sha512-VUOOtPv27UNWLxFwQK/8+7kvxVC+hPHNsJjzlJyotlaHjLSIgOCKj9I0DBUjwOOA64qjBwx5afAPjksqOxMO0g== }
+ /@typescript-eslint/utils/5.54.0_ycpbpc6yetojsgtrx3mwntkhsu:
+ resolution: { integrity: sha512-cuwm8D/Z/7AuyAeJ+T0r4WZmlnlxQ8wt7C7fLpFlKMR+dY6QO79Cq1WpJhvZbMA4ZeZGHiRWnht7ZJ8qkdAunw== }
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
'@types/json-schema': 7.0.11
'@types/semver': 7.3.13
- '@typescript-eslint/scope-manager': 5.53.0
- '@typescript-eslint/types': 5.53.0
- '@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5
+ '@typescript-eslint/scope-manager': 5.54.0
+ '@typescript-eslint/types': 5.54.0
+ '@typescript-eslint/typescript-estree': 5.54.0_typescript@4.9.5
eslint: 8.35.0
eslint-scope: 5.1.1
eslint-utils: 3.0.0_eslint@8.35.0
@@ -1362,11 +1362,11 @@ packages:
- typescript
dev: true
- /@typescript-eslint/visitor-keys/5.53.0:
- resolution: { integrity: sha512-JqNLnX3leaHFZEN0gCh81sIvgrp/2GOACZNgO4+Tkf64u51kTpAyWFOY8XHx8XuXr3N2C9zgPPHtcpMg6z1g0w== }
+ /@typescript-eslint/visitor-keys/5.54.0:
+ resolution: { integrity: sha512-xu4wT7aRCakGINTLGeyGqDn+78BwFlggwBjnHa1ar/KaGagnmwLYmlrXIrgAaQ3AE1Vd6nLfKASm7LrFHNbKGA== }
engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
dependencies:
- '@typescript-eslint/types': 5.53.0
+ '@typescript-eslint/types': 5.54.0
eslint-visitor-keys: 3.3.0
dev: true
@@ -1733,7 +1733,7 @@ packages:
hasBin: true
dependencies:
caniuse-lite: 1.0.30001458
- electron-to-chromium: 1.4.311
+ electron-to-chromium: 1.4.313
node-releases: 2.0.10
update-browserslist-db: 1.0.10_browserslist@4.21.5
@@ -2047,8 +2047,8 @@ packages:
resolution: { integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== }
dev: true
- /electron-to-chromium/1.4.311:
- resolution: { integrity: sha512-RoDlZufvrtr2Nx3Yx5MB8jX3aHIxm8nRWPJm3yVvyHmyKaRvn90RjzB6hNnt0AkhS3IInJdyRfQb4mWhPvUjVw== }
+ /electron-to-chromium/1.4.313:
+ resolution: { integrity: sha512-QckB9OVqr2oybjIrbMI99uF+b9+iTja5weFe0ePbqLb5BHqXOJUO1SG6kDj/1WtWPRIBr51N153AEq8m7HuIaA== }
/emoji-regex/8.0.0:
resolution: { integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== }
@@ -2172,11 +2172,11 @@ packages:
dependencies:
'@next/eslint-plugin-next': 13.2.1
'@rushstack/eslint-patch': 1.2.0
- '@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
+ '@typescript-eslint/parser': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
eslint: 8.35.0
eslint-import-resolver-node: 0.3.7
eslint-import-resolver-typescript: 3.5.3_yckic57kx266ph64dhq6ozvb54
- eslint-plugin-import: 2.27.5_z4t62rwba3aha3c5ltpvvca4q4
+ eslint-plugin-import: 2.27.5_tqrcrxlenpngfto46ddarus52y
eslint-plugin-jsx-a11y: 6.7.1_eslint@8.35.0
eslint-plugin-react: 7.32.2_eslint@8.35.0
eslint-plugin-react-hooks: 4.6.0_eslint@8.35.0
@@ -2215,7 +2215,7 @@ packages:
debug: 4.3.4
enhanced-resolve: 5.12.0
eslint: 8.35.0
- eslint-plugin-import: 2.27.5_z4t62rwba3aha3c5ltpvvca4q4
+ eslint-plugin-import: 2.27.5_tqrcrxlenpngfto46ddarus52y
get-tsconfig: 4.4.0
globby: 13.1.3
is-core-module: 2.11.0
@@ -2225,7 +2225,7 @@ packages:
- supports-color
dev: true
- /eslint-module-utils/2.7.4_wptzf6m7n4mzoakxgrlp7sjl2e:
+ /eslint-module-utils/2.7.4_igrub7c6rucg6hjc3uqgumd66y:
resolution: { integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA== }
engines: { node: '>=4' }
peerDependencies:
@@ -2246,7 +2246,7 @@ packages:
eslint-import-resolver-webpack:
optional: true
dependencies:
- '@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
+ '@typescript-eslint/parser': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
debug: 3.2.7
eslint: 8.35.0
eslint-import-resolver-node: 0.3.7
@@ -2255,7 +2255,7 @@ packages:
- supports-color
dev: true
- /eslint-plugin-import/2.27.5_z4t62rwba3aha3c5ltpvvca4q4:
+ /eslint-plugin-import/2.27.5_tqrcrxlenpngfto46ddarus52y:
resolution: { integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow== }
engines: { node: '>=4' }
peerDependencies:
@@ -2265,7 +2265,7 @@ packages:
'@typescript-eslint/parser':
optional: true
dependencies:
- '@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
+ '@typescript-eslint/parser': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
array-includes: 3.1.6
array.prototype.flat: 1.3.1
array.prototype.flatmap: 1.3.1
@@ -2273,7 +2273,7 @@ packages:
doctrine: 2.1.0
eslint: 8.35.0
eslint-import-resolver-node: 0.3.7
- eslint-module-utils: 2.7.4_wptzf6m7n4mzoakxgrlp7sjl2e
+ eslint-module-utils: 2.7.4_igrub7c6rucg6hjc3uqgumd66y
has: 1.0.3
is-core-module: 2.11.0
is-glob: 4.0.3
@@ -3472,7 +3472,7 @@ packages:
dependencies:
'@types/mdast': 3.0.10
escape-string-regexp: 5.0.0
- unist-util-is: 5.2.0
+ unist-util-is: 5.2.1
unist-util-visit-parents: 5.1.3
dev: false
@@ -3555,7 +3555,7 @@ packages:
resolution: { integrity: sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg== }
dependencies:
'@types/mdast': 3.0.10
- unist-util-is: 5.2.0
+ unist-util-is: 5.2.1
dev: false
/mdast-util-to-hast/12.3.0:
@@ -5274,7 +5274,7 @@ packages:
resolution: { integrity: sha512-RynicUM/vbOSTSiUK+BnaK9XMfmQUh6gyi7L6taNgc7FIf84GukXVV3ucGzEN/PhUUkdP5hb1MmXc+3cvPUm5Q== }
dependencies:
'@types/unist': 2.0.6
- unist-util-is: 5.2.0
+ unist-util-is: 5.2.1
unist-util-visit-parents: 5.1.3
dev: false
@@ -5282,8 +5282,10 @@ packages:
resolution: { integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A== }
dev: false
- /unist-util-is/5.2.0:
- resolution: { integrity: sha512-Glt17jWwZeyqrFqOK0pF1Ded5U3yzJnFr8CG1GMjCWTp9zDo2p+cmD6pWbZU8AgM5WU3IzRv6+rBwhzsGh6hBQ== }
+ /unist-util-is/5.2.1:
+ resolution: { integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw== }
+ dependencies:
+ '@types/unist': 2.0.6
dev: false
/unist-util-position/4.0.4:
@@ -5302,14 +5304,14 @@ packages:
resolution: { integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg== }
dependencies:
'@types/unist': 2.0.6
- unist-util-is: 5.2.0
+ unist-util-is: 5.2.1
dev: false
/unist-util-visit/4.1.2:
resolution: { integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg== }
dependencies:
'@types/unist': 2.0.6
- unist-util-is: 5.2.0
+ unist-util-is: 5.2.1
unist-util-visit-parents: 5.1.3
dev: false
diff --git a/src/components/connectors/note.tsx b/src/components/connectors/note.tsx
index b2ae2f6c..334b8d0d 100644
--- a/src/components/connectors/note.tsx
+++ b/src/components/connectors/note.tsx
@@ -2,13 +2,12 @@
import { DatabaseContext } from '@components/contexts/database';
import { RelayContext } from '@components/contexts/relay';
-import { hoursAgo } from '@utils/getDate';
+import { dateToUnix, hoursAgo } from '@utils/getDate';
import { follows } from '@stores/follows';
import { relays } from '@stores/relays';
import { useStore } from '@nanostores/react';
-import { dateToUnix } from 'nostr-react';
import { memo, useCallback, useContext, useRef } from 'react';
export const NoteConnector = memo(function NoteConnector() {
diff --git a/src/components/thread.tsx b/src/components/thread.tsx
deleted file mode 100644
index 86d3a4ce..00000000
--- a/src/components/thread.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Placeholder } from '@components/note/placeholder';
-import { Repost } from '@components/note/repost';
-import { Single } from '@components/note/single';
-
-import { useCallback } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function Thread({ data }: { data: any }) {
- const ItemContent = useCallback(
- (index: string | number) => {
- const event = data[index];
-
- if (event.content.includes('#[0]') && event.tags[0][0] == 'e') {
- // type: repost
- return ;
- } else {
- // type: default
- return ;
- }
- },
- [data]
- );
-
- const computeItemKey = useCallback(
- (index) => {
- return data[index].id;
- },
- [data]
- );
-
- return (
- ,
- ScrollSeekPlaceholder: () => ,
- }}
- computeItemKey={computeItemKey}
- scrollSeekConfiguration={{
- enter: (velocity) => Math.abs(velocity) > 800,
- exit: (velocity) => Math.abs(velocity) < 500,
- }}
- overscan={800}
- increaseViewportBy={1000}
- className="scrollbar-hide relative h-full w-full rounded-lg"
- style={{
- contain: 'strict',
- }}
- />
- );
-}
diff --git a/src/pages/feed/following.tsx b/src/pages/feed/following.tsx
index 34410613..165420ff 100644
--- a/src/pages/feed/following.tsx
+++ b/src/pages/feed/following.tsx
@@ -4,14 +4,18 @@ import NewsFeedLayout from '@layouts/newsfeedLayout';
import { DatabaseContext } from '@components/contexts/database';
import { Placeholder } from '@components/note/placeholder';
-import { Thread } from '@components/thread';
+import { Repost } from '@components/note/repost';
+import { Single } from '@components/note/single';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, Suspense, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef, useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
export default function Page() {
const db: any = useContext(DatabaseContext);
- const [data, setData] = useState([]);
- const limit = useRef(25);
+ const [data, setData] = useState(() => []);
+ const limit = useRef(30);
+ const offset = useRef(0);
useEffect(() => {
const getData = async () => {
@@ -22,12 +26,55 @@ export default function Page() {
getData().catch(console.error);
}, [db]);
+ const loadMore = useCallback(async () => {
+ offset.current += limit.current;
+ // next query
+ const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current} OFFSET ${offset.current}`);
+ setData((data) => [...data, ...result]);
+ }, [db]);
+
+ const ItemContent = useCallback(
+ (index: string | number) => {
+ const event = data[index];
+ if (event.content.includes('#[0]') && event.tags[0][0] == 'e') {
+ // type: repost
+ return ;
+ } else {
+ // type: default
+ return ;
+ }
+ },
+ [data]
+ );
+
+ const computeItemKey = useCallback(
+ (index: string | number) => {
+ return data[index].id;
+ },
+ [data]
+ );
+
return (
-
- }>
-
-
-
+ ,
+ ScrollSeekPlaceholder: () => ,
+ }}
+ computeItemKey={computeItemKey}
+ scrollSeekConfiguration={{
+ enter: (velocity) => Math.abs(velocity) > 800,
+ exit: (velocity) => Math.abs(velocity) < 500,
+ }}
+ endReached={loadMore}
+ overscan={800}
+ increaseViewportBy={1000}
+ className="scrollbar-hide relative h-full w-full rounded-lg"
+ style={{
+ contain: 'strict',
+ }}
+ />
);
}
diff --git a/src/utils/getDate.tsx b/src/utils/getDate.tsx
index 416c6845..66a165e9 100644
--- a/src/utils/getDate.tsx
+++ b/src/utils/getDate.tsx
@@ -11,3 +11,9 @@ export const hoursAgo = (numOfHours, date = new Date()) => {
return hoursAgo;
};
+
+export const dateToUnix = (_date?: Date) => {
+ const date = _date || new Date();
+
+ return Math.floor(date.getTime() / 1000);
+};