127 lines
3.7 KiB
JavaScript
127 lines
3.7 KiB
JavaScript
import { useRouter } from 'next/router'
|
|
import { Select } from './form'
|
|
import Info from './info'
|
|
import { SSR } from '../lib/constants'
|
|
import { SUBS } from '../fragments/subs'
|
|
import { useQuery } from '@apollo/client'
|
|
import { useEffect, useState } from 'react'
|
|
import styles from './sub-select.module.css'
|
|
|
|
export function SubSelectInitial ({ sub }) {
|
|
const router = useRouter()
|
|
sub = sub || router.query.sub || 'pick territory'
|
|
|
|
return {
|
|
sub
|
|
}
|
|
}
|
|
|
|
export function useSubs ({ prependSubs = [], sub, filterSubs = () => true, appendSubs = [] }) {
|
|
const { data } = useQuery(SUBS, SSR
|
|
? {}
|
|
: {
|
|
pollInterval: 300000,
|
|
nextFetchPolicy: 'cache-and-network'
|
|
})
|
|
|
|
const [subs, setSubs] = useState([
|
|
...prependSubs.filter(s => s !== sub),
|
|
sub,
|
|
...appendSubs.filter(s => s !== sub)])
|
|
useEffect(() => {
|
|
if (!data) return
|
|
const joined = data.subs.filter(filterSubs).filter(s => !s.meMuteSub).map(s => s.name)
|
|
const muted = data.subs.filter(filterSubs).filter(s => s.meMuteSub).map(s => s.name)
|
|
const mutedSection = muted.length ? [{ label: 'muted', items: muted }] : []
|
|
setSubs([
|
|
...prependSubs,
|
|
...joined,
|
|
...mutedSection,
|
|
...appendSubs])
|
|
}, [data])
|
|
|
|
return subs
|
|
}
|
|
|
|
export const SubInfo = () => (
|
|
<Info>
|
|
<div>
|
|
<div className='fw-bold'>The territory your post will go in ...</div>
|
|
<ul>
|
|
<li>If it's bitcoin related, put it in the bitcoin territory.</li>
|
|
<li>If it's nostr related, put it in the nostr territory.</li>
|
|
<li>If it's tech related, put it in the tech territory.</li>
|
|
<li>If it's stacker news related, put it in the meta territory.</li>
|
|
<li>If it's a job, put it in the jobs territory.</li>
|
|
<li>etc...</li>
|
|
</ul>
|
|
</div>
|
|
</Info>
|
|
)
|
|
|
|
export default function SubSelect ({ prependSubs, sub, onChange, appendSubs, filterSubs, className, ...props }) {
|
|
const router = useRouter()
|
|
const subs = useSubs({ prependSubs, sub, filterSubs, appendSubs })
|
|
const valueProps = props.noForm
|
|
? {
|
|
value: sub.toLowerCase()
|
|
}
|
|
: {
|
|
overrideValue: sub.toLowerCase()
|
|
}
|
|
|
|
return (
|
|
<Select
|
|
onChange={onChange || ((_, e) => {
|
|
const target = e.target.selectedOptions[0].text
|
|
const sub = ['home', 'pick territory'].includes(target) ? undefined : target
|
|
if (sub === 'create') {
|
|
router.push('/territory')
|
|
return
|
|
}
|
|
|
|
let asPath
|
|
// are we currently in a sub (ie not home)
|
|
if (router.query.sub) {
|
|
// are we going to a sub or home?
|
|
const subReplace = sub ? `/~${sub}` : ''
|
|
|
|
// if we are going to a sub, replace the current sub with the new one
|
|
asPath = router.asPath.replace(`/~${router.query.sub}`, subReplace)
|
|
// if we're going to home, just go there directly
|
|
if (asPath === '') {
|
|
router.push('/')
|
|
return
|
|
}
|
|
} else {
|
|
// we're currently on the home sub
|
|
// are we in a sub aware route?
|
|
if (router.pathname.startsWith('/~')) {
|
|
// if we are, go to the same path but in the sub
|
|
asPath = `/~${sub}` + router.asPath
|
|
} else {
|
|
// otherwise, just go to the sub
|
|
router.push(sub ? `/~${sub}` : '/')
|
|
return
|
|
}
|
|
}
|
|
const query = {
|
|
...router.query,
|
|
sub
|
|
}
|
|
delete query.nodata
|
|
router.push({
|
|
pathname: router.pathname,
|
|
query
|
|
}, asPath)
|
|
})}
|
|
name='sub'
|
|
size='sm'
|
|
{...valueProps}
|
|
{...props}
|
|
className={`${className} ${styles.subSelect}`}
|
|
items={subs}
|
|
/>
|
|
)
|
|
}
|