import { useState, ReactElement } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import useToast from "hooks/use-toast"; import { useMobxStore } from "lib/mobx/store-provider"; // layouts import { AppLayout } from "layouts/app-layout"; import { WorkspaceSettingLayout } from "layouts/settings-layout"; // components import { WorkspaceSettingHeader } from "components/headers"; import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/workspace"; // ui import { Button } from "@plane/ui"; // icons import { Search } from "lucide-react"; // types import { NextPageWithLayout } from "types/app"; import { IWorkspaceBulkInviteFormData } from "types"; const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => { const router = useRouter(); const { workspaceSlug } = router.query; // store const { workspaceMember: { inviteMembersToWorkspace }, } = useMobxStore(); // states const [inviteModal, setInviteModal] = useState(false); const [searchQuery, setSearchQuery] = useState(""); // hooks const { setToastAlert } = useToast(); const handleWorkspaceInvite = (data: IWorkspaceBulkInviteFormData) => { if (!workspaceSlug) return; return inviteMembersToWorkspace(workspaceSlug.toString(), data) .then(async () => { setInviteModal(false); setToastAlert({ type: "success", title: "Success!", message: "Invitations sent successfully.", }); }) .catch((err) => setToastAlert({ type: "error", title: "Error!", message: `${err.error ?? "Something went wrong. Please try again."}`, }) ); }; return ( <> {workspaceSlug && ( setInviteModal(false)} onSubmit={handleWorkspaceInvite} /> )}

Members

setSearchQuery(e.target.value)} />
); }); WorkspaceMembersSettingsPage.getLayout = function getLayout(page: ReactElement) { return ( }> {page} ); }; export default WorkspaceMembersSettingsPage;