#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">

apps/dashboard/src/components/report/edit-report-name.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import { PencilIcon } from 'lucide-react';
+
+type Props = {
+  name?: string;
+};
+
+const EditReportName = ({ name }: Props) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [newName, setNewName] = useState(name);
+
+  const onSubmit = () => {
+    if (newName === name) {
+      return setIsEditing(false);
+    }
+
+    if (newName === '') {
+      setNewName(name);
+    }
+
+    window.dispatchEvent(
+      new CustomEvent('report-name-change', {
+        detail: newName === '' ? name : newName,
+      })
+    );
+
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className="flex">
+        <input
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+          type="text"
+          value={newName}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              e.stopPropagation();
+              onSubmit();
+            }
+          }}
+          onChange={(e) => setNewName(e.target.value)}
+          onBlur={() => onSubmit()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <button
+      className="flex cursor-pointer select-none items-center gap-2"
+      onClick={() => setIsEditing(true)}
+    >
+      {newName ?? 'Unnamed Report'}
+      <PencilIcon size={16} />
+    </button>
+  );
+};
+
+export default EditReportName;

apps/dashboard/src/components/report/reportSlice.ts

@@ -38,7 +38,7 @@ const initialState: InitialState = {
   dirty: false,
   // TODO: remove this
   projectId: '',
-  name: 'Untitled',
+  name: '',
   chartType: 'linear',
   lineType: 'monotone',
   interval: 'day',