add crud api

.eslintrc.json

@@ -47,7 +47,7 @@
         "import/extensions": 0,
         "react/prop-types": 0,
         "no-underscore-dangle": 0,
-        "import/imports-first": ["warn", "absolute-first"],
+        "import/imports-first": 0,
         "import/prefer-default-export": 0,
         "import/no-unresolved": 0,
         "import/newline-after-import": "error",

package-lock.json

@@ -1439,6 +1439,19 @@
                 "is-negated-glob": "^1.0.0"
             }
         },
+        "@emotion/is-prop-valid": {
+            "version": "0.7.3",
+            "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
+            "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
+            "requires": {
+                "@emotion/memoize": "0.7.1"
+            }
+        },
+        "@emotion/memoize": {
+            "version": "0.7.1",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
+            "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+        },
         "@eslint/eslintrc": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
@@ -5457,6 +5470,16 @@
                 }
             }
         },
+        "css-jss": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/css-jss/-/css-jss-10.6.0.tgz",
+            "integrity": "sha512-4SE0tWggVM6Y4UTcKMoZXFBuhzycY6fKEdONr7wn89SIFd4eXiUZ0f5f4tLwXyFOW2q13JReXp8n9vSLKp48/g==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0",
+                "jss-preset-default": "10.6.0"
+            }
+        },
         "css-loader": {
             "version": "5.2.6",
             "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.6.tgz",
@@ -5600,6 +5623,15 @@
                 }
             }
         },
+        "css-vendor": {
+            "version": "2.0.8",
+            "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+            "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+            "requires": {
+                "@babel/runtime": "^7.8.3",
+                "is-in-browser": "^1.0.2"
+            }
+        },
         "css-what": {
             "version": "3.4.2",
             "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -6019,6 +6051,11 @@
                 }
             }
         },
+        "csstype": {
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+            "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+        },
         "cyclist": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -8851,6 +8888,11 @@
             "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
             "dev": true
         },
+        "hyphenate-style-name": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+            "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+        },
         "iconv-lite": {
             "version": "0.4.24",
             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8970,6 +9012,14 @@
             "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
             "dev": true
         },
+        "indefinite-observable": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
+            "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
+            "requires": {
+                "symbol-observable": "1.2.0"
+            }
+        },
         "indent-string": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -9263,6 +9313,11 @@
                 "is-extglob": "^2.1.1"
             }
         },
+        "is-in-browser": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+            "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+        },
         "is-module": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -10509,6 +10564,155 @@
                 "universalify": "^2.0.0"
             }
         },
