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();