ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix back button behavior on select navigation

This commit is contained in:
keyan 2023-07-25 15:29:45 -05:00
parent e09ea310cd
commit 98552c853c
13 changed files with 142 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/fee-button.js
View File

@ -49,8 +49,6 @@ export default function FeeButton ({ parentId, hasImgLink, baseFee, ChildButton,
const boost = Number(formik?.values?.boost) || 0
const cost = baseFee * (hasImgLink ? 10 : 1) * Math.pow(10, repetition) + Number(boost)
console.log('cost', cost, 'baseFee', baseFee, repetition, hasImgLink, boost)
const show = alwaysShow || !formik?.isSubmitting
return (
<div className='d-flex align-items-center'>

23
components/header.js
View File

@ -17,7 +17,7 @@ import NoteIcon from '../svgs/notification-4-fill.svg'
import { useQuery } from '@apollo/client'
import LightningIcon from '../svgs/bolt.svg'
import CowboyHat from './cowboy-hat'
import { Form, Select } from './form'
import { Select } from './form'
import SearchIcon from '../svgs/search-line.svg'
import BackArrow from '../svgs/arrow-left-line.svg'
import { SUBS } from '../lib/constants'
@ -181,18 +181,15 @@ function NavItems ({ className, sub, prefix }) {
return (
<>
<Nav.Item className={className}>
<Form
initial={{ sub }}
>
<Select
groupClassName='mb-0'
onChange={(formik, e) => router.push(e.target.value === 'home' ? '/' : `/~${e.target.value}`)}
name='sub'
size='sm'
overrideValue={sub}
items={['home', ...SUBS]}
/>
</Form>
<Select
groupClassName='mb-0'
onChange={(_, e) => router.push(e.target.value === 'home' ? '/' : `/~${e.target.value}`)}
name='sub'
size='sm'
value={sub}
noForm
items={['home', ...SUBS]}
/>
</Nav.Item>
<Nav.Item className={className}>
<Link href={prefix + '/'} passHref legacyBehavior>

7
components/job-form.js
View File

@ -144,7 +144,7 @@ export default function JobForm ({ item, sub }) {
required
clear
/>
<PromoteJob item={item} sub={sub} storageKeyPrefix={storageKeyPrefix} />
<PromoteJob item={item} sub={sub} />
{item && <StatusControl item={item} />}
<div className='d-flex align-items-center justify-content-end mt-3'>
{item
@ -165,7 +165,7 @@ export default function JobForm ({ item, sub }) {
)
}
function PromoteJob ({ item, sub, storageKeyPrefix }) {
function PromoteJob ({ item, sub }) {
const [monthly, setMonthly] = useState(satsMin2Mo(item?.maxBid || 0))
const [getAuctionPosition, { data }] = useLazyQuery(gql`
query AuctionPosition($id: ID, $bid: Int!) {
@ -175,7 +175,7 @@ function PromoteJob ({ item, sub, storageKeyPrefix }) {
const position = data?.auctionPosition
useEffect(() => {
const initialMaxBid = Number(item?.maxBid || window.localStorage.getItem(storageKeyPrefix + '-maxBid')) || 0
const initialMaxBid = Number(item?.maxBid) || 0
getAuctionPosition({ variables: { id: item?.id, bid: initialMaxBid } })
setMonthly(satsMin2Mo(initialMaxBid))
}, [])
@ -211,7 +211,6 @@ function PromoteJob ({ item, sub, storageKeyPrefix }) {
}}
append={<InputGroup.Text className='text-monospace'>sats/min</InputGroup.Text>}
hint={<PriceHint monthly={monthly} />}
storageKeyPrefix={storageKeyPrefix}
/>
<><div className='fw-bold text-muted'>This bid puts your job in position: {position}</div></>
</>

31
components/recent-header.js
View File

@ -1,5 +1,5 @@
import { ITEM_TYPES } from '../lib/constants'
import { Form, Select } from './form'
import { Select } from './form'
import { useRouter } from 'next/router'
export default function RecentHeader ({ type, sub }) {
@ -8,22 +8,19 @@ export default function RecentHeader ({ type, sub }) {
const items = ITEM_TYPES(sub)
type ||= router.query.type || type || 'posts'
return (
<Form
initial={{
type: router.query.type || type || 'posts'
}}
>
<div className='text-muted fw-bold mt-0 mb-3 d-flex justify-content-end align-items-center'>
<Select
groupClassName='mb-0 ms-2'
className='w-auto'
name='type'
size='sm'
items={items}
onChange={(formik, e) => router.push(prefix + (e.target.value === 'posts' ? '/recent' : `/recent/${e.target.value}`))}
/>
</div>
</Form>
<div className='text-muted fw-bold mt-0 mb-3 d-flex justify-content-end align-items-center'>
<Select
groupClassName='mb-0 ms-2'
className='w-auto'
name='type'
size='sm'
value={type}
items={items}
noForm
onChange={(_, e) => router.push(prefix + (e.target.value === 'posts' ? '/recent' : `/recent/${e.target.value}`))}
/>
</div>
)
}

22
components/search.js
View File

@ -42,9 +42,9 @@ export default function Search ({ sub }) {
return
}
if (values.what === '') delete values.what
if (values.sort === '') delete values.sort
if (values.when === '') delete values.when
if (values.what === '' || values.what === 'all') delete values.what
if (values.sort === '' || values.sort === 'match') delete values.sort
if (values.when === '' || values.when === 'forever') delete values.when
await router.push({
pathname: prefix + '/search',
query: values
@ -54,7 +54,10 @@ export default function Search ({ sub }) {
const showSearch = atBottom || searching || router.query.q
const filter = sub !== 'jobs'
const what = router.pathname.startsWith('/stackers') ? 'stackers' : router.query.what
const what = router.pathname.startsWith('/stackers') ? 'stackers' : router.query.what || 'all'
const sort = router.query.sort || 'match'
const when = router.query.when || 'forever'
return (
<>
<div className={`${styles.searchSection} ${showSearch ? styles.solid : styles.hidden}`}>
@ -63,12 +66,7 @@ export default function Search ({ sub }) {
? (
<Form
className={styles.formActive}
initial={{
q: router.query.q || '',
what: what || '',
sort: router.query.sort || '',
when: router.query.when || ''
}}
initial={{ q, what, sort, when }}
onSubmit={search}
>
{filter &&
@ -78,6 +76,7 @@ export default function Search ({ sub }) {
onChange={(formik, e) => search({ ...formik?.values, what: e.target.value })}
name='what'
size='sm'
overrideValue={what}
items={['all', 'posts', 'comments', 'stackers']}
/>
{what !== 'stackers' &&
@ -88,6 +87,7 @@ export default function Search ({ sub }) {
onChange={(formik, e) => search({ ...formik?.values, sort: e.target.value })}
name='sort'
size='sm'
overrideValue={sort}
items={['match', 'recent', 'comments', 'sats', 'votes']}
/>
for
@ -96,6 +96,7 @@ export default function Search ({ sub }) {
onChange={(formik, e) => search({ ...formik?.values, when: e.target.value })}
name='when'
size='sm'
overrideValue={when}
items={['forever', 'day', 'week', 'month', 'year']}
/>
@ -109,6 +110,7 @@ export default function Search ({ sub }) {
groupClassName='me-3 mb-0 flex-grow-1'
className='flex-grow-1'
clear
overrideValue={q}
onChange={async (formik, e) => {
setSearching(true)
setQ(e.target.value?.trim())

5
components/sub-select-form.js
View File

@ -30,6 +30,9 @@ export default function SubSelect ({ label, sub, setSub, item, ...props }) {
</Info>
)
sub ||= router.query.sub
const extraProps = props.noForm ? { value: sub } : { overrideValue: sub }
return (
<Select
className='w-auto d-flex'
@ -45,7 +48,7 @@ export default function SubSelect ({ label, sub, setSub, item, ...props }) {
}}
name='sub'
size='sm'
defaultValue={props.noForm ? sub : undefined}
{...extraProps}
items={props.noForm ? ['pick sub', ...SUBS] : item ? SUBS_NO_JOBS : ['pick sub', ...SUBS_NO_JOBS]}
label={label &&
<>

13
components/top-header.js
View File

@ -31,15 +31,15 @@ export default function TopHeader ({ sub, cat }) {
})
}
const what = cat
const by = router.query.by || ''
const when = router.query.when || ''
return (
<div className='d-flex'>
<Form
className='me-auto'
initial={{
what: cat,
by: router.query.by || '',
when: router.query.when || ''
}}
initial={{ what, by, when }}
onSubmit={top}
>
<div className='text-muted fw-bold my-3 d-flex align-items-center'>
@ -49,6 +49,7 @@ export default function TopHeader ({ sub, cat }) {
onChange={(formik, e) => top({ ...formik?.values, what: e.target.value })}
name='what'
size='sm'
overrideValue={what}
items={router?.query?.sub ? ['posts', 'comments'] : ['posts', 'comments', 'stackers', 'cowboys']}
/>
{cat !== 'cowboys' &&
@ -59,6 +60,7 @@ export default function TopHeader ({ sub, cat }) {
onChange={(formik, e) => top({ ...formik?.values, by: e.target.value })}
name='by'
size='sm'
overrideValue={by}
items={cat === 'stackers' ? USER_SORTS : ITEM_SORTS}
/>
for
@ -67,6 +69,7 @@ export default function TopHeader ({ sub, cat }) {
onChange={(formik, e) => top({ ...formik?.values, when: e.target.value })}
name='when'
size='sm'
overrideValue={when}
items={WHENS}
/>
</>}

32
components/usage-header.js
View File

@ -1,27 +1,23 @@
import { useRouter } from 'next/router'
import { Form, Select } from './form'
import { Select } from './form'
import { WHENS } from '../lib/constants'
export function UsageHeader () {
const router = useRouter()
return (
<Form
initial={{
when: router.query.when || 'day'
}}
>
<div className='text-muted fw-bold my-3 d-flex align-items-center'>
stacker analytics for
<Select
groupClassName='mb-0 ms-2'
className='w-auto'
name='when'
size='sm'
items={WHENS}
onChange={(formik, e) => router.push(`/stackers/${e.target.value}`)}
/>
</div>
</Form>
<div className='text-muted fw-bold my-3 d-flex align-items-center'>
stacker analytics for
<Select
groupClassName='mb-0 ms-2'
className='w-auto'
name='when'
size='sm'
items={WHENS}
value={router.query.when || 'day'}
noForm
onChange={(formik, e) => router.push(`/stackers/${e.target.value}`)}
/>
</div>
)
}

4
components/user-list.js
View File

@ -40,12 +40,12 @@ export default function UserList ({ ssrData, query, variables, destructureData }
const [statComps, setStatComps] = useState(seperate(STAT_COMPONENTS, Seperator))
useEffect(() => {
if (variables.by) {
if (variables?.by) {
// shift the stat we are sorting by to the front
const comps = [...STAT_COMPONENTS]
setStatComps(seperate([...comps.splice(STAT_POS[variables.by], 1), ...comps], Seperator))
}
}, [variables.by])
}, [variables?.by])
const { users, cursor } = useMemo(() => {
if (!data && !ssrData) return {}

2
lib/md.js
View File

@ -26,8 +26,6 @@ export function extractUrls (md) {
mdastExtensions: [gfmFromMarkdown()]
})
console.log('tree', tree)
const urls = new Set()
visit(tree, ({ type }) => {
return type === 'link' || type === 'image'

19
pages/[name]/[type].js
View File

@ -41,9 +41,9 @@ function UserItemsHeader ({ type, name }) {
async function select (values) {
let { type, ...query } = values
if (!type || !ITEM_TYPES('user').includes(type)) type = 'all'
if (!query.by || !ITEM_SORTS.includes(query.by)) delete query.by
if (!query.when || !WHENS.includes(query.when) || query.when === 'forever') delete query.when
if (!type || type === 'all' || !ITEM_TYPES('user').includes(type)) type = 'all'
if (!query.by || query.by === 'recent' || !ITEM_SORTS.includes(query.by)) delete query.by
if (!query.when || query.when === 'forever' || !WHENS.includes(query.when) || query.when === 'forever') delete query.when
await router.push({
pathname: `/${name}/${type}`,
@ -51,13 +51,13 @@ function UserItemsHeader ({ type, name }) {
})
}
type ||= router.query.type || 'all'
const by = router.query.by || 'recent'
const when = router.query.when || 'forever'
return (
<Form
initial={{
type,
by: router.query.by || 'recent',
when: router.query.when || 'forever'
}}
initial={{ type, by, when }}
onSubmit={select}
>
<div className='text-muted fw-bold mt-0 mb-3 d-flex justify-content-start align-items-center'>
@ -66,6 +66,7 @@ function UserItemsHeader ({ type, name }) {
className='w-auto'
name='type'
size='sm'
overrideValue={type}
items={ITEM_TYPES('user')}
onChange={(formik, e) => select({ ...formik?.values, type: e.target.value })}
/>
@ -75,6 +76,7 @@ function UserItemsHeader ({ type, name }) {
className='w-auto'
name='by'
size='sm'
overrideValue={by}
items={['recent', ...ITEM_SORTS]}
onChange={(formik, e) => select({ ...formik?.values, by: e.target.value })}
/>
@ -85,6 +87,7 @@ function UserItemsHeader ({ type, name }) {
name='when'
size='sm'
items={WHENS}
overrideValue={when}
onChange={(formik, e) => select({ ...formik?.values, when: e.target.value })}
/>
</div>

32
pages/referrals/[when].js
View File

@ -2,7 +2,7 @@ import { gql } from 'graphql-tag'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { getGetServerSideProps } from '../../api/ssrApollo'
import { CopyInput, Form, Select } from '../../components/form'
import { CopyInput, Select } from '../../components/form'
import { CenterLayout } from '../../components/layout'
import { useMe } from '../../components/me'
import { useQuery } from '@apollo/client'
@ -43,23 +43,19 @@ export default function Referrals ({ ssrData }) {
return (
<CenterLayout footerLinks>
<Form
initial={{
when: router.query.when
}}
>
<h4 className='fw-bold text-muted text-center pt-5 pb-3 d-flex align-items-center justify-content-center'>
{totalReferrals} referrals & {totalSats} sats in the last
<Select
groupClassName='mb-0 ms-2'
className='w-auto'
name='when'
size='sm'
items={WHENS}
onChange={(formik, e) => router.push(`/referrals/${e.target.value}`)}
/>
</h4>
</Form>
<h4 className='fw-bold text-muted text-center pt-5 pb-3 d-flex align-items-center justify-content-center'>
{totalReferrals} referrals & {totalSats} sats in the last
<Select
groupClassName='mb-0 ms-2'
className='w-auto'
name='when'
size='sm'
items={WHENS}
value={router.query.when || 'day'}
noForm
onChange={(formik, e) => router.push(`/referrals/${e.target.value}`)}
/>
</h4>
<WhenComposedChart data={stats} lineNames={['sats']} barNames={['referrals']} />
<div

95
pages/stackers/[when].js
View File

@ -1,4 +1,4 @@
import { gql } from '@apollo/client'
import { gql, useQuery } from '@apollo/client'
import { getGetServerSideProps } from '../../api/ssrApollo'
import Layout from '../../components/layout'
import Col from 'react-bootstrap/Col'
@ -6,6 +6,7 @@ import Row from 'react-bootstrap/Row'
import { UsageHeader } from '../../components/usage-header'
import { useRouter } from 'next/router'
import dynamic from 'next/dynamic'
import PageLoading from '../../components/page-loading'
const WhenAreaChart = dynamic(() => import('../../components/charts').then(mod => mod.WhenAreaChart), {
loading: () => <div>Loading...</div>
@ -14,61 +15,65 @@ const WhenLineChart = dynamic(() => import('../../components/charts').then(mod =
loading: () => <div>Loading...</div>
})
export const getServerSideProps = getGetServerSideProps(
gql`
query Growth($when: String!)
{
registrationGrowth(when: $when) {
time
data {
name
value
}
const GROWTH_QUERY = gql`
query Growth($when: String!)
{
registrationGrowth(when: $when) {
time
data {
name
value
}
itemGrowth(when: $when) {
time
data {
name
value
}
}
itemGrowth(when: $when) {
time
data {
name
value
}
spendingGrowth(when: $when) {
time
data {
name
value
}
}
spendingGrowth(when: $when) {
time
data {
name
value
}
spenderGrowth(when: $when) {
time
data {
name
value
}
}
spenderGrowth(when: $when) {
time
data {
name
value
}
stackingGrowth(when: $when) {
time
data {
name
value
}
}
stackingGrowth(when: $when) {
time
data {
name
value
}
stackerGrowth(when: $when) {
time
data {
name
value
}
}
stackerGrowth(when: $when) {
time
data {
name
value
}
}`)
}
}`
export default function Growth ({
ssrData: { registrationGrowth, itemGrowth, spendingGrowth, spenderGrowth, stackingGrowth, stackerGrowth }
}) {
export const getServerSideProps = getGetServerSideProps(GROWTH_QUERY)
export default function Growth ({ ssrData }) {
const router = useRouter()
const { when } = router.query
const avg = ['year', 'forever'].includes(when) ? 'avg daily ' : ''
const { data } = useQuery(GROWTH_QUERY, { variables: { when } })
if (!data && !ssrData) return <PageLoading />
const { registrationGrowth, itemGrowth, spendingGrowth, spenderGrowth, stackingGrowth, stackerGrowth } = data || ssrData
return (
<Layout>
<UsageHeader />