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

Show territory details in post form (#725)

Browse Source 
* Show territory details in post form

* Style territory details in post form

* Keep details closed by default

* Use SUB_FULL

* Undo unused changes to specify accordian default

---------

Co-authored-by: ekzyis <ek@stacker.news>
This commit is contained in:
ekzyis 2024-01-09 00:46:23 +01:00 committed by GitHub
parent 2151323c8d
commit f8cbd43be7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/post.js
View File

@ -14,6 +14,7 @@ import { useCallback, useState } from 'react'
import FeeButton, { FeeButtonProvider, postCommentBaseLineItems, postCommentUseRemoteLineItems } from './fee-button'
import Delete from './delete'
import CancelButton from './cancel-button'
import { TerritoryDetails } from './territory-header'
export function PostForm ({ type, sub, children }) {
const me = useMe()
@ -98,14 +99,18 @@ export function PostForm ({ type, sub, children }) {
}, [])
return (
<div className='position-relative align-items-center'>
<div className='position-relative d-flex flex-column align-items-center'>
{errorMessage &&
<Alert className='position-absolute' style={{ top: '-6rem' }} variant='danger' onClose={() => setErrorMessage(undefined)} dismissible>
{errorMessage}
</Alert>}
<SubSelect prependSubs={['pick territory']} className='w-auto d-flex' noForm sub={sub?.name} hint={sub?.moderated && 'this territory is moderated'} />
{postButtons}
<div className='mb-3 w-100'>
{sub && <TerritoryDetails sub={sub} />}
</div>
<div>
{postButtons}
</div>
<div className='d-flex mt-4'>
<AccordianItem
headerColor='#6c757d'

58
components/territory-header.js
View File

@ -11,6 +11,37 @@ import Share from './share'
import { gql, useMutation } from '@apollo/client'
import { useToast } from './toast'
export function TerritoryDetails ({ sub }) {
return (
<AccordianCard
header={
<small className='text-muted fw-bold align-items-center d-flex'>
territory details
{sub.status === 'STOPPED' && <Badge className='ms-2' bg='danger'>archived</Badge>}
{(sub.moderated || sub.moderatedCount > 0) && <Badge className='ms-2' bg='secondary'>moderated{sub.moderatedCount > 0 && ` ${sub.moderatedCount}`}</Badge>}
</small>
}
>
<div className='py-2'>
<Text>{sub.desc}</Text>
</div>
<CardFooter className={`py-1 ${styles.other}`}>
<div className='text-muted'>
<span>founded by </span>
<Link href={`/${sub.user.name}`}>
@{sub.user.name}<span> </span><Hat className='fill-grey' user={sub.user} height={12} width={12} />
</Link>
</div>
<div className='text-muted'>
<span>post cost </span>
<span className='fw-bold'>{numWithUnits(sub.baseCost)}</span>
</div>
<TerritoryBillingLine sub={sub} />
</CardFooter>
</AccordianCard>
)
}
export default function TerritoryHeader ({ sub }) {
const me = useMe()
const toaster = useToast()
@ -36,32 +67,7 @@ export default function TerritoryHeader ({ sub }) {
<TerritoryPaymentDue sub={sub} />
<div className='mb-3'>
<div>
<AccordianCard
header={
<small className='text-muted fw-bold align-items-center d-flex'>
territory details
{sub.status === 'STOPPED' && <Badge className='ms-2' bg='danger'>archived</Badge>}
{(sub.moderated || sub.moderatedCount > 0) && <Badge className='ms-2' bg='secondary'>moderated{sub.moderatedCount > 0 && ` ${sub.moderatedCount}`}</Badge>}
</small>
}
>
<div className='py-2'>
<Text>{sub.desc}</Text>
</div>
<CardFooter className={`py-1 ${styles.other}`}>
<div className='text-muted'>
<span>founded by </span>
<Link href={`/${sub.user.name}`}>
@{sub.user.name}<span> </span><Hat className='fill-grey' user={sub.user} height={12} width={12} />
</Link>
</div>
<div className='text-muted'>
<span>post cost </span>
<span className='fw-bold'>{numWithUnits(sub.baseCost)}</span>
</div>
<TerritoryBillingLine sub={sub} />
</CardFooter>
</AccordianCard>
<TerritoryDetails sub={sub} />
</div>
<div className='d-flex my-2 justify-content-end'>
<Share path={`/~${sub.name}`} title={`~${sub.name} stacker news territory`} className='mx-3' />

6
pages/~/post.js
View File

@ -1,5 +1,5 @@
import { getGetServerSideProps } from '../../api/ssrApollo'
import { SUB } from '../../fragments/subs'
import { SUB_FULL } from '../../fragments/subs'
import { CenterLayout } from '../../components/layout'
import Post from '../../components/post'
import { useQuery } from '@apollo/client'
@ -7,13 +7,13 @@ import { useRouter } from 'next/router'
import PageLoading from '../../components/page-loading'
export const getServerSideProps = getGetServerSideProps({
query: SUB,
query: SUB_FULL,
notFound: (data, vars) => vars.sub && !data.sub
})
export default function PostPage ({ ssrData }) {
const router = useRouter()
const { data } = useQuery(SUB, { variables: { sub: router.query.sub } })
const { data } = useQuery(SUB_FULL, { variables: { sub: router.query.sub } })
if (!data && !ssrData) return <PageLoading />
const { sub } = data || ssrData