Merge pull request #2 from thaind97git/develop

Clean components

Author: thaind97git

README.md

@@ -176,6 +176,39 @@ For Production:
       t('user.name') will be render "Name" for `en` and "Tên" for `vi`
     ```
 
+- Call API with axios
+
+  ```javascript
+  import { getUser } from '@/apis/user.ts';
+  import { setLoading } from '@/store/slices/appSlice';
+  import { errorHandler } from '@/helpers/axios';
+
+  const dispatch = useDispatch();
+
+  // Use useCallback to memorize create func (just one time)
+  const fetchUser = useCallback(async () => {
+    try {
+      // Star loading spinner
+      dispatch(setLoading(true));
+
+      // fetch user
+      const resp = await getUser();
+      console.log(resp);
+    } catch (error) {
+      // display toast when error
+      errorHandler(error);
+    } finally {
+      // End loading spinner
+      dispatch(setLoading(false));
+    }
+  }, []);
+
+  useEffect(() => {
+    // Trigger function
+    fetchUser();
+  }, [fetchUser]);
+  ```
+
 ---
 
 ## Tips

config/env.js

@@ -11,6 +11,7 @@
 const fs = require('fs');
 const path = require('path');
 const paths = require('./paths');
+const PACKAGE = require(paths.appPackageJson);
 
 // Make sure that including paths.js after env.js will read .env variables.
 delete require.cache[require.resolve('./paths')];
@@ -85,6 +86,7 @@ function getClientEnvironment(publicUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
+        VERSION: PACKAGE.version,
       },
     );
   // Stringify all values so we can feed into webpack DefinePlugin

config/jest/config.js

@@ -2,7 +2,7 @@
   "author": "aldenn",
   "license": "ISC",
   "name": "react-webpack-typescript-starter",
-  "version": "1.0.0",
+  "version": "0.0.3",
   "description": "The React-Typescript Boilerplate with Webpack config manual",
   "main": "index.js",
   "scripts": {

package.json

@@ -6,7 +6,7 @@
       "kill_timeout": 3000,
       "restart_delay": 3000,
       "script": "npm",
-      "args": "run prod"
+      "args": "run start"
     }
   ]
 }

pm2/prod.json

@@ -1,5 +1,5 @@
 import { AxiosResponse } from 'axios';
 import HttpRequest from '@/services/http-request';
 
-export const getCurrentUser = (): Promise<AxiosResponse<unknown>> =>
+export const getCurrentUser = async (): Promise<AxiosResponse> =>
   HttpRequest.get('/api/login/GetInfoToken');

public/static/images/login-avatar.png

@@ -1,8 +1,8 @@
 import { AxiosResponse } from 'axios';
 import HttpRequest from '@/services/http-request';
 
-export const getTodoList = (): Promise<AxiosResponse> =>
+export const getTodoList = async (): Promise<AxiosResponse> =>
   HttpRequest.get('https://jsonplaceholder.typicode.com/todos');
 
-export const getTodoDetails = (id: string): Promise<AxiosResponse> =>
+export const getTodoDetails = async (id: string): Promise<AxiosResponse> =>
   HttpRequest.get(`https://jsonplaceholder.typicode.com/todos/${id}`);