diff --git a/src/pages/common/components/CommonMenuButton/hooks/useMenuItems.ts b/src/pages/common/components/CommonMenuButton/hooks/useMenuItems.ts index d9010b42c5..377bd26991 100644 --- a/src/pages/common/components/CommonMenuButton/hooks/useMenuItems.ts +++ b/src/pages/common/components/CommonMenuButton/hooks/useMenuItems.ts @@ -34,7 +34,7 @@ export const useMenuItems = (options: Options): Item[] => { }, { id: CommonMenuItem.DeleteCommonProposal, - text: `Delete ${options.isSubCommon ? "space" : "common"} propsal`, + text: `Delete ${options.isSubCommon ? "space" : "common"}`, withWarning: true, onClick: () => { onMenuItemSelect(CommonMenuItem.DeleteCommonProposal); @@ -42,7 +42,7 @@ export const useMenuItems = (options: Options): Item[] => { }, { id: CommonMenuItem.DeleteCommonAction, - text: `Delete ${options.isSubCommon ? "space" : "common"} action`, + text: `Delete ${options.isSubCommon ? "space" : "common"}`, withWarning: true, onClick: () => { onMenuItemSelect(CommonMenuItem.DeleteCommonAction); @@ -53,9 +53,15 @@ export const useMenuItems = (options: Options): Item[] => { /** * For now we give priority to DeleteCommonAction over DeleteCommonProposal. */ - //const filteredItems = allowedMenuItems.includes(CommonMenuItem.DeleteCommonAction) ? allowedMenuItems.filter(item => item !== CommonMenuItem.DeleteCommonProposal) : allowedMenuItems; + const filteredItems = allowedMenuItems.includes( + CommonMenuItem.DeleteCommonAction, + ) + ? allowedMenuItems.filter( + (item) => item !== CommonMenuItem.DeleteCommonProposal, + ) + : allowedMenuItems; return items.filter((item) => - allowedMenuItems.includes(item.id as CommonMenuItem), + filteredItems.includes(item.id as CommonMenuItem), ); }; diff --git a/src/pages/common/components/CommonMenuButton/utils/getAllowedItems.ts b/src/pages/common/components/CommonMenuButton/utils/getAllowedItems.ts index 7f79ed3e04..a516339dd1 100644 --- a/src/pages/common/components/CommonMenuButton/utils/getAllowedItems.ts +++ b/src/pages/common/components/CommonMenuButton/utils/getAllowedItems.ts @@ -37,7 +37,7 @@ const MENU_ITEM_TO_CHECK_FUNCTION_MAP: Record< hasPermission({ commonMember, governance, - key: GovernanceActions.DELETE_COMMON, + key: GovernanceActions.DELETE_COMMON_ACTION, }), ), }; diff --git a/src/pages/common/providers/CommonData/CommonData.tsx b/src/pages/common/providers/CommonData/CommonData.tsx index 7b55bd4fa6..e50ed4b1f9 100644 --- a/src/pages/common/providers/CommonData/CommonData.tsx +++ b/src/pages/common/providers/CommonData/CommonData.tsx @@ -23,9 +23,11 @@ import { JoinProjectModal } from "../../components/JoinProjectModal"; import { CommonMenuItem } from "../../constants"; import { CommonPageSettings } from "../../types"; import { LeaveCircleModal } from "./components"; +import { DeleteCommonModal } from "./components/DeleteCommonModal"; import { JoinCircleModal } from "./components/JoinCircleModal"; import { CommonDataContext, CommonDataContextValue } from "./context"; import { + useDeleteCommonModal, useJoinCircleModal, useLeaveCircleModal, useProposalCreationModal, @@ -89,9 +91,11 @@ const CommonData: FC = (props) => { isProposalCreationModalOpen, initialProposalTypeForCreation, onProposalCreationModalClose, - onCommonDelete, + onCommonDeleteProposal, redirectToProposalPage, } = useProposalCreationModal(); + const { isDeleteCommonModalOpen, onDeleteCommonModalClose, onCommonDelete } = + useDeleteCommonModal(); const { circleToLeave, isLeaveCircleModalOpen, @@ -131,12 +135,12 @@ const CommonData: FC = (props) => { setSelectedMenuItem(menuItem); if (menuItem === CommonMenuItem.DeleteCommonProposal) { - onCommonDelete(); + onCommonDeleteProposal(); } else if (menuItem === CommonMenuItem.DeleteCommonAction) { - console.log("DELETE COMMON ACTION!"); + onCommonDelete(); } }, - [onCommonDelete], + [onCommonDeleteProposal, onCommonDelete], ); const handleMenuClose = () => { @@ -341,6 +345,13 @@ const CommonData: FC = (props) => { shouldKeepLoadingIfPossible onRequestCreated={handleProjectJoinRequestCreated} /> + ); }; diff --git a/src/pages/common/providers/CommonData/components/DeleteCommonModal/DeleteCommonModal.module.scss b/src/pages/common/providers/CommonData/components/DeleteCommonModal/DeleteCommonModal.module.scss new file mode 100644 index 0000000000..4fc391539b --- /dev/null +++ b/src/pages/common/providers/CommonData/components/DeleteCommonModal/DeleteCommonModal.module.scss @@ -0,0 +1,20 @@ +@import "../../../../../../constants"; + +.modal { + max-width: 30rem; +} + +.buttonsWrapper { + display: flex; + width: fit-content; + margin-left: auto; + margin-top: 3.25rem; +} + +.deleteButton { + margin-left: 1.375rem; +} + +.error { + font-size: $xsmall; +} diff --git a/src/pages/common/providers/CommonData/components/DeleteCommonModal/DeleteCommonModal.tsx b/src/pages/common/providers/CommonData/components/DeleteCommonModal/DeleteCommonModal.tsx new file mode 100644 index 0000000000..cbe5f0c45e --- /dev/null +++ b/src/pages/common/providers/CommonData/components/DeleteCommonModal/DeleteCommonModal.tsx @@ -0,0 +1,78 @@ +import React, { FC, useState } from "react"; +import { CommonMemberEventEmitter } from "@/events"; +import { CommonService } from "@/services"; +import { Modal } from "@/shared/components"; +import { ErrorText } from "@/shared/components/Form"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; +import { emptyFunction } from "@/shared/utils"; +import styles from "./DeleteCommonModal.module.scss"; + +interface DeleteCommonModalProps { + commonId: string; + commonName: string; + isSpace: boolean; + isShowing: boolean; + onClose: () => void; +} + +const DeleteCommonModal: FC = (props) => { + const { isShowing, onClose, commonName, isSpace, commonId } = props; + const [isDeleting, setIsDeleting] = useState(false); + const [errorText, setErrorText] = useState(""); + const entityType = isSpace ? "space" : "common"; + + const handleLeave = async () => { + setIsDeleting(true); + setErrorText(""); + + try { + await CommonService.deleteCommon(commonId); + // CommonMemberEventEmitter.emit( + // CommonMemberEvent.Reset, + // commonId, + // commonMemberId, + // ); + setIsDeleting(false); + onClose(); + } catch (error) { + setErrorText("Something went wrong"); + setIsDeleting(false); + } + }; + + return ( + +
+ Deleting a {entityType} is irreversible and will delete all of its + content. Are you sure you want to continue? +
+ + +
+ {errorText && ( + {errorText} + )} +
+
+ ); +}; + +export default DeleteCommonModal; diff --git a/src/pages/common/providers/CommonData/components/DeleteCommonModal/index.ts b/src/pages/common/providers/CommonData/components/DeleteCommonModal/index.ts new file mode 100644 index 0000000000..b8cc823d6a --- /dev/null +++ b/src/pages/common/providers/CommonData/components/DeleteCommonModal/index.ts @@ -0,0 +1 @@ +export { default as DeleteCommonModal } from "./DeleteCommonModal"; diff --git a/src/pages/common/providers/CommonData/hooks/index.ts b/src/pages/common/providers/CommonData/hooks/index.ts index 81e9db5d7b..b3305c8ac9 100644 --- a/src/pages/common/providers/CommonData/hooks/index.ts +++ b/src/pages/common/providers/CommonData/hooks/index.ts @@ -1,3 +1,4 @@ export * from "./useJoinCircleModal"; export * from "./useLeaveCircleModal"; export * from "./useProposalCreationModal"; +export * from "./useDeleteCommonModal"; diff --git a/src/pages/common/providers/CommonData/hooks/useDeleteCommonModal.ts b/src/pages/common/providers/CommonData/hooks/useDeleteCommonModal.ts new file mode 100644 index 0000000000..f92374d92d --- /dev/null +++ b/src/pages/common/providers/CommonData/hooks/useDeleteCommonModal.ts @@ -0,0 +1,11 @@ +import { useModal } from "@/shared/hooks"; + +export const useDeleteCommonModal = () => { + const { isShowing, onOpen, onClose } = useModal(false); + + return { + isDeleteCommonModalOpen: isShowing, + onDeleteCommonModalClose: onClose, + onCommonDelete: onOpen, + }; +}; diff --git a/src/pages/common/providers/CommonData/hooks/useProposalCreationModal.ts b/src/pages/common/providers/CommonData/hooks/useProposalCreationModal.ts index 561ebc81bb..638b7bc144 100644 --- a/src/pages/common/providers/CommonData/hooks/useProposalCreationModal.ts +++ b/src/pages/common/providers/CommonData/hooks/useProposalCreationModal.ts @@ -15,7 +15,7 @@ interface Return { initialProposalTypeForCreation: ProposalsTypes | null; onProposalCreationModalOpen: () => void; onProposalCreationModalClose: () => void; - onCommonDelete: () => void; + onCommonDeleteProposal: () => void; redirectToProposalPage: ( proposal: Proposal | ProposalWithHighlightedComment, ) => void; @@ -53,7 +53,7 @@ export const useProposalCreationModal = (): Return => { setInitialProposalTypeForCreation(null); }, [onProposalCreationModalClose]); - const onCommonDelete = useCallback(() => { + const onCommonDeleteProposal = useCallback(() => { setInitialProposalTypeForCreation(ProposalsTypes.DELETE_COMMON); onProposalCreationModalOpen(); }, [onProposalCreationModalOpen]); @@ -63,7 +63,7 @@ export const useProposalCreationModal = (): Return => { initialProposalTypeForCreation, onProposalCreationModalOpen, onProposalCreationModalClose: handleProposalCreationModalClose, - onCommonDelete, + onCommonDeleteProposal, redirectToProposalPage, }; }; diff --git a/src/services/Common.ts b/src/services/Common.ts index b80ace63b6..c9020042bc 100644 --- a/src/services/Common.ts +++ b/src/services/Common.ts @@ -532,6 +532,13 @@ class CommonService { public muteCommon = async (commonId: string): Promise => { await Api.post(ApiEndpoint.MuteCommon, { commonId }); }; + + public deleteCommon = async (commonId: string): Promise => { + await Api.post(ApiEndpoint.CreateAction, { + type: GovernanceActions.DELETE_COMMON_ACTION, + args: { commonId }, + }); + }; } export default new CommonService(); diff --git a/src/shared/constants/governance/GovernanceActions.ts b/src/shared/constants/governance/GovernanceActions.ts index 2a15dfd80e..86d146bb65 100644 --- a/src/shared/constants/governance/GovernanceActions.ts +++ b/src/shared/constants/governance/GovernanceActions.ts @@ -42,7 +42,7 @@ export enum GovernanceActions { PIN_OR_UNPIN_FEED_ITEMS = "PIN_OR_UNPIN_FEED_ITEMS", - DELETE_COMMON = "DELETE_COMMON", + DELETE_COMMON_ACTION = "DELETE_COMMON_ACTION", MOVE_TO_HERE = "MOVE_TO_HERE", LINK_TO_HERE = "LINK_TO_HERE",