remove useSWRMutation from APIKeys.tsx

Author: panteliselef

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -94,12 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
   };
   const card = useCardState();
   const clerk = useClerk();
-  // TODO: Replace useSWRMutation with the react-query equivalent.
-  const {
-    data: createdAPIKey,
-    trigger: createAPIKey,
-    isMutating,
-  } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+  const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
   const { t } = useLocalizations();
   const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
   const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -108,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
   const handleCreateAPIKey = async (params: OnCreateParams) => {
     try {
-      await createAPIKey({
+      card.setLoading();
+      const apiKey = await clerk.apiKeys.create({
         ...params,
         subject,
       });
       invalidateAll();
       card.setError(undefined);
       setIsCopyModalOpen(true);
+      setAPIKey(apiKey);
     } catch (err: any) {
       if (isClerkAPIResponseError(err)) {
         if (err.status === 409) {
           card.setError('API Key name already exists');
         }
       }
+    } finally {
+      card.setIdle();
     }
   };
 
@@ -182,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
         <Action.Open value='add-api-key'>
           <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
             <Action.Card sx={{ width: '100%' }}>
-              <CreateAPIKeyForm
-                onCreate={handleCreateAPIKey}
-                isSubmitting={isMutating}
-              />
+              <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
             </Action.Card>
           </Flex>
         </Action.Open>
@@ -194,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
           isOpen={isCopyModalOpen}
           onOpen={() => setIsCopyModalOpen(true)}
           onClose={() => setIsCopyModalOpen(false)}
-          apiKeyName={createdAPIKey?.name ?? ''}
-          apiKeySecret={createdAPIKey?.secret ?? ''}
+          apiKeyName={apiKey?.name || ''}
+          apiKeySecret={apiKey?.secret || ''}
           modalRoot={revokeModalRoot}
         />
       </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
   onCreate: (params: OnCreateParams) => void;
-  isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
   );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
   const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
   const { close: closeCardFn } = useActionContext();
   const { showDescription = false } = useAPIKeysContext();
+  const card = useCardState();
   const { t } = useLocalizations();
 
   const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
           submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
           isDisabled={!canSubmit}
           onReset={closeCardFn}
-          isLoading={isSubmitting}
+          isLoading={card.isLoading}
           elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
         />
       </Form.Root>