From f8cbd43be78de2a01a46e39a7b6036e19b27e163 Mon Sep 17 00:00:00 2001
From: ekzyis <27162016+ekzyis@users.noreply.github.com>
Date: Tue, 9 Jan 2024 00:46:23 +0100
Subject: [PATCH] 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             | 11 +++++--
 components/territory-header.js | 58 +++++++++++++++++++---------------
 pages/~/post.js                |  6 ++--
 3 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/components/post.js b/components/post.js
index 1fe55074..039db5a4 100644
--- a/components/post.js
+++ b/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'} />
-
-        {postButtons}
+        <div className='mb-3 w-100'>
+          {sub && <TerritoryDetails sub={sub} />}
+        </div>
+        <div>
+          {postButtons}
+        </div>
         <div className='d-flex mt-4'>
           <AccordianItem
             headerColor='#6c757d'
diff --git a/components/territory-header.js b/components/territory-header.js
index 33528094..376add02 100644
--- a/components/territory-header.js
+++ b/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
-            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' />
diff --git a/pages/~/post.js b/pages/~/post.js
index efb26e09..1a4d2b55 100644
--- a/pages/~/post.js
+++ b/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