diff --git a/app/client/src/pages/Editor/Explorer/JSActions/JSActionContextMenu.tsx b/app/client/src/pages/Editor/Explorer/JSActions/JSActionContextMenu.tsx index e6bffe2e0a..31c180f1da 100644 --- a/app/client/src/pages/Editor/Explorer/JSActions/JSActionContextMenu.tsx +++ b/app/client/src/pages/Editor/Explorer/JSActions/JSActionContextMenu.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import TreeDropdown from "pages/Editor/Explorer/TreeDropdown"; -import { AppState } from "reducers"; import ContextMenuTrigger from "../ContextMenuTrigger"; import { moveJSCollectionRequest, @@ -9,8 +8,8 @@ import { deleteJSCollection, } from "actions/jsActionActions"; import { ContextMenuPopoverModifiers } from "../helpers"; -import { noop } from "lodash"; -import { useNewJSCollectionName } from "./helpers"; +import noop from "lodash/noop"; +import { getJSEntityName } from "./helpers"; import { initExplorerEntityNameEdit } from "actions/explorerActions"; import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import { ENTITY_TYPE } from "entities/DataTree/dataTreeFactory"; @@ -24,6 +23,7 @@ import { CONTEXT_SHOW_BINDING, createMessage, } from "@appsmith/constants/messages"; +import { getPageListAsOptions } from "selectors/entitiesSelector"; type EntityContextMenuProps = { id: string; @@ -32,9 +32,7 @@ type EntityContextMenuProps = { pageId: string; }; export function JSCollectionEntityContextMenu(props: EntityContextMenuProps) { - const nextEntityName = useNewJSCollectionName(); const [confirmDelete, setConfirmDelete] = useState(false); - const dispatch = useDispatch(); const showBinding = useCallback( @@ -52,26 +50,30 @@ export function JSCollectionEntityContextMenu(props: EntityContextMenuProps) { ); const copyJSCollectionToPage = useCallback( - (actionId: string, actionName: string, pageId: string) => + (actionId: string, actionName: string, pageId: string) => { + const nextEntityName = getJSEntityName(); dispatch( copyJSCollectionRequest({ id: actionId, destinationPageId: pageId, name: nextEntityName(actionName, pageId, true), }), - ), - [dispatch, nextEntityName], + ); + }, + [dispatch], ); const moveJSCollectionToPage = useCallback( - (actionId: string, actionName: string, destinationPageId: string) => + (actionId: string, actionName: string, destinationPageId: string) => { + const nextEntityName = getJSEntityName(); dispatch( moveJSCollectionRequest({ id: actionId, destinationPageId, name: nextEntityName(actionName, destinationPageId, false), }), - ), - [dispatch, nextEntityName, props.pageId], + ); + }, + [dispatch, props.pageId], ); const deleteJSCollectionFromPage = useCallback( (actionId: string, actionName: string) => @@ -79,13 +81,7 @@ export function JSCollectionEntityContextMenu(props: EntityContextMenuProps) { [dispatch], ); - const menuPages = useSelector((state: AppState) => { - return state.entities.pageList.pages.map((page) => ({ - label: page.pageName, - id: page.pageId, - value: page.pageName, - })); - }); + const menuPages = useSelector(getPageListAsOptions); const editJSCollectionName = useCallback( () => dispatch(initExplorerEntityNameEdit(props.id)), [dispatch, props.id], diff --git a/app/client/src/pages/Editor/Explorer/JSActions/MoreJSActionsMenu.tsx b/app/client/src/pages/Editor/Explorer/JSActions/MoreJSActionsMenu.tsx index b2d570a551..c9b306db0f 100644 --- a/app/client/src/pages/Editor/Explorer/JSActions/MoreJSActionsMenu.tsx +++ b/app/client/src/pages/Editor/Explorer/JSActions/MoreJSActionsMenu.tsx @@ -1,18 +1,14 @@ import React, { useCallback, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; - -import { AppState } from "reducers"; - import { moveJSCollectionRequest, copyJSCollectionRequest, deleteJSCollection, } from "actions/jsActionActions"; - import { ContextMenuPopoverModifiers } from "../helpers"; -import { noop } from "lodash"; +import noop from "lodash/noop"; import TreeDropdown from "pages/Editor/Explorer/TreeDropdown"; -import { useNewJSCollectionName } from "./helpers"; +import { getJSEntityName } from "./helpers"; import styled from "styled-components"; import Icon, { IconSize } from "components/ads/Icon"; import { Position } from "@blueprintjs/core"; @@ -23,6 +19,7 @@ import { CONTEXT_MOVE, createMessage, } from "@appsmith/constants/messages"; +import { getPageListAsOptions } from "selectors/entitiesSelector"; type EntityContextMenuProps = { id: string; @@ -70,31 +67,35 @@ export const MoreActionablesContainer = styled.div<{ isOpen?: boolean }>` export function MoreJSCollectionsMenu(props: EntityContextMenuProps) { const [isMenuOpen, setIsMenuOpen] = useState(false); - const nextEntityName = useNewJSCollectionName(); const [confirmDelete, setConfirmDelete] = useState(false); - const dispatch = useDispatch(); + const copyJSCollectionToPage = useCallback( - (actionId: string, actionName: string, pageId: string) => + (actionId: string, actionName: string, pageId: string) => { + const nextEntityName = getJSEntityName(); dispatch( copyJSCollectionRequest({ id: actionId, destinationPageId: pageId, name: nextEntityName(`${actionName}Copy`, pageId), }), - ), - [dispatch, nextEntityName], + ); + }, + [dispatch], ); + const moveJSCollectionToPage = useCallback( - (actionId: string, actionName: string, destinationPageId: string) => + (actionId: string, actionName: string, destinationPageId: string) => { + const nextEntityName = getJSEntityName(); dispatch( moveJSCollectionRequest({ id: actionId, destinationPageId, name: nextEntityName(actionName, destinationPageId, false), }), - ), - [dispatch, nextEntityName, props.pageId], + ); + }, + [dispatch], ); const deleteJSCollectionFromPage = useCallback( (actionId: string, actionName: string) => @@ -102,13 +103,7 @@ export function MoreJSCollectionsMenu(props: EntityContextMenuProps) { [dispatch], ); - const menuPages = useSelector((state: AppState) => { - return state.entities.pageList.pages.map((page) => ({ - label: page.pageName, - id: page.pageId, - value: page.pageName, - })); - }); + const menuPages = useSelector(getPageListAsOptions); return ( { - const jsactions = useSelector((state: AppState) => state.entities.jsActions); - const groupedActions = useMemo(() => { - return groupBy(jsactions, "config.pageId"); - }, [jsactions]); +export const getJSEntityName = () => { + const state = store.getState(); + const jsCollections = selectJSCollections(state); return ( name: string, destinationPageId: string, isCopyOperation?: boolean, ) => { - const pageActions = groupedActions[destinationPageId]; - // Get action names of the destination page only - const actionNames = pageActions - ? pageActions.map((action: JSCollectionData) => action.config.name) - : []; - + const groupedActions = groupBy(jsCollections, "config.pageId"); + const pageActions = groupedActions[destinationPageId] || []; + const actionNames = pageActions.map( + (action: JSCollectionData) => action.config.name, + ); return actionNames.indexOf(name) > -1 ? getNextEntityName( isCopyOperation ? `${name}Copy` : name, diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx index f246b308de..ff05c639c3 100644 --- a/app/client/src/selectors/editorSelectors.tsx +++ b/app/client/src/selectors/editorSelectors.tsx @@ -532,3 +532,6 @@ export const getEditorURL = createSelector( pageId, }), ); + +export const selectJSCollections = (state: AppState) => + state.entities.jsActions;