feat: api keys ui (#839)

* feat: api keys ui

packages/webapp/src/hooks/query/apiKeys.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import { useMutation, useQueryClient } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (query) => {
+  query.invalidateQueries(t.API_KEYS);
+};
+
+/**
+ * Retrieve API keys list.
+ */
+export function useApiKeys(props) {
+  return useRequestQuery(
+    [t.API_KEYS],
+    { method: 'get', url: 'api-keys' },
+    {
+      select: (res) => res.data || [],
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+/**
+ * Generates a new API key.
+ */
+export function useGenerateApiKey(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('api-keys/generate', values), {
+    onSuccess: () => {
+      commonInvalidateQueries(client);
+    },
+    ...props,
+  });
+}
+
+/**
+ * Revokes the given API key.
+ */
+export function useRevokeApiKey(props) {
+  const client = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.put(`api-keys/${id}/revoke`),
+    {
+      onSuccess: () => {
+        commonInvalidateQueries(client);
+      },
+      ...props,
+    },
+  );
+}

packages/webapp/src/hooks/query/index.tsx

@@ -38,3 +38,4 @@ export * from './branches';
 export * from './warehousesTransfers';
 export * from './plaid';
 export * from './FinancialReports';
+export * from './apiKeys';

packages/webapp/src/hooks/query/types.tsx

@@ -241,6 +241,10 @@ export const EXCHANGE_RATE = {
   EXCHANGE_RATE: 'EXCHANGE_RATE',
 };
 
+export const API_KEYS = {
+  API_KEYS: 'API_KEYS',
+};
+
 export default {
   ...Authentication,
   ...ACCOUNTS,
@@ -276,4 +280,5 @@ export default {
   ...ORGANIZATION,
   ...TAX_RATES,
   ...EXCHANGE_RATE,
+  ...API_KEYS,
 };