Merge pull request #74 from blockscout/chors

minor improvments

pages/api/account/api-keys/index.ts

-import type { ApiKeys } from 'pages/api/types/account';
+import type { ApiKeys } from 'types/api/account';
 
 import handler from 'pages/api/utils/handler';
 

pages/api/account/private-tags/address/[id].ts

@@ -3,13 +3,7 @@ import type { NextApiRequest } from 'next';
 import handler from 'pages/api/utils/handler';
 
 const getUrl = (req: NextApiRequest) => {
-  let url = `/account/v1/user/tags/address/${ req.query.id }`;
-  if (req.method === 'PUT') {
-    const params = { address_hash: req.query.address_hash as string, name: req.query.name as string };
-    const searchParams = new URLSearchParams(params);
-    url += `?${ searchParams.toString() }`;
-  }
-  return url;
+  return `/account/v1/user/tags/address/${ req.query.id }`;
 };
 
 const addressDeleteHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);

pages/api/account/private-tags/address/index.ts

-import type { AddressTags } from 'pages/api/types/account';
+import type { AddressTags } from 'types/api/account';
 
 import handler from 'pages/api/utils/handler';
 

pages/api/account/private-tags/transaction/[id].ts

@@ -3,13 +3,7 @@ import type { NextApiRequest } from 'next';
 import handler from 'pages/api/utils/handler';
 
 const getUrl = (req: NextApiRequest) => {
-  let url = `/account/v1/user/tags/transaction/${ req.query.id }`;
-  if (req.method === 'PUT') {
-    const params = { transaction_hash: req.query.transaction_hash as string, name: req.query.name as string };
-    const searchParams = new URLSearchParams(params);
-    url += `?${ searchParams.toString() }`;
-  }
-  return url;
+  return `/account/v1/user/tags/transaction/${ req.query.id }`;
 };
 
 const transactionDeleteHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);

pages/api/account/private-tags/transaction/index.ts

-import type { TransactionTags } from 'pages/api/types/account';
+import type { TransactionTags } from 'types/api/account';
 
 import handler from 'pages/api/utils/handler';
 

pages/api/types/account.ts

-// FIXME: here are types of the elixir api's responses
-// and in types/api/ folder we have types of the node api's responses
-// maybe they are always the same and there is no need to keep two separate files with types
-export interface AddressTag {
-  address_hash: string;
-  name: string;
-  id: string;
-}
-
-export type AddressTags = Array<AddressTag>
-
-export interface ApiKey {
-  api_key: string;
-  name: string;
-}
-
-export type ApiKeys = Array<ApiKey>
-
-export interface ModelError {
-  message: string;
-}
-
-export interface NotificationDirection {
-  incoming: boolean;
-  outcoming: boolean;
-}
-
-export interface NotificationSettings {
-  _native?: NotificationDirection;
-  erc20?: NotificationDirection;
-  erc7211155?: NotificationDirection;
-}
-
-export interface Transaction {
-  fromAddressHash?: string;
-  toAddressHash?: string;
-  createdContractAddressHash?: string;
-}
-
-export interface TransactionTag {
-  transaction_hash: string;
-  name: string;
-  id: string;
-}
-
-export type TransactionTags = Array<TransactionTag>
-
-export type Transactions = Array<Transaction>
-
-export interface UserInfo {
-  name?: string;
-  nickname?: string;
-  email?: string;
-}
-
-export interface WatchlistAddress {
-  addressHash: string;
-  addressName: string;
-  addressBalance: number;
-  coinName: string;
-  exchangeRate?: number;
-  notificationSettings: NotificationSettings;
-}
-
-export interface WatchlistAddressNew {
-  addressName: string;
-  notificationSettings: NotificationSettings;
-}
-
-export type WatchlistAddresses = Array<WatchlistAddress>

pages/api/utils/handler.ts

