feat(feed): add quote repost popup

src/components/Notes/Note.tsx

@@ -4,7 +4,6 @@ import {
   NDKKind,
   NDKSubscriptionCacheUsage
 } from '@nostr-dev-kit/ndk'
-import { AlertPopup } from 'components/AlertPopup'
 import { CommentContent } from 'components/comment/CommentContent'
 import { Reactions } from 'components/comment/Reactions'
 import { Zap } from 'components/comment/Zap'
@@ -18,8 +17,8 @@ import { Link } from 'react-router-dom'
 import { appRoutes, getProfilePageRoute } from 'routes'
 import { UserProfile } from 'types'
 import { hexToNpub } from 'utils'
-import { NoteSubmit } from './NoteSubmit'
 import { NoteRepostPopup } from './NoteRepostPopup'
+import { NoteQuoteRepostPopup } from './NoteQuoteRepostPopup'
 
 interface NoteProps {
   ndkEvent: NDKEvent
@@ -138,12 +137,6 @@ export const Note = ({ ndkEvent }: NoteProps) => {
       </>
     ) : null
 
-  const handleQuoteRepost = async (confirm: boolean) => {
-    setShowQuoteRepostPopup(false)
-
-    if (!confirm) return
-  }
-
   const handleRepost = async (confirm: boolean) => {
     setShowRepostPopup(false)
 
@@ -227,25 +220,14 @@ export const Note = ({ ndkEvent }: NoteProps) => {
                 <div className='IBMSMSMBSSCL_CAElementLoad'></div>
               </div>
             </div>
-            {/* TODO: new popup */}
             {showQuoteRepostPopup && (
-              <AlertPopup
+              <NoteQuoteRepostPopup
-                handleConfirm={handleQuoteRepost}
+                ndkEvent={repostEvent || ndkEvent}
                 handleClose={() => setShowQuoteRepostPopup(false)}
-                header={'Quote Repost'}
+              />
-                label={``}
-                yesButtonLabel='Post'
-                noButtonLabel='Cancel'
-              >
-                <NoteSubmit
-                  initialContent={`\n\n${
-                    repostEvent?.encode() || ndkEvent.encode()
-                  }`}
-                />
-              </AlertPopup>
             )}
-            {/* Repost, Kind 6 */}
 
+            {/* Repost, Kind 6 */}
             {!isUsersRepost && (
               <div
                 className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost ${

src/components/Notes/NoteQuoteRepostPopup.tsx

@@ -1 +1,61 @@
-//TODO: quote repost popup
+import { createPortal } from 'react-dom'
+import { PropsWithChildren } from 'react'
+import { NDKEvent } from '@nostr-dev-kit/ndk'
+import { NoteSubmit } from './NoteSubmit'
+
+interface NoteQuoteRepostPopup {
+  ndkEvent: NDKEvent
+  handleClose: () => void
+}
+
+export const NoteQuoteRepostPopup = ({
+  ndkEvent,
+  handleClose
+}: PropsWithChildren<NoteQuoteRepostPopup>) => {
+  const content = ndkEvent.encode()
+
+  return createPortal(
+    <div className='popUpMain'>
+      <div className='ContainerMain'>
+        <div className='popUpMainCardWrapper'>
+          <div className='popUpMainCard'>
+            <div className='popUpMainCardTop'>
+              <div className='popUpMainCardTopInfo'>
+                <h3>Quote Repost</h3>
+              </div>
+              <div className='popUpMainCardTopClose' onClick={handleClose}>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-96 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                  style={{ zIndex: 1 }}
+                >
+                  <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
+                </svg>
+              </div>
+            </div>
+            <div className='pUMCB_Zaps'>
+              <div className='pUMCB_ZapsInside'>
+                <div className='inputLabelWrapperMain'>
+                  <label
+                    className='form-label labelMain'
+                    style={{ fontWeight: 'bold' }}
+                  >
+                    Quote repost this?
+                  </label>
+                  <NoteSubmit
+                    initialContent={`\n\n${content}`}
+                    handleClose={handleClose}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

src/components/Notes/NoteSubmit.tsx

@@ -4,26 +4,37 @@ import { useAppSelector } from 'hooks'
 import { useProfile } from 'hooks/useProfile'
 import { Navigate, useSubmit } from 'react-router-dom'
 import { appRoutes } from 'routes'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { adjustTextareaHeight } from 'utils'
 import { NotePreview } from './NotePreview'
 
 interface NoteSubmitProps {
   initialContent?: string | undefined
+  handleClose?: () => void | undefined
 }
 
-export const NoteSubmit = ({ initialContent }: NoteSubmitProps) => {
+export const NoteSubmit = ({
+  initialContent,
+  handleClose
+}: NoteSubmitProps) => {
   const userState = useAppSelector((state) => state.user)
   const profile = useProfile(userState.user?.pubkey as string | undefined, {
     cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
   })
   const [content, setContent] = useState(initialContent ?? '')
   const [nsfw, setNsfw] = useState(false)
-  const [showPreview, setShowPreview] = useState(false)
+  const [showPreview, setShowPreview] = useState(!!initialContent)
   const image = profile?.image || FALLBACK_PROFILE_IMAGE
-
+  const ref = useRef<HTMLTextAreaElement>(null)
   const submit = useSubmit()
 
+  useEffect(() => {
+    if (ref.current && !!initialContent) {
+      adjustTextareaHeight(ref.current)
+      ref.current.focus()
+    }
+  }, [initialContent])
+
   const handleContentChange = (
     event: React.ChangeEvent<HTMLTextAreaElement>
   ) => {
@@ -72,6 +83,7 @@ export const NoteSubmit = ({ initialContent }: NoteSubmitProps) => {
               name='content'
               className='inputMain feedPostsPostInsideInput'
               placeholder='Watcha thinking about?'
+              ref={ref}
               value={content}
               onChange={handleContentChange}
             />
@@ -97,6 +109,16 @@ export const NoteSubmit = ({ initialContent }: NoteSubmitProps) => {
             <div
               style={{ display: 'flex', flexDirection: 'row', gridGap: '10px' }}
             >
+              {typeof handleClose === 'function' && (
+                <button
+                  className='btn btnMain'
+                  type='button'
+                  style={{ padding: '5px 20px', borderRadius: '8px' }}
+                  onClick={handleClose}
+                >
+                  Close
+                </button>
+              )}
               <button
                 className='btn btnMain'
                 type='button'