+        "jss": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss/-/jss-10.6.0.tgz",
+            "integrity": "sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "csstype": "^3.0.2",
+                "indefinite-observable": "^2.0.1",
+                "is-in-browser": "^1.1.3",
+                "tiny-warning": "^1.0.2"
+            }
+        },
+        "jss-plugin-camel-case": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz",
+            "integrity": "sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "hyphenate-style-name": "^1.0.3",
+                "jss": "10.6.0"
+            }
+        },
+        "jss-plugin-compose": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-compose/-/jss-plugin-compose-10.6.0.tgz",
+            "integrity": "sha512-zBhI5ZDVX30h4N+rPunAfbwHVDWlme0JPiLBT0TSg24aX+QhjpogZSKHv9pn23NqIdiz3aIJmrNVnJ5rwNKQKA==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0",
+                "tiny-warning": "^1.0.2"
+            }
+        },
+        "jss-plugin-default-unit": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz",
+            "integrity": "sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0"
+            }
+        },
+        "jss-plugin-expand": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-expand/-/jss-plugin-expand-10.6.0.tgz",
+            "integrity": "sha512-TYVfKS3l8kNaClWW3PA9AhFr9ixhBnKcdGwZDRH3WRGDmdX0RYOhpfScscRXQM1HAlqaXLRqiP+NYGCK6QBgOg==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0"
+            }
+        },
+        "jss-plugin-extend": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.6.0.tgz",
+            "integrity": "sha512-eY/zKMT+aUOdHegTDzTznq8Nwsv0PEb5AyJfo8A1B9jPxzzLTGcFOl9S6JZoYRxMh9TWxA5lOULMIjgKAKzUcQ==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0",
+                "tiny-warning": "^1.0.2"
+            }
+        },
+        "jss-plugin-global": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz",
+            "integrity": "sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0"
+            }
+        },
+        "jss-plugin-nested": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz",
+            "integrity": "sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0",
+                "tiny-warning": "^1.0.2"
+            }
+        },
+        "jss-plugin-props-sort": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz",
+            "integrity": "sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0"
+            }
+        },
+        "jss-plugin-rule-value-function": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz",
+            "integrity": "sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0",
+                "tiny-warning": "^1.0.2"
+            }
+        },
+        "jss-plugin-rule-value-observable": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.6.0.tgz",
+            "integrity": "sha512-+N6S8UZ+Tu+G2Fbu/UrfLI/JyaTi/KfkPbKsVRfyg/C/IdI+p9+H67HncMIFYEi/KnNj5fqvMNSDe4ag/lqbHw==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0",
+                "symbol-observable": "^1.2.0"
+            }
+        },
+        "jss-plugin-template": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-template/-/jss-plugin-template-10.6.0.tgz",
+            "integrity": "sha512-P3iaIR6AqTOoutwP7Y2KVCq4jShEMACrwKf8W9gsS3ppnIeBg4OCAQvLKmqunApkEoIk0711xbW9XPi9CYy3zg==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0",
+                "tiny-warning": "^1.0.2"
+            }
+        },
+        "jss-plugin-vendor-prefixer": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz",
+            "integrity": "sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "css-vendor": "^2.0.8",
+                "jss": "10.6.0"
+            }
+        },
+        "jss-preset-default": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-10.6.0.tgz",
+            "integrity": "sha512-TuHDZiuxGLLJ/LIMLAzO5uf2PnLOCR6yF5GHQLPp59YTascmwEldJfR0tuqjKa8B2F/v708ZvzE1Dw0Ao7UIcA==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.6.0",
+                "jss-plugin-camel-case": "10.6.0",
+                "jss-plugin-compose": "10.6.0",
+                "jss-plugin-default-unit": "10.6.0",
+                "jss-plugin-expand": "10.6.0",
+                "jss-plugin-extend": "10.6.0",
+                "jss-plugin-global": "10.6.0",
+                "jss-plugin-nested": "10.6.0",
+                "jss-plugin-props-sort": "10.6.0",
+                "jss-plugin-rule-value-function": "10.6.0",
+                "jss-plugin-rule-value-observable": "10.6.0",
+                "jss-plugin-template": "10.6.0",
+                "jss-plugin-vendor-prefixer": "10.6.0"
+            }
+        },
         "jsx-ast-utils": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
@@ -18117,8 +18321,7 @@
         "querystring": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
-            "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
+            "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
-            "dev": true
         },
         "querystring-es3": {
             "version": "0.2.1",
@@ -18817,6 +19020,11 @@
                 }
             }
         },
+        "react-display-name": {
+            "version": "0.2.5",
+            "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz",
+            "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg=="
+        },
         "react-dom": {
             "version": "17.0.2",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -18839,6 +19047,24 @@
             "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
             "dev": true
         },
+        "react-jss": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-10.6.0.tgz",
+            "integrity": "sha512-uCvOHMoQrB+cD8l6K6+gIStqBhTyjPM/55sXHfujlr0E4GclQg0ZR26nyGyh7XB+v9a2FfMp6Y4L2Bc1Z+L1oQ==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "@emotion/is-prop-valid": "^0.7.3",
+                "css-jss": "10.6.0",
+                "hoist-non-react-statics": "^3.2.0",
+                "is-in-browser": "^1.1.3",
+                "jss": "10.6.0",
+                "jss-preset-default": "10.6.0",
+                "prop-types": "^15.6.0",
+                "shallow-equal": "^1.2.0",
+                "theming": "^3.3.0",
+                "tiny-warning": "^1.0.2"
+            }
+        },
         "react-refresh": {
             "version": "0.8.3",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -21087,6 +21313,11 @@
                 "kind-of": "^6.0.2"
             }
         },
+        "shallow-equal": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+            "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+        },
         "shallowequal": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -21970,6 +22201,11 @@
                 }
             }
         },
+        "symbol-observable": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+            "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+        },
         "symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -22208,6 +22444,17 @@
             "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
             "dev": true
         },
+        "theming": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/theming/-/theming-3.3.0.tgz",
+            "integrity": "sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==",
+            "requires": {
+                "hoist-non-react-statics": "^3.3.0",
+                "prop-types": "^15.5.8",
+                "react-display-name": "^0.2.4",
+                "tiny-warning": "^1.0.2"
+            }
+        },
         "throat": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
+        "@ant-design/icons": "^4.6.2",
         "@reatom/core": "^1.1.5",
         "@reatom/react": "^1.1.5",
         "antd": "^4.16.2",
@@ -32,9 +33,13 @@
         "date-fns": "^2.16.1",
         "fp-ts": "^2.8.5",
         "history": "^5.0.0",