@@ -6,35 +6,23 @@ type Methods = 'GET' | 'POST' | 'PUT' | 'DELETE';
 
 export default function handler<TRes>(getUrl: (_req: NextApiRequest) => string, allowedMethods: Array<Methods>) {
   return async(_req: NextApiRequest, res: NextApiResponse<TRes>) => {
-    if (_req.method === 'GET' && allowedMethods.includes('GET')) {
-      const response = await fetch(getUrl(_req));
-      const data = await response.json() as TRes;
-
-      res.status(200).json(data);
-    } else if (allowedMethods.includes('POST') && _req.method === 'POST') {
+    if (_req.method && allowedMethods.includes(_req.method as Methods)) {
+      const isBodyDisallowed = _req.method === 'GET' || _req.method === 'HEAD';
       const response = await fetch(getUrl(_req), {
-        method: 'POST',
-        body: _req.body,
+        method: _req.method,
+        body: isBodyDisallowed ? undefined : _req.body,
       });
-      const data = await response.json() as TRes;
 
-      res.status(200).json(data);
-    } 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;
-
-      res.status(200).json(data);
-    } else if (allowedMethods.includes('DELETE') && _req.method === 'DELETE') {
-      const response = await fetch(getUrl(_req), { method: 'DELETE' });
       // FIXME: add error handlers
       if (response.status !== 200) {
         // eslint-disable-next-line no-console
-        console.log(response.statusText);
+        console.error(response.statusText);
+        res.status(500).end('Unknown error');
+        return;
       }
-      res.status(200).end();
+
+      const data = await response.json() as TRes;
+      res.status(200).json(data);
     } else {
       res.setHeader('Allow', allowedMethods);
       res.status(405).end(`Method ${ _req.method } Not Allowed`);

types/api/account.ts

@@ -7,8 +7,8 @@ export interface AddressTag {
 export type AddressTags = Array<AddressTag>
 
 export interface ApiKey {
-  apiKey: string;
-  apiKeyName: string;
+  api_key: string;
+  name: string;
 }
 
 export type ApiKeys = Array<ApiKey>

types/client/account.ts

+// here will be types if some back-end models are needed to be extended
+// in order to fit the client's needs
+export {};

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -10,7 +10,7 @@ import React, { useCallback, useEffect } from 'react';
 import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
-import type { ApiKey, ApiKeys } from 'pages/api/types/account';
+import type { ApiKey, ApiKeys } from 'types/api/account';
 
 type Props = {
   data?: ApiKey;

ui/apiKey/ApiKeyModal/ApiKeyModal.tsx

 import React, { useCallback } from 'react';
 
-import type { ApiKey } from 'pages/api/types/account';
+import type { ApiKey } from 'types/api/account';
 
 import FormModal from 'ui/shared/FormModal';
 

ui/apiKey/ApiKeyTable/ApiKeyTable.tsx

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
-import type { ApiKeys, ApiKey } from 'pages/api/types/account';
+import type { ApiKeys, ApiKey } from 'types/api/account';
 
 import ApiKeyTableItem from './ApiKeyTableItem';
 

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

@@ -6,7 +6,7 @@ import {
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
-import type { ApiKey } from 'pages/api/types/account';
+import type { ApiKey } from 'types/api/account';
 
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DeleteButton from 'ui/shared/DeleteButton';

ui/apiKey/DeleteApiKeyModal.tsx

@@ -2,7 +2,7 @@ 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 type { ApiKey, ApiKeys } from 'types/api/account';
 
 import DeleteModal from 'ui/shared/DeleteModal';
 

ui/pages/ApiKeys.tsx

@@ -2,7 +2,7 @@ import { Box, Button, HStack, Link, Text, Spinner, useDisclosure } from '@chakra
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { ApiKey, ApiKeys } from 'pages/api/types/account';
+import type { ApiKey, ApiKeys } from 'types/api/account';
 
 import { space } from 'lib/html-entities';
 import ApiKeyModal from 'ui/apiKey/ApiKeyModal/ApiKeyModal';

ui/privateTags/AddressModal/AddressForm.tsx

@@ -37,20 +37,17 @@ const AddressForm: React.FC<Props> = ({ data, onClose }) => {
   const queryClient = useQueryClient();
 
   const { mutate } = useMutation((formData: Inputs) => {
-    let mutationFunction;
-    const requestParams = {
+    const body = JSON.stringify({
       name: formData?.tag,
       address_hash: formData?.address,
-    };
-    if (data) {
-      // edit tag
-      const params = new URLSearchParams(requestParams);
-      mutationFunction = () => fetch(`/api/account/private-tags/address/${ data.id }?${ params.toString() }`, { method: 'PUT' });
-    } else {
-      // add tag
-      mutationFunction = () => fetch('/api/account/private-tags/address', { method: 'POST', body: JSON.stringify(requestParams) });
+    });
+
+    const isEdit = data?.id;
+    if (isEdit) {
+      return fetch(`/api/account/private-tags/address/${ data.id }`, { method: 'PUT', body });
     }
-    return mutationFunction();
+
+    return fetch('/api/account/private-tags/address', { method: 'POST', body });
   }, {
     onError: () => {
       // eslint-disable-next-line no-console

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -37,20 +37,17 @@ const TransactionForm: React.FC<Props> = ({ data, onClose }) => {
   const queryClient = useQueryClient();
 
   const { mutate } = useMutation((formData: Inputs) => {
-    let mutationFunction;
-    const requestParams = {
+    const body = JSON.stringify({
       name: formData?.tag,
       transaction_hash: formData?.transaction,
-    };
-    if (data) {
-      // edit tag
-      const params = new URLSearchParams(requestParams);
-      mutationFunction = () => fetch(`/api/account/private-tags/transaction/${ data.id }?${ params.toString() }`, { method: 'PUT' });
-    } else {
-      // add tag
-      mutationFunction = () => fetch('/api/account/private-tags/transaction', { method: 'POST', body: JSON.stringify(requestParams) });
+    });
+    const isEdit = data?.id;
+
+    if (isEdit) {
+      return fetch(`/api/account/private-tags/transaction/${ data.id }`, { method: 'PUT', body });
     }
-    return mutationFunction();
+
+    return fetch('/api/account/private-tags/transaction', { method: 'POST', body });
   }, {
     onError: () => {
       // eslint-disable-next-line no-console