fix: update teams API tokens logic

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -30,22 +30,20 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useOptionalCurrentTeam } from '~/providers/team';
+
 export type TokenDeleteDialogProps = {
-  teamId?: number;
   token: Pick<ApiToken, 'id' | 'name'>;
   onDelete?: () => void;
   children?: React.ReactNode;
 };
 
-export default function TokenDeleteDialog({
-  teamId,
-  token,
-  onDelete,
-  children,
-}: TokenDeleteDialogProps) {
+export default function TokenDeleteDialog({ token, onDelete, children }: TokenDeleteDialogProps) {
   const { _ } = useLingui();
   const { toast } = useToast();
 
+  const team = useOptionalCurrentTeam();
+
   const [isOpen, setIsOpen] = useState(false);
 
   const deleteMessage = _(msg`delete ${token.name}`);
@@ -75,7 +73,7 @@ export default function TokenDeleteDialog({
     try {
       await deleteTokenMutation({
         id: token.id,
-        teamId,
+        teamId: team?.id,
       });
 
       toast({

apps/remix/app/components/forms/token.tsx

@@ -1,4 +1,4 @@
-import { useState, useTransition } from 'react';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
@@ -38,6 +38,8 @@ import {
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useOptionalCurrentTeam } from '~/providers/team';
+
 export const EXPIRATION_DATES = {
   ONE_WEEK: msg`7 days`,
   ONE_MONTH: msg`1 month`,
@@ -59,15 +61,14 @@ type NewlyCreatedToken = {
 
 export type ApiTokenFormProps = {
   className?: string;
-  teamId?: number;
   tokens?: Pick<ApiToken, 'id'>[];
 };
 
-export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) => {
-  const [isTransitionPending, startTransition] = useTransition();
-
+export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
   const [, copy] = useCopyToClipboard();
 
+  const team = useOptionalCurrentTeam();
+
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -113,7 +114,7 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
   const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenMutationSchema) => {
     try {
       await createTokenMutation({
-        teamId,
+        teamId: team?.id,
         tokenName,
         expirationDate: noExpirationDate ? null : expirationDate,
       });
@@ -238,7 +239,7 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
               type="submit"
               className="hidden md:inline-flex"
               disabled={!form.formState.isDirty}
-              loading={form.formState.isSubmitting || isTransitionPending}
+              loading={form.formState.isSubmitting}
             >
               <Trans>Create token</Trans>
             </Button>
@@ -247,7 +248,7 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
               <Button
                 type="submit"
                 disabled={!form.formState.isDirty}
-                loading={form.formState.isSubmitting || isTransitionPending}
+                loading={form.formState.isSubmitting}
               >
                 <Trans>Create token</Trans>
               </Button>

apps/remix/app/components/general/settings-header.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { cn } from '@documenso/ui/lib/utils';
 
 export type SettingsHeaderProps = {
-  title: string;
-  subtitle: string;
+  title: string | React.ReactNode;
+  subtitle: string | React.ReactNode;
   hideDivider?: boolean;
   children?: React.ReactNode;
   className?: string;