#25 - edit report name (quick fix)

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/[reportId]/page.tsx

@@ -1,4 +1,5 @@
 import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
+import EditReportName from '@/components/report/edit-report-name';
 import { Pencil } from 'lucide-react';
 import { notFound } from 'next/navigation';
 
@@ -27,12 +28,7 @@ export default async function Page({
     <>
       <PageLayout
         organizationSlug={organizationSlug}
-        title={
-          <div className="flex cursor-pointer items-center gap-2">
-            {report.name}
-            <Pencil size={16} />
-          </div>
-        }
+        title={<EditReportName name={report.name} />}
       />
       <ReportEditor report={report} />
     </>

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/page.tsx

@@ -1,4 +1,5 @@
 import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
+import EditReportName from '@/components/report/edit-report-name';
 import { Pencil } from 'lucide-react';
 
 import ReportEditor from './report-editor';
@@ -15,12 +16,7 @@ export default function Page({ params: { organizationSlug } }: PageProps) {
     <>
       <PageLayout
         organizationSlug={organizationSlug}
-        title={
-          <div className="flex cursor-pointer items-center gap-2">
-            Unnamed report
-            <Pencil size={16} />
-          </div>
-        }
+        title={<EditReportName name={undefined} />}
       />
       <ReportEditor report={null} />
     </>

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/report-editor.tsx

@@ -13,6 +13,7 @@ import {
   changeStartDate,
   ready,
   reset,
+  setName,
   setReport,
 } from '@/components/report/reportSlice';
 import { ReportSidebar } from '@/components/report/sidebar/ReportSidebar';
@@ -21,6 +22,7 @@ import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch, useSelector } from '@/redux';
+import { bind } from 'bind-event-listener';
 import { endOfDay, startOfDay } from 'date-fns';
 import { GanttChartSquareIcon } from 'lucide-react';
 
@@ -50,6 +52,17 @@ export default function ReportEditor({
     };
   }, [initialReport, dispatch]);
 
+  useEffect(() => {
+    return bind(window, {
+      type: 'report-name-change',
+      listener: (event) => {
+        if (event instanceof CustomEvent && typeof event.detail === 'string') {
+          dispatch(setName(event.detail));
+        }
+      },
+    });
+  }, [dispatch]);
+
   return (
     <Sheet>
       <StickyBelowHeader className="grid grid-cols-2 gap-2 p-4 md:grid-cols-6">