",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
- "node-sass": "^4.13.0",
+ "axios": "^0.21.1",
+ "babel-plugin-transform-remove-console": "^6.9.4",
+ "customize-cra": "^0.9.1",
+ "hookrouter": "^1.2.3",
+ "js-cookie": "^2.2.1",
+ "node-sass": "^4.13.1",
"react": "^16.12.0",
+ "react-app-rewired": "^2.1.5",
"react-dom": "^16.12.0",
- "react-scripts": "3.3.0"
+ "react-intl": "^3.11.0",
+ "react-redux": "^7.1.3",
+ "react-scripts": "3.3.0",
+ "redux": "^4.0.5",
+ "redux-thunk": "^2.3.0"
},
+ "keywords": [
+ "react",
+ "react-js",
+ "customize-cra",
+ "react app template",
+ "sass",
+ "hookrouter",
+ "react intl",
+ "react redux",
+ "js-cookie",
+ "axios"
+ ],
+ "license": "MIT",
+ "main": "n/a",
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
+ "eject": "react-scripts eject",
+ "first-release": "standard-version --first-release",
+ "prerelease": "standard-version"
},
"eslintConfig": {
"extends": "react-app"
@@ -31,5 +58,9 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "redux-devtools-extension": "^2.13.8",
+ "standard-version": "^9.3.0"
}
}
diff --git a/public/index.html b/public/index.html
index aa069f2..5a896f4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- React App
+ React App Template
You need to enable JavaScript to run this app.
diff --git a/src/App.js b/src/App.js
index 596f78f..0b77566 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,26 +1,30 @@
import React from 'react';
-import logo from './logo.svg';
+import { connect } from 'react-redux';
+import { useRoutes } from 'hookrouter';
+import { IntlProvider } from 'react-intl';
+import en from './translations/en.json';
+import vi from './translations/vi.json';
+import routes from './router';
+import NoPageFound from './pages/NoPageFound/NoPageFound';
import './App.scss';
-function App() {
+const messages = { en, vi };
+
+const App = props => {
+ console.log('This console will be remove in Production mode');
+ const routeResult = useRoutes(routes);
+ const language = props.languageTrans;
+
return (
-
+
+ {routeResult ||
+
);
-}
+};
-export default App;
+export default connect(
+ state => ({
+ languageTrans: state.system.languageTrans
+ }),
+ {}
+)(App);
diff --git a/src/App.scss b/src/App.scss
index f2b178d..b347932 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,39 +1,5 @@
-@import './scss/variables.scss';
-
-.App {
- text-align: center;
- .header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
- .logo {
- height: 40vmin;
- pointer-events: none;
- }
- .link {
- color: $primaryColor;
- }
- }
-}
-@media (prefers-reduced-motion: no-preference) {
- .App {
- .header {
- .logo {
- animation: App-logo-spin infinite 20s linear;
- }
- }
- }
-}
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.app-container {
+ max-width: 80%;
+ margin: 0 auto;
+ color: #252525;
}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 4db7ebc..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- const { getByText } = render(
+
+ EN
+
+
+ VI
+
+
+ );
+};
+
+export default connect(
+ state => ({
+ languageTrans: state.system.languageTrans
+ }),
+ {
+ actionChangeLanguage
+ }
+)(ChangeLanguage);
diff --git a/src/components/ChangeLanguage/ChangeLanguage.scss b/src/components/ChangeLanguage/ChangeLanguage.scss
new file mode 100644
index 0000000..07c4a3d
--- /dev/null
+++ b/src/components/ChangeLanguage/ChangeLanguage.scss
@@ -0,0 +1,24 @@
+@import "../../scss/variables.scss";
+
+.change-language-container {
+ display: inline-block;
+ .item {
+ line-height: 1;
+ padding: 0;
+ font-weight: 600;
+ cursor: default;
+ &:not(.active):hover {
+ cursor: pointer;
+ }
+ &.active {
+ color: $primaryColor;
+ }
+ &.left {
+ padding-right: 15px;
+ border-right: 1px solid #999;
+ }
+ &.right {
+ padding-left: 15px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
new file mode 100644
index 0000000..82684fd
--- /dev/null
+++ b/src/components/Navigation/Navigation.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { A } from 'hookrouter';
+import { FormattedMessage } from 'react-intl';
+import ChangeLanguage from '../ChangeLanguage/ChangeLanguage';
+import './Navigation.scss';
+
+const Item = ({ link, text }) => (
+
+ {text}
+
+);
+
+const Menu = () => (
+
+
+);
+
+const Navigation = () => {
+ return (
+
+
{props.children} ;
+};
+
+export default Title;
\ No newline at end of file
diff --git a/src/components/Title/Title.scss b/src/components/Title/Title.scss
new file mode 100644
index 0000000..bf7b4e4
--- /dev/null
+++ b/src/components/Title/Title.scss
@@ -0,0 +1,3 @@
+.title-container {
+ text-transform: uppercase;
+}
diff --git a/src/constants/actionTypes.js b/src/constants/actionTypes.js
new file mode 100644
index 0000000..cf4f168
--- /dev/null
+++ b/src/constants/actionTypes.js
@@ -0,0 +1,3 @@
+export const systemActions = {
+ CHANGE_LANGUAGE: 'CHANGE_LANGUAGE'
+};
diff --git a/src/constants/configs.js b/src/constants/configs.js
new file mode 100644
index 0000000..c96d1e9
--- /dev/null
+++ b/src/constants/configs.js
@@ -0,0 +1,30 @@
+const projectEnv = 'local';
+// const projectEnv = 'dev';
+// const projectEnv = 'stg';
+// const projectEnv = 'prod';
+
+let domain, baseAPI;
+
+switch (projectEnv) {
+ case 'dev':
+ domain = 'your-dev-domain';
+ baseAPI = 'your-dev-api-url';
+ break;
+ case 'stg':
+ domain = 'your-stg-domain';
+ baseAPI = 'your-stg-api-url';
+ break;
+ case 'prod':
+ domain = 'your-prod-domain';
+ baseAPI = 'your-prod-api-url';
+ break;
+ default:
+ domain = 'localhost'; // local
+ baseAPI = 'https://jsonplaceholder.typicode.com/';
+ break;
+}
+
+export default {
+ domain,
+ baseAPI
+};
diff --git a/src/constants/cookies.js b/src/constants/cookies.js
new file mode 100644
index 0000000..7a202a0
--- /dev/null
+++ b/src/constants/cookies.js
@@ -0,0 +1,2 @@
+export const LANGUAGE_TRANS = 'language_trans';
+export const ACCESS_TOKEN = 'access_token';
diff --git a/src/helpers/api.js b/src/helpers/api.js
new file mode 100644
index 0000000..aeb0f92
--- /dev/null
+++ b/src/helpers/api.js
@@ -0,0 +1,33 @@
+import axios from 'axios';
+import Cookie from 'js-cookie';
+import Config from '../constants/configs';
+import { ACCESS_TOKEN } from '../constants/cookies';
+
+const api = axios.create({
+ baseURL: Config.baseAPI,
+ timeout: 1000
+});
+
+api.interceptors.request.use(
+ config => {
+ if (config.baseURL === Config.baseAPI && !config.headers.Authorization) {
+ const token = Cookie.get(ACCESS_TOKEN);
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`;
+ }
+ }
+ return config;
+ },
+ error => Promise.reject(error)
+);
+
+api.interceptors.response.use(
+ response => {
+ // Any status code that lie within the range of 2xx cause this function to trigger
+ // Do something with response data
+ return response;
+ },
+ error => Promise.reject(error)
+);
+
+export default api;
diff --git a/src/index.js b/src/index.js
index 8fec994..357b17e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,19 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import configureStore from './store/configureStore';
import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
-ReactDOM.render(
+ ,
+ document.getElementById('root')
+);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c10..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
diff --git a/src/pages/Blog/Blog.js b/src/pages/Blog/Blog.js
new file mode 100644
index 0000000..45efbed
--- /dev/null
+++ b/src/pages/Blog/Blog.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Navigation from '../../components/Navigation/Navigation';
+import Title from '../../components/Title/Title';
+import './Blog.scss';
+
+const Blog = ({ blogId }) => {
+ return (
+
+
+ <FormattedMessage id="IDS_BLOG_PAGE_WITH_ID" values={{ blogId }} />
+
+
+ );
+};
+
+export default Blog;
diff --git a/src/pages/Blog/Blog.scss b/src/pages/Blog/Blog.scss
new file mode 100644
index 0000000..7b2cd1e
--- /dev/null
+++ b/src/pages/Blog/Blog.scss
@@ -0,0 +1,2 @@
+.blog-container {
+}
diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
new file mode 100644
index 0000000..2bf003d
--- /dev/null
+++ b/src/pages/HomePage/HomePage.js
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Navigation from '../../components/Navigation/Navigation';
+import Title from '../../components/Title/Title';
+import api from '../../helpers/api';
+import './HomePage.scss';
+
+const HomePage = () => {
+ const testApi = async () => {
+ console.log('test api');
+ try {
+ const { data } = await api.request({
+ method: 'get',
+ url: 'users/1'
+ });
+ console.log({ data });
+ } catch (error) {
+ console.log('error to get users: ', error);
+ }
+ };
+
+ useEffect(() => {
+ testApi();
+ }, []);
+
+ return (
+
+
+ <FormattedMessage id="IDS_HOME_PAGE" />
+
+
+ );
+};
+
+export default HomePage;
diff --git a/src/pages/HomePage/HomePage.scss b/src/pages/HomePage/HomePage.scss
new file mode 100644
index 0000000..ce836f7
--- /dev/null
+++ b/src/pages/HomePage/HomePage.scss
@@ -0,0 +1,2 @@
+.home-page-container {
+}
diff --git a/src/pages/NoPageFound/NoPageFound.js b/src/pages/NoPageFound/NoPageFound.js
new file mode 100644
index 0000000..0e287c3
--- /dev/null
+++ b/src/pages/NoPageFound/NoPageFound.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Navigation from '../../components/Navigation/Navigation';
+import Title from '../../components/Title/Title';
+import './NoPageFound.scss';
+
+const NoPageFound = () => {
+ return (
+
+
+ <FormattedMessage id="IDS_NO_PAGE_FOUND" />
+
+
+ );
+};
+
+export default NoPageFound;
diff --git a/src/pages/NoPageFound/NoPageFound.scss b/src/pages/NoPageFound/NoPageFound.scss
new file mode 100644
index 0000000..fa98d6a
--- /dev/null
+++ b/src/pages/NoPageFound/NoPageFound.scss
@@ -0,0 +1,2 @@
+.no-page-found-container {
+}
diff --git a/src/pages/PrivacyPolicy/PrivacyPolicy.js b/src/pages/PrivacyPolicy/PrivacyPolicy.js
new file mode 100644
index 0000000..0f39a58
--- /dev/null
+++ b/src/pages/PrivacyPolicy/PrivacyPolicy.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Navigation from '../../components/Navigation/Navigation';
+import Title from '../../components/Title/Title';
+import './PrivacyPolicy.scss';
+
+const PrivacyPolicy = () => {
+ return (
+
+
+ <FormattedMessage id="IDS_PRIVACY_POLICY" />
+
+
+ );
+};
+
+export default PrivacyPolicy;
diff --git a/src/pages/PrivacyPolicy/PrivacyPolicy.scss b/src/pages/PrivacyPolicy/PrivacyPolicy.scss
new file mode 100644
index 0000000..2082762
--- /dev/null
+++ b/src/pages/PrivacyPolicy/PrivacyPolicy.scss
@@ -0,0 +1,2 @@
+.privacy-policy-container {
+}
diff --git a/src/pages/TermsOfUse/TermsOfUse.js b/src/pages/TermsOfUse/TermsOfUse.js
new file mode 100644
index 0000000..b282809
--- /dev/null
+++ b/src/pages/TermsOfUse/TermsOfUse.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Navigation from '../../components/Navigation/Navigation';
+import Title from '../../components/Title/Title';
+import './TermsOfUse.scss';
+
+const TermsOfUse = () => {
+ return (
+
+
+ <FormattedMessage id="IDS_TERMS_OF_USE" />
+
+
+ );
+};
+
+export default TermsOfUse;
diff --git a/src/pages/TermsOfUse/TermsOfUse.scss b/src/pages/TermsOfUse/TermsOfUse.scss
new file mode 100644
index 0000000..673ac40
--- /dev/null
+++ b/src/pages/TermsOfUse/TermsOfUse.scss
@@ -0,0 +1,2 @@
+.terms-of-use-container {
+}
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..72c3175
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import HomePage from './pages/HomePage/HomePage';
+import PrivacyPolicy from './pages/PrivacyPolicy/PrivacyPolicy';
+import TermsOfUse from './pages/TermsOfUse/TermsOfUse';
+import Blog from './pages/Blog/Blog';
+
+const routes = {
+ '/': () => 
-