From 6590ea29e2162b6abb74b91559b5284be50143eb Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Tue, 4 Jul 2023 15:40:18 +0700 Subject: [PATCH] add note page --- package.json | 5 +- pnpm-lock.yaml | 31 ---------- src/app.tsx | 2 + .../components/messages/hideButton.tsx | 17 +++--- .../components/messages/muteButton.tsx | 17 +++--- .../components/messages/replyButton.tsx | 17 +++--- src/app/note/index.tsx | 60 +++++++++++++++++++ src/app/space/components/blocks/thread.tsx | 2 + src/app/user/index.tsx | 17 ++++-- src/shared/notes/metadata.tsx | 7 +-- src/shared/tooltip_dep.tsx | 58 ------------------ 11 files changed, 99 insertions(+), 134 deletions(-) create mode 100644 src/app/note/index.tsx delete mode 100644 src/shared/tooltip_dep.tsx diff --git a/package.json b/package.json index 9a1b9bc3..99096bb6 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,10 @@ "format": "prettier ./src --write" }, "lint-staged": { - "src/*.{ts, tsx}": "eslint --fix", - "src/*.{ts, tsx, css, md, html, json}": "prettier --cache --write" + "**/*.{ts, tsx}": "eslint --fix", + "**/*.{ts, tsx, css, md, html, json}": "prettier --cache --write" }, "dependencies": { - "@floating-ui/react": "^0.23.1", "@headlessui/react": "^1.7.15", "@nostr-dev-kit/ndk": "0.6.0", "@radix-ui/react-popover": "^1.0.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bcfa00c2..e4629599 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,6 @@ lockfileVersion: '6.0' dependencies: - '@floating-ui/react': - specifier: ^0.23.1 - version: 0.23.1(react-dom@18.2.0)(react@18.2.0) '@headlessui/react': specifier: ^1.7.15 version: 1.7.15(react-dom@18.2.0)(react@18.2.0) @@ -547,17 +544,6 @@ packages: '@floating-ui/core': 1.3.1 dev: false - /@floating-ui/react-dom@1.3.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - dependencies: - '@floating-ui/dom': 1.4.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /@floating-ui/react-dom@2.0.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==} peerDependencies: @@ -569,19 +555,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@floating-ui/react@0.23.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-OCc2ViQOBUKOGcE9NLAbpyqB+8Zz92IKIhxgz7XAkynKkVzcVSKtkWOcgyvO4SAzB2OybgRwk3WdzdzDRdh2QQ==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - dependencies: - '@floating-ui/react-dom': 1.3.0(react-dom@18.2.0)(react@18.2.0) - aria-hidden: 1.2.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - tabbable: 6.2.0 - dev: false - /@headlessui/react@1.7.15(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-OTO0XtoRQ6JPB1cKNFYBZv2Q0JMqMGNhYP1CjPvcJvjz8YGokz8oAj89HIYZGN0gZzn/4kk9iUpmMF4Q21Gsqw==} engines: {node: '>=10'} @@ -5167,10 +5140,6 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - /tabbable@6.2.0: - resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} - dev: false - /tailwind-merge@1.13.2: resolution: {integrity: sha512-R2/nULkdg1VR/EL4RXg4dEohdoxNUJGLMnWIQnPKL+O9Twu7Cn3Rxi4dlXkDzZrEGtR+G+psSXFouWlpTyLhCQ==} dev: false diff --git a/src/app.tsx b/src/app.tsx index 6fdd7e0c..40543fe1 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -13,6 +13,7 @@ import { WelcomeScreen } from '@app/auth/welcome'; import { ChannelScreen } from '@app/channel'; import { ChatScreen } from '@app/chat'; import { ErrorScreen } from '@app/error'; +import { NoteScreen } from '@app/note'; import { Root } from '@app/root'; import { AccountSettingsScreen } from '@app/settings/account'; import { GeneralSettingsScreen } from '@app/settings/general'; @@ -74,6 +75,7 @@ const router = createBrowserRouter([ children: [ { path: 'space', element: }, { path: 'trending', element: }, + { path: 'note/:id', element: }, { path: 'user/:pubkey', element: }, { path: 'chat/:pubkey', element: }, { path: 'channel/:id', element: }, diff --git a/src/app/channel/components/messages/hideButton.tsx b/src/app/channel/components/messages/hideButton.tsx index f763a42f..fa8034a4 100644 --- a/src/app/channel/components/messages/hideButton.tsx +++ b/src/app/channel/components/messages/hideButton.tsx @@ -4,7 +4,6 @@ import { Fragment, useContext, useState } from 'react'; import { CancelIcon, HideIcon } from '@shared/icons'; import { RelayContext } from '@shared/relayProvider'; -import { Tooltip } from '@shared/tooltip_dep'; import { useChannelMessages } from '@stores/channels'; @@ -51,15 +50,13 @@ export function MessageHideButton({ id }: { id: string }) { return ( <> - - - + - - - + - - + ); } diff --git a/src/app/note/index.tsx b/src/app/note/index.tsx new file mode 100644 index 00000000..4e1009d3 --- /dev/null +++ b/src/app/note/index.tsx @@ -0,0 +1,60 @@ +import { useQuery } from '@tanstack/react-query'; +import { useParams } from 'react-router-dom'; + +import { useLiveThread } from '@app/space/hooks/useLiveThread'; + +import { getNoteByID } from '@libs/storage'; + +import { Kind1 } from '@shared/notes/contents/kind1'; +import { Kind1063 } from '@shared/notes/contents/kind1063'; +import { NoteMetadata } from '@shared/notes/metadata'; +import { NoteReplyForm } from '@shared/notes/replies/form'; +import { RepliesList } from '@shared/notes/replies/list'; +import { NoteSkeleton } from '@shared/notes/skeleton'; +import { User } from '@shared/user'; + +import { useAccount } from '@utils/hooks/useAccount'; +import { parser } from '@utils/parser'; + +export function NoteScreen() { + const { id } = useParams(); + const { account } = useAccount(); + const { status, data } = useQuery(['thread', id], async () => { + const res = await getNoteByID(id); + res['content'] = parser(res); + return res; + }); + + useLiveThread(id); + + return ( +
+
+ {status === 'loading' ? ( +
+
+ +
+
+ ) : ( +
+
+ +
+ {data.kind === 1 && } + {data.kind === 1063 && } + +
+
+
+ {account && } +
+
+ )} +
+ +
+
+
+ ); +} diff --git a/src/app/space/components/blocks/thread.tsx b/src/app/space/components/blocks/thread.tsx index f5440db2..5b3b35c5 100644 --- a/src/app/space/components/blocks/thread.tsx +++ b/src/app/space/components/blocks/thread.tsx @@ -1,4 +1,5 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { Link } from 'react-router-dom'; import { useLiveThread } from '@app/space/hooks/useLiveThread'; @@ -58,6 +59,7 @@ export function ThreadBlock({ params }: { params: any }) { id={data.event_id || params.content} eventPubkey={data.pubkey} /> + Focus
diff --git a/src/app/user/index.tsx b/src/app/user/index.tsx index 0548a719..71e13a2b 100644 --- a/src/app/user/index.tsx +++ b/src/app/user/index.tsx @@ -143,13 +143,18 @@ export function UserScreen() { )} diff --git a/src/shared/notes/metadata.tsx b/src/shared/notes/metadata.tsx index cdff9d85..e4fac5d3 100644 --- a/src/shared/notes/metadata.tsx +++ b/src/shared/notes/metadata.tsx @@ -81,12 +81,7 @@ export function NoteMetadata({ }); const openThread = (thread: string) => { - const selection = window.getSelection(); - if (selection.toString().length === 0) { - block.mutate({ kind: 2, title: 'Thread', content: thread }); - } else { - event.stopPropagation(); - } + block.mutate({ kind: 2, title: 'Thread', content: thread }); }; if (status === 'loading') { diff --git a/src/shared/tooltip_dep.tsx b/src/shared/tooltip_dep.tsx deleted file mode 100644 index 185695f0..00000000 --- a/src/shared/tooltip_dep.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { - autoUpdate, - offset, - shift, - useFloating, - useFocus, - useHover, - useInteractions, -} from '@floating-ui/react'; -import { useState } from 'react'; - -export function Tooltip({ - children, - message, -}: { - children: React.ReactNode; - message: string; -}) { - const [isOpen, setIsOpen] = useState(false); - - const { x, y, strategy, refs, context } = useFloating({ - open: isOpen, - onOpenChange: setIsOpen, - placement: 'top', - middleware: [offset(8), shift()], - whileElementsMounted(...args) { - const cleanup = autoUpdate(...args, { animationFrame: true }); - return cleanup; - }, - }); - - const hover = useHover(context); - const focus = useFocus(context); - - const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus]); - - return ( - <> -
- {children} -
- {isOpen && ( -
- {message} -
- )} - - ); -}