Function GitHubLinkButton

src/components/GitHubLinkButton.tsx:13–153

()

import { GitHubLink } from '@prisma/client';

export const GitHubLinkButton = () => {
  const [isProcessing, setIsProcessing] = useState(false);
  const [githubData, setGithubData] = useState<GitHubLink | null>(null);
  const searchParams = useSearchParams();
  const router = useRouter();

  useEffect(() => {
    if (searchParams.get('github_linked') === 'true') {
      router.push('/payout-methods');
      toast.success('Github account linked successfully');
    } else if (searchParams.get('error') === 'github_link_failed') {
      toast.error("Couldn't link with your github , Try again after sometime");
    }
  }, [searchParams]);

  const getGithubData = async () => {
    const response = await fetch('/api/github/details');
    const resp = await response.json();
    setGithubData(resp.data[0]);
  };

  const handleUnlinkAccount = async () => {
    setIsProcessing(true);
    const response = await fetch('/api/github/details', {
      method: 'DELETE',
    });
    setIsProcessing(false);
    const resp = await response.json();
    console.log(resp);
    if (resp.success) {
      toast.success(resp.message);
      getGithubData();
    } else {
      toast.error(resp.message);
    }
  };

  useEffect(() => {
    // fetch the saved github linked data
    getGithubData();
  }, [searchParams]);

  const handleLinkGitHub = async () => {
    setIsProcessing(true);
    window.location.href = '/api/github/link';
  };

  return (
    <>
      <div className="group relative flex h-[18rem] cursor-pointer flex-col justify-between overflow-hidden rounded-lg border-2 p-6">
        <div>
          <div>
            <h3 className="text-lg font-semibold">Github</h3>
            <p className="text-sm text-muted-foreground">
              Link your Github account
            </p>
          </div>
        </div>