feat: move invoices to membership layout

src/app/user/membership/layout.tsx

@@ -0,0 +1,19 @@
+import Invoices from '@/components/invoices'
+
+export default async function MembershipPageLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="w-full">
+      <h2 className="pb-3 md:pb-4 text-lg font-medium md:font-normal md:text-xl leading-none">
+        Membership
+      </h2>
+      <div className="min-h-[200px] flex justify-center items-center">
+        {children}
+      </div>
+      <Invoices headingAs="h3" />
+    </div>
+  )
+}

src/app/user/membership/page.tsx

@@ -111,15 +111,10 @@ const Membership = () => {
       )
     case hasStripeAccount:
       return (
-        <div className="w-full">
-          <ItemWrapper title="Membership">
-            <SubscriptionDetails
-              stripeCustomerId={account.stripe_customer_id}
-              slug={account.slug}
-            />
-          </ItemWrapper>
-          <Invoices headingAs="h3" />
-        </div>
+        <SubscriptionDetails
+          stripeCustomerId={account.stripe_customer_id}
+          slug={account.slug}
+        />
       )
     case isTeamMember:
       return (

src/components/invoices/index.tsx

@@ -1,7 +1,8 @@
+'use client'
+
 import * as React from 'react'
-import axios from '@/utils/configured-axios'
-import {isEmpty} from 'lodash'
 import {format, parseISO} from 'date-fns'
+import {trpc} from '@/app/_trpc/client'
 
 type HeadingProps = React.ComponentPropsWithoutRef<any> & {
   headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'p'
@@ -10,31 +11,18 @@ type HeadingProps = React.ComponentPropsWithoutRef<any> & {
 const Invoices: React.FunctionComponent<
   React.PropsWithChildren<HeadingProps>
 > = ({headingAs}) => {
-  const [transactions, setTransactions] = React.useState([])
-  const [transactionsLoading, setTransactionsLoading] = React.useState(true)
+  const {data: transactions, status} =
+    trpc.user.transactionsForCurrent.useQuery()
 
   const Heading = headingAs ?? 'p'
 
-  React.useEffect(() => {
-    axios
-      .get(`${process.env.NEXT_PUBLIC_AUTH_DOMAIN}/api/v1/transactions`)
-      .then(({data}) => {
-        setTransactionsLoading(false)
-        setTransactions(data)
-      })
-  }, [])
-
   return (
     <main className="mt-16">
-      {transactionsLoading ? (
+      {status === 'loading' ? (
         <div></div>
       ) : (
         <div>
-          {isEmpty(transactions) ? (
-            <Heading className="text-lg font-medium md:font-normal md:text-xl leading-none">
-              No Transactions
-            </Heading>
-          ) : (
+          {!transactions ? null : (
             <div className="flex flex-col space-y-8">
               <Heading className="text-lg font-medium md:font-normal md:text-xl leading-none">
                 Transactions

src/components/pages/user/components/subscription-details.tsx

@@ -201,7 +201,7 @@ const SubscriptionDetails: React.FunctionComponent<
   }
 
   return (
-    <div className="w-full">
+    <div>
       {subscriptionName ? (
         <div className="md:w-[75ch] mx-auto">
           <div className="w-full leading-relaxed mt-4 text-center space-y-4">
@@ -228,7 +228,7 @@ const SubscriptionDetails: React.FunctionComponent<
           </div>
         </div>
       ) : (
-        <div className="w-full">
+        <div>
           {(viewer.is_pro || viewer.is_instructor) && (
             <p>
               You still have access to a Pro Membership. If you feel this is in

src/pages/invoices/index.tsx

@@ -7,7 +7,9 @@ const InvoicesPage: React.FunctionComponent<
 > = () => {
   return (
     <LoginRequired>
-      <Invoices headingAs="h1" />
+      <div className="min-h-[75vh] mx-auto">
+        <Invoices headingAs="h1" />
+      </div>
     </LoginRequired>
   )
 }

src/server/routers/user.ts

@@ -52,6 +52,11 @@ export const userRouter = router({
         },
       ).then((res) => res.json())) || []
 
+    if (transactions?.error) {
+      console.error('error fetching transactions: ', transactions.error)
+      return null
+    }
+
     return transactionsSchema.parse(transactions)
   }),
   accountsForCurrent: baseProcedure.query(async ({input, ctx}) => {