+        "jss": "^10.6.0",
+        "jss-preset-default": "^10.6.0",
         "lodash": "^4.17.20",
+        "querystring": "^0.2.1",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
+        "react-jss": "^10.6.0",
         "react-router-dom": "^5.2.0",
         "ts-loader": "^8.0.7",
         "typescript": "^4.0.3"

src/app/components/main-layout/MainLayout.tsx

@@ -0,0 +1,28 @@
+import {Layout} from 'antd';
+import React, {FC, memo, PropsWithChildren} from 'react';
+import {createUseStyles} from 'react-jss';
+import Menu from '../menu';
+
+const useStyles = createUseStyles({
+    layout: {
+        height: '100%',
+    },
+});
+
+const MainLayout: FC<PropsWithChildren<unknown>> = ({children}) => {
+    const classes = useStyles();
+    return (
+        <Layout className={classes.layout}>
+            <Layout.Sider>
+                <Menu />
+            </Layout.Sider>
+            <Layout>
+                <Layout.Content>
+                    {children}
+                </Layout.Content>
+            </Layout>
+        </Layout>
+    );
+};
+
+export default memo(MainLayout);

src/app/components/main-layout/index.ts

@@ -0,0 +1 @@
+export {default} from './MainLayout';

src/app/components/menu/Menu.tsx

@@ -0,0 +1,58 @@
+import {Menu} from 'antd';
+import React, {FC, memo, useCallback, useMemo, useState} from 'react';
+import {TeamOutlined, DollarCircleOutlined, ClusterOutlined, InteractionOutlined, DeploymentUnitOutlined} from '@ant-design/icons';
+import {ROUTES} from '_consts/common';
+import {Link, useLocation} from 'react-router-dom';
+
+const MENU = [
+    {
+        label: 'Users',
+        icon: <TeamOutlined />,
+        url: ROUTES.USERS,
+    },
+    {
+        label: 'Actions',
+        icon: <InteractionOutlined />,
+        url: ROUTES.ACTIONS,
+    },
+    {
+        label: 'Conditions',
+        icon: <ClusterOutlined />,
+        url: ROUTES.CONDITIONS,
+    },
+    {
+        label: 'Graphs',
+        icon: <DeploymentUnitOutlined />,
+        url: ROUTES.GRAPHS,
+    },
+    {
+        label: 'Currencies',
+        icon: <DollarCircleOutlined />,
+        url: ROUTES.CURRENCIES,
+    },
+];
+
+const TopMenu: FC = () => {
+    const {pathname} = useLocation();
+    const [selected, setSelected] = useState(pathname);
+
+    const selectedKeys = useMemo(() => [selected], [selected]);
+
+    const handleClick = useCallback((e: {key: string}) => {
+        setSelected(e.key);
+    }, [setSelected]);
+
+    return (
+        <Menu onClick={handleClick} selectedKeys={selectedKeys} theme="dark" mode="inline">
+            {MENU.map(({label, icon, url}) => {
+                return (
+                    <Menu.Item key={url} icon={icon}>
+                        <Link to={url}>{label}</Link>
+                    </Menu.Item>
+                );
+            })}
+        </Menu>
+    );
+};
+
+export default memo(TopMenu);

src/app/components/menu/index.ts

@@ -0,0 +1 @@
+export {default} from './Menu';

src/app/components/page/Page.scss

@@ -1,17 +0,0 @@
-html {
-    height: 100%;
-}
-
-body {
-    height: 100%;
-    margin: 0;
-}
-
-#root {
-    height: 100%;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}

src/app/components/page/Page.tsx

@@ -1,41 +1,56 @@
-import React, {Fragment, memo} from 'react';
+import React, {memo} from 'react';
 import {Route, Switch} from 'react-router-dom';
-import {Container, createStyles, makeStyles} from '@material-ui/core';
 import {createStore} from '@reatom/core';
 import {context} from '@reatom/react';
 import mainPageRouter from '_pages/main/routing';
+import usersPageRouter from '_pages/users/routing';
+import actionsPageRouter from '_pages/actions/routing';
+import conditionsPageRouter from '_pages/conditions/routing';
+import graphsPageRouter from '_pages/graphs/routing';
+import currenciesPageRouter from '_pages/currencies/routing';
 import NotFoundPage from '_pages/not-found/components/page';
-import './Page.scss';
+import MainLayout from '../main-layout';
+import jss from 'jss';
+import preset from 'jss-preset-default';
 
