degmods.com/src/components/Notes/NoteSubmit.tsx

import { NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk'
import { FALLBACK_PROFILE_IMAGE } from '../../constants'
import { useAppSelector, useLocalCache } from 'hooks'
import { useProfile } from 'hooks/useProfile'
import { Navigate, useNavigation, useSubmit } from 'react-router-dom'
import { appRoutes } from 'routes'
import { useEffect, useRef, useState } from 'react'
import { adjustTextareaHeight, NOTE_DRAFT_CACHE_KEY } from 'utils'
import { NotePreview } from './NotePreview'
import { NoteSubmitForm } from 'types'

interface NoteSubmitProps {
  initialContent?: string | undefined
  handleClose?: () => void | undefined
}

export const NoteSubmit = ({
  initialContent,
  handleClose
}: NoteSubmitProps) => {
  const navigation = useNavigation()
  const userState = useAppSelector((state) => state.user)
  const profile = useProfile(userState.user?.pubkey as string | undefined, {
    cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
  })
  const [cache, setCache] = useLocalCache<NoteSubmitForm>(NOTE_DRAFT_CACHE_KEY)
  const [content, setContent] = useState(initialContent ?? cache?.content ?? '')
  const [nsfw, setNsfw] = useState(cache?.nsfw ?? 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 || !!cache?.content)) {
      adjustTextareaHeight(ref.current)
      ref.current.focus()
    }
  }, [cache?.content, initialContent])

  useEffect(() => {
    setCache({
      content,
      nsfw
    })
  }, [content, nsfw, setCache])

  const handleContentChange = (
    event: React.ChangeEvent<HTMLTextAreaElement>
  ) => {
    setContent(event.currentTarget.value)
    adjustTextareaHeight(event.currentTarget)
  }

  const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const formSubmit = {
      intent: 'submit',
      data: {
        content,
        nsfw
      }
    }

    // Reset form
    setContent('')
    setNsfw(false)

    submit(JSON.stringify(formSubmit), {
      method: 'post',
      encType: 'application/json'
    })

    typeof handleClose === 'function' && handleClose()
  }

  const handlePreviewToggle = () => {
    setShowPreview((prev) => !prev)
  }

  if (!userState.user?.pubkey) return <Navigate to={appRoutes.home} />

  return (
    <>
      <form className='feedPostsPost' onSubmit={handleFormSubmit}>
        <div className='feedPostsPostInside'>
          <div className='feedPostsPostInsideInputWrapper'>
            <div className='feedPostsPostInsidePP'>
              <div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
                <div
                  className='IBMSMSMBSSCL_CommentTopPP'
                  style={{
                    background: `url(${image}) center/cover no-repeat`,
                    width: '50px',
                    height: '50px',
                    borderRadius: '8px'
                  }}
                ></div>
              </div>
            </div>
            <textarea
              id='postSocialTextarea'
              name='content'
              className='inputMain feedPostsPostInsideInput'
              placeholder='Watcha thinking about?'
              ref={ref}
              value={content}
              onChange={handleContentChange}
            />
          </div>
          <div className='feedPostsPostInsideAction'>
            <div
              className='inputLabelWrapperMain inputLabelWrapperMainAlt'
              style={{ width: 'unset' }}
            >
              <input
                type='checkbox'
                className='CheckboxMain'
                checked={nsfw}
                id='nsfw'
                name='nsfw'
                onChange={() => setNsfw((nsfw) => !nsfw)}
              />
              <label htmlFor='nsfw' className='form-label labelMain'>
                NSFW
              </label>
            </div>
            <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'
                style={{ padding: '5px 20px', borderRadius: '8px' }}
                onClick={handlePreviewToggle}
              >
                Preview
              </button>
              <button
                className='btn btnMain'
                type='submit'
                style={{ padding: '5px 20px', borderRadius: '8px' }}
                disabled={navigation.state !== 'idle'}
              >
                {navigation.state === 'idle' ? 'Post' : 'Posting...'}
              </button>
            </div>
          </div>
          {showPreview && <NotePreview content={content} />}
        </div>
      </form>
    </>
  )
}