Merge branch 'api-request-hooks' into DEV

.eslintignore

@@ -5,3 +5,4 @@
 # Auto generated by React
 serviceWorker.*
 setupTests.*
+setupProxy.*
\ No newline at end of file

.eslintrc.js

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

package.json

@@ -49,6 +49,7 @@
     "@material-ui/icons": "^4.9.1",
     "@types/styled-components": "^5.1.2",
     "axios": "^0.20.0",
+    "http-proxy-middleware": "^1.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hook-form": "^6.5.3",

src/core/App.tsx

-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import styled from 'styled-components';
+import useAddNews from '../hooks/useAddNews';
 import Footer from './components/Footer';
 import Header from './components/Header';
 import MainRouting from './components/MainRouting';
@@ -18,6 +19,18 @@ const MainContent = styled.div`
 `;
 
 function App() {
+  const [response, addNews] = useAddNews();
+
+  useEffect(() => {
+    addNews({ body: { title: 'Testing', text: 'Test Test TEST' } });
+  }, [addNews]);
+
+  useEffect(() => {
+    if (response.data) {
+      console.log(response.data.text);
+    }
+  }, [response.data]);
+
   return (
     <UserStateProvider>
       <Router>

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/useAddNews.ts

+import { INews } from './types';
+import useRequest from './useRequest';
+import userRestQueries from './useRestQueries';
+
+const useAddNews = () => {
+  const { post } = userRestQueries();
+  const request = post<INews>('/api/v1/news');
+
+  return useRequest<INews>({ request });
+};
+
+export default useAddNews;

src/hooks/useGetNewsList.ts

+import { INews } from './types';
+import useRequest from './useRequest';
+import userRestQueries from './useRestQueries';
+
+const useGetNewsList = (data?: INews[]) => {
+  const { get } = userRestQueries();
+  const request = get<INews[]>('/api/v1/news');
+
+  return useRequest<INews[]>({ request, initialData: data });
+};
+
+export default useGetNewsList;

src/hooks/useRequest.ts

+import { useCallback, useEffect, useState } from 'react';
+import { Refetch, RequestArgs, ResponseData } from './types';
+
+function useRequest<T = any>({ request, initialData }: 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({});
+
+  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;

src/hooks/useRestQueries.ts

+import axios, { AxiosRequestConfig } from 'axios';
+import { ApiRequest, RequestParams } from './types';
+
+function userRestQueries(
+  // When a request needs more config like CancelToken, etc.
+  config?: AxiosRequestConfig,
+): Record<string, <Data>(path: string) => ApiRequest<Data>> {
+  return {
+    get: <Data>(path: string) => (params: RequestParams) =>
+      axios.get<Data>(path, { ...config, ...params }),
+    post: <Data>(path: string) => (params: RequestParams) =>
+      axios.post<Data>(path, params.body ?? {}, { ...config, ...params }),
+    put: <Data>(path: string) => (params: RequestParams) =>
+      axios.put<Data>(path, params.body ?? {}, { ...config, ...params }),
+    delete: (path: string) => (params: RequestParams) =>
+      axios.delete(path, { ...config, ...params }),
+  };
+}
+
+export default userRestQueries;

src/setupProxy.js

+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+  app.use(
+    '/api/v1',
+    createProxyMiddleware({
+      target: 'http://localhost:8000',
+      changeOrigin: true,
+    }),
+  );
+};