-const useStyles = makeStyles(() =>
+jss.setup(preset());
-    createStyles({
+
-        container: {
+const styles = {
-            height: '100hv',
+    '@global': {
-            display: 'flex',
+        html: {
-            flexDirection: 'column',
+            height: '100%',
         },
-    }),
+        body: {
-);
+            height: '100%',
+            margin: '0',
+        },
+        '#root': {
+            height: '100%',
+        },
+    }
+};
+
+jss.createStyleSheet(styles).attach();
 
 const Page: React.FC = () => {
-    const classes = useStyles();
     const store = createStore();
 
     return (
-        <Fragment>
+        <context.Provider value={store}>
-            <div className={classes.container}>
+            <MainLayout>
-                <context.Provider value={store}>
+                <Switch>
-                    <Container>
+                    {mainPageRouter}
-                        <Switch>
+                    {usersPageRouter}
-                            {mainPageRouter}
+                    {actionsPageRouter}
-                            <Route>
+                    {conditionsPageRouter}
-                                <NotFoundPage />
+                    {graphsPageRouter}
-                            </Route>
+                    {currenciesPageRouter}
-                        </Switch>
+                    <Route>
-                    </Container>
+                        <NotFoundPage />
-                </context.Provider>
+                    </Route>
-            </div>
+                </Switch>
-        </Fragment>
+            </MainLayout>
+        </context.Provider>
     );
 };
 

src/app/index.tsx

@@ -1,17 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {HashRouter} from 'react-router-dom';
+import 'antd/dist/antd.css';
 import App from './components/page';
 
 ReactDOM.render(
-    /*
-     * Выключаем стрикт мод, пока не починят
-     * https://github.com/mui-org/material-ui/issues/13394
-     */
-    // <React.StrictMode>
     <HashRouter >
         <App />
     </HashRouter>,
-    // </React.StrictMode>
     document.getElementById('root')
 );

src/core/api/CrudAPI.ts

@@ -0,0 +1,87 @@
+import {isNotEmpty} from '_referers/common';
+import {http} from '../infrastructure/Http';
+
+type Filter<T> = {
+    field: keyof T;
+    search: string;
+};
+
+type Sort<T> = {
+    field: keyof T;
+    order: 'ASC' | 'DECS';
+};
+
+type RequestEntities<T> = {
+    filters?: Filter<T>[];
+    sort?: Sort<T>;
+    limit?: number;
+    offset?: number;
+};
+
+type EntityWithId<T> = T & {
+    id: string;
+};
+
+type ResponseEntities<T> = {
+        data: EntityWithId<T>[];
+        count: number;
+        total: number;
+        page: number;
+        pageCount: number;
+};
+
+type BulkCreateRequest<T> = {
+    bulk: T[];
+};
+
+export class CrudAPI<T> {
+    endpoint: string;
+
+    constructor(endpoint: string) {
+        this.endpoint = endpoint;
+    }
+
+    request = (options?: RequestEntities<T>): Promise<ResponseEntities<T>> => {
+        const {filters, sort, limit = 50, offset = 0} = options ?? {};
+        const query = [];
+
+        filters?.forEach(({field, search}) => {
+            query.push(`filter=${field}||$eq||${search}`);
+        });
+
+        if (sort) {
+            query.push(`sort=${sort.field},${sort.order}`);
+        }
+
+        query.push(`limit=${limit}`);
+        query.push(`offset=${offset}`);
+
+        return http.get<never, ResponseEntities<T>>([this.endpoint, query.join('&')].filter(isNotEmpty).join('?'));
+    }
+
+    find = (id: string): Promise<T> => {
+        return http.get<never, T>(`${this.endpoint}/${id}`);
+    }
+
+    create = (entity: T): Promise<EntityWithId<T>> => {
+        return http.post<never, T, EntityWithId<T>>(this.endpoint, undefined, entity);
+    }
+
+    update = (id: string, entity: T): Promise<EntityWithId<T>> => {
+        return http.patch<never, T, EntityWithId<T>>(`${this.endpoint}/${id}`, undefined, entity);
+    }
+
+    replace = (id: string, entity: T): Promise<EntityWithId<T>> => {
+        return http.put<never, T, EntityWithId<T>>(`${this.endpoint}/${id}`, undefined, entity);
+    }
+
+    remove = (id: string): Promise<null> => {
+        return http.delete<never, null>(`${this.endpoint}/${id}`);
+    }
+
+    bulkCreate = (entities: T[]): Promise<EntityWithId<T>[]> => {
+        return http.post<never, BulkCreateRequest<T>, EntityWithId<T>[]>(`${this.endpoint}/bulk`, undefined, {
+            bulk: entities,
+        });
+    }
+}

src/core/consts/common.ts

@@ -1,3 +1,12 @@
 export const ROUTES = {
-    MAIN: '/'
+    MAIN: '/',
+    USERS: '/users',
+    ACTIONS: '/actions',
+    CONDITIONS: '/conditions',
+    GRAPHS: '/graphs',
+    CURRENCIES: '/currencies',
+};
+
+export const ENDPOINT = {
+    USERS: 'http://vigdorov.ru:3011/users',
 };

src/pages/actions/components/page/Page.tsx

@@ -0,0 +1,9 @@
+import React, {FC, memo} from 'react';
+
+const Page: FC = () => {
+    return (
+        <div>actions</div>
+    );
+};
+
+export default memo(Page);

src/pages/actions/components/page/index.ts

@@ -0,0 +1 @@
+export {default} from './Page';

src/pages/actions/routing.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Route} from 'react-router-dom';
+import {ROUTES} from '_consts/common';
+import Page from './components/page';
+
+export default (
+    <Route component={Page} path={ROUTES.ACTIONS} exact />
+);

