From e4170715bfe72a5dfb6cb9ed6ef947007ce2bc3c Mon Sep 17 00:00:00 2001
From: Gibson Han <gibsonthedev@gmail.com>
Date: Wed, 2 Feb 2022 20:56:52 +0700
Subject: [PATCH] ammend fix recommendations

---
 src/components/Table/ContextMenu/index.tsx    | 10 ++---
 src/components/Table/TableRow.tsx             | 34 ++++++-----------
 .../BasicCellContextMenuActions.tsx           | 37 ++++++++-----------
 3 files changed, 30 insertions(+), 51 deletions(-)

diff --git a/src/components/Table/ContextMenu/index.tsx b/src/components/Table/ContextMenu/index.tsx
index bff9c6bd..e15d2b8b 100644
--- a/src/components/Table/ContextMenu/index.tsx
+++ b/src/components/Table/ContextMenu/index.tsx
@@ -8,24 +8,20 @@ export default function ContextMenu() {
   const { tableState }: any = useProjectContext();
   const { contextMenu, resetContextMenu } = useContextMenuAtom();
   const { anchorEl, selectedCell } = contextMenu;
-  const selectedColIndex = selectedCell?.colIndex;
   const columns = tableState?.columns;
-
+  const selectedColIndex = selectedCell?.colIndex;
   const selectedCol = _find(columns, { index: selectedColIndex });
   const configActions =
     getFieldProp("contextMenuActions", selectedCol?.type) ||
     function empty() {};
   const actions = configActions(selectedCell, resetContextMenu) || [];
-
-  const hasAnchorEle = Boolean(contextMenu.anchorEl);
   const hasNoActions = Boolean(actions.length === 0);
-  const notOpen = Boolean(!anchorEl || !hasAnchorEle || hasNoActions);
 
-  if (notOpen) return <></>;
+  if (!contextMenu || hasNoActions) return <></>;
   return (
     <MenuContents
       anchorEl={anchorEl as HTMLElement}
-      open={hasAnchorEle}
+      open={Boolean(contextMenu.anchorEl)}
       handleClose={resetContextMenu}
       items={actions}
     />
diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 8fa54072..f9c4c3c8 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,32 +1,12 @@
-import { useProjectContext } from "@src/contexts/ProjectContext";
 import useContextMenuAtom from "@src/hooks/useContextMenuAtom";
 import { Fragment } from "react";
 import { Row, RowRendererProps } from "react-data-grid";
-import { IContextMenuActions } from "../fields/_BasicCell/BasicCellContextMenuActions";
 
 import OutOfOrderIndicator from "./OutOfOrderIndicator";
 
 export default function TableRow(props: RowRendererProps<any>) {
-  if (props.row._rowy_outOfOrder)
-    return (
-      <Fragment key={props.row.id}>
-        <OutOfOrderIndicator top={props.top} height={props.height} />
-        <ContextMenu>
-          <Row {...props} />
-        </ContextMenu>
-      </Fragment>
-    );
-
-  return (
-    <ContextMenu>
-      <Row {...props} />
-    </ContextMenu>
-  );
-}
-
-const ContextMenu = (props: any) => {
   const { setContextMenu } = useContextMenuAtom();
-  function handleClick(e: any) {
+  function handleContextMenu(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
     e.preventDefault();
     if (setContextMenu)
       setContextMenu((prev) => ({
@@ -34,5 +14,13 @@ const ContextMenu = (props: any) => {
         anchorEl: e?.target as HTMLElement,
       }));
   }
-  return <span onContextMenu={(e) => handleClick(e)}>{props.children}</span>;
-};
+  if (props.row._rowy_outOfOrder)
+    return (
+      <Fragment key={props.row.id}>
+        <OutOfOrderIndicator top={props.top} height={props.height} />
+        <Row onContextMenu={(e) => handleContextMenu(e)} {...props} />
+      </Fragment>
+    );
+
+  return <Row onContextMenu={(e) => handleContextMenu(e)} {...props} />;
+}
diff --git a/src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx b/src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx
index 688ff611..521cd54b 100644
--- a/src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx
+++ b/src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx
@@ -24,40 +24,35 @@ export default function BasicContextMenuActions(
   const selectedColIndex = selectedCell?.colIndex;
   const selectedCol = _find(columns, { index: selectedColIndex });
   const selectedRow = rows?.[selectedRowIndex];
+  const cell = selectedRow?.[selectedCol.key];
 
-  const handleClose = () => reset?.();
+  const handleClose = async () => await reset?.();
 
-  const handleCopy = () => {
-    const cell = selectedRow?.[selectedCol.key];
-    const onFail = () =>
-      enqueueSnackbar("Failed to copy", { variant: "error" });
-    const onSuccess = () =>
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(cell));
       enqueueSnackbar("Copied to clipboard", { variant: "success" });
-    const copy = navigator.clipboard.writeText(JSON.stringify(cell));
-    copy.then(onSuccess, onFail);
-
+    } catch (error) {
+      enqueueSnackbar("Failed to copy", { variant: "error" });
+    }
     handleClose();
   };
 
   const handleCut = () => {
-    const cell = selectedRow?.[selectedCol.key];
     const notUndefined = Boolean(typeof cell !== "undefined");
     if (deleteCell && notUndefined)
       deleteCell(selectedRow?.ref, selectedCol?.key);
-
     handleClose();
   };
 
-  const handlePaste = () => {
-    const paste = navigator.clipboard.readText();
-    paste.then(async (clipText) => {
-      try {
-        const paste = await JSON.parse(clipText);
-        updateCell?.(selectedRow?.ref, selectedCol.key, paste);
-      } catch (error) {
-        enqueueSnackbar(`${error}`, { variant: "error" });
-      }
-    });
+  const handlePaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      const paste = await JSON.parse(text);
+      updateCell?.(selectedRow?.ref, selectedCol.key, paste);
+    } catch (error) {
+      enqueueSnackbar(`${error}`, { variant: "error" });
+    }
 
     handleClose();
   };