create, update and delete

pages/_app.tsx

 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
 import React, { useState } from 'react';
 
@@ -19,6 +20,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       <ChakraProvider theme={ theme }>
         <Component { ...pageProps }/>
       </ChakraProvider>
+      <ReactQueryDevtools/>
     </QueryClientProvider>
   );
 }

pages/api/account/api-keys/[id].ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'pages/api/utils/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/account/v1/user/api_keys/${ req.query.id }`;
+};
+
+const apiKeysHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
+
+export default apiKeysHandler;

pages/api/utils/handler.ts

@@ -22,6 +22,7 @@ export default function handler<TRes>(getUrl: (_req: NextApiRequest) => string,
     } else if (allowedMethods.includes('PUT') && _req.method === 'PUT') {
       const response = await fetch(getUrl(_req), {
         method: 'PUT',
+        body: _req.body,
       });
       const data = await response.json() as TRes;
 

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -5,14 +5,16 @@ import {
   FormLabel,
   Input,
 } from '@chakra-ui/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useEffect } from 'react';
 import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
-import type { ApiKey } from 'pages/api/types/account';
+import type { ApiKey, ApiKeys } from 'pages/api/types/account';
 
 type Props = {
   data?: ApiKey;
+  onClose: () => void;
 }
 
 type Inputs = {
@@ -23,16 +25,54 @@ type Inputs = {
 // idk, maybe there is no limit
 const NAME_MAX_LENGTH = 100;
 
-const ApiKeyForm: React.FC<Props> = ({ data }) => {
+const ApiKeyForm: React.FC<Props> = ({ data, onClose }) => {
   const { control, handleSubmit, formState: { errors }, setValue } = useForm<Inputs>();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     setValue('token', data?.api_key || '');
     setValue('name', data?.name || '');
   }, [ setValue, data ]);
 
-  // eslint-disable-next-line no-console
-  const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
+  const updateApiKey = (data: Inputs) => {
+    const body = JSON.stringify({ name: data.name });
+
+    if (!data.token) {
+      return fetch('/api/account/api-keys', { method: 'POST', body });
+    }
+
+    return fetch(`/api/account/api-keys/${ data.token }`, { method: 'PUT', body });
+  };
+
+  const mutation = useMutation(updateApiKey, {
+    onSuccess: async(data) => {
+      const response: ApiKey = await data.json();
+
+      queryClient.setQueryData([ 'api-keys' ], (prevData: ApiKeys | undefined) => {
+        const isExisting = prevData && prevData.some((item) => item.api_key === response.api_key);
+
+        if (isExisting) {
+          return prevData.map((item) => {
+            if (item.api_key === response.api_key) {
+              return response;
+            }
+
+            return item;
+          });
+        }
+
+        return [ ...(prevData || []), response ];
+      });
+
+      onClose();
+    },
+    // eslint-disable-next-line no-console
+    onError: console.error,
+  });
+
+  const onSubmit: SubmitHandler<Inputs> = useCallback((data) => {
+    mutation.mutate(data);
+  }, [ mutation ]);
 
   const renderTokenInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'token'>}) => {
     return (
@@ -86,6 +126,7 @@ const ApiKeyForm: React.FC<Props> = ({ data }) => {
           variant="primary"
           onClick={ handleSubmit(onSubmit) }
           disabled={ Object.keys(errors).length > 0 }
+          isLoading={ mutation.isLoading }
         >
           { data ? 'Save' : 'Generate API key' }
         </Button>

ui/apiKey/ApiKeyModal/ApiKeyModal.tsx

@@ -17,8 +17,8 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const text = 'Add an application name to identify your API key. Click the button below to auto-generate the associated key.';
 
   const renderForm = useCallback(() => {
-    return <ApiKeyForm data={ data }/>;
-  }, [ data ]);
+    return <ApiKeyForm data={ data } onClose={ onClose }/>;
+  }, [ data, onClose ]);
   return (
     <FormModal<ApiKey>
       isOpen={ isOpen }

ui/apiKey/DeleteApiKeyModal.tsx

 import { Text } from '@chakra-ui/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
+import type { ApiKey, ApiKeys } from 'pages/api/types/account';
+
 import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  name?: string;
+  data: ApiKey;
 }
 
-const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, name }) => {
-  const onDelete = useCallback(() => {
+const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
+
+  const queryClient = useQueryClient();
+
+  const deleteApiKey = () => {
+    return fetch(`/api/account/api-keys/${ data.api_key }`, { method: 'DELETE' });
+  };
+
+  const mutation = useMutation(deleteApiKey, {
+    onSuccess: async() => {
+      queryClient.setQueryData([ 'api-keys' ], (prevData: ApiKeys | undefined) => {
+        return prevData?.filter((item) => item.api_key !== data.api_key);
+      });
+
+      onClose();
+    },
     // eslint-disable-next-line no-console
-    console.log('delete', name);
-  }, [ name ]);
+    onError: console.error,
+  });
+
+  const onDelete = useCallback(() => {
+    mutation.mutate(data);
+  }, [ data, mutation ]);
 
   const renderText = useCallback(() => {
     return (
-      <Text display="flex">API key for<Text fontWeight="600" whiteSpace="pre">{ ` "${ name || 'name' }" ` }</Text>will be deleted</Text>
+      <Text display="flex">API key for<Text fontWeight="600" whiteSpace="pre">{ ` "${ data.name || 'name' }" ` }</Text>will be deleted</Text>
     );
-  }, [ name ]);
+  }, [ data.name ]);
+
   return (
     <DeleteModal
       isOpen={ isOpen }
@@ -27,6 +49,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, name }) => {
       onDelete={ onDelete }
       title="Remove API key"
       renderContent={ renderText }
+      pending={ mutation.isLoading }
     />
   );
 };

ui/pages/ApiKeys.tsx

@@ -18,7 +18,7 @@ const ApiKeysPage: React.FC = () => {
   const deleteModalProps = useDisclosure();
 
   const [ apiKeyModalData, setApiKeyModalData ] = useState<ApiKey>();
-  const [ deleteModalData, setDeleteModalData ] = useState<string>();
+  const [ deleteModalData, setDeleteModalData ] = useState<ApiKey>();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ 'api-keys' ], async() => {
     const response = await fetch('/api/account/api-keys');
@@ -39,7 +39,7 @@ const ApiKeysPage: React.FC = () => {
   }, [ apiKeyModalProps ]);
 
   const onDeleteClick = useCallback((data: ApiKey) => {
-    setDeleteModalData(data.name);
+    setDeleteModalData(data);
     deleteModalProps.onOpen();
   }, [ deleteModalProps ]);
 
@@ -94,7 +94,7 @@ const ApiKeysPage: React.FC = () => {
         { content }
       </Box>
       <ApiKeyModal { ...apiKeyModalProps } onClose={ onApiKeyModalClose } data={ apiKeyModalData }/>
-      <DeleteApiKeyModal { ...deleteModalProps } onClose={ onDeleteModalClose } name={ deleteModalData }/>
+      { deleteModalData && <DeleteApiKeyModal { ...deleteModalProps } onClose={ onDeleteModalClose } data={ deleteModalData }/> }
     </Page>
   );
 };