Upgrade components to better structure

src/AddButton/index.tsx

@@ -1,3 +1,32 @@
-import AddButton from "./AddButton";
+import React, { FunctionComponent } from "react";
+import { Fab, Theme, makeStyles } from "@material-ui/core";
+import AddIcon from "@material-ui/icons/Add";
+
+const useStyles = makeStyles((theme: Theme) => ({
+  button: {
+    position: "fixed",
+    right: theme.spacing(3),
+    bottom: theme.spacing(3),
+  },
+}));
+
+type AddButtonProps = {
+  onClick: (...args: any[]) => any;
+};
+
+const AddButton: FunctionComponent<AddButtonProps> = ({ onClick }) => {
+  const classes = useStyles();
+
+  return (
+    <Fab
+      color="secondary"
+      aria-label="add"
+      className={classes.button}
+      onClick={onClick}
+    >
+      <AddIcon />
+    </Fab>
+  );
+};
 
 export default AddButton;

src/Base/index.styles.ts

@@ -1,5 +1,5 @@
 import { makeStyles, Theme } from "@material-ui/core";
-import { DRAWER_WIDTH } from "../Drawer/Drawer";
+import { DRAWER_WIDTH } from "../Drawer";
 
 const useStyles = makeStyles((theme: Theme) => ({
   "@global html": {

src/Base/Base.tsx → src/Base/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useState } from "react";
 import * as H from "history";
 import classNames from "classnames";
-import { MenuDataItem } from "../Menu/Menu";
+import { MenuDataItem } from "../Menu";
 import Drawer from "../Drawer";
 import Header from "../Header";
 import useStyles from "./index.styles";

src/Drawer/index.tsx

@@ -1,3 +1,65 @@
-import Drawer from "./Drawer";
+import React from "react";
+import {
+  Drawer as MaterialDrawer,
+  Divider,
+  IconButton,
+  Theme,
+} from "@material-ui/core";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import Menu from "../Menu";
+import { MenuDataItem } from "../Menu";
+import { makeStyles } from "@material-ui/styles";
+
+export const DRAWER_WIDTH = 240;
+const useStyles = makeStyles((theme: Theme) => ({
+  drawerPaper: {
+    width: DRAWER_WIDTH,
+  },
+
+  drawerHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "0 8px",
+    height: theme.spacing(8),
+  },
+}));
+
+type DrawerProps = {
+  data: MenuDataItem[];
+  isOpen?: boolean;
+  onClose: (...args: any[]) => any;
+  redirectTo: (...args: any[]) => any;
+};
+
+const Drawer: React.SFC<DrawerProps> = ({
+  data,
+  isOpen = false,
+  onClose,
+  redirectTo,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <MaterialDrawer
+      variant="persistent"
+      classes={{
+        paper: classes.drawerPaper,
+      }}
+      anchor="left"
+      open={isOpen}
+    >
+      <div className={classes.drawerHeader}>
+        <IconButton onClick={onClose}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </div>
+
+      <Divider />
+
+      <Menu data={data} redirectTo={redirectTo} />
+    </MaterialDrawer>
+  );
+};
 
 export default Drawer;

src/Header/Header.tsx → src/Header/index.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
-import { DRAWER_WIDTH } from "../Drawer/Drawer";
+import { DRAWER_WIDTH } from "../Drawer";
 
 const useStyles = makeStyles((theme: Theme) => ({
   appBar: {

src/tests/data/menu.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import BugIcon from "@material-ui/icons/BugReport";
-import { MenuDataItem } from "../../Menu/Menu";
+import { MenuDataItem } from "../../Menu";
 
 const menu: MenuDataItem[] = [
   {