mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
add useBlock hook
This commit is contained in:
parent
6307e8d1e4
commit
22c1eaa541
@ -1455,8 +1455,8 @@ packages:
|
|||||||
resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
|
resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@swc/core-darwin-arm64@1.3.69:
|
/@swc/core-darwin-arm64@1.3.70:
|
||||||
resolution: {integrity: sha512-IjZTf12zIPWkV3D7toaLDoJPSkLhQ4fDH8G6/yCJUI27cBFOI3L8LXqptYmISoN5yYdrcnNpdqdapD09JPuNJg==}
|
resolution: {integrity: sha512-31+mcl0dgdRHvZRjhLOK9V6B+qJ7nxDZYINr9pBlqGWxknz37Vld5KK19Kpr79r0dXUZvaaelLjCnJk9dA2PcQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [darwin]
|
os: [darwin]
|
||||||
@ -1464,8 +1464,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-darwin-x64@1.3.69:
|
/@swc/core-darwin-x64@1.3.70:
|
||||||
resolution: {integrity: sha512-/wBO0Rn5oS5dJI/L9kJRkPAdksVwl5H9nleW/NM3A40N98VV8T7h/i1nO051mxIjq0R6qXVGOWFbBoLrPYucJg==}
|
resolution: {integrity: sha512-GMFJ65E18zQC80t0os+TZvI+8lbRuitncWVge/RXmXbVLPRcdykP4EJ87cqzcG5Ah0z18/E0T+ixD6jHRisrYQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [darwin]
|
os: [darwin]
|
||||||
@ -1473,8 +1473,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-linux-arm-gnueabihf@1.3.69:
|
/@swc/core-linux-arm-gnueabihf@1.3.70:
|
||||||
resolution: {integrity: sha512-NShCjMv6Xn8ckMKBRqmprXvUF14+jXY0TcNKXwjYErzoIUFOnG72M36HxT4QEeAtKZ4Eg4CZFE4zlJ27fDp1gg==}
|
resolution: {integrity: sha512-wjhCwS8LCiAq2VedF1b4Bryyw68xZnfMED4pLRazAl8BaUlDFANfRBORNunxlfHQj4V3x39IaiLgCZRHMdzXBg==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
@ -1482,8 +1482,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-linux-arm64-gnu@1.3.69:
|
/@swc/core-linux-arm64-gnu@1.3.70:
|
||||||
resolution: {integrity: sha512-VRPOJj4idopSHIj1bOVXX0SgaB18R8yZNunb7eXS5ZcjVxAcdvqyIz3RdQX1zaJFCGzcdPLzBRP32DZWWGE8Ng==}
|
resolution: {integrity: sha512-9D/Rx67cAOnMiexvCqARxvhj7coRajTp5HlJHuf+rfwMqI2hLhpO9/pBMQxBUAWxODO/ksQ/OF+GJRjmtWw/2A==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
@ -1491,8 +1491,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-linux-arm64-musl@1.3.69:
|
/@swc/core-linux-arm64-musl@1.3.70:
|
||||||
resolution: {integrity: sha512-QxeSiZqo5x1X8vq8oUWLibq+IZJcxl9vy0sLUmzdjF2b/Z+qxKP3gutxnb2tzJaHqPVBbEZaILERIGy1qWdumQ==}
|
resolution: {integrity: sha512-gkjxBio7XD+1GlQVVyPP/qeFkLu83VhRHXaUrkNYpr5UZG9zZurBERT9nkS6Y+ouYh+Q9xmw57aIyd2KvD2zqQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
@ -1500,8 +1500,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-linux-x64-gnu@1.3.69:
|
/@swc/core-linux-x64-gnu@1.3.70:
|
||||||
resolution: {integrity: sha512-b+DUlVxYox3BwD3PyTwhLvqtu6TYZtW+S6O0FnttH11o4skHN0XyJ/cUZSI0X2biSmfDsizRDUt1PWPFM+F7SA==}
|
resolution: {integrity: sha512-/nCly+V4xfMVwfEUoLLAukxUSot/RcSzsf6GdsGTjFcrp5sZIntAjokYRytm3VT1c2TK321AfBorsi9R5w8Y7Q==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
@ -1509,8 +1509,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-linux-x64-musl@1.3.69:
|
/@swc/core-linux-x64-musl@1.3.70:
|
||||||
resolution: {integrity: sha512-QXjsI+f8n9XPZHUvmGgkABpzN4M9kdSbhqBOZmv3o0AsDGNCA4uVowQqgZoPFAqlJTpwHeDmrv5sQ13HN+LOGw==}
|
resolution: {integrity: sha512-HoOsPJbt361KGKaivAK0qIiYARkhzlxeAfvF5NlnKxkIMOZpQ46Lwj3tR0VWohKbrhS+cYKFlVuDi5XnDkx0XA==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
@ -1518,8 +1518,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-win32-arm64-msvc@1.3.69:
|
/@swc/core-win32-arm64-msvc@1.3.70:
|
||||||
resolution: {integrity: sha512-wn7A8Ws1fyviuCUB2Vg6IotiZeuqiO1Mz3d+YDae2EYyNpj1kNHvjBip8GHkfGzZG+jVrvG6NHsDo0KO/pGb8A==}
|
resolution: {integrity: sha512-hm4IBK/IaRil+aj1cWU6f0GyAdHpw/Jr5nyFYLM2c/tt7w2t5hgb8NjzM2iM84lOClrig1fG6edj2vCF1dFzNQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
@ -1527,8 +1527,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-win32-ia32-msvc@1.3.69:
|
/@swc/core-win32-ia32-msvc@1.3.70:
|
||||||
resolution: {integrity: sha512-LsFBXtXqxEcVaaOGEZ9X3qdMzobVoJqKv8DnksuDsWcBk+9WCeTz2u/iB+7yZ2HGuPXkCqTRqhFo6FX9aC00kQ==}
|
resolution: {integrity: sha512-5cgKUKIT/9Fp5fCA+zIjYCQ4dSvjFYOeWGZR3QiTXGkC4bGa1Ji9SEPyeIAX0iruUnKjYaZB9RvHK2tNn7RLrQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [ia32]
|
cpu: [ia32]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
@ -1536,8 +1536,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core-win32-x64-msvc@1.3.69:
|
/@swc/core-win32-x64-msvc@1.3.70:
|
||||||
resolution: {integrity: sha512-ieBscU0gUgKjaseFI07tAaGqHvKyweNknPeSYEZOasVZUczhD6fK2GRnVREhv2RB2qdKC/VGFBsgRDMgzq1VLw==}
|
resolution: {integrity: sha512-LE8lW46+TQBzVkn2mHBlk8DIElPIZ2dO5P8AbJiARNBAnlqQWu67l9gWM89UiZ2l33J2cI37pHzON3tKnT8f9g==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
@ -1545,8 +1545,8 @@ packages:
|
|||||||
dev: true
|
dev: true
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
/@swc/core@1.3.69:
|
/@swc/core@1.3.70:
|
||||||
resolution: {integrity: sha512-Khc/DE9D5+2tYTHgAIp5DZARbs8kldWg3b0Jp6l8FQLjelcLFmlQWSwKhVZrgv4oIbgZydIp8jInsvTalMHqnQ==}
|
resolution: {integrity: sha512-LWVWlEDLlOD25PvA2NEz41UzdwXnlDyBiZbe69s3zM0DfCPwZXLUm79uSqH9ItsOjTrXSL5/1+XUL6C/BZwChA==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
requiresBuild: true
|
requiresBuild: true
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@ -1555,16 +1555,16 @@ packages:
|
|||||||
'@swc/helpers':
|
'@swc/helpers':
|
||||||
optional: true
|
optional: true
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
'@swc/core-darwin-arm64': 1.3.69
|
'@swc/core-darwin-arm64': 1.3.70
|
||||||
'@swc/core-darwin-x64': 1.3.69
|
'@swc/core-darwin-x64': 1.3.70
|
||||||
'@swc/core-linux-arm-gnueabihf': 1.3.69
|
'@swc/core-linux-arm-gnueabihf': 1.3.70
|
||||||
'@swc/core-linux-arm64-gnu': 1.3.69
|
'@swc/core-linux-arm64-gnu': 1.3.70
|
||||||
'@swc/core-linux-arm64-musl': 1.3.69
|
'@swc/core-linux-arm64-musl': 1.3.70
|
||||||
'@swc/core-linux-x64-gnu': 1.3.69
|
'@swc/core-linux-x64-gnu': 1.3.70
|
||||||
'@swc/core-linux-x64-musl': 1.3.69
|
'@swc/core-linux-x64-musl': 1.3.70
|
||||||
'@swc/core-win32-arm64-msvc': 1.3.69
|
'@swc/core-win32-arm64-msvc': 1.3.70
|
||||||
'@swc/core-win32-ia32-msvc': 1.3.69
|
'@swc/core-win32-ia32-msvc': 1.3.70
|
||||||
'@swc/core-win32-x64-msvc': 1.3.69
|
'@swc/core-win32-x64-msvc': 1.3.70
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@tailwindcss/typography@0.5.9(tailwindcss@3.3.3):
|
/@tailwindcss/typography@0.5.9(tailwindcss@3.3.3):
|
||||||
@ -1993,7 +1993,7 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
vite: ^4
|
vite: ^4
|
||||||
dependencies:
|
dependencies:
|
||||||
'@swc/core': 1.3.69
|
'@swc/core': 1.3.70
|
||||||
vite: 4.4.4(@types/node@18.16.19)
|
vite: 4.4.4(@types/node@18.16.19)
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- '@swc/helpers'
|
- '@swc/helpers'
|
||||||
@ -2273,7 +2273,7 @@ packages:
|
|||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
caniuse-lite: 1.0.30001516
|
caniuse-lite: 1.0.30001516
|
||||||
electron-to-chromium: 1.4.463
|
electron-to-chromium: 1.4.464
|
||||||
node-releases: 2.0.13
|
node-releases: 2.0.13
|
||||||
update-browserslist-db: 1.0.11(browserslist@4.21.9)
|
update-browserslist-db: 1.0.11(browserslist@4.21.9)
|
||||||
dev: true
|
dev: true
|
||||||
@ -2735,8 +2735,8 @@ packages:
|
|||||||
/eastasianwidth@0.2.0:
|
/eastasianwidth@0.2.0:
|
||||||
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
|
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
|
||||||
|
|
||||||
/electron-to-chromium@1.4.463:
|
/electron-to-chromium@1.4.464:
|
||||||
resolution: {integrity: sha512-fT3hvdUWLjDbaTGzyOjng/CQhQJSQP8ThO3XZAoaxHvHo2kUXiRQVMj9M235l8uDFiNPsPa6KHT1p3RaR6ugRw==}
|
resolution: {integrity: sha512-guZ84yoou4+ILNdj0XEbmGs6DEWj6zpVOWYpY09GU66yEb0DSYvP/biBPzHn0GuW/3RC/pnaYNUWlQE1fJYtgA==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/emoji-regex@8.0.0:
|
/emoji-regex@8.0.0:
|
||||||
@ -6522,7 +6522,7 @@ packages:
|
|||||||
vite: '>=2.8'
|
vite: '>=2.8'
|
||||||
dependencies:
|
dependencies:
|
||||||
'@rollup/plugin-virtual': 3.0.1
|
'@rollup/plugin-virtual': 3.0.1
|
||||||
'@swc/core': 1.3.69
|
'@swc/core': 1.3.70
|
||||||
uuid: 9.0.0
|
uuid: 9.0.0
|
||||||
vite: 4.4.4(@types/node@18.16.19)
|
vite: 4.4.4(@types/node@18.16.19)
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
import { useCallback, useEffect, useRef } from 'react';
|
import { useCallback, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
import { getNotesByAuthors, removeBlock } from '@libs/storage';
|
import { getNotesByAuthors } from '@libs/storage';
|
||||||
|
|
||||||
import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
|
import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
|
||||||
import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
|
import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
|
||||||
@ -14,7 +14,6 @@ import { Block, LumeEvent } from '@utils/types';
|
|||||||
const ITEM_PER_PAGE = 10;
|
const ITEM_PER_PAGE = 10;
|
||||||
|
|
||||||
export function FeedBlock({ params }: { params: Block }) {
|
export function FeedBlock({ params }: { params: Block }) {
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
||||||
useInfiniteQuery({
|
useInfiniteQuery({
|
||||||
queryKey: ['newsfeed', params.content],
|
queryKey: ['newsfeed', params.content],
|
||||||
@ -25,8 +24,8 @@ export function FeedBlock({ params }: { params: Block }) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
|
const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
|
||||||
const parentRef = useRef();
|
|
||||||
|
|
||||||
|
const parentRef = useRef();
|
||||||
const rowVirtualizer = useVirtualizer({
|
const rowVirtualizer = useVirtualizer({
|
||||||
count: hasNextPage ? notes.length + 1 : notes.length,
|
count: hasNextPage ? notes.length + 1 : notes.length,
|
||||||
getScrollElement: () => parentRef.current,
|
getScrollElement: () => parentRef.current,
|
||||||
@ -48,15 +47,6 @@ export function FeedBlock({ params }: { params: Block }) {
|
|||||||
}
|
}
|
||||||
}, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
|
}, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
|
||||||
|
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (id: string) => {
|
|
||||||
return removeBlock(id);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const renderItem = useCallback(
|
const renderItem = useCallback(
|
||||||
(index: string | number) => {
|
(index: string | number) => {
|
||||||
const note: LumeEvent = notes[index];
|
const note: LumeEvent = notes[index];
|
||||||
@ -124,7 +114,7 @@ export function FeedBlock({ params }: { params: Block }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
||||||
<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
|
<TitleBar id={params.id} title={params.title} />
|
||||||
<div
|
<div
|
||||||
ref={parentRef}
|
ref={parentRef}
|
||||||
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
|
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
|
||||||
|
@ -1,9 +1,8 @@
|
|||||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
|
|
||||||
import { useNDK } from '@libs/ndk/provider';
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
import { removeBlock } from '@libs/storage';
|
|
||||||
|
|
||||||
import { NoteKind_1, NoteSkeleton } from '@shared/notes';
|
import { NoteKind_1, NoteSkeleton } from '@shared/notes';
|
||||||
import { TitleBar } from '@shared/titleBar';
|
import { TitleBar } from '@shared/titleBar';
|
||||||
@ -12,9 +11,6 @@ import { nHoursAgo } from '@utils/date';
|
|||||||
import { Block, LumeEvent } from '@utils/types';
|
import { Block, LumeEvent } from '@utils/types';
|
||||||
|
|
||||||
export function HashtagBlock({ params }: { params: Block }) {
|
export function HashtagBlock({ params }: { params: Block }) {
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const parentRef = useRef();
|
|
||||||
|
|
||||||
const { relayUrls, fetcher } = useNDK();
|
const { relayUrls, fetcher } = useNDK();
|
||||||
const { status, data } = useQuery(['hashtag', params.content], async () => {
|
const { status, data } = useQuery(['hashtag', params.content], async () => {
|
||||||
const events = (await fetcher.fetchAllEvents(
|
const events = (await fetcher.fetchAllEvents(
|
||||||
@ -25,15 +21,7 @@ export function HashtagBlock({ params }: { params: Block }) {
|
|||||||
return events;
|
return events;
|
||||||
});
|
});
|
||||||
|
|
||||||
const block = useMutation({
|
const parentRef = useRef();
|
||||||
mutationFn: (id: string) => {
|
|
||||||
return removeBlock(id);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const rowVirtualizer = useVirtualizer({
|
const rowVirtualizer = useVirtualizer({
|
||||||
count: data ? data.length : 0,
|
count: data ? data.length : 0,
|
||||||
getScrollElement: () => parentRef.current,
|
getScrollElement: () => parentRef.current,
|
||||||
@ -44,10 +32,7 @@ export function HashtagBlock({ params }: { params: Block }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
||||||
<TitleBar
|
<TitleBar id={params.id} title={params.title + ' in 48 hours ago'} />
|
||||||
title={params.title + ' in 48 hours ago'}
|
|
||||||
onClick={() => block.mutate(params.id)}
|
|
||||||
/>
|
|
||||||
<div
|
<div
|
||||||
ref={parentRef}
|
ref={parentRef}
|
||||||
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
|
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
|
||||||
|
@ -1,25 +1,13 @@
|
|||||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
import { removeBlock } from '@libs/storage';
|
|
||||||
|
|
||||||
import { CancelIcon } from '@shared/icons';
|
import { CancelIcon } from '@shared/icons';
|
||||||
import { Image } from '@shared/image';
|
import { Image } from '@shared/image';
|
||||||
|
|
||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
|
import { useBlock } from '@utils/hooks/useBlock';
|
||||||
import { Block } from '@utils/types';
|
import { Block } from '@utils/types';
|
||||||
|
|
||||||
export function ImageBlock({ params }: { params: Block }) {
|
export function ImageBlock({ params }: { params: Block }) {
|
||||||
const queryClient = useQueryClient();
|
const { remove } = useBlock();
|
||||||
|
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (id: string) => {
|
|
||||||
return removeBlock(id);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full w-[350px] shrink-0 flex-col justify-between border-r border-zinc-900">
|
<div className="flex h-full w-[350px] shrink-0 flex-col justify-between border-r border-zinc-900">
|
||||||
@ -29,7 +17,7 @@ export function ImageBlock({ params }: { params: Block }) {
|
|||||||
<h3 className="font-medium text-white drop-shadow-lg">{params.title}</h3>
|
<h3 className="font-medium text-white drop-shadow-lg">{params.title}</h3>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => block.mutate(params.id)}
|
onClick={() => remove.mutate(params.id)}
|
||||||
className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/30 backdrop-blur-lg"
|
className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/30 backdrop-blur-lg"
|
||||||
>
|
>
|
||||||
<CancelIcon width={16} height={16} className="text-white" />
|
<CancelIcon width={16} height={16} className="text-white" />
|
||||||
|
@ -1,8 +1,4 @@
|
|||||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
// import { useLiveThread } from '@app/space/hooks/useLiveThread';
|
// import { useLiveThread } from '@app/space/hooks/useLiveThread';
|
||||||
import { removeBlock } from '@libs/storage';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
NoteActions,
|
NoteActions,
|
||||||
NoteContent,
|
NoteContent,
|
||||||
@ -18,25 +14,14 @@ import { useEvent } from '@utils/hooks/useEvent';
|
|||||||
import { Block } from '@utils/types';
|
import { Block } from '@utils/types';
|
||||||
|
|
||||||
export function ThreadBlock({ params }: { params: Block }) {
|
export function ThreadBlock({ params }: { params: Block }) {
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const { status, data } = useEvent(params.content);
|
const { status, data } = useEvent(params.content);
|
||||||
|
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (id: string) => {
|
|
||||||
return removeBlock(id);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// subscribe to live reply
|
// subscribe to live reply
|
||||||
// useLiveThread(params.content);
|
// useLiveThread(params.content);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
||||||
<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
|
<TitleBar id={params.id} title={params.title} />
|
||||||
<div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
|
<div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
|
@ -1,12 +1,9 @@
|
|||||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import { UserFeed } from '@app/user/components/feed';
|
import { UserFeed } from '@app/user/components/feed';
|
||||||
import { UserMetadata } from '@app/user/components/metadata';
|
import { UserMetadata } from '@app/user/components/metadata';
|
||||||
|
|
||||||
import { removeBlock } from '@libs/storage';
|
|
||||||
|
|
||||||
import { ZapIcon } from '@shared/icons';
|
import { ZapIcon } from '@shared/icons';
|
||||||
import { Image } from '@shared/image';
|
import { Image } from '@shared/image';
|
||||||
import { TitleBar } from '@shared/titleBar';
|
import { TitleBar } from '@shared/titleBar';
|
||||||
@ -19,22 +16,11 @@ import { shortenKey } from '@utils/shortenKey';
|
|||||||
import { Block } from '@utils/types';
|
import { Block } from '@utils/types';
|
||||||
|
|
||||||
export function UserBlock({ params }: { params: Block }) {
|
export function UserBlock({ params }: { params: Block }) {
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const { user } = useProfile(params.content);
|
const { user } = useProfile(params.content);
|
||||||
const { status, userFollows, follow, unfollow } = useSocial();
|
const { status, userFollows, follow, unfollow } = useSocial();
|
||||||
|
|
||||||
const [followed, setFollowed] = useState(false);
|
const [followed, setFollowed] = useState(false);
|
||||||
|
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (id: string) => {
|
|
||||||
return removeBlock(id);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const followUser = (pubkey: string) => {
|
const followUser = (pubkey: string) => {
|
||||||
try {
|
try {
|
||||||
follow(pubkey);
|
follow(pubkey);
|
||||||
@ -67,7 +53,7 @@ export function UserBlock({ params }: { params: Block }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
||||||
<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
|
<TitleBar id={params.id} title={params.title} />
|
||||||
<div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
|
<div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
|
||||||
<div className="px-3 pt-1.5">
|
<div className="px-3 pt-1.5">
|
||||||
<Image
|
<Image
|
||||||
|
@ -1,7 +1,4 @@
|
|||||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
import { createBlock } from '@libs/storage';
|
|
||||||
|
|
||||||
import { ThreadIcon } from '@shared/icons';
|
import { ThreadIcon } from '@shared/icons';
|
||||||
import { NoteReaction } from '@shared/notes/actions/reaction';
|
import { NoteReaction } from '@shared/notes/actions/reaction';
|
||||||
@ -11,6 +8,8 @@ import { NoteZap } from '@shared/notes/actions/zap';
|
|||||||
|
|
||||||
import { BLOCK_KINDS } from '@stores/constants';
|
import { BLOCK_KINDS } from '@stores/constants';
|
||||||
|
|
||||||
|
import { useBlock } from '@utils/hooks/useBlock';
|
||||||
|
|
||||||
export function NoteActions({
|
export function NoteActions({
|
||||||
id,
|
id,
|
||||||
pubkey,
|
pubkey,
|
||||||
@ -20,20 +19,7 @@ export function NoteActions({
|
|||||||
pubkey: string;
|
pubkey: string;
|
||||||
noOpenThread?: boolean;
|
noOpenThread?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const queryClient = useQueryClient();
|
const { add } = useBlock();
|
||||||
|
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (data: { kind: number; title: string; content: string }) => {
|
|
||||||
return createBlock(data.kind, data.title, data.content);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const openThread = (thread: string) => {
|
|
||||||
block.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip.Provider>
|
<Tooltip.Provider>
|
||||||
@ -51,7 +37,13 @@ export function NoteActions({
|
|||||||
<Tooltip.Trigger asChild>
|
<Tooltip.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => openThread(id)}
|
onClick={() =>
|
||||||
|
add.mutate({
|
||||||
|
kind: BLOCK_KINDS.thread,
|
||||||
|
title: 'Thread',
|
||||||
|
content: id,
|
||||||
|
})
|
||||||
|
}
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||||
>
|
>
|
||||||
<ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
|
<ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
|
||||||
|
@ -1,33 +1,20 @@
|
|||||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
import { createBlock } from '@libs/storage';
|
|
||||||
|
|
||||||
import { BLOCK_KINDS } from '@stores/constants';
|
import { BLOCK_KINDS } from '@stores/constants';
|
||||||
|
|
||||||
|
import { useBlock } from '@utils/hooks/useBlock';
|
||||||
|
|
||||||
export function Hashtag({ tag }: { tag: string }) {
|
export function Hashtag({ tag }: { tag: string }) {
|
||||||
const queryClient = useQueryClient();
|
const { add } = useBlock();
|
||||||
|
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (data: { kind: number; title: string; content: string }) => {
|
|
||||||
return createBlock(data.kind, data.title, data.content);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const openBlock = () => {
|
|
||||||
block.mutate({
|
|
||||||
kind: BLOCK_KINDS.hashtag,
|
|
||||||
title: tag,
|
|
||||||
content: tag.replace('#', ''),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => openBlock()}
|
onClick={() =>
|
||||||
|
add.mutate({
|
||||||
|
kind: BLOCK_KINDS.hashtag,
|
||||||
|
title: tag,
|
||||||
|
content: tag.replace('#', ''),
|
||||||
|
})
|
||||||
|
}
|
||||||
className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
|
className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
|
||||||
>
|
>
|
||||||
{tag}
|
{tag}
|
||||||
|
@ -1,34 +1,23 @@
|
|||||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
import ReactMarkdown from 'react-markdown';
|
import ReactMarkdown from 'react-markdown';
|
||||||
import remarkGfm from 'remark-gfm';
|
import remarkGfm from 'remark-gfm';
|
||||||
|
|
||||||
import { createBlock } from '@libs/storage';
|
|
||||||
|
|
||||||
import { MentionUser, NoteSkeleton } from '@shared/notes';
|
import { MentionUser, NoteSkeleton } from '@shared/notes';
|
||||||
import { User } from '@shared/user';
|
import { User } from '@shared/user';
|
||||||
|
|
||||||
import { BLOCK_KINDS } from '@stores/constants';
|
import { BLOCK_KINDS } from '@stores/constants';
|
||||||
|
|
||||||
|
import { useBlock } from '@utils/hooks/useBlock';
|
||||||
import { useEvent } from '@utils/hooks/useEvent';
|
import { useEvent } from '@utils/hooks/useEvent';
|
||||||
|
|
||||||
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
||||||
|
const { add } = useBlock();
|
||||||
const { status, data } = useEvent(id);
|
const { status, data } = useEvent(id);
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
const openThread = (event, thread: string) => {
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (data: { kind: number; title: string; content: string }) => {
|
|
||||||
return createBlock(data.kind, data.title, data.content);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const openThread = (event: any, thread: string) => {
|
|
||||||
const selection = window.getSelection();
|
const selection = window.getSelection();
|
||||||
if (selection.toString().length === 0) {
|
if (selection.toString().length === 0) {
|
||||||
block.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
|
add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
|
||||||
} else {
|
} else {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
@ -1,37 +1,23 @@
|
|||||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
import { createBlock } from '@libs/storage';
|
|
||||||
|
|
||||||
import { BLOCK_KINDS } from '@stores/constants';
|
import { BLOCK_KINDS } from '@stores/constants';
|
||||||
|
|
||||||
|
import { useBlock } from '@utils/hooks/useBlock';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { useProfile } from '@utils/hooks/useProfile';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
import { shortenKey } from '@utils/shortenKey';
|
||||||
|
|
||||||
export function MentionUser({ pubkey }: { pubkey: string }) {
|
export function MentionUser({ pubkey }: { pubkey: string }) {
|
||||||
|
const { add } = useBlock();
|
||||||
const { user } = useProfile(pubkey);
|
const { user } = useProfile(pubkey);
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (data: { kind: number; title: string; content: string }) => {
|
|
||||||
return createBlock(data.kind, data.title, data.content);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const openBlock = () => {
|
|
||||||
block.mutate({
|
|
||||||
kind: BLOCK_KINDS.user,
|
|
||||||
title: user?.name || user?.displayNam,
|
|
||||||
content: pubkey,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => openBlock()}
|
onClick={() =>
|
||||||
|
add.mutate({
|
||||||
|
kind: BLOCK_KINDS.user,
|
||||||
|
title: user?.nip05 || user?.name || user?.displayNam,
|
||||||
|
content: pubkey,
|
||||||
|
})
|
||||||
|
}
|
||||||
className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-zinc-700 hover:text-blue-500"
|
className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-zinc-700 hover:text-blue-500"
|
||||||
>
|
>
|
||||||
{'@' + user?.name || user?.displayName || shortenKey(pubkey)}
|
{'@' + user?.name || user?.displayName || shortenKey(pubkey)}
|
||||||
|
@ -1,18 +1,20 @@
|
|||||||
import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
|
import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
|
||||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { decode } from 'light-bolt11-decoder';
|
import { decode } from 'light-bolt11-decoder';
|
||||||
|
|
||||||
import { useNDK } from '@libs/ndk/provider';
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
import { createBlock, createReplyNote } from '@libs/storage';
|
import { createReplyNote } from '@libs/storage';
|
||||||
|
|
||||||
import { LoaderIcon } from '@shared/icons';
|
import { LoaderIcon } from '@shared/icons';
|
||||||
import { MiniUser } from '@shared/notes/users/mini';
|
import { MiniUser } from '@shared/notes/users/mini';
|
||||||
|
|
||||||
|
import { BLOCK_KINDS } from '@stores/constants';
|
||||||
|
|
||||||
|
import { useBlock } from '@utils/hooks/useBlock';
|
||||||
import { compactNumber } from '@utils/number';
|
import { compactNumber } from '@utils/number';
|
||||||
|
|
||||||
export function NoteMetadata({ id }: { id: string }) {
|
export function NoteMetadata({ id }: { id: string }) {
|
||||||
const queryClient = useQueryClient();
|
const { add } = useBlock();
|
||||||
|
|
||||||
const { ndk } = useNDK();
|
const { ndk } = useNDK();
|
||||||
const { status, data } = useQuery(
|
const { status, data } = useQuery(
|
||||||
['note-metadata', id],
|
['note-metadata', id],
|
||||||
@ -62,19 +64,6 @@ export function NoteMetadata({ id }: { id: string }) {
|
|||||||
{ refetchOnWindowFocus: false, refetchOnReconnect: false }
|
{ refetchOnWindowFocus: false, refetchOnReconnect: false }
|
||||||
);
|
);
|
||||||
|
|
||||||
const block = useMutation({
|
|
||||||
mutationFn: (data: { kind: number; title: string; content: string }) => {
|
|
||||||
return createBlock(data.kind, data.title, data.content);
|
|
||||||
},
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const openThread = (thread: string) => {
|
|
||||||
block.mutate({ kind: 2, title: 'Thread', content: thread });
|
|
||||||
};
|
|
||||||
|
|
||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
return (
|
return (
|
||||||
<div className="mb-3 flex items-center gap-3">
|
<div className="mb-3 flex items-center gap-3">
|
||||||
@ -102,7 +91,9 @@ export function NoteMetadata({ id }: { id: string }) {
|
|||||||
<div className="mt-2 inline-flex h-6 items-center gap-2">
|
<div className="mt-2 inline-flex h-6 items-center gap-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => openThread(id)}
|
onClick={() =>
|
||||||
|
add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id })
|
||||||
|
}
|
||||||
className="text-zinc-500"
|
className="text-zinc-500"
|
||||||
>
|
>
|
||||||
<span className="font-semibold text-zinc-300">{data.replies}</span>{' '}
|
<span className="font-semibold text-zinc-300">{data.replies}</span>{' '}
|
||||||
|
@ -1,12 +1,10 @@
|
|||||||
import { CancelIcon } from '@shared/icons';
|
import { CancelIcon } from '@shared/icons';
|
||||||
|
|
||||||
export function TitleBar({
|
import { useBlock } from '@utils/hooks/useBlock';
|
||||||
title,
|
|
||||||
onClick = undefined,
|
export function TitleBar({ id, title }: { id?: string; title: string }) {
|
||||||
}: {
|
const { remove } = useBlock();
|
||||||
title: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
@ -14,10 +12,10 @@ export function TitleBar({
|
|||||||
>
|
>
|
||||||
<div className="w-6" />
|
<div className="w-6" />
|
||||||
<h3 className="text-sm font-medium text-zinc-200">{title}</h3>
|
<h3 className="text-sm font-medium text-zinc-200">{title}</h3>
|
||||||
{onClick ? (
|
{id ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onClick}
|
onClick={() => remove.mutate(id)}
|
||||||
className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded transition-transform duration-150 ease-in-out hover:bg-zinc-900 group-hover:translate-y-0"
|
className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded transition-transform duration-150 ease-in-out hover:bg-zinc-900 group-hover:translate-y-0"
|
||||||
>
|
>
|
||||||
<CancelIcon width={12} height={12} className="text-zinc-300" />
|
<CancelIcon width={12} height={12} className="text-zinc-300" />
|
||||||
|
33
src/utils/hooks/useBlock.tsx
Normal file
33
src/utils/hooks/useBlock.tsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { createBlock, removeBlock } from '@libs/storage';
|
||||||
|
|
||||||
|
interface BlockData {
|
||||||
|
kind: number;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useBlock() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const add = useMutation({
|
||||||
|
mutationFn: (data: BlockData) => {
|
||||||
|
return createBlock(data.kind, data.title, data.content);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const remove = useMutation({
|
||||||
|
mutationFn: (id: string) => {
|
||||||
|
return removeBlock(id);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return { add, remove };
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user