Repository: supabase/supabase
File: apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx (TypeScript)

Code before:
  selectedOrganization,
  projectClaim,
  requester,
  setStep,
}: {
  selectedOrganization: Organization
  projectClaim: OrganizationProjectClaimResponse
  requester: ApiAuthorizationResponse
  setStep: (step: 'choose-org' | 'benefits' | 'confirm') => void
}) => {
  const router = useRouter()
  const { auth_id, token: claimToken } = useParams()
  const queryClient = useQueryClient()

  const { mutateAsync: approveRequest, isLoading: isApproving } =
    useApiAuthorizationApproveMutation({ onError: () => {} })

  const { mutateAsync: claimProject, isLoading: isClaiming } = useOrganizationProjectClaimMutation()

  const onClaimProject = async () => {
    try {
      // try {
      await approveRequest({ id: auth_id!, slug: selectedOrganization.slug })
      // } catch (error: any) {
      //   // if the org is already approved with this auth id, we can ignore the error. Otherwise, we throw it again
      //   if (!error.message.includes('already approved')) {
      //     throw error
      //   }
      // }

      throw new Error('expected')
      await claimProject({
        slug: selectedOrganization.slug,
        token: claimToken!,
      })

      toast.success('Project claimed successfully')
      // invalidate the org projects to force them to be refetched
      queryClient.invalidateQueries(projectKeys.list())
      router.push(`/org/${selectedOrganization.slug}`)
    } catch (error: any) {
      toast.error(`Failed to claim project ${error.message}`)
    }
  }

  const isLoading = isApproving || isClaiming

  return (
    <ProjectClaimLayout
      title={
        <>

Review comment (suggestion):
curious why we're not going with the commented out approach? seems safer than blanket ignoring all errors

Code after:
  selectedOrganization,
  projectClaim,
  requester,
  setStep,
}: {
  selectedOrganization: Organization
  projectClaim: OrganizationProjectClaimResponse
  requester: ApiAuthorizationResponse
  setStep: (step: 'choose-org' | 'benefits' | 'confirm') => void
}) => {
  const router = useRouter()
  const { auth_id, token: claimToken } = useParams()
  const queryClient = useQueryClient()

  const { mutateAsync: approveRequest, isLoading: isApproving } =
    useApiAuthorizationApproveMutation({ onError: () => {} })

  const { mutateAsync: claimProject, isLoading: isClaiming } = useOrganizationProjectClaimMutation()

  const onClaimProject = async () => {
    try {
      const response = await approveRequest({ id: auth_id!, slug: selectedOrganization.slug })

      await claimProject({
        slug: selectedOrganization.slug,
        token: claimToken!,
      })

      toast.success('Project claimed successfully')
      try {
        // check if the redirect url is valid. If not, redirect the user to the org dashboard
        const url = new URL(response.url)
        window.location.href = url.toString()
      } catch {
        // invalidate the org projects to force them to be refetched
        queryClient.invalidateQueries(projectKeys.list())
        router.push(`/org/${selectedOrganization.slug}`)
      }
    } catch (error: any) {
      toast.error(`Failed to claim project ${error.message}`)
    }
  }

  const isLoading = isApproving || isClaiming

  return (
    <ProjectClaimLayout
      title={
        <>
          Claim a project <span className="text-brand">{projectClaim?.project?.name}</span> from{' '}
          <span className="text-brand">{requester?.name}</span>