plane/apps/app/components/integration/slack/select-channel.tsx

import React, { useState, useEffect } from "react";

import { useRouter } from "next/router";

import useSWR, { mutate } from "swr";
// services
import appinstallationsService from "services/app-installations.service";

// ui
import { Loader } from "components/ui";
// hooks
import useToast from "hooks/use-toast";
import useIntegrationPopup from "hooks/use-integration-popup";
// types
import { IWorkspaceIntegration } from "types";
// fetch-keys
import { SLACK_CHANNEL_INFO } from "constants/fetch-keys";

type Props = {
  integration: IWorkspaceIntegration;
};

export const SelectChannel: React.FC<Props> = ({ integration }) => {
  const [deletingProjectSync, setDeletingProjectSync] = useState(false);

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

  const { startAuth } = useIntegrationPopup("slackChannel", integration.id);

  const { data: projectIntegration } = useSWR(
    workspaceSlug && projectId && integration.id
      ? SLACK_CHANNEL_INFO(workspaceSlug as string, projectId as string)
      : null,
    () =>
      workspaceSlug && projectId && integration.id
        ? appinstallationsService.getSlackChannelDetail(
            workspaceSlug as string,
            projectId as string,
            integration.id as string
          )
        : null
  );

  useEffect(() => {
    if (projectIntegration?.length > 0) {
      setDeletingProjectSync(true);
    }
    if (projectIntegration?.length === 0) {
      setDeletingProjectSync(false);
    }
  }, [projectIntegration]);

  const handleDelete = async () => {
    if (projectIntegration.length === 0) return;
    mutate(SLACK_CHANNEL_INFO, (prevData: any) => {
      if (!prevData) return;
      return prevData.id !== integration.id;
    }).then(() => setDeletingProjectSync(false));
    appinstallationsService
      .removeSlackChannel(
        workspaceSlug as string,
        projectId as string,
        integration.id as string,
        projectIntegration?.[0]?.id
      )
      .catch((err) => console.log(err));
  };

  const handleAuth = async () => {
    await startAuth();
    setDeletingProjectSync(true);
  };

  return (
    <>
      {projectIntegration ? (
        <button
          type="button"
          className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
            projectIntegration.length > 0 && deletingProjectSync ? "bg-green-500" : "bg-gray-200"
          }`}
          role="switch"
          aria-checked
          onClick={() => {
            deletingProjectSync ? handleDelete() : handleAuth();
          }}
        >
          <span
            aria-hidden="true"
            className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
              projectIntegration.length > 0 && deletingProjectSync
                ? "translate-x-5"
                : "translate-x-0"
            }`}
          />
        </button>
      ) : (
        <Loader>
          <Loader.Item height="35px" width="150px" />
        </Loader>
      )}
    </>
  );
};