🦄 refactor: Upgrading to antd4 and ts4

Author: boyangwang

diary-front/package.json

@@ -7,7 +7,7 @@
     "start":
       "REACT_APP_PROTOCOL=http REACT_APP_DOMAIN=local.deardiary.network REACT_APP_PORT=14464 node scripts/start.js",
     "pretty":
-      "prettier --write --trailing-comma es5 --single-quote --arrow-parens always \"{src/**/*.{js,ts,tsx},*.json}\" && tslint --project . --fix",
+      "prettier --write --trailing-comma es5 --single-quote --print-width 120 --arrow-parens always \"{src/**/*.{js,ts,tsx},*.json}\" && tslint --project . --fix",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",
     "tslint-check": "tslint-config-prettier-check ./tslint.json",
@@ -17,8 +17,8 @@
     "@types/draft-js": "^0.10.20",
     "@types/react-highlight-words": "^0.6.4",
     "@types/react-router-dom": "^4.2.6",
-    "@types/recharts": "^1.0.18",
-    "antd": "3.4.2",
+    "@ant-design/compatible": "^1.1.0",
+    "antd": "^4.0.0",
     "append-query": "^2.0.1",
     "autoprefixer": "7.1.6",
     "babel-jest": "^22.1.0",
@@ -55,7 +55,7 @@
     "react-live-clock": "^2.0.3",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
-    "recharts": "^1.0.0-beta.10",
+    "recharts": "^2.1.0",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "=2.2.0",
@@ -67,7 +67,7 @@
     "ts-loader": "^2.3.7",
     "tsconfig-paths-webpack-plugin": "^2.0.0",
     "tslint-config-prettier": "^1.10.0",
-    "typescript": "^2.7.2",
+    "typescript": "^4.0.0",
     "uglifyjs-webpack-plugin": "^1.1.8",
     "url-loader": "0.6.2",
     "url-polyfill": "^1.0.13",

diary-front/src/components/DiaryHeaderContainer.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link, NavLink, withRouter } from 'react-router-dom';
 
-import { Button, Dropdown, Icon, Layout, Menu } from 'antd';
+import { Icon } from '@ant-design/compatible';
+import { Button, Dropdown, Layout, Menu } from 'antd';
 
 import { ReduxState, User } from 'reducers';
 import { dispatch } from 'reducers/store';

diary-front/src/components/DiaryLoginView.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { Button, Form, Icon, Input, message } from 'antd';
+import { Icon } from '@ant-design/compatible';
+import { Button, Form, Input, message } from 'antd';
 import { FormComponentProps } from 'antd/lib/form';
 
 import { dispatch } from 'reducers/store';

diary-front/src/components/DigestModule/DigestFormContainer.tsx

@@ -5,7 +5,8 @@ import * as moment from 'moment';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { Button, Card, DatePicker, Form, Icon, Input, message } from 'antd';
+import { Icon } from '@ant-design/compatible';
+import { Button, Card, DatePicker, Form, Input, message } from 'antd';
 
 import { ReduxState, User } from 'reducers';
 import { dispatch } from 'reducers/store';

diary-front/src/components/DigestModule/DigestTagsObject.tsx

@@ -2,7 +2,8 @@ import { SelectValue } from 'antd/lib/select';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { Icon, Input, Select, Tooltip } from 'antd';
+import { Icon } from '@ant-design/compatible';
+import { Input, Select, Tooltip } from 'antd';
 
 import { ReduxState } from 'reducers';
 import { Digest, FrequencyMap } from 'utils/api';

diary-front/src/components/EntryModule/EntryDayContainer.tsx

@@ -2,7 +2,8 @@ import classnames from 'classnames';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { Badge, Button, Card, Icon, message } from 'antd';
+import { Icon } from '@ant-design/compatible';
+import { Badge, Button, Card, message } from 'antd';
 
 import ReactDOM from 'react-dom';
 import { ReduxState, User } from 'reducers';

diary-front/src/components/ReminderModule/ReminderFormContainer.tsx

@@ -4,12 +4,12 @@ import * as moment from 'moment';
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { Icon } from '@ant-design/compatible';
 import {
   Button,
   Card,
   DatePicker,
   Form,
-  Icon,
   Input,
   InputNumber,
   message,

diary-front/src/components/TodoModule/TodoFormContainer.tsx

@@ -4,12 +4,12 @@ import * as moment from 'moment';
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { Icon } from '@ant-design/compatible';
 import {
   Button,
   Card,
   DatePicker,
   Form,
-  Icon,
   Input,
   InputNumber,
   message,

diary-front/src/components/common/Tag.tsx

@@ -4,7 +4,7 @@ import Animate from 'rc-animate';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { Icon } from 'antd';
+import { Icon } from '@ant-design/compatible';
 
 import { FrequencyMap } from 'utils/api';
 

diary-front/src/utils/util.tsx

@@ -3,7 +3,8 @@ import * as moment from 'moment';
 import React from 'react';
 import { withRouter } from 'react-router';
 
-import { AutoComplete, Icon } from 'antd';
+import { Icon } from '@ant-design/compatible';
+import { AutoComplete } from 'antd';
 
 import { isArray } from 'util';
 import { Digest, EntriesDateMap, Entry, FrequencyMap } from 'utils/api';