Chenge layout -> drawer access with localStateRedux

replace some default exports with const

Author: Wroud

ClientApp/Views/Dashboard/Components/Home.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { RouteComponentProps } from "react-router-dom";
 
-export default class Home extends React.PureComponent<RouteComponentProps<any> | undefined> {
+export class Home extends React.PureComponent<RouteComponentProps<any> | undefined> {
     render() {
         return (
             <div>

ClientApp/Views/Dashboard/Components/Lecturers/Lecturers.tsx

@@ -16,7 +16,7 @@ type LecturersProps =
     & typeof lecturersActions.mapCreators.lecturers
     & RouteComponentProps<any>;
 
-class Lecturers extends React.PureComponent<LecturersProps> {
+class LecturersClass extends React.PureComponent<LecturersProps> {
     render() {
         return (
             <Grid>
@@ -58,7 +58,7 @@ export const FormProgress = connect(
     () => ({}),
 )(LinearProgress);
 
-export default withRouter<RouteComponentProps<any> | undefined>(connect(
+export const Lecturers =  withRouter<RouteComponentProps<any> | undefined>(connect(
     null,
     lecturersActions.mapDispatch.lecturers,
-)(Lecturers as any) as any);
+)(LecturersClass as any) as any);

ClientApp/Views/Dashboard/Components/Shared/Drawer.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { matchPath, RouteComponentProps, withRouter } from "react-router";
+import { Link } from "react-router-dom";
 import {
     Drawer,
     DrawerContent,
@@ -11,19 +13,49 @@ import {
     ListItemText,
 } from "rmwc/List";
 
+import { connectState, connectWithComponentId, IComponentId, ILocalReducer } from "@app/middlewares/redux-subreducer";
+import { compose } from "redux";
+import { lecturersActions } from "../../actions";
+import Module from "../../module";
+
 interface IProps {
-    open?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
 }
 
-export default class Counter extends React.PureComponent<IProps, { open: boolean }> {
-    constructor(props: IProps) {
+interface IState {
+    open: boolean;
+}
+
+type Props = IProps;
+
+interface IMenuLink {
+    key: number;
+    title: string;
+    url: string;
+    path: string;
+    exact?: boolean;
+    strict?: boolean;
+}
+
+const initState: IState = {
+    open: true,
+};
+
+export class DrawerWraperClass extends React.Component<IProps & RouteComponentProps<{}>, IState> {
+    links: IMenuLink[];
+
+    constructor(props: IProps & RouteComponentProps<{}>) {
         super(props);
+        this.state = initState;
 
-        this.state = {
-            open: props.open || true,
-        };
+        this.links = Module.navigation.map<IMenuLink>(({ title, url, path, exact }, key) => ({
+            key,
+            title: title || "?",
+            url,
+            path: path || url,
+            exact,
+        }));
     }
     switchDrawer = () => {
         this.setState({
@@ -44,20 +76,47 @@ export default class Counter extends React.PureComponent<IProps, { open: boolean
         return (
             <Drawer persistent={true} open={this.state.open} onClose={this.closeDrawer} onOpen={this.openDrawer}>
                 <DrawerContent>
-                    <ListItem>
-                        <ListItemGraphic>star_border</ListItemGraphic>
-                        <ListItemText>Counter</ListItemText>
-                    </ListItem>
-                    <ListItem>
-                        <ListItemGraphic>star_border</ListItemGraphic>
-                        <ListItemText>Pizza</ListItemText>
-                    </ListItem>
-                    <ListItem>
-                        <ListItemGraphic>star_border</ListItemGraphic>
-                        <ListItemText>Icecream</ListItemText>
-                    </ListItem>
+                    {this.getElements()}
                 </DrawerContent>
             </Drawer>
         );
     }
+
+    private getElements = () =>
+        this.links.map(({ title, url }, index) => (
+            <ListItem key={title} wrap={false}>
+                {/* <Link to={url}> */}
+                    <ListItemGraphic>star_border</ListItemGraphic>
+                    <ListItemText>{title}</ListItemText>
+                {/* </Link> */}
+            </ListItem>
+        ))
+
+    private getActive = () => {
+        let pathname = "/";
+        if (!!this.props.location) {
+            pathname = this.props.location.pathname;
+        }
+        const match = this.links.find(link => !!matchPath(pathname, link));
+        if (match) {
+            return match.key;
+        }
+        return 0;
+    }
 }
+
+const switchDrawer = (props, prevState) => ({ open: !prevState.open });
+
+const stateReducer = (reducer: ILocalReducer<Props & IComponentId, IState>) => reducer
+    .on(lecturersActions.actions.ui.switchDrawer, switchDrawer);
+
+const enhance = compose<React.ComponentClass>(
+    withRouter,
+    connectState<Props, IState>(
+        initState,
+        stateReducer,
+        "drawer",
+    ),
+);
+
+export const DrawerWrapper = enhance(DrawerWraperClass);

ClientApp/Views/Dashboard/Components/Shared/Layout.tsx

@@ -1,26 +1,35 @@
 import * as React from "react";
+import { connect } from "react-redux";
+import { RouteComponentProps, withRouter } from "react-router";
+import { compose } from "redux";
 import {
     ToolbarFixedAdjust,
 } from "rmwc/Toolbar";
-import Drawer from "./Drawer";
+import { DrawerWrapper } from "./Drawer";
 import NavMenu from "./NavMenu";
 
-export class Layout extends React.Component {
-    Drawer?: Drawer | null;
-    switchDrawer = () => {
-        if (!!this.Drawer) {
-            this.Drawer.switchDrawer();
-        }
-    }
+import { lecturersActions } from "../../actions";
+
+export class LayoutClass extends React.Component<typeof lecturersActions.mapCreators.ui & RouteComponentProps<{}>> {
     render() {
         return [
-            <NavMenu switchDrawer={this.switchDrawer} key={"drawer"} />,
+            <NavMenu switchDrawer={this.props.actions.switchDrawer} key={"drawer"} />,
             (
                 <ToolbarFixedAdjust key={"toolbar"} className={"dashboard"}>
-                    <Drawer ref={ref => { this.Drawer = ref; }} />
+                    <DrawerWrapper />
                     <main>{this.props.children}</main>
                 </ToolbarFixedAdjust>
             ),
         ];
     }
 }
+
+const enhance = compose<React.ComponentClass>(
+    withRouter,
+    connect(
+        null,
+        lecturersActions.mapDispatch.ui,
+    ),
+);
+
+export const Layout = enhance(LayoutClass);

ClientApp/Views/Dashboard/Components/Shared/NavMenu.tsx

@@ -8,7 +8,7 @@ import {
     ToolbarTitle,
 } from "rmwc/Toolbar";
 
-import TabList from "./TabList";
+import { TabList } from "./TabList";
 
 interface IProps {
     switchDrawer: () => void;

ClientApp/Views/Dashboard/Components/Shared/TabList.tsx

@@ -28,7 +28,7 @@ interface IMenuLink {
 
 type Props = RouteComponentProps<{}>;
 
-class TabList extends React.PureComponent<Props, {}> {
+class TabListClass extends React.PureComponent<Props, {}> {
     links: IMenuLink[];
 
     constructor(props: Props) {
@@ -75,4 +75,4 @@ class TabList extends React.PureComponent<Props, {}> {
     }
 }
 
-export default withRouter<{}>(TabList);
+export const TabList = withRouter<{}>(TabListClass);

ClientApp/Views/Dashboard/Components/index.tsx

@@ -1,3 +1,3 @@
-export { default as Home } from "./Home";
+export { Home } from "./Home";
 export { Layout } from "./Shared/Layout";
-export { default as Lecturers } from "./Lecturers/Lecturers";
+export { Lecturers } from "./Lecturers/Lecturers";

ClientApp/Views/Dashboard/actions/lecturers.ts

@@ -8,6 +8,9 @@ import { ILecturer } from "@app/store/database";
 const from = "Views/Dashboard";
 
 export const { actions, creators, mapDispatch, mapCreators } = prepareActions({
+    ui: {
+        switchDrawer: createAction("Switch Drawer", from),
+    },
     lecturers: {
         setLoading: createAction("Lecturers loading...", from),
         setLoaded: createAction("Lecturers loaded", from),