diff --git a/src/discussions/common/ActionsDropdown.jsx b/src/discussions/common/ActionsDropdown.jsx
index 3d65d45b..12c318cc 100644
--- a/src/discussions/common/ActionsDropdown.jsx
+++ b/src/discussions/common/ActionsDropdown.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
@@ -16,7 +16,6 @@ import messages from '../messages';
import { commentShape } from '../post-comments/comments/comment/proptypes';
import { postShape } from '../posts/post/proptypes';
import { inBlackoutDateRange, useActions } from '../utils';
-import { DiscussionContext } from './context';
function ActionsDropdown({
intl,
@@ -26,41 +25,54 @@ function ActionsDropdown({
iconSize,
dropDownIconSize,
}) {
+ const buttonRef = useRef();
const [isOpen, open, close] = useToggle(false);
const [target, setTarget] = useState(null);
const actions = useActions(commentOrPost);
- const { enableInContextSidebar } = useContext(DiscussionContext);
- const handleActions = (action) => {
+
+ const handleActions = useCallback((action) => {
const actionFunction = actionHandlers[action];
if (actionFunction) {
actionFunction();
} else {
logError(`Unknown or unimplemented action ${action}`);
}
- };
+ }, [actionHandlers]);
+
const blackoutDateRange = useSelector(selectBlackoutDate);
// Find and remove edit action if in blackout date range.
if (inBlackoutDateRange(blackoutDateRange)) {
actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
}
+
+ const onClickButton = useCallback(() => {
+ setTarget(buttonRef.current);
+ open();
+ }, [open]);
+
+ const onCloseModal = useCallback(() => {
+ close();
+ setTarget(null);
+ }, [close]);
+
return (
<>