Merge branch 'handle-error' into main

Author: tduyng

README.md

@@ -20,7 +20,7 @@ To use this template
   $ yarn build
   # or npm run start / npm run build
   ```
-- Start coding
+- Start codinggs
 Demo deploy: [reactts-boilerplate.netlify.app](https://reactts-boilerplate.netlify.app/)
 Login
 username: admin
@@ -160,7 +160,7 @@ password: 123456
   - **App**: component App
   - **assets**: images, videos, files, …
   - **components**: contains folders components
-  - **constansts**: contants, enum
+  - **constansts**: constant, enum
   - **guards**: routes demands authenticates
   - **helpers**: functions helpers
   - **hooks**: contains hooks using

package.json

@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "global": "^4.4.0",
-    "immer": "^7.0.14",
-    "netlify-cli": "^2.68.6",
+    "@ant-design/icons": "^4.3.0",
+    "@types/axios": "^0.14.0",
+    "antd": "^4.8.6",
+    "concurrently": "^5.3.0",
+    "immer": "^8.0.0",
+    "json-server": "^0.16.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
@@ -16,14 +17,15 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.2.1",
-    "typescript": "~4.0.5"
+    "typescript": "~4.0.5",
+    "uuid": "^8.3.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.1",
     "@testing-library/user-event": "^12.2.0",
     "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.7",
+    "@types/node": "^14.14.8",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
     "@types/react-redux": "^7.1.11",
@@ -37,7 +39,9 @@
     "prettier": "^2.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "json-server": "json-server --watch server/db/db.json --routes server/routes.json --port 5000",
+    "dev": "react-scripts start",
+    "start": "concurrently \"yarn json-server\" \"yarn dev\"",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/@types/product.d.ts

@@ -0,0 +1,26 @@
+interface Product {
+  id: string;
+  name: string;
+  quantity: string;
+  price: number;
+}
+
+interface ResGetProductApi extends Res {
+  data: {
+    products: Product[];
+  };
+}
+
+interface ResGetProduct extends ActionRedux {
+  payload: ResGetProductApi;
+}
+
+interface ResGetProductItemApi extends Res {
+  data: {
+    product: Product;
+  };
+}
+
+interface ResGetProductItem extends ActionRedux {
+  payload: ResGetProductItemApi;
+}

src/@types/reducer.d.ts

@@ -0,0 +1,5 @@
+import { RootReducer } from 'src/reducer';
+
+declare global {
+  type AppState = ReturnType<typeof RootReducer>;
+}

src/@types/stepForm.d.ts

@@ -0,0 +1,20 @@
+interface ReqLogin {
+  username: string;
+  password: string;
+  email?: string;
+}
+interface ResLoginApi extends Res {
+  data: {
+    id: string;
+    username: string;
+    email: string;
+    password: string;
+  };
+}
+
+interface IUser {
+  id: string;
+  username: string;
+  email?: string;
+  password: string;
+}

src/@types/user.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import Routes from 'src/routes/routes';
+import { Routes } from 'src/routes';
 
 function App() {
   return <Routes />;

src/App/App.tsx

@@ -1,6 +1,60 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+@import 'config';
+@import 'fonts';
+@import 'header';
+@import 'footer';
+@import 'home';
+@import 'staticPages';
+@import 'responsive';
+@import 'login';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
 body {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.6;
+  background-color: #fff;
+}
+
+a {
+  text-decoration: none;
+  color: $primary-color;
+}
+ul {
+  list-style: none;
+}
+img {
+  width: 100%;
+}
+
+.container-fluid {
+  margin: 0 auto;
+  max-width: 100%;
+  padding: 0 15px;
+}
+.container {
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 15px;
+}
+
+.ant-layout {
+  background: #fff;
+}
+.ant-layout-content {
+  background-color: #fff;
+  min-height: calc(100vh - #{$heightFooter} - #{$heightHeader}) !important;
+  padding-bottom: 2rem;
+  overflow: auto;
+}
+.ant-layout.main-layout {
+  background-color: #fff;
+}
+
+p {
+  font-size: 16px;
+  line-height: 1.6;
 }

src/assets/scss/index.scss

@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'src/assets/scss/index.scss';
+import 'antd/dist/antd.css';
 import App from './App/App';
 import * as serviceWorker from './serviceWorker';
 import { Provider } from 'react-redux';
-import { store } from './store/store';
+import { store } from './store';
 
 ReactDOM.render(
   <React.StrictMode>