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

components/territory-header.js

@@ -11,31 +11,8 @@ import Share from './share'
 import { gql, useMutation } from '@apollo/client'
 import { useToast } from './toast'
 
-export default function TerritoryHeader ({ sub }) {
+export function TerritoryDetails ({ sub }) {
-  const me = useMe()
-  const toaster = useToast()
-
-  const [toggleMuteSub] = useMutation(
-    gql`
-      mutation toggleMuteSub($name: String!) {
-        toggleMuteSub(name: $name)
-      }`, {
-      update (cache, { data: { toggleMuteSub } }) {
-        cache.modify({
-          id: `Sub:{"name":"${sub.name}"}`,
-          fields: {
-            meMuteSub: () => toggleMuteSub
-          }
-        })
-      }
-    }
-  )
-
   return (
-    <>
-      <TerritoryPaymentDue sub={sub} />
-      <div className='mb-3'>
-        <div>
     <AccordianCard
       header={
         <small className='text-muted fw-bold align-items-center d-flex'>
@@ -62,6 +39,35 @@ export default function TerritoryHeader ({ sub }) {
         <TerritoryBillingLine sub={sub} />
       </CardFooter>
     </AccordianCard>
+  )
+}
+
+export default function TerritoryHeader ({ sub }) {
+  const me = useMe()
+  const toaster = useToast()
+
+  const [toggleMuteSub] = useMutation(
+    gql`
+      mutation toggleMuteSub($name: String!) {
+        toggleMuteSub(name: $name)
+      }`, {
+      update (cache, { data: { toggleMuteSub } }) {
+        cache.modify({
+          id: `Sub:{"name":"${sub.name}"}`,
+          fields: {
+            meMuteSub: () => toggleMuteSub
+          }
+        })
+      }
+    }
+  )
+
+  return (
+    <>
+      <TerritoryPaymentDue sub={sub} />
+      <div className='mb-3'>
+        <div>
+          <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' />

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