refactoring and clean up

lib/api/buildUrl.ts

@@ -2,10 +2,11 @@ import { compile } from 'path-to-regexp';
 
 import appConfig from 'configs/app/config';
 
-import type { ApiResource } from './resources';
+import { RESOURCES } from './resources';
+import type { ApiResource, ResourceName } from './resources';
 
 export default function buildUrl(
-  resource: ApiResource,
+  _resource: ApiResource | ResourceName,
   pathParams?: Record<string, string | undefined>,
   queryParams?: Record<string, string | number | undefined>,
 ) {
@@ -22,6 +23,7 @@ export default function buildUrl(
   // will need to change the condition if there are more micro services that need authentication and DB state changes
   const needProxy = appConfig.host !== appConfig.api.host;
 
+  const resource: ApiResource = typeof _resource === 'string' ? RESOURCES[_resource] : _resource;
   const baseUrl = needProxy ? appConfig.baseUrl : (resource.endpoint || appConfig.api.endpoint);
   const basePath = resource.basePath !== undefined ? resource.basePath : appConfig.api.basePath;
   const path = needProxy ? '/node-api/proxy' + basePath + resource.path : basePath + resource.path;

lib/api/getSearchParams.ts

-import type { NextApiRequest } from 'next';
-
-export default function getSearchParams(req: NextApiRequest) {
-  const searchParams: Record<string, string> = {};
-  Object.entries(req.query).forEach(([ key, value ]) => {
-    searchParams[key] = Array.isArray(value) ? value.join(',') : (value || '');
-  });
-
-  return new URLSearchParams(searchParams).toString();
-}

lib/api/getUrlWithNetwork.ts

-import type { NextApiRequest } from 'next';
-
-import appConfig from 'configs/app/config';
-
-export default function getUrlWithNetwork(_req: NextApiRequest, path: string) {
-  return [
-    appConfig.api.basePath,
-    path,
-  ]
-    .filter((segment) => segment !== '' && segment !== '/')
-    .join('');
-}

lib/api/handler.ts

-import type { NextApiRequest, NextApiResponse } from 'next';
-
-import fetchFactory from 'lib/api/fetch';
-import getUrlWithNetwork from 'lib/api/getUrlWithNetwork';
-import { httpLogger } from 'lib/api/logger';
-
-type Methods = 'GET' | 'POST' | 'PUT' | 'DELETE';
-
-export default function createHandler(getUrl: (_req: NextApiRequest) => string, allowedMethods: Array<Methods>, apiEndpoint?: string) {
-  const handler = async(_req: NextApiRequest, res: NextApiResponse) => {
-    httpLogger(_req, res);
-
-    if (!_req.method || !allowedMethods.includes(_req.method as Methods)) {
-      res.setHeader('Allow', allowedMethods);
-      res.status(405).end(`Method ${ _req.method } Not Allowed`);
-      return;
-    }
-
-    const isBodyDisallowed = _req.method === 'GET' || _req.method === 'HEAD';
-
-    const url = apiEndpoint ? `/api${ getUrl(_req) }` : getUrlWithNetwork(_req, `/api${ getUrl(_req) }`);
-    const fetch = fetchFactory(_req, apiEndpoint);
-    const response = await fetch(url, {
-      method: _req.method,
-      body: isBodyDisallowed ? undefined : _req.body,
-    });
-
-    if (response.status === 200) {
-      const data = await response.json();
-      res.status(200).json(data);
-      return;
-    }
-
-    let responseError;
-    const defaultError = { statusText: response.statusText, status: response.status };
-
-    try {
-      const error = await response.json() as { errors: unknown };
-      responseError = error?.errors || defaultError;
-    } catch (error) {
-      responseError = defaultError;
-    }
-
-    httpLogger.logger.error({ err: responseError, url: _req.url });
-
-    res.status(500).json(responseError);
-  };
-
-  return handler;
-}

lib/api/fetch.ts → lib/api/nodeFetch.ts

@@ -6,12 +6,12 @@ import appConfig from 'configs/app/config';
 import { httpLogger } from 'lib/api/logger';
 import * as cookies from 'lib/cookies';
 
-// first arg can be only a string
-// FIXME migrate to RequestInfo later if needed
 export default function fetchFactory(
   _req: NextApiRequest,
   apiEndpoint: string = appConfig.api.endpoint,
 ) {
+  // first arg can be only a string
+  // FIXME migrate to RequestInfo later if needed
   return function fetch(path: string, init?: RequestInit): Promise<Response> {
     const csrfToken = _req.headers['x-csrf-token']?.toString();
     const headers = {

lib/api/resources.ts

@@ -35,6 +35,9 @@ export interface ApiResource {
 
 export const RESOURCES = {
   // ACCOUNT
+  csrf: {
+    path: '/api/account/v1/get_csrf',
+  },
   user_info: {
     path: '/api/account/v1/user/info',
   },
@@ -198,7 +201,6 @@ export type ResourcePaginationKey<R extends ResourceName> = typeof RESOURCES[R]
 export const resourceKey = (x: keyof typeof RESOURCES) => x;
 
 export interface ResourceError<T = unknown> {
-  error?: T;
   payload?: T;
   status: Response['status'];
   statusText: Response['statusText'];

lib/hooks/useFetch.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { CsrfData } from 'types/client/account';
 
 import type { ResourceError } from 'lib/api/resources';
+import { getResourceKey } from 'lib/api/useApiQuery';
 
 export interface Params {
   method?: RequestInit['method'];
@@ -15,7 +16,7 @@ export interface Params {
 
 export default function useFetch() {
   const queryClient = useQueryClient();
-  const { token } = queryClient.getQueryData<CsrfData>([ 'csrf' ]) || {};
+  const { token } = queryClient.getQueryData<CsrfData>(getResourceKey('csrf')) || {};
 
   return React.useCallback(<Success, Error>(path: string, params?: Params): Promise<Success | ResourceError<Error>> => {
     const reqParams = {
@@ -42,8 +43,6 @@ export default function useFetch() {
 
         return response.json().then(
           (jsonError) => Promise.reject({
-            // DEPRECATED
-            error: jsonError as Error,
             payload: jsonError as Error,
             status: response.status,
             statusText: response.statusText,

pages/_app.tsx

@@ -23,7 +23,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         refetchOnWindowFocus: false,
         retry: (failureCount, _error) => {
           const error = _error as ResourceError<{ status: number }>;
-          const status = error?.status || error?.error?.status;
+          const status = error?.status || error?.payload?.status;
           if (status && status >= 400 && status < 500) {
             // don't do retry for client error responses
             return false;

pages/api/csrf.ts

 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import fetchFactory from 'lib/api/fetch';
-import getUrlWithNetwork from 'lib/api/getUrlWithNetwork';
+import buildUrl from 'lib/api/buildUrl';
 import { httpLogger } from 'lib/api/logger';
+import fetchFactory from 'lib/api/nodeFetch';
 
 export default async function csrfHandler(_req: NextApiRequest, res: NextApiResponse) {
   httpLogger(_req, res);
 
-  const url = getUrlWithNetwork(_req, `/api/account/v1/get_csrf`);
-  const fetch = fetchFactory(_req);
-  const response = await fetch(url);
+  const url = buildUrl('csrf');
+  const response = await fetchFactory(_req)(url);
 
   if (response.status === 200) {
     const token = response.headers.get('x-bs-account-csrf');

pages/api/proxy.ts

@@ -2,7 +2,7 @@ import _pick from 'lodash/pick';
 import _pickBy from 'lodash/pickBy';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import fetchFactory from 'lib/api/fetch';
+import fetchFactory from 'lib/api/nodeFetch';
 
 const handler = async(_req: NextApiRequest, res: NextApiResponse) => {
   if (!_req.url) {

ui/block/BlockDetails.tsx

@@ -57,7 +57,7 @@ const BlockDetails = () => {
   }
 
   if (isError) {
-    const is404 = error?.error?.status === 404;
+    const is404 = error?.payload?.status === 404;
     return is404 ? <span>This block has not been processed yet.</span> : <DataFetchAlert/>;
   }
 

ui/shared/Page/Page.tsx

@@ -2,8 +2,11 @@ import { Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
+import appConfig from 'configs/app/config';
+import buildUrl from 'lib/api/buildUrl';
+import { getResourceKey } from 'lib/api/useApiQuery';
 import * as cookies from 'lib/cookies';
-// import useFetch from 'lib/hooks/useFetch';
+import useFetch from 'lib/hooks/useFetch';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 import PageContent from 'ui/shared/Page/PageContent';
@@ -23,22 +26,25 @@ const Page = ({
   hideMobileHeaderOnScrollDown,
   isHomePage,
 }: Props) => {
-  // const customFetch = useFetch();
+  const nodeApiFetch = useFetch();
 
-  useQuery([ 'csrf' ], async() => {
-    // const nodeApiResponse = await customFetch('/node-api/csrf');
-    const apiResponse = await fetch('https://blockscout-main.test.aws-k8s.blockscout.com/api/account/v1/get_csrf', { credentials: 'include' });
+  useQuery(getResourceKey('csrf'), async() => {
+    if (appConfig.host === appConfig.api.host) {
+      const url = buildUrl('csrf');
+      const apiResponse = await fetch(url, { credentials: 'include' });
+      const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf');
+      // eslint-disable-next-line no-console
+      console.log('>>> RESPONSE HEADERS <<<');
+      // eslint-disable-next-line no-console
+      console.table([ {
+        'content-length': apiResponse.headers.get('content-length'),
+        'x-bs-account-csrf': csrfFromHeader,
+      } ]);
 
-    const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf');
-    // eslint-disable-next-line no-console
-    console.log('>>> RESPONSE HEADERS <<<');
-    // eslint-disable-next-line no-console
-    console.table([ {
-      'content-length': apiResponse.headers.get('content-length'),
-      'x-bs-account-csrf': csrfFromHeader,
-    } ]);
+      return csrfFromHeader ? { token: csrfFromHeader } : undefined;
+    }
 
-    return csrfFromHeader ? { token: csrfFromHeader } : undefined;
+    return nodeApiFetch('/node-api/csrf');
   }, {
     enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
   });