From 24980efca3240b4f576a5ad2018cda5b1ba0eb54 Mon Sep 17 00:00:00 2001
From: ledouxm <martin.ledoux.pro@gmail.com>
Date: Mon, 23 Sep 2024 14:22:20 +0200
Subject: [PATCH] refactor: add useCanEdit hook

---
 .../frontend/src/features/ReportActions.tsx   |  7 ++++---
 .../frontend/src/hooks/useCanEditReport.tsx   | 19 +++++++++++++++++++
 .../frontend/src/routes/edit.$reportId.tsx    | 14 ++------------
 3 files changed, 25 insertions(+), 15 deletions(-)
 create mode 100644 packages/frontend/src/hooks/useCanEditReport.tsx

diff --git a/packages/frontend/src/features/ReportActions.tsx b/packages/frontend/src/features/ReportActions.tsx
index bafa7788..0b03f886 100644
--- a/packages/frontend/src/features/ReportActions.tsx
+++ b/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"
diff --git a/packages/frontend/src/hooks/useCanEditReport.tsx b/packages/frontend/src/hooks/useCanEditReport.tsx
new file mode 100644
index 00000000..a0b20bd3
--- /dev/null
+++ b/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;
+};
diff --git a/packages/frontend/src/routes/edit.$reportId.tsx b/packages/frontend/src/routes/edit.$reportId.tsx
index 1dc4fb07..b0801429 100644
--- a/packages/frontend/src/routes/edit.$reportId.tsx
+++ b/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,7 +64,6 @@ 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>({
@@ -72,16 +71,7 @@ const WithReport = ({ report }: { report: 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();