import { Badge, Button, CardFooter, Dropdown } from 'react-bootstrap' import { AccordianCard } from './accordian-item' import TerritoryPaymentDue, { TerritoryBillingLine } from './territory-payment-due' import Link from 'next/link' import Text from './text' import { numWithUnits } from '@/lib/format' import styles from './item.module.css' import Badges from './badge' import { useMe } from './me' import Share from './share' import { gql, useMutation } from '@apollo/client' import { useToast } from './toast' import ActionDropdown from './action-dropdown' import { TerritoryTransferDropdownItem } from './territory-transfer' export function TerritoryDetails ({ sub, children }) { return ( {sub.name} {sub.status === 'STOPPED' && archived} {(sub.moderated || sub.moderatedCount > 0) && moderated{sub.moderatedCount > 0 && ` ${sub.moderatedCount}`}} {(sub.nsfw) && nsfw} } > {children} ) } export function TerritoryInfo ({ sub }) { return ( <>
{sub.desc}
founded by @{sub.user.name} on {new Date(sub.createdAt).toDateString()}
post cost {numWithUnits(sub.baseCost)}
) } export default function TerritoryHeader ({ sub }) { const { me } = useMe() const toaster = useToast() const [toggleMuteSub] = useMutation( gql` mutation toggleMuteSub($name: String!) { toggleMuteSub(name: $name) }`, { update (cache, { data: { toggleMuteSub } }) { cache.modify({ id: `Sub:{"name":"${sub.name}"}`, fields: { meMuteSub: () => toggleMuteSub } }) } } ) const isMine = Number(sub.userId) === Number(me?.id) return ( <>
{sub.name} {me && <> {(isMine ? ( ) : ( ) )} {isMine && ( <> )} }
) } export function MuteSubDropdownItem ({ item, sub }) { const toaster = useToast() const [toggleMuteSub] = useMutation( gql` mutation toggleMuteSub($name: String!) { toggleMuteSub(name: $name) }`, { update (cache, { data: { toggleMuteSub } }) { cache.modify({ id: `Sub:{"name":"${sub.name}"}`, fields: { meMuteSub: () => toggleMuteSub } }) } } ) return ( { try { await toggleMuteSub({ variables: { name: sub.name } }) } catch { toaster.danger(`failed to ${sub.meMuteSub ? 'join' : 'mute'} territory`) return } toaster.success(`${sub.meMuteSub ? 'joined' : 'muted'} territory`) }} >{sub.meMuteSub ? 'unmute' : 'mute'} ~{sub.name} ) } export function PinSubDropdownItem ({ item: { id, position } }) { const toaster = useToast() const [pinItem] = useMutation( gql` mutation pinItem($id: ID!) { pinItem(id: $id) { position } }`, { // refetch since position of other items might also have changed to fill gaps refetchQueries: ['SubItems', 'Item'] } ) return ( { try { await pinItem({ variables: { id } }) toaster.success(position ? 'pin removed' : 'pin added') } catch (err) { toaster.danger(err.message) } }} > {position ? 'unpin item' : 'pin item'} ) } export function ToggleSubSubscriptionDropdownItem ({ sub: { name, meSubscription } }) { const toaster = useToast() const [toggleSubSubscription] = useMutation( gql` mutation toggleSubSubscription($name: String!) { toggleSubSubscription(name: $name) }`, { update (cache, { data: { toggleSubSubscription } }) { cache.modify({ id: `Sub:{"name":"${name}"}`, fields: { meSubscription: () => toggleSubSubscription } }) } } ) return ( { try { await toggleSubSubscription({ variables: { name } }) toaster.success(meSubscription ? 'unsubscribed' : 'subscribed') } catch (err) { console.error(err) toaster.danger(meSubscription ? 'failed to unsubscribe' : 'failed to subscribe') } }} > {meSubscription ? `unsubscribe from ~${name}` : `subscribe to ~${name}`} ) }