refine code

client/README.md

@@ -22,6 +22,15 @@
       ├── types                   # Global types
       └── utils                   # The common functoins
 
+### Fixed pacakge version
+
+Temporarily we specify 3 packages' version for ts build.
+```
+"@material-ui/core": "4.11.4",
+"@material-ui/lab": "4.0.0-alpha.58",
+"react-i18next": "11.10.0",
+```
+
 ### How to name the file
 
 We use Camel-Case to name the file.

client/config-overrides.js

@@ -1,7 +1,7 @@
-const path = require('path');
+// const path = require('path');
 const { configPaths } = require('react-app-rewire-alias');
 const { aliasDangerous } = require('react-app-rewire-alias/lib/aliasDangerous');
 
-const aliasMap = configPaths('./tsconfig.paths.json'); // or jsconfig.paths.json
+const aliasMap = configPaths('./tsconfig.paths.json');
 
 module.exports = aliasDangerous(aliasMap);

client/src/components/icons/Icons.tsx

@@ -36,7 +36,7 @@ import { ReactComponent as SearchEmptyIcon } from '../../assets/icons/search.svg
 import { ReactComponent as CopyIcon } from '../../assets/icons/copy.svg';
 import { ReactComponent as SystemIcon } from '../../assets/icons/system.svg';
 
-const icons: { [key: string]: (props?: any) => React.ReactElement } = {
+const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   search: (props = {}) => <SearchIcon {...props} />,
   add: (props = {}) => <AddIcon {...props} />,
   delete: (props = {}) => <DeleteIcon {...props} />,

client/src/components/layout/Layout.tsx

@@ -8,6 +8,7 @@ import icons from '../icons/Icons';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import { authContext } from '../../context/Auth';
+import { IconsType } from '../icons/Types';
 
 const PLUGIN_DEV = process.env?.REACT_APP_PLUGIN_DEV;
 
@@ -99,7 +100,7 @@ const Layout = (props: any) => {
         label: content.client?.label || 'PLGUIN',
       };
       result.onClick = () => history.push(`${pathName}`);
-      const iconName: string = content.client?.iconName;
+      const iconName: IconsType = content.client?.iconName;
       if (iconName) {
         // TODO: support custom icon
         result.icon = icons[iconName];

client/src/router/Config.ts

@@ -41,14 +41,13 @@ function importAll(r: any, outOfRoot = false) {
     const content = r(key);
     const dirName = key.split('/config.json').shift().split('/')[1];
     const pathName = content.client?.path;
-    const entry = content.client?.entry;
-    if (!(pathName || entry)) return;
-    console.log(content);
+    const fileEntry = content.client?.entry;
+    if (!(pathName || fileEntry)) return;
+    // console.log(content);
     const auth = content.client?.auth || false;
     const OtherComponent = outOfRoot
-      ? loadable(() => import(`all_plugins/${dirName}/client/${entry}`))
-      : loadable(() => import(`../plugins/${dirName}/${entry}`));
-    console.log(OtherComponent);
+      ? loadable(() => import(`all_plugins/${dirName}/client/${fileEntry}`))
+      : loadable(() => import(`../plugins/${dirName}/${fileEntry}`));
     RouterConfig.push({
       path: `/${pathName}`,
       component: OtherComponent,