src/pages/conditions/components/page/Page.tsx

@@ -0,0 +1,9 @@
+import React, {FC, memo} from 'react';
+
+const Page: FC = () => {
+    return (
+        <div>conditions</div>
+    );
+};
+
+export default memo(Page);

src/pages/conditions/components/page/index.ts

@@ -0,0 +1 @@
+export {default} from './Page';

src/pages/conditions/routing.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Route} from 'react-router-dom';
+import {ROUTES} from '_consts/common';
+import Page from './components/page';
+
+export default (
+    <Route component={Page} path={ROUTES.CONDITIONS} exact />
+);

src/pages/currencies/components/page/Page.tsx

@@ -0,0 +1,9 @@
+import React, {FC, memo} from 'react';
+
+const Page: FC = () => {
+    return (
+        <div>currencies</div>
+    );
+};
+
+export default memo(Page);

src/pages/currencies/components/page/index.ts

@@ -0,0 +1 @@
+export {default} from './Page';

src/pages/currencies/routing.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Route} from 'react-router-dom';
+import {ROUTES} from '_consts/common';
+import Page from './components/page';
+
+export default (
+    <Route component={Page} path={ROUTES.CURRENCIES} exact />
+);

src/pages/graphs/components/page/Page.tsx

@@ -0,0 +1,9 @@
+import React, {FC, memo} from 'react';
+
+const Page: FC = () => {
+    return (
+        <div>graphs</div>
+    );
+};
+
+export default memo(Page);

src/pages/graphs/components/page/index.ts

@@ -0,0 +1 @@
+export {default} from './Page';

src/pages/graphs/routing.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Route} from 'react-router-dom';
+import {ROUTES} from '_consts/common';
+import Page from './components/page';
+
+export default (
+    <Route component={Page} path={ROUTES.GRAPHS} exact />
+);

src/pages/main/components/page/Page.tsx

@@ -1,19 +1,11 @@
 import React, {memo} from 'react';
-import {changeNameAction, nameAtom} from '_infrastructure/atom/exampleAtom';
-import {useAction, useAtom} from '@reatom/react';
 
 const MainPage: React.FC = () => {
-    const name = useAtom(nameAtom);
-    const handleChangeName = useAction(e => changeNameAction(e.currentTarget.value));
-
     return (
         <div>
-            <div>main page</div>
+            <div>Админка Crypto-bot</div>
 
-            <form>
+            <div>Выбирите нужный раздел</div>
-                <label htmlFor="name">Enter your name: </label>
-                <input id="name" value={name} onChange={handleChangeName} />
-            </form>
         </div>
     );
 };

src/pages/users/api/UsersAPI.ts

@@ -0,0 +1,4 @@
+import {ENDPOINT} from '_consts/common';
+import {CrudAPI} from '../../../core/api/CrudAPI';
+
+export const usersAPI = new CrudAPI(ENDPOINT.USERS);

src/pages/users/components/page/Page.tsx

@@ -0,0 +1,12 @@
+import React, {FC, memo} from 'react';
+import {usersAPI} from '../../api/UsersAPI';
+
+usersAPI.request();
+
+const Page: FC = () => {
+    return (
+        <div>users</div>
+    );
+};
+
+export default memo(Page);

src/pages/users/components/page/index.ts

@@ -0,0 +1 @@
+export {default} from './Page';

src/pages/users/routing.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Route} from 'react-router-dom';
+import {ROUTES} from '_consts/common';
+import Page from './components/page';
+
+export default (
+    <Route component={Page} path={ROUTES.USERS} exact />
+);