fix(popup): enable kind 1 quote and reposts in popup

bump ndk version

package-lock.json

@@ -10,8 +10,8 @@
       "dependencies": {
         "@getalby/lightning-tools": "5.0.3",
         "@mdxeditor/editor": "^3.20.0",
-        "@nostr-dev-kit/ndk": "2.11.0",
+        "@nostr-dev-kit/ndk": "2.11.2",
-        "@nostr-dev-kit/ndk-cache-dexie": "2.5.9",
+        "@nostr-dev-kit/ndk-cache-dexie": "2.5.11",
         "@reduxjs/toolkit": "2.2.6",
         "@types/react-helmet": "^6.1.11",
         "axios": "^1.7.9",
@@ -2134,9 +2134,9 @@
       }
     },
     "node_modules/@nostr-dev-kit/ndk": {
-      "version": "2.11.0",
+      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@nostr-dev-kit/ndk/-/ndk-2.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/@nostr-dev-kit/ndk/-/ndk-2.11.2.tgz",
-      "integrity": "sha512-FKIMtcVsVcquzrC+yir9lOXHCIHmQ3IKEVCMohqEB7N96HjP2qrI9s5utbjI3lkavFNF5tXg1Gp9ODEo7XCfLA==",
+      "integrity": "sha512-DNrodIBC0j2MqEUQ5Mqaa671iZiRiKluu0c/wLkX7PCva07KSPyvcuyGp5fhk+/EZBurwZccMaML0syH0Qu8kQ==",
       "license": "MIT",
       "dependencies": {
         "@noble/curves": "^1.6.0",
@@ -2156,12 +2156,12 @@
       }
     },
     "node_modules/@nostr-dev-kit/ndk-cache-dexie": {
-      "version": "2.5.9",
+      "version": "2.5.11",
-      "resolved": "https://registry.npmjs.org/@nostr-dev-kit/ndk-cache-dexie/-/ndk-cache-dexie-2.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@nostr-dev-kit/ndk-cache-dexie/-/ndk-cache-dexie-2.5.11.tgz",
-      "integrity": "sha512-SZ5FjON0QPekiC7oW9Hy3JQxG0Oxxtud9LBa1q/A49JV/Qppv1x37nFHxi0XLxEbDgFTNYbaN27Zjfp2NPem2g==",
+      "integrity": "sha512-lhoKcjwxlNB2rrnZ2zDAGJeh5k7x1f51oAwUnlDAuPvNEe4q/2XynxnI3uTe7rBg9+pq085esOQK7pg75E+BgQ==",
       "license": "MIT",
       "dependencies": {
-        "@nostr-dev-kit/ndk": "2.11.0",
+        "@nostr-dev-kit/ndk": "2.11.2",
         "debug": "^4.3.7",
         "dexie": "^4.0.8",
         "nostr-tools": "^2.4.0",

package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "@getalby/lightning-tools": "5.0.3",
     "@mdxeditor/editor": "^3.20.0",
-    "@nostr-dev-kit/ndk": "2.11.0",
+    "@nostr-dev-kit/ndk": "2.11.2",
-    "@nostr-dev-kit/ndk-cache-dexie": "2.5.9",
+    "@nostr-dev-kit/ndk-cache-dexie": "2.5.11",
     "@reduxjs/toolkit": "2.2.6",
     "@types/react-helmet": "^6.1.11",
     "axios": "^1.7.9",

src/components/Notes/Note.tsx

@@ -18,7 +18,7 @@ import {
 import { useComments } from 'hooks/useComments'
 import { nip19 } from 'nostr-tools'
 import { useState } from 'react'
-import { Link, useSubmit } from 'react-router-dom'
+import { Link, useNavigation, useSubmit } from 'react-router-dom'
 import { appRoutes, getProfilePageRoute } from 'routes'
 import { FeedPostsFilter, NSFWFilter, UserProfile } from 'types'
 import { DEFAULT_FILTER_OPTIONS, hexToNpub, log, LogType } from 'utils'
@@ -33,6 +33,7 @@ interface NoteProps {
 export const Note = ({ ndkEvent }: NoteProps) => {
   const { ndk } = useNDKContext()
   const submit = useSubmit()
+  const navigation = useNavigation()
   const userState = useAppSelector((state) => state.user)
   const userPubkey = userState.user?.pubkey as string | undefined
   const [eventProfile, setEventProfile] = useState<UserProfile>()
@@ -167,6 +168,8 @@ export const Note = ({ ndkEvent }: NoteProps) => {
     ) : null
 
   const handleRepost = async (confirm: boolean) => {
+    if (navigation.state !== 'idle') return
+
     setShowRepostPopup(false)
 
     // Cancel if not confirmed

src/components/Notes/NoteSubmit.tsx

@@ -68,7 +68,8 @@ export const NoteSubmit = ({
 
     submit(JSON.stringify(formSubmit), {
       method: 'post',
-      encType: 'application/json'
+      encType: 'application/json',
+      action: appRoutes.feed
     })
 
     typeof handleClose === 'function' && handleClose()
@@ -152,7 +153,7 @@ export const NoteSubmit = ({
                 style={{ padding: '5px 20px', borderRadius: '8px' }}
                 disabled={navigation.state !== 'idle'}
               >
-                {navigation.state === 'idle' ? 'Post' : 'Posting...'}
+                {navigation.state === 'submitting' ? 'Posting...' : 'Post'}
               </button>
             </div>
           </div>

src/components/comment/CommentsPopup.tsx

@@ -1,5 +1,11 @@
 import { formatDate } from 'date-fns'
-import { useBodyScrollDisable, useNDKContext, useReplies } from 'hooks'
+import {
+  useAppSelector,
+  useBodyScrollDisable,
+  useDidMount,
+  useNDKContext,
+  useReplies
+} from 'hooks'
 import { nip19 } from 'nostr-tools'
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import {
@@ -7,7 +13,9 @@ import {
   useLoaderData,
   useLocation,
   useNavigate,
-  useParams
+  useNavigation,
+  useParams,
+  useSubmit
 } from 'react-router-dom'
 import {
   appRoutes,
@@ -24,6 +32,14 @@ import { Comment } from './Comment'
 import { useComments } from 'hooks/useComments'
 import { CommentContent } from './CommentContent'
 import { Dots } from 'components/Spinner'
+import {
+  NDKEvent,
+  NDKFilter,
+  NDKKind,
+  NDKSubscriptionCacheUsage
+} from '@nostr-dev-kit/ndk'
+import { NoteQuoteRepostPopup } from 'components/Notes/NoteQuoteRepostPopup'
+import { NoteRepostPopup } from 'components/Notes/NoteRepostPopup'
 
 interface CommentsPopupProps {
   title: string
@@ -116,6 +132,80 @@ export const CommentsPopup = ({ title }: CommentsPopupProps) => {
     setIsSubmitting(false)
   }
 
+  const submit = useSubmit()
+  const navigation = useNavigation()
+  const [repostEvents, setRepostEvents] = useState<NDKEvent[]>([])
+  const [quoteRepostEvents, setQuoteRepostEvents] = useState<NDKEvent[]>([])
+  const [hasReposted, setHasReposted] = useState(false)
+  const [hasQuoted, setHasQuoted] = useState(false)
+  const [showRepostPopup, setShowRepostPopup] = useState(false)
+  const [showQuoteRepostPopup, setShowQuoteRepostPopup] = useState(false)
+  const userState = useAppSelector((state) => state.user)
+  const userPubkey = userState.user?.pubkey as string | undefined
+  useDidMount(() => {
+    const repostFilter: NDKFilter = {
+      kinds: [NDKKind.Repost],
+      '#e': [event.id]
+    }
+    const quoteFilter: NDKFilter = {
+      kinds: [NDKKind.Text],
+      '#q': [event.id]
+    }
+    ndk
+      .fetchEvents([repostFilter, quoteFilter], {
+        closeOnEose: true,
+        cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
+      })
+      .then((ndkEventSet) => {
+        const ndkEvents = Array.from(ndkEventSet)
+
+        if (ndkEventSet.size) {
+          const quoteRepostEvents = ndkEvents.filter(
+            (n) => n.kind === NDKKind.Text
+          )
+          userPubkey &&
+            setHasQuoted(
+              quoteRepostEvents.some((qr) => qr.pubkey === userPubkey)
+            )
+          setQuoteRepostEvents(quoteRepostEvents)
+
+          const repostEvents = ndkEvents.filter(
+            (n) => n.kind === NDKKind.Repost
+          )
+          userPubkey &&
+            setHasReposted(repostEvents.some((qr) => qr.pubkey === userPubkey))
+          setRepostEvents(repostEvents)
+        }
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  })
+
+  const handleRepost = async (confirm: boolean) => {
+    if (navigation.state !== 'idle') return
+
+    setShowRepostPopup(false)
+
+    // Cancel if not confirmed
+    if (!confirm) return
+
+    const repostNdkEvent = await event.repost(false)
+    const rawEvent = repostNdkEvent.rawEvent()
+    submit(
+      JSON.stringify({
+        intent: 'repost',
+        note1: event.encode(),
+        data: rawEvent
+      }),
+      {
+        method: 'post',
+        encType: 'application/json',
+        action: appRoutes.feed
+      }
+    )
+  }
+
   return (
     <div className='popUpMain'>
       <div className='ContainerMain'>
@@ -231,25 +321,80 @@ export const CommentsPopup = ({ title }: CommentsPopupProps) => {
                     <div className='IBMSMSMBSSCL_CommentActionsInside'>
                       <Reactions {...event.rawEvent()} />
 
-                      {/* <div
+                      {event.kind === NDKKind.Text && (
-                        className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost'
+                        <>
-                        style={{ cursor: 'not-allowed' }}
+                          {/* Quote Repost, Kind 1 */}
-                      >
+                          <div
-                        <svg
+                            className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost ${
-                          xmlns='http://www.w3.org/2000/svg'
+                              hasQuoted ? 'IBMSMSMBSSCL_CAERepostActive' : ''
-                          viewBox='0 -64 640 640'
+                            }`}
-                          width='1em'
+                            onClick={
-                          height='1em'
+                              isLoading
-                          fill='currentColor'
+                                ? undefined
-                          className='IBMSMSMBSSCL_CAElementIcon'
+                                : () => setShowQuoteRepostPopup(true)
-                        >
+                            }
-                          <path d='M614.2 334.8C610.5 325.8 601.7 319.1 592 319.1H544V176C544 131.9 508.1 96 464 96h-128c-17.67 0-32 14.31-32 32s14.33 32 32 32h128C472.8 160 480 167.2 480 176v143.1h-48c-9.703 0-18.45 5.844-22.17 14.82s-1.656 19.29 5.203 26.16l80 80.02C499.7 445.7 505.9 448 512 448s12.28-2.344 16.97-7.031l80-80.02C615.8 354.1 617.9 343.8 614.2 334.8zM304 352h-128C167.2 352 160 344.8 160 336V192h48c9.703 0 18.45-5.844 22.17-14.82s1.656-19.29-5.203-26.16l-80-80.02C140.3 66.34 134.1 64 128 64S115.7 66.34 111 71.03l-80 80.02C24.17 157.9 22.11 168.2 25.83 177.2S38.3 192 48 192H96V336C96 380.1 131.9 416 176 416h128c17.67 0 32-14.31 32-32S321.7 352 304 352z'></path>
+                          >
-                        </svg>
+                            <svg
-                        <p className='IBMSMSMBSSCL_CAElementText'>0</p>
+                              xmlns='http://www.w3.org/2000/svg'
-                        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
+                              viewBox='0 0 512 512'
-                          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
+                              width='1em'
-                        </div>
+                              height='1em'
-                      </div> */}
+                              fill='currentColor'
+                              className='IBMSMSMBSSCL_CAElementIcon'
+                            >
+                              <path d='M256 31.1c-141.4 0-255.1 93.09-255.1 208c0 49.59 21.38 94.1 56.97 130.7c-12.5 50.39-54.31 95.3-54.81 95.8C0 468.8-.5938 472.2 .6875 475.2c1.312 3 4.125 4.797 7.312 4.797c66.31 0 116-31.8 140.6-51.41c32.72 12.31 69.01 19.41 107.4 19.41C397.4 447.1 512 354.9 512 239.1S397.4 31.1 256 31.1zM368 266c0 8.836-7.164 16-16 16h-54V336c0 8.836-7.164 16-16 16h-52c-8.836 0-16-7.164-16-16V282H160c-8.836 0-16-7.164-16-16V214c0-8.838 7.164-16 16-16h53.1V144c0-8.838 7.164-16 16-16h52c8.836 0 16 7.162 16 16v54H352c8.836 0 16 7.162 16 16V266z'></path>
+                            </svg>
+                            <p className='IBMSMSMBSSCL_CAElementText'>
+                              {isLoading ? <Dots /> : quoteRepostEvents.length}
+                            </p>
+                            <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
+                              <div className='IBMSMSMBSSCL_CAElementLoad'></div>
+                            </div>
+                          </div>
+                          {showQuoteRepostPopup && (
+                            <NoteQuoteRepostPopup
+                              ndkEvent={event}
+                              handleClose={() => setShowQuoteRepostPopup(false)}
+                            />
+                          )}
+
+                          {/* Repost, Kind 6 */}
+                          <div
+                            className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost ${
+                              hasReposted ? 'IBMSMSMBSSCL_CAERepostActive' : ''
+                            }`}
+                            onClick={
+                              isLoading || hasReposted
+                                ? undefined
+                                : () => setShowRepostPopup(true)
+                            }
+                          >
+                            <svg
+                              xmlns='http://www.w3.org/2000/svg'
+                              viewBox='0 -64 640 640'
+                              width='1em'
+                              height='1em'
+                              fill='currentColor'
+                              className='IBMSMSMBSSCL_CAElementIcon'
+                            >
+                              <path d='M614.2 334.8C610.5 325.8 601.7 319.1 592 319.1H544V176C544 131.9 508.1 96 464 96h-128c-17.67 0-32 14.31-32 32s14.33 32 32 32h128C472.8 160 480 167.2 480 176v143.1h-48c-9.703 0-18.45 5.844-22.17 14.82s-1.656 19.29 5.203 26.16l80 80.02C499.7 445.7 505.9 448 512 448s12.28-2.344 16.97-7.031l80-80.02C615.8 354.1 617.9 343.8 614.2 334.8zM304 352h-128C167.2 352 160 344.8 160 336V192h48c9.703 0 18.45-5.844 22.17-14.82s1.656-19.29-5.203-26.16l-80-80.02C140.3 66.34 134.1 64 128 64S115.7 66.34 111 71.03l-80 80.02C24.17 157.9 22.11 168.2 25.83 177.2S38.3 192 48 192H96V336C96 380.1 131.9 416 176 416h128c17.67 0 32-14.31 32-32S321.7 352 304 352z'></path>
+                            </svg>
+                            <p className='IBMSMSMBSSCL_CAElementText'>
+                              {isLoading ? <Dots /> : repostEvents.length}
+                            </p>
+                            <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
+                              <div className='IBMSMSMBSSCL_CAElementLoad'></div>
+                            </div>
+                          </div>
+                          {showRepostPopup && (
+                            <NoteRepostPopup
+                              ndkEvent={event}
+                              handleConfirm={handleRepost}
+                              handleClose={() => setShowRepostPopup(false)}
+                            />
+                          )}
+                        </>
+                      )}
 
                       {typeof profile?.lud16 !== 'undefined' &&
                         profile.lud16 !== '' && <Zap {...event.rawEvent()} />}