From 8adeeab0486a2303773b83611dbc8792699bc4b8 Mon Sep 17 00:00:00 2001 From: Hans Christian Reinl Date: Sun, 22 Nov 2020 15:01:47 +0100 Subject: [PATCH] Upgrade components to better structure --- src/AddButton/AddButton.tsx | 30 --------- .../{AddButton.test.tsx => index.test.tsx} | 0 src/AddButton/index.tsx | 31 ++++++++- .../{AppContainer.test.tsx => index.test.tsx} | 0 src/AppContainer/index.ts | 3 - .../{AppContainer.tsx => index.tsx} | 0 src/Base/index.styles.ts | 2 +- src/Base/{Base.test.tsx => index.test.tsx} | 0 src/Base/index.ts | 3 - src/Base/{Base.tsx => index.tsx} | 2 +- .../{Confirm.test.tsx => index.test.tsx} | 0 src/Confirm/index.ts | 3 - src/Confirm/{Confirm.tsx => index.tsx} | 0 src/Dashboard/index.ts | 3 - src/Dashboard/{Dashboard.tsx => index.tsx} | 0 src/Drawer/Drawer.tsx | 65 ------------------- .../{Drawer.test.tsx => index.test.tsx} | 0 src/Drawer/index.tsx | 64 +++++++++++++++++- .../{Header.test.tsx => index.test.tsx} | 0 src/Header/index.ts | 3 - src/Header/{Header.tsx => index.tsx} | 2 +- src/Menu/{Menu.test.tsx => index.test.tsx} | 0 src/Menu/index.ts | 3 - src/Menu/{Menu.tsx => index.tsx} | 0 src/Tabs/{Tabs.test.tsx => index.test.tsx} | 0 src/Tabs/index.ts | 3 - src/Tabs/{Tabs.tsx => index.tsx} | 0 src/tests/data/menu.tsx | 2 +- 28 files changed, 97 insertions(+), 122 deletions(-) delete mode 100644 src/AddButton/AddButton.tsx rename src/AddButton/{AddButton.test.tsx => index.test.tsx} (100%) rename src/AppContainer/{AppContainer.test.tsx => index.test.tsx} (100%) delete mode 100644 src/AppContainer/index.ts rename src/AppContainer/{AppContainer.tsx => index.tsx} (100%) rename src/Base/{Base.test.tsx => index.test.tsx} (100%) delete mode 100644 src/Base/index.ts rename src/Base/{Base.tsx => index.tsx} (97%) rename src/Confirm/{Confirm.test.tsx => index.test.tsx} (100%) delete mode 100644 src/Confirm/index.ts rename src/Confirm/{Confirm.tsx => index.tsx} (100%) delete mode 100644 src/Dashboard/index.ts rename src/Dashboard/{Dashboard.tsx => index.tsx} (100%) delete mode 100644 src/Drawer/Drawer.tsx rename src/Drawer/{Drawer.test.tsx => index.test.tsx} (100%) rename src/Header/{Header.test.tsx => index.test.tsx} (100%) delete mode 100644 src/Header/index.ts rename src/Header/{Header.tsx => index.tsx} (97%) rename src/Menu/{Menu.test.tsx => index.test.tsx} (100%) delete mode 100644 src/Menu/index.ts rename src/Menu/{Menu.tsx => index.tsx} (100%) rename src/Tabs/{Tabs.test.tsx => index.test.tsx} (100%) delete mode 100644 src/Tabs/index.ts rename src/Tabs/{Tabs.tsx => index.tsx} (100%) diff --git a/src/AddButton/AddButton.tsx b/src/AddButton/AddButton.tsx deleted file mode 100644 index a662c1f..0000000 --- a/src/AddButton/AddButton.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import { withStyles, Fab } from "@material-ui/core"; -import AddIcon from "@material-ui/icons/Add"; - -const styles = (theme: any) => ({ - button: { - position: "fixed", - right: theme.spacing(3), - bottom: theme.spacing(3), - }, -}); - -type AddButtonProps = { - onClick: (...args: any[]) => any; - classes: { - [key: string]: string; - }; -}; - -const AddButton: React.SFC = ({ onClick, classes }) => ( - - - -); -export default withStyles(styles as any)(AddButton); diff --git a/src/AddButton/AddButton.test.tsx b/src/AddButton/index.test.tsx similarity index 100% rename from src/AddButton/AddButton.test.tsx rename to src/AddButton/index.test.tsx diff --git a/src/AddButton/index.tsx b/src/AddButton/index.tsx index b6647e5..f12dc76 100644 --- a/src/AddButton/index.tsx +++ b/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 = ({ onClick }) => { + const classes = useStyles(); + + return ( + + + + ); +}; export default AddButton; diff --git a/src/AppContainer/AppContainer.test.tsx b/src/AppContainer/index.test.tsx similarity index 100% rename from src/AppContainer/AppContainer.test.tsx rename to src/AppContainer/index.test.tsx diff --git a/src/AppContainer/index.ts b/src/AppContainer/index.ts deleted file mode 100644 index 4814015..0000000 --- a/src/AppContainer/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import AppContainer from "./AppContainer"; - -export default AppContainer; diff --git a/src/AppContainer/AppContainer.tsx b/src/AppContainer/index.tsx similarity index 100% rename from src/AppContainer/AppContainer.tsx rename to src/AppContainer/index.tsx diff --git a/src/Base/index.styles.ts b/src/Base/index.styles.ts index e6db66e..c52b7b6 100644 --- a/src/Base/index.styles.ts +++ b/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": { diff --git a/src/Base/Base.test.tsx b/src/Base/index.test.tsx similarity index 100% rename from src/Base/Base.test.tsx rename to src/Base/index.test.tsx diff --git a/src/Base/index.ts b/src/Base/index.ts deleted file mode 100644 index 2e06f6b..0000000 --- a/src/Base/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Base from "./Base"; - -export default Base; diff --git a/src/Base/Base.tsx b/src/Base/index.tsx similarity index 97% rename from src/Base/Base.tsx rename to src/Base/index.tsx index 6bf80fb..cadb571 100644 --- a/src/Base/Base.tsx +++ b/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"; diff --git a/src/Confirm/Confirm.test.tsx b/src/Confirm/index.test.tsx similarity index 100% rename from src/Confirm/Confirm.test.tsx rename to src/Confirm/index.test.tsx diff --git a/src/Confirm/index.ts b/src/Confirm/index.ts deleted file mode 100644 index cbbbe24..0000000 --- a/src/Confirm/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Confirm from "./Confirm"; - -export default Confirm; diff --git a/src/Confirm/Confirm.tsx b/src/Confirm/index.tsx similarity index 100% rename from src/Confirm/Confirm.tsx rename to src/Confirm/index.tsx diff --git a/src/Dashboard/index.ts b/src/Dashboard/index.ts deleted file mode 100644 index 137bcca..0000000 --- a/src/Dashboard/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Dashboard from "./Dashboard"; - -export default Dashboard; diff --git a/src/Dashboard/Dashboard.tsx b/src/Dashboard/index.tsx similarity index 100% rename from src/Dashboard/Dashboard.tsx rename to src/Dashboard/index.tsx diff --git a/src/Drawer/Drawer.tsx b/src/Drawer/Drawer.tsx deleted file mode 100644 index fe56653..0000000 --- a/src/Drawer/Drawer.tsx +++ /dev/null @@ -1,65 +0,0 @@ -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/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 = ({ - data, - isOpen = false, - onClose, - redirectTo, -}) => { - const classes = useStyles(); - - return ( - -
- - - -
- - - - - - ); -}; - -export default Drawer; diff --git a/src/Drawer/Drawer.test.tsx b/src/Drawer/index.test.tsx similarity index 100% rename from src/Drawer/Drawer.test.tsx rename to src/Drawer/index.test.tsx diff --git a/src/Drawer/index.tsx b/src/Drawer/index.tsx index e720d38..3aefe3c 100644 --- a/src/Drawer/index.tsx +++ b/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 = ({ + data, + isOpen = false, + onClose, + redirectTo, +}) => { + const classes = useStyles(); + + return ( + +
+ + + +
+ + + + + + ); +}; export default Drawer; diff --git a/src/Header/Header.test.tsx b/src/Header/index.test.tsx similarity index 100% rename from src/Header/Header.test.tsx rename to src/Header/index.test.tsx diff --git a/src/Header/index.ts b/src/Header/index.ts deleted file mode 100644 index 0d87fe1..0000000 --- a/src/Header/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Header from "./Header"; - -export default Header; diff --git a/src/Header/Header.tsx b/src/Header/index.tsx similarity index 97% rename from src/Header/Header.tsx rename to src/Header/index.tsx index bc66024..446ef27 100644 --- a/src/Header/Header.tsx +++ b/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: { diff --git a/src/Menu/Menu.test.tsx b/src/Menu/index.test.tsx similarity index 100% rename from src/Menu/Menu.test.tsx rename to src/Menu/index.test.tsx diff --git a/src/Menu/index.ts b/src/Menu/index.ts deleted file mode 100644 index 6c3fc9d..0000000 --- a/src/Menu/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Menu from "./Menu"; - -export default Menu; diff --git a/src/Menu/Menu.tsx b/src/Menu/index.tsx similarity index 100% rename from src/Menu/Menu.tsx rename to src/Menu/index.tsx diff --git a/src/Tabs/Tabs.test.tsx b/src/Tabs/index.test.tsx similarity index 100% rename from src/Tabs/Tabs.test.tsx rename to src/Tabs/index.test.tsx diff --git a/src/Tabs/index.ts b/src/Tabs/index.ts deleted file mode 100644 index a5881f1..0000000 --- a/src/Tabs/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Tabs from "./Tabs"; - -export default Tabs; diff --git a/src/Tabs/Tabs.tsx b/src/Tabs/index.tsx similarity index 100% rename from src/Tabs/Tabs.tsx rename to src/Tabs/index.tsx diff --git a/src/tests/data/menu.tsx b/src/tests/data/menu.tsx index 28077eb..3a10ba2 100644 --- a/src/tests/data/menu.tsx +++ b/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[] = [ {