Create useRequest hook and type definitions

.eslintrc.js

@@ -11,4 +11,8 @@ module.exports = {
   env: {
     browser: true,
   },
+
+  rules: {
+    'implicit-arrow-linebreak': 0,
+  },
 };

src/hooks/types.ts

+import { AxiosPromise } from 'axios';
+
+export interface ResponseData<T> {
+  isLoading: boolean;
+  isError: boolean;
+  data?: T;
+}
+
+export interface RequestArgs<T = any> {
+  request: ApiRequest<T>;
+  initialData?: T;
+  initialParams?: RequestParams;
+}
+
+export interface RequestParams {
+  body?: any;
+  params?: any;
+  args?: any;
+}
+export type ApiRequest<T> = (params: RequestParams) => AxiosPromise<T>;
+
+export type Refetch = (params?: RequestParams) => void;
+
+export interface INews {
+  title: string;
+  text: string;
+  publishedAt: string;
+}

src/hooks/useRequest.ts

+import { useCallback, useEffect, useState } from 'react';
+import { Refetch, RequestArgs, ResponseData } from './types';
+
+function useRequest<T = any>({
+  request,
+  initialData,
+  initialParams,
+}: RequestArgs<T>): [ResponseData<T>, Refetch] {
+  const [data, setData] = useState(initialData);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [fetching, setFetching] = useState(false);
+  const [requestParams, setRequestParams] = useState(initialParams ?? {});
+
+  const refetch = useCallback((newParams?) => {
+    setRequestParams(newParams ?? {});
+    setFetching(true);
+  }, []);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsError(false);
+      setIsLoading(true);
+
+      try {
+        const result = await request(requestParams);
+
+        setData(result.data);
+      } catch (error) {
+        setIsError(true);
+      }
+      setFetching(false);
+      setIsLoading(false);
+    };
+
+    if (fetching && !isLoading) {
+      fetchData();
+    }
+  }, [request, fetching, isLoading, requestParams]);
+
+  return [{ data, isLoading, isError }, refetch];
+}
+
+export default useRequest;