refactor: add useCanEdit hook

packages/frontend/src/features/ReportActions.tsx

@@ -11,11 +11,12 @@ import { omit } from "pastable";
 import { ReportWithUser } from "./ReportList";
 import { useNavigate } from "@tanstack/react-router";
 import { api } from "../api";
+import { useCanEditReport } from "../hooks/useCanEditReport";
 
 export const ReportActions = forwardRef<HTMLDivElement, { report: ReportWithUser }>(({ report }, ref) => {
   const user = useUser()!;
 
-  const isOwner = report.createdBy === user.id;
+  const canEdit = useCanEditReport(report);
 
   const navigate = useNavigate();
 
@@ -44,7 +45,7 @@ export const ReportActions = forwardRef<HTMLDivElement, { report: ReportWithUser
 
   return (
     <Stack ref={ref} gap="0">
-      {isOwner ? (
+      {canEdit ? (
         <>
           <ReportAction
             iconId="ri-pencil-line"
@@ -54,7 +55,7 @@ export const ReportActions = forwardRef<HTMLDivElement, { report: ReportWithUser
           <Divider height="1px" color="#DDD" />
         </>
       ) : null}
-      {isOwner ? (
+      {canEdit ? (
         <>
           <ReportAction
             iconId="ri-delete-bin-2-line"

packages/frontend/src/hooks/useCanEditReport.tsx

@@ -0,0 +1,19 @@
+import { Report } from "@cr-vif/electric-client/frontend";
+import { useUser } from "../contexts/AuthContext";
+import { useLiveQuery } from "electric-sql/react";
+import { db } from "../db";
+
+export const useCanEditReport = (report: Report) => {
+  const user = useUser()!;
+  const isOwner = report.redactedById === user.id;
+  const isCreator = report.createdBy === user.id;
+
+  const userDelegations = useLiveQuery(
+    db.delegation.liveFirst({ where: { createdBy: report.createdBy, delegatedTo: user.id } }),
+  );
+
+  const hasDelegation = !!userDelegations.results;
+  const canEdit = isOwner || isCreator || hasDelegation;
+
+  return canEdit;
+};

packages/frontend/src/routes/edit.$reportId.tsx

@@ -20,7 +20,7 @@ import { db } from "../db";
 import { InfoForm } from "../features/InfoForm";
 import { NotesForm } from "../features/NotesForm";
 import { DisabledContext } from "../features/DisabledContext";
-import { useUser } from "../contexts/AuthContext";
+import { useCanEditReport } from "../hooks/useCanEditReport";
 
 const EditReport = () => {
   const { reportId } = Route.useParams();
@@ -64,24 +64,14 @@ function useFormWithFocus<TFieldValues extends FieldValues = FieldValues>(props:
 
   return [form, () => focusedRef.current] as const;
 }
-
 const WithReport = ({ report }: { report: Report }) => {
   const { tab } = Route.useSearch();
   const [form, getFocused] = useFormWithFocus<Report>({
     defaultValues: report!,
     resetOptions: {},
   });
 
-  const user = useUser()!;
-  const isOwner = report.redactedById === user.id;
-  const isCreator = report.createdBy === user.id;
-
-  const userDelegations = useLiveQuery(
-    db.delegation.liveFirst({ where: { createdBy: report.createdBy, delegatedTo: user.id } }),
-  );
-
-  const hasDelegation = !!userDelegations.results;
-  const canEdit = isOwner || isCreator || hasDelegation;
+  const canEdit = useCanEditReport(report);
 
   const navigate = useNavigate();