import React from "react"; import Image from "next/image"; import useSWR, { mutate } from "swr"; // services import { ProjectService } from "services/project"; // hooks import { useRouter } from "next/router"; import useToast from "hooks/use-toast"; // components import { SelectRepository, SelectChannel } from "components/integration"; // icons import GithubLogo from "public/logos/github-square.png"; import SlackLogo from "public/services/slack.png"; // types import { IWorkspaceIntegration } from "@plane/types"; // fetch-keys import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys"; type Props = { integration: IWorkspaceIntegration; }; const integrationDetails: { [key: string]: any } = { github: { logo: GithubLogo, description: "Select GitHub repository to enable sync.", }, slack: { logo: SlackLogo, description: "Get regular updates and control which notification you want to receive.", }, }; // services const projectService = new ProjectService(); export const IntegrationCard: React.FC = ({ integration }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { data: syncedGithubRepository } = useSWR( projectId ? PROJECT_GITHUB_REPOSITORY(projectId as string) : null, () => workspaceSlug && projectId && integration ? projectService.getProjectGithubRepository(workspaceSlug as string, projectId as string, integration.id) : null ); const handleChange = (repo: any) => { if (!workspaceSlug || !projectId || !integration) return; const { html_url, owner: { login }, id, name, } = repo; projectService .syncGithubRepository(workspaceSlug as string, projectId as string, integration.id, { name, owner: login, repository_id: id, url: html_url, }) .then(() => { mutate(PROJECT_GITHUB_REPOSITORY(projectId as string)); setToastAlert({ type: "success", title: "Success!", message: `${login}/${name} repository synced with the project successfully.`, }); }) .catch((err) => { console.error(err); setToastAlert({ type: "error", title: "Error!", message: "Repository could not be synced with the project. Please try again.", }); }); }; return ( <> {integration && (
{`${integration.integration_detail.title}

{integration.integration_detail.title}

{integrationDetails[integration.integration_detail.provider].description}

{integration.integration_detail.provider === "github" && ( 0 ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}` : null } label={ syncedGithubRepository && syncedGithubRepository.length > 0 ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}` : "Select Repository" } onChange={handleChange} /> )} {integration.integration_detail.provider === "slack" && }
)} ); };