feat: use suspense for tickets

apps/customer-service/src/app/tickets/[id]/page.tsx

@@ -1,15 +1,43 @@
+import { Suspense } from 'react';
+import { redirect } from 'next/navigation';
+
+import { auth } from '@cs/auth';
+
+import { InfoPanel } from '~/components/infos/info-panel';
 import { Ticket } from '~/components/tickets/ticket';
 
-export default function TicketPage({
+export default async function TicketPage({
   params: { id },
 }: {
   params: { id: string };
 }) {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect('/');
+  }
+
   const ticketId = parseInt(id);
 
   if (!ticketId) return null;
 
-  return <Ticket ticketId={ticketId} />;
+  return (
+    <>
+      <Suspense fallback={null}>
+        <InfoPanel ticketId={ticketId} />
+      </Suspense>
+
+      <main className="lg:pl-60">
+        <div className="xl:mr-96 xl:h-[100dvh] xl:overflow-y-auto xl:pl-96">
+          <div className="flex h-[100dvh] flex-col px-4 py-6 sm:px-6">
+            <Suspense fallback={null}>
+              <Ticket ticketId={ticketId} />
+            </Suspense>
+          </div>
+        </div>
+      </main>
+    </>
+  );
 }
 
 TicketPage.displayName = 'TicketPage';

apps/customer-service/src/app/tickets/layout.tsx

@@ -1,7 +1,6 @@
 import { Suspense } from 'react';
 
 import { LayoutWithSidebar } from '~/app/tickets/layout-with-sidebar';
-import { InfoPanel } from '~/components/infos/info-panel';
 import { TicketList } from '~/components/tickets/ticket-list';
 import { TicketListHeader } from '~/components/tickets/ticket-list-header';
 import { TicketListItemSkeleton } from '~/components/tickets/ticket-list-item-skeleton';
@@ -14,15 +13,7 @@ export default function TicketsLayout({
 }) {
   return (
     <LayoutWithSidebar>
-      <InfoPanel />
-
-      <main className="lg:pl-60">
-        <div className="xl:mr-96 xl:h-[100dvh] xl:overflow-y-auto xl:pl-96">
-          <div className="flex h-[100dvh] flex-col px-4 py-6 sm:px-6">
-            {children}
-          </div>
-        </div>
-      </main>
+      {children}
 
       <aside className="fixed inset-y-0 left-60 hidden w-96 flex-col border-r xl:flex">
         <TicketListHeader />

apps/customer-service/src/components/infos/info-panel.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { FC } from 'react';
-import { useParams } from 'next/navigation';
 import { FormattedMessage } from 'react-intl';
 
 import { ActivityPanel } from '~/components/infos/activity-panel';
@@ -16,17 +15,12 @@ import {
 } from '~/components/ui/accordion';
 import { api } from '~/utils/api';
 
-export const InfoPanel: FC = () => {
-  const params = useParams();
-  const ticketId = parseInt(params.id ?? '');
-  const { data: ticketData } = api.ticket.byId.useQuery(
-    {
-      id: ticketId,
-    },
-    {
-      enabled: !!ticketId,
-    }
-  );
+export const InfoPanel: FC<{
+  ticketId: number;
+}> = ({ ticketId }) => {
+  const [ticketData] = api.ticket.byId.useSuspenseQuery({
+    id: ticketId,
+  });
 
   if (!ticketData) {
     return null;
@@ -51,7 +45,7 @@ export const InfoPanel: FC = () => {
           </AccordionItem>
           <AccordionItem value="item-1">
             <AccordionTrigger>
-              <FormattedMessage id="info_panel.conversations" />
+              <FormattedMessage id="info_panel.recent_conversations" />
             </AccordionTrigger>
             <AccordionContent>
               <LinkedTicketsPanel

apps/customer-service/src/components/tickets/ticket.tsx

@@ -10,7 +10,7 @@ import { api } from '~/utils/api';
 export const Ticket: FC<{
   ticketId: number;
 }> = ({ ticketId }) => {
-  const { data: ticketData } = api.ticket.byId.useQuery({ id: ticketId });
+  const [ticketData] = api.ticket.byId.useSuspenseQuery({ id: ticketId });
 
   if (!ticketData) return null;
 

apps/customer-service/src/locales/en.json

@@ -1,7 +1,7 @@
 {
   "info_panel.activity": "Activity",
   "info_panel.contact_information": "Contact information",
-  "info_panel.conversations": "Conversations",
+  "info_panel.recent_conversations": "Recent conversations",
   "layout.open_sidebar": "Open sidebar",
   "layout.reports": "Reports",
   "layout.settings": "Settings",

apps/customer-service/src/locales/fr.json

@@ -1,7 +1,7 @@
 {
   "info_panel.activity": "Activité",
   "info_panel.contact_information": "Informations de contact",
-  "info_panel.conversations": "Conversations",
+  "info_panel.recent_conversations": "Conversations récentes",
   "layout.open_sidebar": "Ouvrir la barre latérale",
   "layout.reports": "Rapports",
   "layout.settings": "Paramètres",