Show territory details in post form (#725)

* 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>

components/post.js

@@ -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'} />
-
+        <div className='mb-3 w-100'>
-        {postButtons}
+          {sub && <TerritoryDetails sub={sub} />}
+        </div>
+        <div>
+          {postButtons}
+        </div>
         <div className='d-flex mt-4'>
           <AccordianItem
             headerColor='#6c757d'

components/territory-header.js

@@ -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
+          <TerritoryDetails sub={sub} />
-            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>
         </div>
         <div className='d-flex my-2 justify-content-end'>
           <Share path={`/~${sub.name}`} title={`~${sub.name} stacker news territory`} className='mx-3' />

pages/~/post.js

@@ -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