import Image from "next/image"; import useSWR, { mutate } from "swr"; // services import projectService from "services/project.service"; // hooks import { useRouter } from "next/router"; import useToast from "hooks/use-toast"; // ui import { CustomSelect } from "components/ui"; // icons import GithubLogo from "public/logos/github-square.png"; // types import { IWorkspaceIntegrations } from "types"; // fetch-keys import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys"; type Props = { integration: IWorkspaceIntegrations; }; export const SingleIntegration: 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 { data: userRepositories } = useSWR("USER_REPOSITORIES", () => workspaceSlug && integration ? projectService.getGithubRepositories(workspaceSlug as any, integration.id) : null ); const handleChange = (repo: any) => { if (!workspaceSlug || !projectId || !integration) return; const { html_url, owner: { login }, id, name, } = repo; projectService .syncGiuthubRepository(workspaceSlug as string, projectId as string, integration.id, { name, owner: login, repository_id: id, url: html_url, }) .then((res) => { console.log(res); mutate(PROJECT_GITHUB_REPOSITORY(projectId as string)); setToastAlert({ type: "success", title: "Success!", message: `${login}/${name} respository synced with the project successfully.`, }); }) .catch((err) => { console.log(err); setToastAlert({ type: "error", title: "Error!", message: "Respository could not be synced with the project. Please try again.", }); }); }; return ( <> {integration && (
GithubLogo

{integration.integration_detail.title}

Select GitHub repository to enable sync.

0 ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}` : null } onChange={(val: string) => { const repo = userRepositories?.repositories.find((repo) => repo.full_name === val); handleChange(repo); }} label={ syncedGithubRepository && syncedGithubRepository.length > 0 ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}` : "Select Repository" } input > {userRepositories ? ( userRepositories.repositories.length > 0 ? ( userRepositories.repositories.map((repo) => ( <>{repo.full_name} )) ) : (

No repositories found

) ) : (

Loading repositories...

)}
)} ); };