=this._headers._headerList.length?{value:void 0,done:!0}:{value:this._headers._headerList[this._index++],done:!1}},y.prototype[Symbol.iterator]=function(){return this},v.prototype={arrayBuffer:function(){if(this.bodyUsed)return Promise.reject(TypeError());if(this.bodyUsed=!0,this._stream instanceof ArrayBuffer)return Promise.resolve(this._stream);var t=this._stream;return new Promise(function(e,r){var n=unescape(encodeURIComponent(t)).split("").map(function(t){return t.charCodeAt(0)});e(new Uint8Array(n).buffer)})},blob:function(){return this.bodyUsed?Promise.reject(TypeError()):(this.bodyUsed=!0,this._stream instanceof Blob?Promise.resolve(this._stream):Promise.resolve(new Blob([this._stream])))},formData:function(){return this.bodyUsed?Promise.reject(TypeError()):(this.bodyUsed=!0,this._stream instanceof FormData?Promise.resolve(this._stream):Promise.reject(Error("Not yet implemented")))},json:function(){if(this.bodyUsed)return Promise.reject(TypeError());this.bodyUsed=!0;var t=this;return new Promise(function(e,r){e(JSON.parse(t._stream))})},text:function(){return this.bodyUsed?Promise.reject(TypeError()):(this.bodyUsed=!0,Promise.resolve(String(this._stream)))}},d.prototype=v.prototype,m.prototype=v.prototype,m.redirect=function(){throw Error("Not supported")},"fetch"in t||(t.Headers=p,t.Request=d,t.Response=m,t.fetch=b)}(self);
4 |
--------------------------------------------------------------------------------
/packages/web/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miguelcast/cra-init-dashboard/52ef1e8832cfe0da798cec78e50406234f55eeac/packages/web/screenshot.png
--------------------------------------------------------------------------------
/packages/web/src/components/Auth/Login.js:
--------------------------------------------------------------------------------
1 | import { Button, Form, Icon, Input } from 'antd';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 | import { useTranslation } from 'react-i18next';
5 | import { Link } from 'react-router-dom';
6 | import { Title } from '../Shared';
7 |
8 | function Login(props) {
9 | const { loading } = props;
10 | const { getFieldDecorator } = props.form;
11 | const { t } = useTranslation();
12 | const handleSubmit = e => {
13 | e.preventDefault();
14 | props.form.validateFields((err, values) => {
15 | if (!err) {
16 | props.authentication(values.userName, values.password);
17 | }
18 | });
19 | };
20 |
21 | return (
22 |
65 | );
66 | }
67 |
68 | const formShape = {
69 | validateFields: PropTypes.func,
70 | getFieldDecorator: PropTypes.func,
71 | };
72 |
73 | Login.propTypes = {
74 | form: PropTypes.shape(formShape).isRequired,
75 | loading: PropTypes.bool,
76 | authentication: PropTypes.func,
77 | };
78 |
79 | export default Form.create({ name: 'normal_login' })(Login);
80 |
--------------------------------------------------------------------------------
/packages/web/src/components/Auth/Register.js:
--------------------------------------------------------------------------------
1 | import { Button, Form, Icon, Input } from 'antd';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 | import { useTranslation } from 'react-i18next';
5 | import { Title } from '../Shared';
6 |
7 | const formShape = {
8 | validateFields: PropTypes.func,
9 | getFieldDecorator: PropTypes.func,
10 | };
11 |
12 | function Register(props) {
13 | const { getFieldDecorator } = props.form;
14 | const { t } = useTranslation();
15 |
16 | const handleSubmit = e => {
17 | e.preventDefault();
18 | props.form.validateFields((err, values) => {
19 | if (!err) {
20 | console.log('Received values of form: ', values);
21 | }
22 | });
23 | };
24 |
25 | return (
26 |
75 | );
76 | }
77 |
78 | Register.propTypes = {
79 | form: PropTypes.shape(formShape).isRequired,
80 | };
81 |
82 | export default Form.create({ name: 'register' })(Register);
83 |
--------------------------------------------------------------------------------
/packages/web/src/components/Auth/hooks.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import store from '../../config/store';
3 |
4 | export function useAuthenticated() {
5 | const [auth, setAuth] = useState(store.getState().auth);
6 |
7 | useEffect(() => {
8 | const unsubscribe = store.subscribe(() => {
9 | const newAuth = store.getState().auth;
10 | if (auth !== newAuth) {
11 | setAuth(newAuth);
12 | }
13 | });
14 | return unsubscribe;
15 | }, [auth]);
16 | return { ...(auth || {}) };
17 | }
18 |
--------------------------------------------------------------------------------
/packages/web/src/components/Auth/index.js:
--------------------------------------------------------------------------------
1 | export { default as Login } from './Login';
2 | export { default as Register } from './Register';
3 | export { useAuthenticated } from './hooks';
4 |
--------------------------------------------------------------------------------
/packages/web/src/components/Layout/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon, Layout, Row, Col } from 'antd';
3 | import PropTypes from 'prop-types';
4 | import MenuHeader from './MenuHeader';
5 |
6 | const Header = ({ pathname, isCollapsed, showDrawer, drawerVisible }) => (
7 |
8 |
9 |
10 | {isCollapsed && (
11 |
16 | )}
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | );
26 |
27 | Header.propTypes = {
28 | pathname: PropTypes.string,
29 | isCollapsed: PropTypes.bool,
30 | drawerVisible: PropTypes.bool,
31 | showDrawer: PropTypes.func,
32 | };
33 |
34 | Header.defaultProps = {
35 | isCollapsed: false,
36 | drawerVisible: false,
37 | };
38 |
39 | export default Header;
40 |
--------------------------------------------------------------------------------
/packages/web/src/components/Layout/HeaderUser.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Avatar, Dropdown, Menu, Icon } from 'antd';
4 | import { connect } from 'react-redux';
5 | import { useTranslation } from 'react-i18next';
6 |
7 | const MenuDrop = ({ logout }) => {
8 | const { t } = useTranslation();
9 | return (
10 |
16 | );
17 | };
18 | MenuDrop.propTypes = {
19 | logout: PropTypes.func,
20 | };
21 |
22 | const HeaderUser = ({ logout, user }) => {
23 | return (
24 | }
26 | placement="bottomRight">
27 |
28 |
29 |
{user.name || user.username}
30 |
6 |
7 |
{text}
;
5 |
6 | Title.propTypes = {
7 | text: PropTypes.string.isRequired,
8 | };
9 |
10 | export default Title;
11 |
--------------------------------------------------------------------------------
/packages/web/src/components/Shared/index.js:
--------------------------------------------------------------------------------
1 | export { default as Title } from './Title';
2 | export { default as ChangeLanguage } from './ChangeLanguage';
3 |
--------------------------------------------------------------------------------
/packages/web/src/config/constants.js:
--------------------------------------------------------------------------------
1 | export const GUEST = 'guest';
2 | export const LOGGED = 'logged';
3 |
4 | export const URL_LOCALIZATION = '/locales/{{lng}}/{{ns}}.json';
5 | export const VERSION_LOCALIZATION = 5;
6 | export const TIME_CACHE_LOCALIZATION = 7 * 24 * 60 * 60 * 1000;
7 | export const LANGUAGES = {
8 | es: 'es',
9 | en: 'en',
10 | default: 'en',
11 | };
12 |
--------------------------------------------------------------------------------
/packages/web/src/config/cruds/user.js:
--------------------------------------------------------------------------------
1 | const user = {
2 | keyName: 'key',
3 | getList: { url: '/users' },
4 | getByKey: { url: '/user/{keyName}' },
5 | upsert: { url: '/postUser.json' },
6 | delete: { url: '/deleteUser.json' },
7 | fields: [
8 | {
9 | title: 'Name',
10 | key: 'name',
11 | sorter: true,
12 | filter: true,
13 | type: 'string',
14 | initialValue: 'My Name',
15 | rules: [
16 | { required: true, message: 'Is required!' },
17 | { type: 'string', message: 'Should be string!' },
18 | { max: 50, message: 'Max 50 characters!' },
19 | ],
20 | },
21 | {
22 | title: 'Age',
23 | key: 'age',
24 | sorter: true,
25 | filter: true,
26 | type: 'number',
27 | columnStyle: {
28 | align: 'right',
29 | width: 80,
30 | },
31 | rules: [{ type: 'integer', message: 'Should be integer!' }],
32 | },
33 | {
34 | title: 'Address',
35 | key: 'address',
36 | sorter: true,
37 | filter: true,
38 | hidden: ['column', 'form'],
39 | type: 'string',
40 | rules: [
41 | { required: true, message: 'Is required!' },
42 | { max: 150, message: 'Max 150 characters!' },
43 | ],
44 | },
45 | {
46 | title: 'Color',
47 | key: 'color',
48 | sorter: true,
49 | filter: true,
50 | type: 'select',
51 | options: {
52 | red: 'Red',
53 | green: 'Green',
54 | yellow: 'Yellow',
55 | black: 'Black',
56 | },
57 | rules: [{ required: true, message: 'Is required!' }],
58 | },
59 | {
60 | title: 'Country async load',
61 | key: 'country',
62 | columnKey: 'countryName',
63 | sorter: true,
64 | filter: true,
65 | type: 'select',
66 | options: {},
67 | configOptions: {
68 | url: '/countries',
69 | // { key: text }, mapper with loaded data
70 | map: item => ({ [item.key]: item.name }),
71 | // default get, you can use get or post;
72 | method: 'get',
73 | },
74 | dependencies: {
75 | fields: ['color'],
76 | onChange: () => ({
77 | disabled: false,
78 | }),
79 | },
80 | disabled: true,
81 | rules: [{ required: true, message: 'Is required!' }],
82 | },
83 | {
84 | title: 'Gender',
85 | key: 'gender',
86 | type: 'radio',
87 | sorter: true,
88 | filter: true,
89 | options: {
90 | male: 'Male',
91 | female: 'Female',
92 | },
93 | rules: [{ required: true, message: 'Is required!' }],
94 | },
95 | {
96 | title: 'Birthday',
97 | key: 'birthday',
98 | type: 'date',
99 | sorter: true,
100 | filter: true,
101 | },
102 | {
103 | title: 'Status',
104 | key: 'status',
105 | sorter: true,
106 | filter: true,
107 | type: 'bool',
108 | initialValue: true,
109 | options: {
110 | true: 'Active',
111 | false: 'Inactive',
112 | },
113 | },
114 | ],
115 | };
116 |
117 | export default user;
118 |
--------------------------------------------------------------------------------
/packages/web/src/config/localization/antdLocale.js:
--------------------------------------------------------------------------------
1 | /**
2 | * List of Ant design locales
3 | * https://ant.design/docs/react/i18n
4 | */
5 | import { LANGUAGES } from '../constants';
6 |
7 | export default (language = LANGUAGES.default) => {
8 | switch (language) {
9 | case LANGUAGES.es: {
10 | return require('antd/lib/locale-provider/es_ES').default;
11 | }
12 | default:
13 | case LANGUAGES.en: {
14 | return require('antd/lib/locale-provider/en_US').default;
15 | }
16 | }
17 | };
18 |
--------------------------------------------------------------------------------
/packages/web/src/config/localization/i18n.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import i18next from 'i18next';
3 | import Backend from 'i18next-chained-backend';
4 | import LocalStorageBackend from 'i18next-localstorage-backend';
5 | import XHR from 'i18next-xhr-backend';
6 | import LngDetector from 'i18next-browser-languagedetector';
7 | import { initReactI18next } from 'react-i18next';
8 | import {
9 | LANGUAGES,
10 | URL_LOCALIZATION,
11 | TIME_CACHE_LOCALIZATION,
12 | VERSION_LOCALIZATION,
13 | } from '../constants';
14 |
15 | const URL_API_LOCALIZATION =
16 | process.env.REACT_APP_API_LOCALIZATION || 'http://localhost:3005';
17 |
18 | function loadLocales(url, options, callback) {
19 | axios
20 | .get(`${url}?v=${options.queryStringParams.v}`, {
21 | headers: {
22 | Accept: 'application/json',
23 | 'Content-Type': 'application/json',
24 | },
25 | })
26 | .then(res => {
27 | callback(res.data, { status: '200' });
28 | })
29 | .catch(err => {
30 | callback(null, { status: '404', message: err.message });
31 | });
32 | }
33 |
34 | export default i18next
35 | .use(LngDetector)
36 | .use(Backend)
37 | .use(initReactI18next)
38 | .init(
39 | {
40 | whitelist: Object.values(LANGUAGES),
41 | fallbackLng: LANGUAGES.default,
42 | // have a common namespace used around the full app
43 | ns: 'translation',
44 | defaultNS: 'translation',
45 | debug: process.env.NODE_ENV === 'development',
46 | backend: {
47 | backends: [LocalStorageBackend, XHR],
48 | backendOptions: [
49 | {
50 | expirationTime: TIME_CACHE_LOCALIZATION,
51 | prefix: 'i18next_res_',
52 | },
53 | {
54 | queryStringParams: { v: VERSION_LOCALIZATION },
55 | parse: data => data,
56 | loadPath: `${URL_API_LOCALIZATION}${URL_LOCALIZATION}`,
57 | ajax: loadLocales,
58 | },
59 | ],
60 | },
61 | },
62 | err => {
63 | if (err) return console.log('something went wrong loading', err);
64 | },
65 | );
66 |
--------------------------------------------------------------------------------
/packages/web/src/config/menus.js:
--------------------------------------------------------------------------------
1 | import { ChangeLanguage } from '../components/Shared';
2 | import { createMenu, createComponent } from '../utils/general';
3 | import { GUEST, LOGGED } from './constants';
4 | import { HeaderUser } from '../components/Layout';
5 |
6 | const menus = {
7 | primary: [
8 | createMenu('/', 'menu.home', 'home'),
9 | createMenu('/about', 'menu.about', 'rocket'),
10 | createMenu('/list', 'menu.users', 'team', LOGGED),
11 | ],
12 | header: [
13 | createMenu('/register', 'menu.register', 'user', GUEST),
14 | createMenu('/login', 'menu.login', 'login', GUEST),
15 | createComponent(() => ChangeLanguage),
16 | createComponent(() => HeaderUser, LOGGED),
17 | ],
18 | };
19 |
20 | export default menus;
21 |
--------------------------------------------------------------------------------
/packages/web/src/config/routes.js:
--------------------------------------------------------------------------------
1 | import { lazy } from 'react';
2 | import { createRoute } from '../utils/general';
3 | import Home from '../pages/Home';
4 | import { LOGGED, GUEST } from './constants';
5 |
6 | const AsyncAbout = lazy(() => import('../pages/About.js'));
7 | const AsyncRegister = lazy(() => import('../pages/Register.js'));
8 | const AsyncLogin = lazy(() => import('../pages/Login.js'));
9 | const AsyncForgotPass = lazy(() => import('../pages/ForgotPassword.js'));
10 | const AsyncList = lazy(() => import('../pages/List.js'));
11 | const AsyncForm = lazy(() => import('../pages/Form.js'));
12 |
13 | export default [
14 | createRoute('/', Home, null, true),
15 | createRoute('/about', AsyncAbout),
16 | createRoute('/register', AsyncRegister, GUEST),
17 | createRoute('/login', AsyncLogin, GUEST),
18 | createRoute('/forgotPassword', AsyncForgotPass, GUEST),
19 | createRoute('/list', AsyncList, LOGGED),
20 | createRoute('/form/:id?', AsyncForm, LOGGED),
21 | ];
22 |
--------------------------------------------------------------------------------
/packages/web/src/config/services.js:
--------------------------------------------------------------------------------
1 | export const auth = {
2 | login: '/auth/login',
3 | logout: '/auth/logout',
4 | };
5 |
--------------------------------------------------------------------------------
/packages/web/src/config/store.js:
--------------------------------------------------------------------------------
1 | import { init } from '@rematch/core';
2 | import createRematchPersist from '@rematch/persist';
3 | import createLoadingPlugin from '@rematch/loading';
4 | import * as models from '../models';
5 |
6 | const persistPlugin = createRematchPersist({
7 | whitelist: ['auth'],
8 | keyPrefix: '--persist-key-',
9 | throttle: 500,
10 | version: 1,
11 | });
12 |
13 | const loadingPlugin = createLoadingPlugin({});
14 |
15 | const store = init({
16 | models,
17 | plugins: [persistPlugin, loadingPlugin],
18 | });
19 |
20 | export default store;
21 |
--------------------------------------------------------------------------------
/packages/web/src/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miguelcast/cra-init-dashboard/52ef1e8832cfe0da798cec78e50406234f55eeac/packages/web/src/img/logo.png
--------------------------------------------------------------------------------
/packages/web/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Provider } from 'react-redux';
4 | import { BrowserRouter as Router } from 'react-router-dom';
5 | import { ConfigProvider, Spin } from 'antd';
6 | import { getPersistor } from '@rematch/persist';
7 | import { PersistGate } from 'redux-persist/integration/react';
8 | import { useTranslation } from 'react-i18next';
9 | import { ProviderEasyCrud } from "react-easy-crud";
10 | import Layout from './pages/Layout';
11 | import store from './config/store';
12 | import client from './services/instance';
13 | import getLocalesAntd from './config/localization/antdLocale';
14 | import * as registerServiceWorker from './registerServiceWorker';
15 | import './styles/index.less';
16 | import './config/localization/i18n';
17 |
18 | const persistor = getPersistor();
19 |
20 | const AppSuspense = () => (
21 | }>
22 |
23 |
24 | );
25 |
26 | const App = () => {
27 | const { i18n } = useTranslation();
28 | return (
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | );
41 | };
42 |
43 | ReactDOM.render(, document.getElementById('root'));
44 | registerServiceWorker.register();
45 |
--------------------------------------------------------------------------------
/packages/web/src/models/auth.js:
--------------------------------------------------------------------------------
1 | import instance from '../services/instance';
2 | import { authenticationService } from '../services/auth';
3 |
4 | const auth = {
5 | state: {
6 | token: null,
7 | user: {},
8 | isAuthenticated: false,
9 | },
10 | reducers: {
11 | setAuthenticated: (state, payload) => ({
12 | ...state,
13 | ...payload,
14 | isAuthenticated: !!payload.token,
15 | }),
16 | setLogout: () => ({
17 | token: null,
18 | user: {},
19 | isAuthenticated: false,
20 | }),
21 | },
22 | effects: {
23 | async authentication(credentials) {
24 | try {
25 | const promise = await authenticationService(
26 | credentials.username,
27 | credentials.password,
28 | );
29 | const { user, token } = await promise.data;
30 | this.setAuthenticated({ user, token });
31 | instance.setToken(token);
32 | } catch (e) {
33 | this.setAuthenticated({ user: {}, token: null });
34 | }
35 | },
36 | logout() {
37 | instance.removeToken();
38 | this.setLogout();
39 | },
40 | },
41 | };
42 |
43 | export default auth;
44 |
--------------------------------------------------------------------------------
/packages/web/src/models/home.js:
--------------------------------------------------------------------------------
1 | const home = {
2 | state: 'Hello from store.',
3 | };
4 |
5 | export default home;
6 |
--------------------------------------------------------------------------------
/packages/web/src/models/index.js:
--------------------------------------------------------------------------------
1 | export { default as home } from './home';
2 | export { default as auth } from './auth';
3 |
--------------------------------------------------------------------------------
/packages/web/src/pages/404.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Row, Col } from 'antd';
3 | import { useTranslation } from 'react-i18next';
4 |
5 | const NotFound404 = () => {
6 | const { t } = useTranslation();
7 |
8 | return (
9 |
14 |
15 |
16 | {t('common.pageNotFound')} | 404
17 |
18 |
19 |
20 | );
21 | };
22 |
23 | export default NotFound404;
24 |
--------------------------------------------------------------------------------
/packages/web/src/pages/About.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'antd';
3 | import { Link } from 'react-router-dom';
4 | import { useTranslation } from 'react-i18next';
5 | import { Title } from '../components/Shared';
6 |
7 | const About = () => {
8 | const { t } = useTranslation();
9 | return (
10 |
11 |
12 |
13 |
16 |
17 |
18 | );
19 | };
20 |
21 | export default About;
22 |
--------------------------------------------------------------------------------
/packages/web/src/pages/ForgotPassword.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Button, Form, Icon, Input } from 'antd';
4 | import { withRouter } from 'react-router-dom';
5 | import { useTranslation } from 'react-i18next';
6 | import { Title } from '../components/Shared';
7 |
8 | const FormItem = Form.Item;
9 |
10 | const ForgotPassword = ({ form, history }) => {
11 | const { getFieldDecorator } = form;
12 | const { t } = useTranslation();
13 |
14 | function onSubmit(e) {
15 | e.preventDefault();
16 | form.validateFields((err, values) => {
17 | if (!err) {
18 | console.log('Received values of form: ', values);
19 | }
20 | });
21 | }
22 |
23 | return (
24 |
60 | );
61 | };
62 |
63 | ForgotPassword.propTypes = {
64 | form: PropTypes.object,
65 | history: PropTypes.object,
66 | };
67 |
68 | export default withRouter(Form.create()(ForgotPassword));
69 |
--------------------------------------------------------------------------------
/packages/web/src/pages/Form.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Form as FormCrud, useCrudForm } from 'react-easy-crud';
4 | import userConfig from '../config/cruds/user';
5 |
6 | const Form = ({ match }) => {
7 | console.log(match.params.id);
8 | const propsForm = useCrudForm(userConfig, match.params.id || null);
9 | if (match.params.id > 0 && !propsForm.fields[1].hasOwnProperty('value')) {
10 | return 'Loading...';
11 | }
12 | return (
13 |
14 | );
15 | };
16 |
17 | Form.propTypes = {
18 | match: PropTypes.object,
19 | };
20 |
21 | export default Form;
22 |
--------------------------------------------------------------------------------
/packages/web/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { useTranslation } from 'react-i18next';
4 | import { Button } from 'antd';
5 | import { Title } from '../components/Shared';
6 |
7 | const Home = () => {
8 | const { t } = useTranslation();
9 | return (
10 |
11 |
12 |
13 |
16 |
17 |
18 | );
19 | };
20 |
21 | export default Home;
22 |
--------------------------------------------------------------------------------
/packages/web/src/pages/Layout.js:
--------------------------------------------------------------------------------
1 | import React, { useState, Suspense } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Route, Switch, withRouter, Redirect } from 'react-router-dom';
4 | import { Layout, Drawer, Spin } from 'antd';
5 | import { GUEST, LOGGED } from '../config/constants';
6 | import routes from '../config/routes';
7 | import { MenuPrimary, Logo, Header } from '../components/Layout';
8 | import { useAuthenticated } from '../components/Auth';
9 | import PageNotFound404 from './404';
10 |
11 | const { Footer, Content, Sider } = Layout;
12 |
13 | const Routes = () => {
14 | const { isAuthenticated } = useAuthenticated();
15 | return (
16 | }>
17 |
18 | {routes.map(route => (
19 |
24 | route.when === undefined ||
25 | route.when === null ||
26 | (isAuthenticated === false && route.when === GUEST) ||
27 | (isAuthenticated === true && route.when === LOGGED) ? (
28 | React.createElement(route.component, props, null)
29 | ) : (
30 |
31 | )
32 | }
33 | />
34 | ))}
35 |
36 |
37 |
38 | );
39 | };
40 |
41 | const Document = props => {
42 | const {
43 | location: { pathname },
44 | } = props;
45 |
46 | const [visible, setVisible] = useState(false);
47 | const [isCollapsed, setIsCollapsed] = useState(false);
48 |
49 | const showDrawer = () => setVisible(true);
50 | const onClose = () => setVisible(false);
51 | const toggleCollapse = () => setIsCollapsed(!isCollapsed);
52 |
53 | return (
54 |
55 |
62 |
63 | Dashboard
64 |
65 |
66 | }
68 | placement="left"
69 | onClose={onClose}
70 | visible={visible}
71 | bodyStyle={{ padding: 0, margin: 0 }}>
72 |
73 |
74 |
75 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | );
88 | };
89 |
90 | Document.propTypes = {
91 | location: PropTypes.object,
92 | };
93 |
94 | export default withRouter(Document);
95 |
--------------------------------------------------------------------------------
/packages/web/src/pages/List.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { List as ListCrud, useCrudList } from 'react-easy-crud';
4 | import userConfig from '../config/cruds/user';
5 |
6 | const List = props => {
7 | const { history } = props;
8 | const { columns, dataSource, onDelete, loading } = useCrudList(userConfig);
9 | return (
10 | history.push('/form'),
19 | },
20 | ]}
21 | addActions={[
22 | {
23 | text: 'Edit',
24 | icon: 'edit',
25 | type: 'primary',
26 | onClick: record =>
27 | history.push(`/form/${record[userConfig.keyName]}`),
28 | },
29 | {
30 | text: 'Delete',
31 | icon: 'delete',
32 | type: 'danger',
33 | confirm: 'Are you sure?',
34 | onClick: record => onDelete(record[userConfig.keyName]),
35 | },
36 | ]}
37 | loading={loading}
38 | pagination={{
39 | pageSize: 20,
40 | showQuickJumper: true,
41 | showSizeChanger: true,
42 | }}
43 | />
44 | );
45 | };
46 |
47 | List.propTypes = {
48 | history: PropTypes.object,
49 | };
50 |
51 | export default List;
52 |
--------------------------------------------------------------------------------
/packages/web/src/pages/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { Login as LoginForm } from '../components/Auth';
4 |
5 | const Login = props => {
6 | return ;
7 | };
8 |
9 | const mapState = state => ({
10 | loading: state.loading.effects.auth.authentication,
11 | });
12 |
13 | const mapDispatch = dispatch => ({
14 | authentication: (username, password) =>
15 | dispatch.auth.authentication({ username, password }),
16 | });
17 |
18 | export default connect(
19 | mapState,
20 | mapDispatch,
21 | )(Login);
22 |
--------------------------------------------------------------------------------
/packages/web/src/pages/Register.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Register as RegisterForm } from '../components/Auth';
3 |
4 | const Register = () => ;
5 |
6 | export default Register;
7 |
--------------------------------------------------------------------------------
/packages/web/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
20 | ),
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA',
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.',
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.',
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/packages/web/src/services/auth.js:
--------------------------------------------------------------------------------
1 | import instance from './instance';
2 | import { auth } from '../config/services';
3 |
4 | export const authenticationService = (userName, password) =>
5 | instance.post(auth.login, { userName, password });
6 |
--------------------------------------------------------------------------------
/packages/web/src/services/instance.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | class AxiosCreate {
4 | static _instance = null;
5 |
6 | constructor() {
7 | const headers = {};
8 |
9 | this._instance = axios.create({
10 | baseURL: process.env.REACT_APP_API || 'http://localhost:4000',
11 | headers,
12 | });
13 | }
14 |
15 | get instance() {
16 | return this._instance;
17 | }
18 | }
19 |
20 | const InstAx = new AxiosCreate();
21 |
22 | InstAx.instance.setToken = function(token) {
23 | InstAx.instance.defaults.headers.Authorizations = `Bearer ${token}`;
24 | };
25 |
26 | InstAx.instance.removeToken = function() {
27 | InstAx.instance.defaults.headers.Authorizations = null;
28 | };
29 |
30 | export default InstAx.instance;
31 |
--------------------------------------------------------------------------------
/packages/web/src/styles/auth.less:
--------------------------------------------------------------------------------
1 | @import (once) "../../../../node_modules/antd/dist/antd.less";
2 |
3 | .custom-auth-form {
4 | max-width: 400px;
5 | margin: 0 auto;
6 |
7 | .custom-prefix-icon {
8 | color: rgba(0,0,0,.25);
9 | }
10 |
11 | .custom-button {
12 | width: 100%;
13 | }
14 | }
15 |
16 | .custom-form-login {
17 | .custom-auth-form();
18 |
19 | .custom-forgot-link {
20 | float: right;
21 | }
22 | }
23 |
24 | .custom-form-register {
25 | .custom-auth-form();
26 | }
27 |
28 | .custom-form-forgot {
29 | .custom-auth-form();
30 | }
31 |
--------------------------------------------------------------------------------
/packages/web/src/styles/index.less:
--------------------------------------------------------------------------------
1 | @import (once) "../../../../node_modules/antd/dist/antd.less";
2 |
3 | @primary-color: #2779ff;
4 | @layout-header-background: #ffffff;
5 | @layout-sider-background: #ffffff;
6 | @menu-dark-color: #ffffff;
7 | @menu-dark-item-active-bg: lighten(@primary-color, 5%);
8 | @table-border-radius-base: 1rem;
9 | @form-item-margin-bottom: 20px;
10 |
11 | @import "layout.less";
12 | @import "table.less";
13 | @import "title.less";
14 | @import "auth.less";
15 |
16 | .custom-full-width {
17 | width: 100%;
18 | }
19 |
20 | .custom-align-right {
21 | text-align: right;
22 | }
23 |
24 | .custom-align-middle {
25 | vertical-align: middle;
26 | }
27 |
--------------------------------------------------------------------------------
/packages/web/src/styles/layout.less:
--------------------------------------------------------------------------------
1 | @import (once) "../../../../node_modules/antd/dist/antd.less";
2 |
3 | .custom-layout-spin {
4 | width: 100%;
5 | height: 300px;
6 | }
7 |
8 | .custom-layout {
9 | .custom-layout-sider {
10 | overflow: auto;
11 | height: 100vh;
12 | position: fixed;
13 | left: 0;
14 | box-shadow: 0 64px 5px rgba(0, 0, 0, 0.15);
15 | border-right: 1px solid #f0f0f0;
16 | }
17 |
18 | .custom-layout-content {
19 | padding: 1rem;
20 | min-height: calc(~"100vh - 64px - 69px");
21 | }
22 |
23 | .custom-menu-title {
24 | padding: 0.8rem 0 1rem 1.5rem;
25 | display: inline-block;
26 | }
27 |
28 | .custom-header {
29 | padding-left: 1rem;
30 | padding-right: 1rem;
31 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
32 |
33 | .custom-header-toggle-icon {
34 | font-size: 1.5rem;
35 | margin-top: 1.22rem;
36 | color: grey;
37 | }
38 | }
39 |
40 | .custom-logo {
41 | width: 100%;
42 | padding: 1rem;
43 | text-align: center;
44 | }
45 |
46 | .custom-menu-item-header {
47 | height: 64px;
48 | padding-top: 8px;
49 |
50 | .custom-menu-header-item-icon {
51 | font-size: 1.2rem;
52 | vertical-align: middle;
53 | }
54 | }
55 | }
56 |
57 | .custom-header-user {
58 | display: inline-flex;
59 | justify-content: flex-end;
60 | align-items: center;
61 | margin-left: 5px;
62 | height: 100%;
63 | text-align: right;
64 | cursor: pointer;
65 | }
66 |
--------------------------------------------------------------------------------
/packages/web/src/styles/table.less:
--------------------------------------------------------------------------------
1 | @import (once) "../../../../node_modules/antd/dist/antd.less";
2 |
3 | .ant-table td { white-space: nowrap; }
4 |
5 | .custom-table {
6 | .custom-search-filter {
7 | padding: 8px;
8 | width: 220px;
9 | }
10 |
11 | .ant-table-filter-dropdown-btns {
12 | & > a {
13 | padding: 0 5px;
14 | }
15 | }
16 |
17 | .ant-table-thead > tr > th.ant-table-column-sort {
18 | background-color: transparent;
19 | }
20 | .ant-table-tbody > tr > td.ant-table-column-sort {
21 | background-color: lighten(@primary-color, 40%);
22 | }
23 |
24 | .ant-table-body{
25 | overflow: auto !important;
26 | }
27 |
28 | table {
29 | border-collapse: separate;
30 | border-spacing: 0 5px;
31 |
32 | tr {
33 | & > td {
34 | padding: 10px;
35 | background-color: #ffffff;
36 | }
37 | & > th { background-color: transparent; }
38 | & > td, & > th { border: none !important; }
39 | & > td:first-child, & > th:first-child { border-top-left-radius: 8px; }
40 | & > td:last-child, & > th:last-child { border-top-right-radius: 8px; }
41 | & > td:first-child, & > th:first-child { border-bottom-left-radius: 8px; }
42 | & > td:last-child, & > th:last-child { border-bottom-right-radius: 8px; }
43 | }
44 |
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/web/src/styles/title.less:
--------------------------------------------------------------------------------
1 | @import (once) "../../../../node_modules/antd/dist/antd.less";
2 |
3 | .custom-line-bottom {
4 | content:'';
5 | position: absolute;
6 | bottom: 0;
7 | display: inline-block;
8 | height: 2px;
9 | background-color: @primary-color;
10 | }
11 |
12 | .custom-title {
13 | position: relative;
14 | color: @primary-color;
15 | font-size: 2.5rem;
16 |
17 | @media screen and (max-width: @screen-sm-max) {
18 | font-size: 2rem;
19 | }
20 |
21 | &::before {
22 | .custom-line-bottom();
23 | left: 0;
24 | width: 120px;
25 | @media screen and (max-width: @screen-sm-max) {
26 | width: 80px;
27 | }
28 | }
29 |
30 | &::after {
31 | .custom-line-bottom();
32 | left: 124px;
33 | width: 4px;
34 | @media screen and (max-width: @screen-sm-max) {
35 | left: 84px;
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/web/src/utils/general.js:
--------------------------------------------------------------------------------
1 | export const nextNumber = (next = 1) => () => next++;
2 |
3 | const nextRouteIndex = nextNumber();
4 | export const createRoute = (url, component, when = null, exact = false) => ({
5 | index: nextRouteIndex(),
6 | path: url,
7 | component,
8 | when,
9 | exact,
10 | });
11 |
12 | const nextMenuIndex = nextNumber();
13 | export const createMenu = (url, title, icon, when) => ({
14 | index: nextMenuIndex(),
15 | title,
16 | path: url,
17 | icon,
18 | when,
19 | });
20 |
21 | export const createComponent = (component, when) => ({
22 | index: nextMenuIndex(),
23 | component,
24 | when,
25 | });
26 |
27 | export const sortString = key => (a, b) =>
28 | a[key] ? a[key].localeCompare(b[key]) : true;
29 | export const sortNumber = key => (a, b) => a[key] - b[key];
30 | export const sortBool = key => (a, b) => b[key] - a[key];
31 |
--------------------------------------------------------------------------------