stacker.news/components/sub-select.js

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}
/>
)
}