feat: support sending only to current relays
This commit is contained in:
codytseng
parent
29f5ccc4bb
commit
ccf8c21954
11 changed files with 199 additions and 75 deletions
|
|
@ -1,18 +1,18 @@
|
|||
import { Button } from '@/components/ui/button'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { StorageKey } from '@/constants'
|
||||
import { useToast } from '@/hooks/use-toast'
|
||||
import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event'
|
||||
import { useFeed } from '@/providers/FeedProvider.tsx'
|
||||
import { useNostr } from '@/providers/NostrProvider'
|
||||
import client from '@/services/client.service'
|
||||
import { ChevronDown, ImageUp, LoaderCircle } from 'lucide-react'
|
||||
import { Event, kinds } from 'nostr-tools'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import TextareaWithMentions from '../TextareaWithMentions.tsx'
|
||||
import Mentions from './Mentions'
|
||||
import PostOptions from './PostOptions.tsx'
|
||||
import Preview from './Preview'
|
||||
import { TPostOptions } from './types.ts'
|
||||
import Uploader from './Uploader'
|
||||
|
||||
export default function NormalPostContent({
|
||||
|
|
@ -27,18 +27,15 @@ export default function NormalPostContent({
|
|||
const { t } = useTranslation()
|
||||
const { toast } = useToast()
|
||||
const { publish, checkLogin } = useNostr()
|
||||
const { relayUrls } = useFeed()
|
||||
const [content, setContent] = useState(defaultContent)
|
||||
const [pictureInfos, setPictureInfos] = useState<{ url: string; tags: string[][] }[]>([])
|
||||
const [posting, setPosting] = useState(false)
|
||||
const [showMoreOptions, setShowMoreOptions] = useState(false)
|
||||
const [addClientTag, setAddClientTag] = useState(false)
|
||||
const [postOptions, setPostOptions] = useState<TPostOptions>({})
|
||||
const [uploadingPicture, setUploadingPicture] = useState(false)
|
||||
const canPost = !!content && !posting
|
||||
|
||||
useEffect(() => {
|
||||
setAddClientTag(window.localStorage.getItem(StorageKey.ADD_CLIENT_TAG) === 'true')
|
||||
}, [])
|
||||
|
||||
const post = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
checkLogin(async () => {
|
||||
|
|
@ -54,14 +51,26 @@ export default function NormalPostContent({
|
|||
const relayList = await client.fetchRelayList(parentEvent.pubkey)
|
||||
additionalRelayUrls.push(...relayList.read.slice(0, 5))
|
||||
}
|
||||
let protectedEvent = false
|
||||
if (postOptions.sendOnlyToCurrentRelays) {
|
||||
const relayInfos = await client.fetchRelayInfos(relayUrls)
|
||||
protectedEvent = relayInfos.every((info) => info?.supported_nips?.includes(70))
|
||||
}
|
||||
const draftEvent =
|
||||
parentEvent && parentEvent.kind !== kinds.ShortTextNote
|
||||
? await createCommentDraftEvent(content, parentEvent, pictureInfos, { addClientTag })
|
||||
? await createCommentDraftEvent(content, parentEvent, pictureInfos, {
|
||||
addClientTag: postOptions.addClientTag,
|
||||
protectedEvent
|
||||
})
|
||||
: await createShortTextNoteDraftEvent(content, pictureInfos, {
|
||||
parentEvent,
|
||||
addClientTag
|
||||
addClientTag: postOptions.addClientTag,
|
||||
protectedEvent
|
||||
})
|
||||
await publish(draftEvent, additionalRelayUrls)
|
||||
await publish(draftEvent, {
|
||||
additionalRelayUrls,
|
||||
specifiedRelayUrls: postOptions.sendOnlyToCurrentRelays ? relayUrls : undefined
|
||||
})
|
||||
setContent('')
|
||||
close()
|
||||
} catch (error) {
|
||||
|
|
@ -92,11 +101,6 @@ export default function NormalPostContent({
|
|||
})
|
||||
}
|
||||
|
||||
const onAddClientTagChange = (checked: boolean) => {
|
||||
setAddClientTag(checked)
|
||||
window.localStorage.setItem(StorageKey.ADD_CLIENT_TAG, checked.toString())
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<TextareaWithMentions
|
||||
|
|
@ -150,21 +154,11 @@ export default function NormalPostContent({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showMoreOptions && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Label htmlFor="add-client-tag">{t('Add client tag')}</Label>
|
||||
<Switch
|
||||
id="add-client-tag"
|
||||
checked={addClientTag}
|
||||
onCheckedChange={onAddClientTagChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{t('Show others this was sent via Jumble')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<PostOptions
|
||||
show={showMoreOptions}
|
||||
postOptions={postOptions}
|
||||
setPostOptions={setPostOptions}
|
||||
/>
|
||||
<div className="flex gap-2 items-center justify-around sm:hidden">
|
||||
<Button
|
||||
className="w-full"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,32 @@
|
|||
import { Button } from '@/components/ui/button'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { StorageKey } from '@/constants'
|
||||
import { useToast } from '@/hooks/use-toast'
|
||||
import { createPictureNoteDraftEvent } from '@/lib/draft-event'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useFeed } from '@/providers/FeedProvider.tsx'
|
||||
import { useNostr } from '@/providers/NostrProvider'
|
||||
import client from '@/services/client.service'
|
||||
import { ChevronDown, Loader, LoaderCircle, Plus, X } from 'lucide-react'
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
|
||||
import { Dispatch, SetStateAction, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Image from '../Image'
|
||||
import TextareaWithMentions from '../TextareaWithMentions.tsx'
|
||||
import Mentions from './Mentions'
|
||||
import PostOptions from './PostOptions.tsx'
|
||||
import { TPostOptions } from './types.ts'
|
||||
import Uploader from './Uploader'
|
||||
|
||||
export default function PicturePostContent({ close }: { close: () => void }) {
|
||||
const { t } = useTranslation()
|
||||
const { toast } = useToast()
|
||||
const { publish, checkLogin } = useNostr()
|
||||
const { relayUrls } = useFeed()
|
||||
const [content, setContent] = useState('')
|
||||
const [pictureInfos, setPictureInfos] = useState<{ url: string; tags: string[][] }[]>([])
|
||||
const [posting, setPosting] = useState(false)
|
||||
const [showMoreOptions, setShowMoreOptions] = useState(false)
|
||||
const [addClientTag, setAddClientTag] = useState(false)
|
||||
const [postOptions, setPostOptions] = useState<TPostOptions>({})
|
||||
const canPost = !!content && !posting && pictureInfos.length > 0
|
||||
|
||||
useEffect(() => {
|
||||
setAddClientTag(window.localStorage.getItem(StorageKey.ADD_CLIENT_TAG) === 'true')
|
||||
}, [])
|
||||
|
||||
const post = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
checkLogin(async () => {
|
||||
|
|
@ -42,10 +40,18 @@ export default function PicturePostContent({ close }: { close: () => void }) {
|
|||
if (!pictureInfos.length) {
|
||||
throw new Error(t('Picture note requires images'))
|
||||
}
|
||||
let protectedEvent = false
|
||||
if (postOptions.sendOnlyToCurrentRelays) {
|
||||
const relayInfos = await client.fetchRelayInfos(relayUrls)
|
||||
protectedEvent = relayInfos.every((info) => info?.supported_nips?.includes(70))
|
||||
}
|
||||
const draftEvent = await createPictureNoteDraftEvent(content, pictureInfos, {
|
||||
addClientTag
|
||||
addClientTag: postOptions.addClientTag,
|
||||
protectedEvent
|
||||
})
|
||||
await publish(draftEvent, {
|
||||
specifiedRelayUrls: postOptions.sendOnlyToCurrentRelays ? relayUrls : undefined
|
||||
})
|
||||
await publish(draftEvent)
|
||||
setContent('')
|
||||
close()
|
||||
} catch (error) {
|
||||
|
|
@ -76,11 +82,6 @@ export default function PicturePostContent({ close }: { close: () => void }) {
|
|||
})
|
||||
}
|
||||
|
||||
const onAddClientTagChange = (checked: boolean) => {
|
||||
setAddClientTag(checked)
|
||||
window.localStorage.setItem(StorageKey.ADD_CLIENT_TAG, checked.toString())
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
|
|
@ -121,21 +122,11 @@ export default function PicturePostContent({ close }: { close: () => void }) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showMoreOptions && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Label htmlFor="add-client-tag">{t('Add client tag')}</Label>
|
||||
<Switch
|
||||
id="add-client-tag"
|
||||
checked={addClientTag}
|
||||
onCheckedChange={onAddClientTagChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{t('Show others this was sent via Jumble')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<PostOptions
|
||||
show={showMoreOptions}
|
||||
postOptions={postOptions}
|
||||
setPostOptions={setPostOptions}
|
||||
/>
|
||||
<div className="flex gap-2 items-center justify-around sm:hidden">
|
||||
<Button
|
||||
className="w-full"
|
||||
|
|
|
|||
82
src/components/PostEditor/PostOptions.tsx
Normal file
82
src/components/PostEditor/PostOptions.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { Label } from '@/components/ui/label'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { StorageKey } from '@/constants'
|
||||
import { simplifyUrl } from '@/lib/url'
|
||||
import { useFeed } from '@/providers/FeedProvider'
|
||||
import { Info } from 'lucide-react'
|
||||
import { Dispatch, SetStateAction, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { TPostOptions } from './types'
|
||||
|
||||
export default function PostOptions({
|
||||
show,
|
||||
postOptions,
|
||||
setPostOptions
|
||||
}: {
|
||||
show: boolean
|
||||
postOptions: TPostOptions
|
||||
setPostOptions: Dispatch<SetStateAction<TPostOptions>>
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const { relayUrls } = useFeed()
|
||||
|
||||
useEffect(() => {
|
||||
setPostOptions({
|
||||
addClientTag: window.localStorage.getItem(StorageKey.ADD_CLIENT_TAG) === 'true',
|
||||
sendOnlyToCurrentRelays: false
|
||||
})
|
||||
}, [])
|
||||
|
||||
if (!show) return null
|
||||
|
||||
const onAddClientTagChange = (checked: boolean) => {
|
||||
setPostOptions((prev) => ({ ...prev, addClientTag: checked }))
|
||||
window.localStorage.setItem(StorageKey.ADD_CLIENT_TAG, checked.toString())
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Label htmlFor="add-client-tag">{t('Add client tag')}</Label>
|
||||
<Switch
|
||||
id="add-client-tag"
|
||||
checked={postOptions.addClientTag}
|
||||
onCheckedChange={onAddClientTagChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{t('Show others this was sent via Jumble')}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<Label htmlFor="send-only-to-current-relays" className="truncate">
|
||||
{relayUrls.length === 1
|
||||
? t('Send only to r', { r: simplifyUrl(relayUrls[0]) })
|
||||
: t('Send only to current relays')}
|
||||
</Label>
|
||||
{relayUrls.length > 1 && (
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<Info size={14} />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-fit text-sm">
|
||||
{relayUrls.map((url) => (
|
||||
<div key={url}>{simplifyUrl(url)}</div>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
<Switch
|
||||
className="shrink-0"
|
||||
id="send-only-to-current-relays"
|
||||
checked={postOptions.sendOnlyToCurrentRelays}
|
||||
onCheckedChange={(checked) =>
|
||||
setPostOptions((prev) => ({ ...prev, sendOnlyToCurrentRelays: checked }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
4
src/components/PostEditor/types.ts
Normal file
4
src/components/PostEditor/types.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export type TPostOptions = {
|
||||
addClientTag?: boolean
|
||||
sendOnlyToCurrentRelays?: boolean
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue