functional ApplicationSidebar
-import { createStyles, List, ListItem, ListItemIcon, ListItemText, Theme } from "@material-ui/core";
+import { createStyles, List, ListItem, ListItemIcon, ListItemText, makeStyles, Theme } from "@material-ui/core";
import AppsIcon from "@material-ui/icons/Apps";
-import { WithStyles, withStyles } from "@material-ui/styles";
import { blinkTopProgressAction } from "actions/settings";
import { withUserAuth, WithUserAuthProps } from "hoc/withUserAuth";
import React from "react";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
import { NavLink, withRouter } from "react-router-dom";
import { RootState } from "reducers";
-import { TDispatch } from "types";
import sc from "utils/stringConstants";
import { DashboardIcon, KalmComponentsIcon, PeopleIcon, SettingIcon } from "widgets/Icon";
-const mapStateToProps = (state: RootState) => {
- return {
- activeNamespaceName: state.namespaces.active,
- };
-};
-
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
createStyles({
listItem: {
height: 40,
@@ -39,24 +31,22 @@ const styles = (theme: Theme) =>
listItemText: {
"font-size": theme.typography.subtitle1.fontSize,
},
- });
-
-interface Props extends WithStyles<typeof styles>, WithUserAuthProps, ReturnType<typeof mapStateToProps> {
- dispatch: TDispatch;
- // canEdit?: boolean;
-}
+ }),
+);
-interface State {}
+interface Props extends WithUserAuthProps {}
-class ApplicationViewDrawerRaw extends React.PureComponent<Props, State> {
- constructor(props: Props) {
- super(props);
+const ApplicationViewDrawerRaw: React.FC<Props> = (props) => {
+ const classes = useStyles();
- this.state = {};
- }
+ const { activeNamespaceName } = useSelector((state: RootState) => {
+ return {
+ activeNamespaceName: state.namespaces.active,
+ };
+ });
- private getMenuData() {
- const { activeNamespaceName, canManageNamespace: canManageScope, canEditTenant } = this.props;
+ const getMenuData = () => {
+ const { canManageNamespace: canManageScope, canEditTenant } = props;
const menus = [];
menus.push({
text: "Components",
@@ -85,14 +75,12 @@ class ApplicationViewDrawerRaw extends React.PureComponent<Props, State> {
});
}
return menus;
- }
+ };
+ const menuData = getMenuData();
- render() {
const {
- classes,
location: { pathname },
- } = this.props;
- const menuData = this.getMenuData();
+ } = props;
return (
<List style={{ width: "100%" }}>
@@ -115,9 +103,6 @@ class ApplicationViewDrawerRaw extends React.PureComponent<Props, State> {
))}
</List>
);
- }
-}
+};
-export const ApplicationSidebar = withUserAuth(
- withRouter(connect(mapStateToProps)(withStyles(styles)(ApplicationViewDrawerRaw))),
-);
+export const ApplicationSidebar = withUserAuth(withRouter(ApplicationViewDrawerRaw));
