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