56 |
115 |
57 |
59 |
114 |
21 |
31 | );
32 | })
33 | );
34 | };
35 |
36 | export const AppAlert = connector(_AppAlert);
37 |
--------------------------------------------------------------------------------
/src/components/Auth/Auth.actions.ts:
--------------------------------------------------------------------------------
1 | import * as types from './Auth.constants';
2 |
3 | export const loginSuccess = (payload: IUser) => ({
4 | type: types.LOGIN_SUCCESS,
5 | payload,
6 | });
7 |
8 | export const loginFailed = () => ({
9 | type: types.LOGIN_FAILED,
10 | });
11 |
12 | export const userLoaded = payload => ({
13 | type: types.USER_LOADED,
14 | payload,
15 | });
16 |
17 | export const authError = () => ({
18 | type: types.AUTH_ERROR,
19 | });
20 |
21 | export const logoutSuccess = () => ({
22 | type: types.LOGOUT,
23 | });
24 |
25 | export const registerSuccess = payload => ({
26 | type: types.REGISTER_SUCCESS,
27 | payload,
28 | });
29 |
30 | export const registerFailed = () => ({
31 | type: types.REGISTER_FAILED,
32 | });
33 |
--------------------------------------------------------------------------------
/src/components/Auth/Auth.constants.ts:
--------------------------------------------------------------------------------
1 | export const LOGIN_SUCCESS = 'views/auth/LOGIN_SUCCESS';
2 | export const LOGIN_FAILED = 'views/auth/LOGIN_FAILED';
3 | export const USER_LOADED = 'views/auth/USER_LOADED';
4 | export const AUTH_ERROR = 'views/auth/AUTH_ERROR';
5 | export const LOGOUT = 'views/auth/LOGOUT';
6 | export const REGISTER_SUCCESS = 'views/auth/REGISTER_SUCCESS';
7 | export const REGISTER_FAILED = 'views/auth/REGISTER_FAIL';
8 |
--------------------------------------------------------------------------------
/src/components/Auth/Auth.reducers.ts:
--------------------------------------------------------------------------------
1 | import * as types from './Auth.constants';
2 | import produce from 'immer';
3 |
4 | let userType: IUser = {
5 | id: '',
6 | username: '',
7 | email: undefined,
8 | password: '',
9 | accessToken: '',
10 | };
11 | const initialState = {
12 | loading: true,
13 | isAuthenticated: false,
14 | token: null,
15 | user: userType,
16 | };
17 |
18 | export const authReducer = (state = initialState, action: ActionRedux) =>
19 | produce(state, draft => {
20 | switch (action.type) {
21 | case types.USER_LOADED:
22 | draft.isAuthenticated = true;
23 | draft.loading = false;
24 | draft.token = action.payload.id;
25 | draft.user = action.payload;
26 | break;
27 | case types.LOGIN_SUCCESS:
28 | case types.REGISTER_SUCCESS:
29 | localStorage.setItem('user', JSON.stringify(action.payload));
30 | draft.isAuthenticated = true;
31 | draft.loading = false;
32 | draft.user = action.payload;
33 | break;
34 | case types.LOGIN_FAILED:
35 | case types.AUTH_ERROR:
36 | case types.REGISTER_FAILED:
37 | localStorage.removeItem('user');
38 | draft.token = null;
39 | draft.isAuthenticated = false;
40 | draft.loading = false;
41 | break;
42 | case types.LOGOUT:
43 | localStorage.removeItem('user');
44 | draft.token = null;
45 | draft.isAuthenticated = false;
46 | draft.loading = false;
47 | break;
48 |
49 | default:
50 | return state;
51 | }
52 | });
53 |
--------------------------------------------------------------------------------
/src/components/Auth/Auth.thunks.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { URL } from 'src/constants/urls';
3 | import * as actions from './Auth.actions';
4 | import { v4 as uuid } from 'uuid';
5 | import { setAlert } from 'src/components/Alert/Alert.thunks';
6 | import { AlertTypes } from 'src/constants/alerts';
7 |
8 | export const loadUser = () => async dispatch => {
9 | const userJson = localStorage.getItem('user') || '{}';
10 | const user = JSON.parse(userJson) as IUser;
11 | const id = user.id;
12 | if (!id) {
13 | dispatch(actions.authError());
14 | dispatch(setAlert({ msg: 'Cant not load user!', type: AlertTypes.ERROR }));
15 | return;
16 | }
17 | try {
18 | const res = await axios.get(`${URL.baseAPIUrl}/api/users/${id}`);
19 | if (res) {
20 | return dispatch(actions.userLoaded(res.data));
21 | }
22 | dispatch(actions.authError());
23 | dispatch(setAlert({ msg: 'Get user error!', type: AlertTypes.ERROR }));
24 | return;
25 | } catch (error) {
26 | dispatch(actions.authError());
27 | dispatch(setAlert({ msg: error.message, type: AlertTypes.ERROR }));
28 | return;
29 | }
30 | };
31 |
32 | export const login = (payload: ReqLogin) => async dispatch => {
33 | const { username, password } = payload;
34 | try {
35 | const res = await axios.get(`${URL.baseAPIUrl}/api/users`);
36 | const allUsers = res.data;
37 |
38 | let user = allUsers.filter(x => x.username === username)[0];
39 | if (user && user.password === password) {
40 | dispatch(actions.loginSuccess(user));
41 | dispatch(
42 | setAlert({
43 | msg: 'You are logged in!',
44 | type: AlertTypes.SUCCESS,
45 | }),
46 | );
47 | dispatch(loadUser());
48 | return;
49 | }
50 | dispatch(
51 | setAlert({
52 | msg: 'Invalid credentials',
53 | type: AlertTypes.ERROR,
54 | }),
55 | );
56 | return dispatch(actions.loginFailed());
57 | } catch (error) {
58 | dispatch(
59 | setAlert({
60 | msg: 'Invalid credentials',
61 | type: AlertTypes.ERROR,
62 | }),
63 | );
64 | return dispatch(actions.loginFailed());
65 | }
66 | };
67 |
68 | export const register = (payload: ReqLogin) => async dispatch => {
69 | try {
70 | const id = uuid();
71 | const accessToken = id;
72 |
73 | const newUser = { ...payload, id, accessToken };
74 | await axios.post(`${URL.baseAPIUrl}/api/users`, newUser);
75 | dispatch(actions.registerSuccess(newUser));
76 | dispatch(
77 | setAlert({
78 | msg: 'Register successfully!',
79 | type: AlertTypes.SUCCESS,
80 | }),
81 | );
82 | dispatch(loadUser());
83 | } catch (error) {
84 | return dispatch(actions.registerFailed());
85 | }
86 | };
87 | export const logout = () => async dispatch => {
88 | dispatch(actions.logoutSuccess());
89 | dispatch(
90 | setAlert({
91 | msg: 'You are logged out!',
92 | type: AlertTypes.WARNING,
93 | }),
94 | );
95 | };
96 |
--------------------------------------------------------------------------------
/src/components/Auth/Login.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Form, Input, Button, Checkbox, message } from 'antd';
3 | import { UserOutlined, LockOutlined } from '@ant-design/icons';
4 | import { connect, ConnectedProps } from 'react-redux';
5 | import { Link, Redirect } from 'react-router-dom';
6 | import { login } from './Auth.thunks';
7 | import { PATH } from 'src/constants/paths';
8 |
9 | const mapStateToProps = (state: AppState) => ({
10 | isAuthenticated: state.auth.isAuthenticated,
11 | });
12 | const mapDispatchToProps = {
13 | login,
14 | };
15 | const connector = connect(mapStateToProps, mapDispatchToProps);
16 | interface Props extends ConnectedProps
22 |
30 |
37 |
98 | );
99 | };
100 | const Login = connector(_Login);
101 | export { Login };
102 |
--------------------------------------------------------------------------------
/src/components/Auth/Profile.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect, ConnectedProps } from 'react-redux';
3 | import { Card, Avatar, Row, Col } from 'antd';
4 | import {
5 | EditOutlined,
6 | EllipsisOutlined,
7 | SettingOutlined,
8 | } from '@ant-design/icons';
9 | import { useHistory } from 'react-router-dom';
10 | import { PATH } from 'src/constants/paths';
11 | const { Meta } = Card;
12 |
13 | const mapStateToProps = (state: AppState) => ({
14 | user: state.auth.user,
15 | });
16 |
17 | const mapDispatchToProps = {};
18 |
19 | const connector = connect(mapStateToProps, mapDispatchToProps);
20 | interface Props extends ConnectedProps
38 |
39 |
45 |
96 |
97 |
39 | 
43 | LOGIN
44 |
45 |
96 |
29 |
30 | onSetting()} />,
42 |
77 | ,
78 |
79 | );
80 | };
81 |
82 | export const Profile = connector(_Profile);
83 |
--------------------------------------------------------------------------------
/src/components/Auth/Register.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Form, Input, Button } from 'antd';
3 | import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
4 | import { connect, ConnectedProps } from 'react-redux';
5 | import { Link, Redirect } from 'react-router-dom';
6 | import { register } from './Auth.thunks';
7 | import { PATH } from 'src/constants/paths';
8 |
9 | const mapStateToProps = (state: AppState) => ({
10 | isAuthenticated: state.auth.isAuthenticated,
11 | });
12 | const mapDispatchToProps = {
13 | register,
14 | };
15 | const connector = connect(mapStateToProps, mapDispatchToProps);
16 | interface Props extends ConnectedProps
54 |
55 |
56 |
64 |
65 |
73 |
74 |
75 |
76 |
40 |
103 | );
104 | };
105 | const Register = connector(_Register);
106 | export { Register };
107 |
--------------------------------------------------------------------------------
/src/components/Error/404.tsx:
--------------------------------------------------------------------------------
1 | import { ExclamationOutlined } from '@ant-design/icons';
2 | import { Button } from 'antd';
3 | import React from 'react';
4 | import { useHistory } from 'react-router-dom';
5 |
6 | export const NotFound = () => {
7 | const history = useHistory();
8 | const goBack = () => {
9 | history.goBack();
10 | };
11 | return (
12 |
41 |
42 |
48 |
101 |
102 |
42 |
46 | SIGNUP
47 |
48 |
101 |
13 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | GithubOutlined,
4 | LinkedinOutlined,
5 | TwitterOutlined,
6 | UpCircleOutlined,
7 | } from '@ant-design/icons';
8 | import { BackTop } from 'antd';
9 |
10 | export const AppFooter = () => {
11 | return (
12 |
14 |
25 |
15 |
16 |
19 |
24 |
16 |
19 | Sorry, this page does not exist
20 | 23 |
13 |
55 |
56 | );
57 | };
58 |
--------------------------------------------------------------------------------
/src/components/Header/LeftMenu.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NavLink } from 'react-router-dom';
3 | import { Menu, Grid } from 'antd';
4 |
5 | const { SubMenu, ItemGroup: MenuItemGroup } = Menu;
6 | const { useBreakpoint } = Grid;
7 |
8 | export const LeftMenu = () => {
9 | const { md } = useBreakpoint();
10 | return (
11 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/components/Header/RightMenu.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Menu, Grid } from 'antd';
3 | import { NavLink } from 'react-router-dom';
4 | import { LoginOutlined } from '@ant-design/icons';
5 | import { logout } from 'src/components/Auth/Auth.thunks';
6 | import { connect, ConnectedProps } from 'react-redux';
7 | import { PATH } from 'src/constants/paths';
8 |
9 | const { useBreakpoint } = Grid;
10 |
11 | const mapStateToProps = (state: AppState) => ({
12 | isAuthenticated: state.auth.isAuthenticated,
13 | user: state.auth.user as IUser,
14 | });
15 | const mapDispatchToProps = {
16 | logout,
17 | };
18 |
19 | const connector = connect(mapStateToProps, mapDispatchToProps);
20 | interface Props extends ConnectedProps
17 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/components/Home/AuthLinks.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ProductList } from 'src/components/Products/ProductList';
3 |
4 | export const AuthLinks = () => {
5 | return
18 |
52 |
53 |
9 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect, ConnectedProps } from 'react-redux';
3 | import { GuestLinks } from './GuestLinks';
4 | import { AuthLinks } from './AuthLinks';
5 |
6 | const mapStateToProps = (state: AppState) => ({
7 | loading: state.auth.loading,
8 | isAuthenticated: state.auth.isAuthenticated,
9 | });
10 | const mapDispatchToProps = {};
11 |
12 | const connector = connect(mapStateToProps, mapDispatchToProps);
13 | interface Props extends ConnectedProps
10 |
31 |
11 |
30 |
12 |
29 | React Typescript Template
13 |Please login with account & password below.
14 |15 | Account: 16 | tester 17 |
18 |19 | Password: 123456 20 |
21 |
22 |
27 |
28 |
10 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/components/Products/Product.actions.ts:
--------------------------------------------------------------------------------
1 | import * as types from './Product.constants';
2 |
3 | export const getProductsSuccess = (payload: Product[]) => ({
4 | type: types.GET_PRODUCTS,
5 | payload,
6 | });
7 |
8 | export const getProductSuccess = (payload: Product) => ({
9 | type: types.GET_PRODUCT,
10 | payload,
11 | });
12 |
13 | export const createProductSuccess = (payload: Product) => ({
14 | type: types.CREATE_PRODUCT,
15 | payload,
16 | });
17 |
18 | export const editProductSuccess = (payload: Product) => ({
19 | type: types.EDIT_PRODUCT,
20 | payload,
21 | });
22 |
23 | export const updateProductSuccess = (payload: Product) => ({
24 | type: types.UPDATE_PRODUCT,
25 | payload,
26 | });
27 |
28 | export const deleteProductSuccess = (payload: string) => ({
29 | type: types.DELETE_PRODUCT,
30 | payload,
31 | });
32 |
33 | export const productError = (payload: ProductError) => ({
34 | type: types.PRODUCT_ERROR,
35 | payload,
36 | });
37 |
38 | export const clearProductSuccess = () => ({
39 | type: types.CLEAR_PRODUCT,
40 | });
41 |
--------------------------------------------------------------------------------
/src/components/Products/Product.constants.ts:
--------------------------------------------------------------------------------
1 | export const GET_PRODUCTS = 'views/Product/GET_PRODUCTS';
2 | export const GET_PRODUCT = 'views/Product/GET_PRODUCT';
3 | export const PRODUCT_ERROR = 'views/Product/PRODUCT_ERROR';
4 | export const CREATE_PRODUCT = 'views/Product/CREATE_PRODUCT';
5 | export const EDIT_PRODUCT = 'views/Product/EDIT_PRODUCT';
6 | export const UPDATE_PRODUCT = 'views/Product/UPDATE_PRODUCT';
7 | export const DELETE_PRODUCT = 'views/Product/DELETE_PRODUCT';
8 | export const CLEAR_PRODUCT = 'views/Product/CLEAR_PRODUCT';
9 |
--------------------------------------------------------------------------------
/src/components/Products/Product.reducers.ts:
--------------------------------------------------------------------------------
1 | import * as types from './Product.constants';
2 | import produce from 'immer';
3 |
4 | const products = [] as Product[];
5 |
6 | const initialState = {
7 | loading: true,
8 | error: {},
9 | product: null,
10 | products: products,
11 | };
12 |
13 | export const productReducer = (state = initialState, action) =>
14 | produce(state, draft => {
15 | const { type, payload } = action;
16 | switch (type) {
17 | case types.GET_PRODUCTS:
18 | draft.products = payload;
19 | draft.loading = false;
20 | break;
21 | case types.GET_PRODUCT:
22 | draft.product = payload;
23 | draft.loading = false;
24 | break;
25 | case types.CREATE_PRODUCT:
26 | draft.products = [payload, ...state.products];
27 | draft.loading = false;
28 | break;
29 | case types.EDIT_PRODUCT:
30 | draft.loading = false;
31 | draft.product = payload;
32 | break;
33 | case types.UPDATE_PRODUCT:
34 | draft.products = state.products.map(x =>
35 | x.id === payload.id ? { ...payload } : x,
36 | );
37 | draft.loading = false;
38 | break;
39 | case types.DELETE_PRODUCT:
40 | draft.products = state.products.filter(p => p.id !== payload);
41 | draft.loading = false;
42 | break;
43 | case types.PRODUCT_ERROR:
44 | draft.error = payload;
45 | draft.loading = false;
46 | draft.products = [];
47 | draft.product = null;
48 | break;
49 |
50 | case types.CLEAR_PRODUCT:
51 | draft.product = null;
52 | draft.loading = false;
53 | break;
54 | default:
55 | return state;
56 | }
57 | });
58 |
--------------------------------------------------------------------------------
/src/components/Products/Product.thunks.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { URL } from 'src/constants/urls';
3 | import * as actions from './Product.actions';
4 | import { v4 as uuid } from 'uuid';
5 | import { setAlert } from 'src/components/Alert/Alert.thunks';
6 | import { AlertTypes } from 'src/constants/alerts';
7 |
8 | const dispatchError = (dispatch, error) => {
9 | const payload = {
10 | msg: error.response?.statusText,
11 | status: error.response?.status,
12 | };
13 | dispatch(actions.productError(payload));
14 | dispatch(
15 | setAlert({
16 | msg: error.response?.statusText,
17 | type: AlertTypes.ERROR,
18 | }),
19 | );
20 | };
21 |
22 | export const getProducts = () => async dispatch => {
23 | try {
24 | const res = await axios.get(`${URL.baseAPIUrl}/api/products`);
25 | const products = res.data;
26 | dispatch(actions.getProductsSuccess(products));
27 | } catch (error) {
28 | dispatchError(dispatch, error);
29 | }
30 | };
31 |
32 | export const getProduct = id => async dispatch => {
33 | try {
34 | const res = await axios.get(`${URL.baseAPIUrl}/api/products/${id}`);
35 | const product = res.data as Product;
36 | dispatch(actions.getProductSuccess(product));
37 | } catch (error) {
38 | dispatchError(dispatch, error);
39 | }
40 | };
41 | export const clearProduct = () => dispatch => {
42 | dispatch(actions.clearProductSuccess());
43 | };
44 |
45 | export const createProduct = (formData: ProductForm) => async dispatch => {
46 | try {
47 | const img_default = '/images/image-default.jpg';
48 | const newProduct = {
49 | ...formData,
50 | id: uuid(),
51 | image_url: formData.image_url || img_default,
52 | };
53 | await axios.post(`${URL.baseAPIUrl}/api/products`, newProduct);
54 | dispatch(actions.createProductSuccess(newProduct));
55 | dispatch(
56 | setAlert({
57 | msg: 'Create product successfully',
58 | type: AlertTypes.SUCCESS,
59 | }),
60 | );
61 | dispatch(getProducts());
62 | } catch (error) {
63 | dispatchError(dispatch, error);
64 | }
65 | };
66 |
67 | export const deleteProduct = (id: string) => async dispatch => {
68 | try {
69 | await axios.delete(`${URL.baseAPIUrl}/api/products/${id}`);
70 | dispatch(actions.deleteProductSuccess(id));
71 | dispatch(
72 | setAlert({
73 | msg: 'Delete product successfully',
74 | type: AlertTypes.SUCCESS,
75 | }),
76 | );
77 | dispatch(getProducts());
78 | } catch (error) {
79 | dispatchError(dispatch, error);
80 | }
81 | };
82 |
83 | export const editProduct = (id: string) => async dispatch => {
84 | try {
85 | const res = await axios.get(`${URL.baseAPIUrl}/api/products/${id}`);
86 | const product = res.data as Product;
87 | dispatch(actions.editProductSuccess(product));
88 | } catch (error) {
89 | dispatchError(dispatch, error);
90 | }
91 | };
92 |
93 | export const updateProduct = (product: Product) => async dispatch => {
94 | try {
95 | await axios.put(`${URL.baseAPIUrl}/api/products/${product.id}`, product);
96 | dispatch(actions.updateProductSuccess(product));
97 | dispatch(
98 | setAlert({
99 | msg: 'Update product successfully',
100 | type: AlertTypes.SUCCESS,
101 | }),
102 | );
103 | dispatch(getProducts());
104 | } catch (error) {
105 | dispatchError(dispatch, error);
106 | }
107 | };
108 |
--------------------------------------------------------------------------------
/src/components/Products/ProductForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { connect, ConnectedProps } from 'react-redux';
3 | import { Form, Input, Button, Select } from 'antd';
4 | import { PhoneBrand } from 'src/constants/products';
5 | import { useHistory, useParams } from 'react-router-dom';
6 |
7 | import { createProduct, editProduct, updateProduct } from './Product.thunks';
8 | import { PATH } from 'src/constants/paths';
9 | const { Option } = Select;
10 |
11 | const mapStateToProps = (state: AppState) => ({
12 | products: state.products.products,
13 | product: state.products.product,
14 | });
15 | const mapDispatchToProps = { createProduct, editProduct, updateProduct };
16 | const connector = connect(mapStateToProps, mapDispatchToProps);
17 | interface Props extends ConnectedProps
11 |
13 |
54 |
117 | );
118 | };
119 |
120 | export const ProductForm = connector(_ProductForm);
121 |
--------------------------------------------------------------------------------
/src/components/Products/ProductItem.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { connect, ConnectedProps } from 'react-redux';
3 | import { getProduct, deleteProduct } from './Product.thunks';
4 | import { useParams } from 'react-router-dom';
5 | import { Row, Col, Image, Button } from 'antd';
6 | import { NotFound } from 'src/components/Error/404';
7 | import { useHistory } from 'react-router-dom';
8 | import {
9 | ArrowLeftOutlined,
10 | DeleteOutlined,
11 | EditOutlined,
12 | } from '@ant-design/icons';
13 | import { PATH } from 'src/constants/paths';
14 |
15 | const mapStateToProps = (state: AppState) => ({
16 | product: state.products.product,
17 | });
18 | const mapDispatchToProps = {
19 | getProduct,
20 | deleteProduct,
21 | };
22 |
23 | const connector = connect(mapStateToProps, mapDispatchToProps);
24 | interface Props extends ConnectedProps
55 |
116 |
45 |
77 | );
78 | } else {
79 | return
46 |
47 |
60 |
61 |
75 |
76 | 52 | Name:{' '} 53 | {item.name} 54 |
55 |56 | Brand: {item.brand} 57 |
58 | 59 |
106 |
128 | );
129 | };
130 |
131 | export const ProductList = connector(_ProductList);
132 |
--------------------------------------------------------------------------------
/src/components/StaticPages/About.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const About = () => {
4 | return (
5 |
107 |
127 |
108 |
110 | All Smartphones available
109 |
111 |
112 |
119 |
120 |
121 |
123 |
124 |
125 |
126 |
6 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/StaticPages/Contact.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Form, Input, Button, Checkbox } from 'antd';
3 | const { TextArea } = Input;
4 |
5 | export const Contact = () => {
6 | return (
7 |
7 |
39 |
8 |
10 | About Us
9 |
11 |
38 | 12 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque 13 | cupiditate omnis eius totam aperiam? Illo eius repudiandae nostrum 14 | iste dignissimos ad molestias facere atque, itaque placeat dolores 15 | dolorum doloremque? Sint. 16 |
17 |18 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit 19 | impedit sapiente tempore veritatis neque minima laudantium eius 20 | magni aut aliquid esse sequi, hic delectus nihil temporibus quas 21 | nobis porro exercitationem? Repellendus ipsa animi enim id sint 22 | ullam beatae eius repudiandae consequuntur nisi, eum quia, ad iure 23 | similique, tenetur cum voluptatibus sit natus rem eos iusto quam 24 | eveniet et quidem. Est distinctio minima sequi quas provident hic 25 | nulla maiores quam quaerat. Corrupti unde illum suscipit autem iure 26 | maxime dolorem magni ipsam! Ad officia veritatis aperiam nemo. 27 | Voluptas at nostrum molestias incidunt necessitatibus, sapiente 28 | numquam facere explicabo quos, eum cumque repellat quo. 29 |
30 |31 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet 32 | sunt ullam nesciunt beatae deleniti similique aliquam excepturi, 33 | minus nobis minima ex atque, quos veniam architecto doloribus maxime 34 | sapiente. Vel voluptatem pariatur delectus dolor quidem eveniet 35 | repellat facere tempora nisi. Ut! 36 |
37 |
8 |
84 | );
85 | };
86 |
--------------------------------------------------------------------------------
/src/components/StaticPages/Demo.option.1.tsx:
--------------------------------------------------------------------------------
1 | import { PlayCircleOutlined } from '@ant-design/icons';
2 | import { Button, Modal } from 'antd';
3 | import React, { useState } from 'react';
4 |
5 | export const DemoOption1 = () => {
6 | const [visible, setVisible] = useState(false);
7 | const showModal = e => {
8 | setVisible(true);
9 | };
10 | const handleCancel = e => {
11 | setVisible(false);
12 | };
13 | return (
14 |
9 |
83 |
10 |
82 |
11 |
14 |
81 | Get in Touch
12 |Dolore nam rerum obcaecati fugit odio nobis Molestiae rerum
13 |
15 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/StaticPages/Demo.option.2.tsx:
--------------------------------------------------------------------------------
1 | import { PlayCircleOutlined } from '@ant-design/icons';
2 | import { Button, Modal } from 'antd';
3 | import React, { useState } from 'react';
4 |
5 | export const DemoOption2 = () => {
6 | const [visible, setVisible] = useState(false);
7 | const showModal = e => {
8 | setVisible(true);
9 | };
10 | const handleCancel = e => {
11 | setVisible(false);
12 | };
13 | return (
14 |
16 |
47 |
17 | handleCancel(e)}
34 | footer={null}
35 | >
36 |
44 |
45 |
46 |
18 |
25 | Demo Option 1
19 |20 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Error 21 | nostrum est minima. Dicta, ipsam explicabo ipsum velit eligendi 22 | distinctio in! 23 |
24 |
26 |
29 |
30 |
15 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/StaticPages/Feature.option.1.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const FeatureOption1 = () => {
4 | return (
5 |
16 |
47 |
17 | handleCancel(e)}
34 | footer={null}
35 | >
36 |
44 |
45 |
46 |
18 |
25 | Demo Option 2
19 |20 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Error 21 | nostrum est minima. Dicta, ipsam explicabo ipsum velit eligendi 22 | distinctio in! 23 |
24 |
26 |
29 |
30 |
6 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/src/components/StaticPages/Feature.option.2.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const FeatureOption2 = () => {
4 | return (
5 |
7 |
35 |
8 |
10 | Feature Page - Option 1
9 |
11 |
34 | 12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum 13 | earum animi possimus, iusto consectetur vel accusantium ipsam beatae 14 | minus unde ipsum, cumque, perspiciatis rerum laborum! Accusamus 15 | magnam sequi, a in ab quam temporibus excepturi debitis soluta 16 | inventore error nihil minima consectetur aliquid, ullam quos. A quae 17 | iusto nulla culpa! Amet optio accusamus laborum similique incidunt 18 | totam nemo expedita odit saepe quisquam numquam nesciunt beatae 19 | repellat illo doloremque inventore quibusdam ut earum consequuntur 20 | enim sunt, sint dolore! Maxime provident maiores eos velit. Adipisci 21 | at asperiores ullam praesentium. Illum, temporibus libero. Cumque 22 | officia consectetur, dolores id natus dolorem recusandae sunt eaque 23 | quis. 24 |
25 |26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis 27 | blanditiis minima possimus quasi esse facere excepturi mollitia 28 | corrupti dicta praesentium sunt, saepe placeat aliquam, commodi 29 | magnam cumque temporibus corporis beatae? Doloribus voluptate 30 | dolorem saepe voluptatum culpa odit fugiat, sunt atque hic animi 31 | sequi cupiditate ad. Ratione omnis eos nesciunt. 32 |
33 |
6 |
58 | );
59 | };
60 |
--------------------------------------------------------------------------------
/src/constants/alerts.ts:
--------------------------------------------------------------------------------
1 | export enum AlertTypes {
2 | SUCCESS = 'success',
3 | ERROR = 'error',
4 | INFO = 'info',
5 | WARNING = 'warning',
6 | }
7 |
--------------------------------------------------------------------------------
/src/constants/paths.ts:
--------------------------------------------------------------------------------
1 | export const PATH = {
2 | HOME: '/',
3 | LOGIN: '/login',
4 | REGISTER: '/signup',
5 | CONTACT: '/contact',
6 | ABOUT: '/about',
7 | DEMO1: '/demo1',
8 | DEMO2: '/demo2',
9 | FEATURE1: '/feature1',
10 | FEATURE2: '/feature2',
11 | PROFILE: '/profile',
12 | PRODUCTS: '/products',
13 | PRODUCT_SHOW: '/products/:id',
14 | PRODUCT_NEW: '/products/new',
15 | PRODUCT_EDIT: '/products/:id/edit',
16 | };
17 |
--------------------------------------------------------------------------------
/src/constants/products.ts:
--------------------------------------------------------------------------------
1 | export enum PhoneBrand {
2 | APPLE,
3 | SAMSUNG,
4 | XIAOMI,
5 | HUEWEI,
6 | OTHERS,
7 | }
8 |
--------------------------------------------------------------------------------
/src/constants/urls.ts:
--------------------------------------------------------------------------------
1 | export const URL = {
2 | baseAPIUrl:
3 | process.env.REACT_APP_API_BASE_URL ||
4 | 'https://reactts-simple-server.herokuapp.com',
5 | };
6 |
--------------------------------------------------------------------------------
/src/hooks/usePrevious.tsx:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from 'react';
2 |
3 | export function usePrevious(value) {
4 | const ref = useRef();
5 | useEffect(() => {
6 | ref.current = value;
7 | });
8 | return ref.current;
9 | }
10 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import 'src/assets/scss/index.scss';
4 | import 'antd/dist/antd.css';
5 | import { App } from './App/App';
6 | import reportWebVitals from './reportWebVitals';
7 | import { Provider } from 'react-redux';
8 | import { store } from './store';
9 |
10 | ReactDOM.render(
11 |
7 |
57 |
8 |
10 | Service Page - Option 2
9 |
11 |
56 | 12 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque 13 | cupiditate omnis eius totam aperiam? Illo eius repudiandae nostrum 14 | iste dignissimos ad molestias facere atque, itaque placeat dolores 15 | dolorum doloremque? Sint. 16 |
17 |18 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni 19 | rerum aperiam aspernatur debitis expedita eligendi facere non! 20 | Quibusdam accusamus accusantium maiores nostrum amet, neque quod 21 | quae eos hic aliquid veniam mollitia delectus cum qui aliquam 22 | laboriosam voluptate natus dolores est? Molestias, quidem fugiat 23 | placeat expedita dignissimos unde illum inventore recusandae. 24 |
25 |26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, 27 | recusandae? 28 |
29 |30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ducimus 31 | voluptates odit cum illo suscipit voluptatem mollitia in laudantium 32 | natus. Tempore molestiae repudiandae beatae, numquam repellat, 33 | reprehenderit vero omnis consequuntur reiciendis voluptatibus quia 34 | placeat debitis quod iure ab praesentium doloremque ipsum aperiam 35 | eveniet soluta quisquam est quaerat error. Ad qui nulla, inventore 36 | similique animi numquam est soluta cupiditate suscipit! Ex id 37 | tempore pariatur aspernatur amet laborum et nisi! Architecto quidem 38 | ullam, tempore voluptate facere aliquam dicta error totam impedit, 39 | distinctio dolores, consectetur rerum pariatur molestiae 40 | perspiciatis! Obcaecati enim id sapiente impedit velit earum, 41 | adipisci dignissimos alias est quas odit nulla ad nam illum 42 | inventore veniam molestias quis quam consequatur! Alias similique 43 | quas possimus repellendus accusamus doloremque tempore quidem ipsum 44 | praesentium laborum laudantium nesciunt illum, sapiente minima esse 45 | amet libero temporibus cum optio et molestiae magnam neque facere 46 | earum? Maxime dolores autem ad, officia sint repellendus accusamus 47 | officiis iusto illo labore animi odio incidunt exercitationem 48 | blanditiis quod sequi, numquam voluptate adipisci, mollitia enim 49 | rem! Omnis eveniet odit mollitia maiores minus ratione deleniti 50 | pariatur quas fuga, ipsam doloremque voluptates fugiat nisi velit 51 | excepturi, ullam in laudantium facere impedit quidem dolorum ipsa 52 | exercitationem dolores! Excepturi earum vel natus rem culpa nihil, 53 | repudiandae velit. 54 |
55 |