refactor: events permissions

src/lib/components/events/Actions.tsx

@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
 import { EventActions as Actions } from "../../styles/styles";
 import { ProcessedEvent } from "../../types";
 import useStore from "../../hooks/useStore";
+import useEventPermissions from "../../hooks/useEventPermissions";
 
 interface Props {
   event: ProcessedEvent;
@@ -13,7 +14,7 @@ interface Props {
 }
 
 const EventActions = ({ event, onDelete, onEdit }: Props) => {
-  const { translations, direction, editable, deletable } = useStore();
+  const { translations, direction } = useStore();
   const [deleteConfirm, setDeleteConfirm] = useState(false);
 
   const handleDelete = () => {
@@ -23,21 +24,7 @@ const EventActions = ({ event, onDelete, onEdit }: Props) => {
     onDelete();
   };
 
-  const canDelete = useMemo(() => {
-    // Priority control to event specific deletable value
-    if (typeof event.deletable !== "undefined") {
-      return event.deletable;
-    }
-    return deletable;
-  }, [deletable, event.deletable]);
-
-  const canEdit = useMemo(() => {
-    // Priority control to event specific deletable value
-    if (typeof event.editable !== "undefined") {
-      return event.editable;
-    }
-    return editable;
-  }, [editable, event.editable]);
+  const { canEdit, canDelete } = useEventPermissions(event);
 
   return (
     <Actions>

src/lib/components/events/EventItem.tsx

@@ -9,6 +9,7 @@ import { differenceInDaysOmitTime, getHourFormat } from "../../helpers/generals"
 import useStore from "../../hooks/useStore";
 import useDragAttributes from "../../hooks/useDragAttributes";
 import EventItemPopover from "./EventItemPopover";
+import useEventPermissions from "../../hooks/useEventPermissions";
 
 interface EventItemProps {
   event: ProcessedEvent;
@@ -19,17 +20,8 @@ interface EventItemProps {
 }
 
 const EventItem = ({ event, multiday, hasPrev, hasNext, showdate = true }: EventItemProps) => {
-  const {
-    direction,
-    locale,
-    hourFormat,
-    eventRenderer,
-    onEventClick,
-    view,
-    draggable,
-    editable,
-    disableViewer,
-  } = useStore();
+  const { direction, locale, hourFormat, eventRenderer, onEventClick, view, disableViewer } =
+    useStore();
   const dragProps = useDragAttributes(event);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
   const [deleteConfirm, setDeleteConfirm] = useState(false);
@@ -40,27 +32,15 @@ const EventItem = ({ event, multiday, hasPrev, hasNext, showdate = true }: Event
   const PrevArrow = direction === "rtl" ? ArrowRightRoundedIcon : ArrowLeftRoundedIcon;
   const hideDates = differenceInDaysOmitTime(event.start, event.end) <= 0 && event.allDay;
 
+  const { canDrag } = useEventPermissions(event);
+
   const triggerViewer = (el?: MouseEvent<Element>) => {
     if (!el?.currentTarget && deleteConfirm) {
       setDeleteConfirm(false);
     }
     setAnchorEl(el?.currentTarget || null);
   };
 
-  const isDraggable = useMemo(() => {
-    // if Disabled
-    if (event.disabled || !editable) return false;
-
-    // global-wise isDraggable
-    let canDrag = typeof draggable !== "undefined" ? draggable : true;
-
-    // Override by event-wise
-    if (typeof event.draggable !== "undefined") {
-      canDrag = event.draggable;
-    }
-    return canDrag;
-  }, [draggable, editable, event.disabled, event.draggable]);
-
   const renderEvent = useMemo(() => {
     // Check if has custom render event method
     // only applicable to non-multiday events and not in month-view
@@ -143,14 +123,14 @@ const EventItem = ({ event, multiday, hasPrev, hasNext, showdate = true }: Event
           focusRipple
           disabled={disableViewer || event.disabled}
         >
-          <div {...dragProps} draggable={isDraggable}>
+          <div {...dragProps} draggable={canDrag}>
             {item}
           </div>
         </ButtonBase>
       </EventItemPaper>
     );
     // eslint-disable-next-line
-  }, [hasPrev, hasNext, event, isDraggable, locale, theme.palette]);
+  }, [hasPrev, hasNext, event, canDrag, locale, theme.palette]);
 
   return (
     <Fragment>

src/lib/hooks/useEventPermissions.ts

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { ProcessedEvent } from "../types";
+import useStore from "./useStore";
+
+const useEventPermissions = (event: ProcessedEvent) => {
+  const { editable, deletable, draggable } = useStore();
+
+  const canEdit = useMemo(() => {
+    // Priority control to event specific deletable value
+    if (typeof event.editable !== "undefined") {
+      return event.editable;
+    }
+    return editable;
+  }, [editable, event.editable]);
+
+  const canDelete = useMemo(() => {
+    // Priority control to event specific deletable value
+    if (typeof event.deletable !== "undefined") {
+      return event.deletable;
+    }
+    return deletable;
+  }, [deletable, event.deletable]);
+
+  const canDrag = useMemo(() => {
+    if (!canEdit) {
+      return;
+    }
+    // Priority control to event specific deletable value
+    if (typeof event.draggable !== "undefined") {
+      return event.draggable;
+    }
+    return draggable;
+  }, [draggable, event.draggable, canEdit]);
+
+  return {
+    canEdit,
+    canDelete,
+    canDrag,
+  };
+};
+
+export default useEventPermissions;