Connection for discord

discord-user-form.tsx

"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { User } from "@/types/main"
import { useForm } from "react-hook-form"
import * as z from "zod"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { toast } from "@/components/ui/use-toast"
import { Icons } from "@/components/icons"
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
import { useTransition } from "react"

import { signIn } from "next-auth/react"
import { useEventDetails } from "@trigger.dev/react";

// import { client } from "@/trigger";

const discordUserSchema = z.object({})


interface ExtendedUser extends User {
  discourseURL: string | null
  org_id: string | null
}

interface Job {
  id: string
  status: "RUNNING" | "DONE" | "FAILED"
}

interface DiscourseUserFormProps extends React.HTMLAttributes<HTMLFormElement> {
  user: Pick<ExtendedUser, "id" | "org_id">;// Added discourseURL
  discordJobs: any[];  // Adjust the type if you have a specific type for discordJobs.

}

type FormData = z.infer<typeof discordUserSchema>

export function DiscordUserForm({
  user,
  discordJobs,
  className,
  ...props
}: DiscourseUserFormProps) {
  const router = useRouter()
  const {
    handleSubmit,
    register,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(discordUserSchema),
  })

  const supabase = createClientComponentClient()

  // async function signInWithDiscord() {

  //   const { data, error } = await supabase.auth.signInWithOAuth({
  //     provider: "discord",
  //     options: {
  //       redirectTo: 'http://localhost:3000/2/dashboard/connections/discord',
  //       queryParams: { permission: '8'},
  //       scopes: 'identify bot'
  //     }
  //   })


  //   return { data, error }

  // }

  async function onSubmit(data: FormData) {
    // Call signInWithDiscord
    // const { data: discordData, error } = await signInWithDiscord();
    // await signIn("github", { callbackUrl: window.location.href });
    const orgId = user.org_id;
    if (orgId) {
      await signIn("discord", { callbackUrl: window.location.href }, { permissions: '8', scope: "identify bot", orgId: orgId });
    }
    else {
      alert("Can't identify OrgId");
    }


  }



  const renderCardFooter = (eventId: string | undefined) => {
    const { isLoading, isError, data, error } = eventId ? useEventDetails(eventId) : { isLoading: false, isError: false, data: null, error: null };
    const firstRun = data?.runs?.at(0);

    console.log("Error:", error)

    return (
      <CardFooter>
        <button type="submit" className={cn(buttonVariants(), className)} disabled={isLoading || isError}>
          {isLoading && (
            <>
              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
              <span>Loading...</span>
            </>
          )}
          {isError && <span>Error: {error?.message}</span>}
          {firstRun && <span>Status: {firstRun.status}</span>}
          {!isLoading && !isError && !firstRun && <span>Connect</span>}
        </button>
      </CardFooter>
    );
  }

  return (
    <form
      // action={syncDiscourse}
      className={cn(className)}
      onSubmit={handleSubmit(onSubmit)}
      {...props}
    >
      <Card>
        <CardHeader>
          <CardTitle>Your Discord Bot</CardTitle>
          <CardDescription>
            Click the button below to connect your Discord account.

          </CardDescription>
        </CardHeader>
        <CardContent>
          {/* The content area can be empty or include additional text/instructions */}
        </CardContent>
        {renderCardFooter(discordJobs[0]?.triggerdev_event_id)}
      </Card>
    </form>
  )
}