plane/web/pages/[workspaceSlug]/settings/members.tsx

import { useState } from "react";

import Link from "next/link";
import { useRouter } from "next/router";

import useSWR from "swr";

// services
import { WorkspaceService } from "services/workspace.service";
// hooks
import useToast from "hooks/use-toast";
import useUser from "hooks/use-user";
import useWorkspaceMembers from "hooks/use-workspace-members";
// layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
// components
import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
import { WorkspaceSettingHeader } from "components/headers";
// ui
import { Button, Loader } from "@plane/ui";
import { CustomMenu, CustomSelect } from "components/ui";
// icons
import { ChevronDown, X } from "lucide-react";
// types
import type { NextPage } from "next";
// fetch-keys
import { WORKSPACE_INVITATION_WITH_EMAIL, WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
// constants
import { ROLE } from "constants/workspace";
// helper

// services
const workspaceService = new WorkspaceService();

const MembersSettings: NextPage = () => {
  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
  const [inviteModal, setInviteModal] = useState(false);

  const router = useRouter();
  const { workspaceSlug } = router.query;

  const { setToastAlert } = useToast();

  const { user } = useUser();

  const { isOwner } = useWorkspaceMembers(workspaceSlug?.toString(), Boolean(workspaceSlug));

  const { data: workspaceMembers, mutate: mutateMembers } = useSWR(
    workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug.toString()) : null,
    workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug.toString()) : null
  );

  const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR(
    workspaceSlug ? WORKSPACE_INVITATION_WITH_EMAIL(workspaceSlug.toString()) : null,
    workspaceSlug ? () => workspaceService.workspaceInvitationsWithEmail(workspaceSlug.toString()) : null
  );

  const members = [
    ...(workspaceInvitations?.map((item) => ({
      id: item.id,
      memberId: item.id,
      avatar: "",
      first_name: item.email,
      last_name: "",
      email: item.email,
      display_name: item.email,
      role: item.role,
      status: item.accepted,
      member: false,
      accountCreated: item?.accepted ? false : true,
    })) || []),
    ...(workspaceMembers?.map((item) => ({
      id: item.id,
      memberId: item.member?.id,
      avatar: item.member?.avatar,
      first_name: item.member?.first_name,
      last_name: item.member?.last_name,
      email: item.member?.email,
      display_name: item.member?.display_name,
      role: item.role,
      status: true,
      member: true,
      accountCreated: true,
    })) || []),
  ];

  const currentUser = workspaceMembers?.find((item) => item.member?.id === user?.id);

  const handleInviteModalSuccess = () => {
    mutateInvitations();
  };

  return (
    <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
      <ConfirmWorkspaceMemberRemove
        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
        onClose={() => {
          setSelectedRemoveMember(null);
          setSelectedInviteRemoveMember(null);
        }}
        data={
          selectedRemoveMember
            ? members.find((item) => item.id === selectedRemoveMember)
            : selectedInviteRemoveMember
            ? members.find((item) => item.id === selectedInviteRemoveMember)
            : null
        }
        handleDelete={async () => {
          if (!workspaceSlug) return;
          if (selectedRemoveMember) {
            workspaceService
              .deleteWorkspaceMember(workspaceSlug as string, selectedRemoveMember)
              .catch((err) => {
                const error = err?.error;
                setToastAlert({
                  type: "error",
                  title: "Error",
                  message: error || "Something went wrong",
                });
              })
              .finally(() => {
                mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember));
              });
          }
          if (selectedInviteRemoveMember) {
            mutateInvitations(
              (prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
              false
            );
            workspaceService
              .deleteWorkspaceInvitations(workspaceSlug as string, selectedInviteRemoveMember)
              .then(() => {
                setToastAlert({
                  type: "success",
                  title: "Success",
                  message: "Member removed successfully",
                });
              })
              .catch((err) => {
                const error = err?.error;
                setToastAlert({
                  type: "error",
                  title: "Error",
                  message: error || "Something went wrong",
                });
              })
              .finally(() => {
                mutateInvitations();
              });
          }
          setSelectedRemoveMember(null);
          setSelectedInviteRemoveMember(null);
        }}
      />
      <SendWorkspaceInvitationModal
        isOpen={inviteModal}
        setIsOpen={setInviteModal}
        workspace_slug={workspaceSlug as string}
        user={user}
        onSuccess={handleInviteModalSuccess}
      />
      <section className="pr-9 py-8 w-full overflow-y-auto">
        <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
          <h4 className="text-xl font-medium">Members</h4>
          <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
            Add Member
          </Button>
        </div>
        {!workspaceMembers || !workspaceInvitations ? (
          <Loader className="space-y-5">
            <Loader.Item height="40px" />
            <Loader.Item height="40px" />
            <Loader.Item height="40px" />
            <Loader.Item height="40px" />
          </Loader>
        ) : (
          <div className="divide-y divide-custom-border-200">
            {members.length > 0
              ? members.map((member) => (
                  <div key={member.id} className="group flex items-center justify-between px-3.5 py-[18px]">
                    <div className="flex items-center gap-x-8 gap-y-2">
                      {member.avatar && member.avatar !== "" ? (
                        <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
                          <a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
                            <img
                              src={member.avatar}
                              className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
                              alt={member.display_name || member.email}
                            />
                          </a>
                        </Link>
                      ) : member.display_name || member.email ? (
                        <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
                          <a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
                            {(member.display_name || member.email)?.charAt(0)}
                          </a>
                        </Link>
                      ) : (
                        <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
                          ?
                        </div>
                      )}
                      <div>
                        {member.member ? (
                          <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
                            <a className="text-sm">
                              <span>
                                {member.first_name} {member.last_name}
                              </span>
                              <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
                            </a>
                          </Link>
                        ) : (
                          <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
                        )}
                        {isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
                      </div>
                    </div>
                    <div className="flex items-center gap-3 text-xs">
                      {!member?.status && (
                        <div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
                          <p>Pending</p>
                        </div>
                      )}
                      {member?.status && !member?.accountCreated && (
                        <div className="mr-2 flex items-center justify-center rounded-full bg-blue-500/20 px-2 py-1 text-center text-xs text-blue-500">
                          <p>Account not created</p>
                        </div>
                      )}
                      <CustomSelect
                        customButton={
                          <div className="flex item-center gap-1">
                            <span
                              className={`flex items-center text-sm font-medium ${
                                member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
                              }`}
                            >
                              {ROLE[member.role as keyof typeof ROLE]}
                            </span>
                            {member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
                          </div>
                        }
                        value={member.role}
                        onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
                          if (!workspaceSlug) return;

                          mutateMembers(
                            (prevData: any) =>
                              prevData?.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)),
                            false
                          );

                          workspaceService
                            .updateWorkspaceMember(workspaceSlug?.toString(), member.id, {
                              role: value,
                            })
                            .catch(() => {
                              setToastAlert({
                                type: "error",
                                title: "Error!",
                                message: "An error occurred while updating member role. Please try again.",
                              });
                            });
                        }}
                        disabled={
                          member.memberId === currentUser?.member.id ||
                          !member.status ||
                          (currentUser && currentUser.role !== 20 && currentUser.role < member.role)
                        }
                      >
                        {Object.keys(ROLE).map((key) => {
                          if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;

                          return (
                            <CustomSelect.Option key={key} value={key}>
                              <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
                            </CustomSelect.Option>
                          );
                        })}
                      </CustomSelect>
                      <CustomMenu ellipsis>
                        <CustomMenu.MenuItem
                          onClick={() => {
                            if (member.member) {
                              setSelectedRemoveMember(member.id);
                            } else {
                              setSelectedInviteRemoveMember(member.id);
                            }
                          }}
                        >
                          <span className="flex items-center justify-start gap-2">
                            <X className="h-4 w-4" />

                            <span> {user?.id === member.memberId ? "Leave" : "Remove member"}</span>
                          </span>
                        </CustomMenu.MenuItem>
                      </CustomMenu>
                    </div>
                  </div>
                ))
              : null}
          </div>
        )}
      </section>
    </WorkspaceSettingLayout>
  );
};

export default MembersSettings;