plane/web/hooks/use-integration-popup.tsx

64 lines
1.8 KiB
TypeScript
Raw Permalink Normal View History

import { useRef, useState } from "react";
import { useRouter } from "next/router";
const useIntegrationPopup = ({
provider,
stateParams,
github_app_name,
slack_client_id,
}: {
provider: string | undefined;
stateParams?: string;
github_app_name?: string;
slack_client_id?: string;
}) => {
const [authLoader, setAuthLoader] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const providerUrls: { [key: string]: string } = {
github: `https://github.com/apps/${github_app_name}/installations/new?state=${workspaceSlug?.toString()}`,
slack: `https://slack.com/oauth/v2/authorize?scope=chat:write,im:history,im:write,links:read,links:write,users:read,users:read.email&user_scope=&&client_id=${slack_client_id}&state=${workspaceSlug?.toString()}`,
slackChannel: `https://slack.com/oauth/v2/authorize?scope=incoming-webhook&client_id=${slack_client_id}&state=${workspaceSlug?.toString()},${projectId?.toString()}${
stateParams ? "," + stateParams : ""
}`,
};
const popup = useRef<any>();
const checkPopup = () => {
const check = setInterval(() => {
if (!popup || popup.current.closed || popup.current.closed === undefined) {
clearInterval(check);
setAuthLoader(false);
}
}, 1000);
};
const openPopup = () => {
if (!provider) return;
const width = 600,
height = 600;
const left = window.innerWidth / 2 - width / 2;
const top = window.innerHeight / 2 - height / 2;
const url = providerUrls[provider];
return window.open(url, "", `width=${width}, height=${height}, top=${top}, left=${left}`);
};
const startAuth = () => {
popup.current = openPopup();
checkPopup();
setAuthLoader(true);
};
return {
startAuth,
isConnecting: authLoader,
};
};
export default useIntegrationPopup;