Clean components

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

package.json

@@ -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": {

pm2/prod.json

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

src/apis/auth.ts

@@ -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');

src/apis/todo.ts

@@ -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}`);

src/components/not-found/index.tsx

@@ -3,27 +3,11 @@ import { Link } from 'react-router-dom';
 const NotFound: React.FC = () => {
   return (
     <section className="page_404">
-      <div className="container">
-        <div className="row">
-          <div className="col-sm-12 ">
-            <div className="col-sm-10 col-sm-offset-1  text-center">
-              <div className="four_zero_four_bg">
-                <h1 className="text-center ">404</h1>
-              </div>
-
-              <div className="contant_box_404">
-                <h3 className="h2">Look like you are lost</h3>
-
-                <p>the page you are looking for not avaible!</p>
-
-                <Link to="/" className="link_404">
-                  Go to Home
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <h1>404</h1>
+      <p>Oops! Something is wrong.</p>
+      <Link className="button" to="/">
+        <i className="icon-home"></i> Go back in initial page, is better.
+      </Link>
     </section>
   );
 };