0ee056b2a1
* Prototype of toast system * More toast adoption * share * flag * bookmark * subscribe * delete * More toast usage: * forms * settings save * Log error during flag failure * Incorporate PR feedback: 1. return `toaster` from `useToast` hook, with simplified `success` and `danger` methods 2. remove toast header, move close button to body 3. change how toast ids are generated to use a global incrementing int 4. update toast messages * PR feedback: * reduce width of toast on narrow screens * dynamic delete success toast message based on deleted type * add toasts to auth methods deletion operations * Dismiss all toasts upon page navigation * refine style and use delay prop * more styling --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com> Co-authored-by: keyan <keyan.kousha+huumn@gmail.com>
85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
import Dropdown from 'react-bootstrap/Dropdown'
|
|
import ShareIcon from '../svgs/share-fill.svg'
|
|
import copy from 'clipboard-copy'
|
|
import { useMe } from './me'
|
|
import { useToast } from './toast'
|
|
|
|
export default function Share ({ item }) {
|
|
const me = useMe()
|
|
const toaster = useToast()
|
|
const url = `https://stacker.news/items/${item.id}${me ? `/r/${me.name}` : ''}`
|
|
|
|
return typeof window !== 'undefined' && navigator?.share
|
|
? (
|
|
<div className='ms-auto pointer d-flex align-items-center'>
|
|
<ShareIcon
|
|
width={20} height={20}
|
|
className='mx-2 fill-grey theme'
|
|
onClick={async () => {
|
|
try {
|
|
await navigator.share({
|
|
title: item.title || '',
|
|
text: '',
|
|
url
|
|
})
|
|
toaster.success('link shared')
|
|
} catch (err) {
|
|
console.error(err)
|
|
toaster.danger('failed to share link')
|
|
}
|
|
}}
|
|
/>
|
|
</div>)
|
|
: (
|
|
<Dropdown align='end' className='ms-auto pointer d-flex align-items-center' as='span'>
|
|
<Dropdown.Toggle variant='success' id='dropdown-basic' as='a'>
|
|
<ShareIcon width={20} height={20} className='mx-2 fill-grey theme' />
|
|
</Dropdown.Toggle>
|
|
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item
|
|
onClick={async () => {
|
|
try {
|
|
await copy(url)
|
|
toaster.success('link copied')
|
|
} catch (err) {
|
|
console.error(err)
|
|
toaster.danger('failed to copy link')
|
|
}
|
|
}}
|
|
>
|
|
copy link
|
|
</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown>)
|
|
}
|
|
|
|
export function CopyLinkDropdownItem ({ item }) {
|
|
const me = useMe()
|
|
const toaster = useToast()
|
|
const url = `https://stacker.news/items/${item.id}${me ? `/r/${me.name}` : ''}`
|
|
return (
|
|
<Dropdown.Item
|
|
onClick={async () => {
|
|
try {
|
|
if (navigator.share) {
|
|
await navigator.share({
|
|
title: item.title || '',
|
|
text: '',
|
|
url
|
|
})
|
|
} else {
|
|
await copy(url)
|
|
}
|
|
toaster.success('link copied')
|
|
} catch (err) {
|
|
console.error(err)
|
|
toaster.danger('failed to copy link')
|
|
}
|
|
}}
|
|
>
|
|
copy link
|
|
</Dropdown.Item>
|
|
)
|
|
}
|