Skip to content

Commit 78ab839

Browse files
stackingcatsstackingcats
authored
Merge pull request #29 from scorebreaker/menu-design
refactor: move menu to separate file, add storybook for it and remove sass
2 parents ca52b38 + 194152d commit 78ab839

File tree

12 files changed

+362
-789
lines changed

12 files changed

+362
-789
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
"bignumber.js": "^9.0.1",
2424
"mobx": "^6.0.4",
2525
"mobx-react": "^7.0.5",
26-
"node-sass": "4.14.1",
2726
"qrcode.react": "^1.0.0",
2827
"react": "^16.13.1",
2928
"react-dom": "^16.13.1",
@@ -45,6 +44,7 @@
4544
"@storybook/preset-create-react-app": "^3.1.6",
4645
"@storybook/react": "^6.1.21",
4746
"@storybook/theming": "^6.1.21",
47+
"storybook-react-router": "^1.0.8",
4848
"@testing-library/jest-dom": "^5.11.4",
4949
"@testing-library/react": "^11.1.0",
5050
"@testing-library/user-event": "^12.1.10",
@@ -55,6 +55,7 @@
5555
"@types/react-dom": "^16.9.8",
5656
"@types/react-router-dom": "^5.1.5",
5757
"@types/socket.io-client": "^1.4.34",
58+
"@types/storybook-react-router": "1.0.0",
5859
"@typescript-eslint/eslint-plugin": "^4.2.0",
5960
"@typescript-eslint/parser": "^4.2.0",
6061
"cross-env": "^7.0.2",

‎src/assets/OpenDEXLogo.png‎

43.4 KB
Loading

‎src/common/components/navigation/Menu.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import React from "react";
2+
import Drawer from "@material-ui/core/Drawer";
3+
import { Grid, Typography } from "@material-ui/core";
4+
import List from "@material-ui/core/List";
5+
import AccountBalanceWalletOutlinedIcon from "@material-ui/icons/AccountBalanceWalletOutlined";
6+
import CachedIcon from "@material-ui/icons/Cached";
7+
import HistoryIcon from "@material-ui/icons/History";
8+
import RemoveRedEyeOutlinedIcon from "@material-ui/icons/RemoveRedEyeOutlined";
9+
import SettingsIcon from "@material-ui/icons/Settings";
10+
import SportsEsportsIcon from "@material-ui/icons/SportsEsports";
11+
import TrendingUpIcon from "@material-ui/icons/TrendingUp";
12+
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
13+
import { Path } from "../../../router/Path";
14+
import MenuItem, { MenuItemProps } from "./MenuItem";
15+
import Overview from "../../../dashboard/overview/Overview";
16+
import Trade from "../../../dashboard/trade/Trade";
17+
import Tradehistory from "../../../dashboard/tradehistory/Tradehistory";
18+
import Wallets from "../../../dashboard/wallet/Wallets";
19+
import Console from "../../../dashboard/console/Console";
20+
import { isElectron, sendMessageToParent } from "../../utils/appUtil";
21+
import Button from "../input/buttons/Button";
22+
import Settings from "../../../settings/Settings";
23+
24+
export const menuItems: MenuItemProps[] = [
25+
{
26+
path: Path.OVERVIEW,
27+
text: "Overview",
28+
component: Overview,
29+
icon: RemoveRedEyeOutlinedIcon,
30+
isFallback: true,
31+
},
32+
{
33+
path: Path.TRADE,
34+
text: "Trade",
35+
component: Trade,
36+
icon: TrendingUpIcon,
37+
},
38+
{
39+
path: Path.TRADEHISTORY,
40+
text: "Trade History",
41+
component: Tradehistory,
42+
icon: HistoryIcon,
43+
},
44+
{
45+
path: Path.WALLETS,
46+
text: "Wallets",
47+
component: Wallets,
48+
icon: AccountBalanceWalletOutlinedIcon,
49+
},
50+
{
51+
path: Path.CONSOLE,
52+
text: "Console",
53+
component: Console,
54+
icon: SportsEsportsIcon,
55+
},
56+
];
57+
58+
export const drawerWidth = 200;
59+
60+
const useStyles = makeStyles((theme: Theme) =>
61+
createStyles({
62+
drawerPaper: {
63+
width: drawerWidth,
64+
justifyContent: "space-between",
65+
},
66+
menuContainer: {
67+
width: "100%",
68+
},
69+
header: {
70+
padding: "16px",
71+
},
72+
drawerButton: {
73+
margin: theme.spacing(2),
74+
},
75+
})
76+
);
77+
78+
export interface MenuProps {
79+
syncInProgress: boolean;
80+
menuItemTooltipMsg: string[];
81+
}
82+
83+
export const Menu: React.FunctionComponent<MenuProps> = (props) => {
84+
const classes = useStyles();
85+
86+
const disconnect = (): void => {
87+
sendMessageToParent("disconnect");
88+
};
89+
90+
return (
91+
<Drawer
92+
variant="permanent"
93+
classes={{
94+
paper: classes.drawerPaper,
95+
}}
96+
anchor="left"
97+
>
98+
<Grid container item>
99+
<Typography
100+
className={classes.header}
101+
variant="overline"
102+
component="p"
103+
color="textSecondary"
104+
>
105+
OpenDEX
106+
</Typography>
107+
<List className={classes.menuContainer}>
108+
{menuItems.map((item) => (
109+
<MenuItem
110+
path={item.path}
111+
text={item.text}
112+
component={item.component}
113+
key={item.text}
114+
icon={item.icon}
115+
isFallback={item.isFallback}
116+
isDisabled={item.path !== Path.OVERVIEW && props.syncInProgress}
117+
tooltipTextRows={props.menuItemTooltipMsg}
118+
/>
119+
))}
120+
</List>
121+
</Grid>
122+
<Grid container item direction="column" justify="flex-end">
123+
<Grid item container>
124+
<MenuItem
125+
path={Path.SETTINGS}
126+
text={"Settings"}
127+
component={Settings}
128+
icon={SettingsIcon}
129+
/>
130+
</Grid>
131+
{isElectron() && (
132+
<Grid item container justify="center">
133+
<Button
134+
text="Disconnect"
135+
tooltipTitle="Disconnect from opendex-docker"
136+
tooltipPlacement="top"
137+
size="small"
138+
startIcon={<CachedIcon />}
139+
variant="outlined"
140+
className={classes.drawerButton}
141+
fullWidth
142+
onClick={disconnect}
143+
/>
144+
</Grid>
145+
)}
146+
</Grid>
147+
</Drawer>
148+
);
149+
};

‎src/dashboard/Dashboard.tsx‎

Lines changed: 6 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
1-
import { Grid, Typography } from "@material-ui/core";
1+
import { Grid } from "@material-ui/core";
22
import Box from "@material-ui/core/Box";
3-
import Drawer from "@material-ui/core/Drawer";
4-
import List from "@material-ui/core/List";
53
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
6-
import AccountBalanceWalletOutlinedIcon from "@material-ui/icons/AccountBalanceWalletOutlined";
7-
import CachedIcon from "@material-ui/icons/Cached";
8-
import HistoryIcon from "@material-ui/icons/History";
9-
import RemoveRedEyeOutlinedIcon from "@material-ui/icons/RemoveRedEyeOutlined";
10-
import SettingsIcon from "@material-ui/icons/Settings";
11-
import SportsEsportsIcon from "@material-ui/icons/SportsEsports";
12-
import TrendingUpIcon from "@material-ui/icons/TrendingUp";
134
import React, { ReactElement, useEffect, useState } from "react";
145
import {
156
Redirect,
@@ -29,25 +20,16 @@ import {
2920
takeUntil,
3021
} from "rxjs/operators";
3122
import api from "../api";
32-
import Button from "../common/components/input/buttons/Button";
33-
import MenuItem, {
34-
MenuItemProps,
35-
} from "../common/components/navigation/MenuItem";
3623
import NotFound from "../common/components/NotFound";
37-
import { isElectron, sendMessageToParent } from "../common/utils/appUtil";
3824
import { SetupStatusResponse } from "../models/SetupStatusResponse";
3925
import { Status } from "../models/Status";
4026
import { Path } from "../router/Path";
4127
import Settings from "../settings/Settings";
42-
import Console from "./console/Console";
43-
import Overview from "./overview/Overview";
4428
import SetupWarning from "./SetupWarning";
45-
import Trade from "./trade/Trade";
46-
import Tradehistory from "./tradehistory/Tradehistory";
47-
import Wallets from "./wallet/Wallets";
4829
import { isOpendexdReady } from "../common/utils/serviceUtil";
4930
import { ServiceStore, SERVICE_STORE } from "../stores/serviceStore";
5031
import { inject, observer } from "mobx-react";
32+
import { Menu, menuItems } from "../common/components/navigation/Menu";
5133

5234
type DashboardProps = {
5335
serviceStore?: ServiceStore;
@@ -57,19 +39,6 @@ export const drawerWidth = 200;
5739

5840
const useStyles = makeStyles((theme: Theme) =>
5941
createStyles({
60-
drawerPaper: {
61-
width: drawerWidth,
62-
justifyContent: "space-between",
63-
},
64-
menuContainer: {
65-
width: "100%",
66-
},
67-
header: {
68-
padding: "16px",
69-
},
70-
drawerButton: {
71-
margin: theme.spacing(2),
72-
},
7342
content: {
7443
marginLeft: drawerWidth,
7544
backgroundColor: theme.palette.background.default,
@@ -95,44 +64,6 @@ const Dashboard = inject(SERVICE_STORE)(
9564
[]
9665
);
9766

98-
const menuItems: MenuItemProps[] = [
99-
{
100-
path: Path.OVERVIEW,
101-
text: "Overview",
102-
component: Overview,
103-
icon: RemoveRedEyeOutlinedIcon,
104-
isFallback: true,
105-
},
106-
{
107-
path: Path.TRADE,
108-
text: "Trade",
109-
component: Trade,
110-
icon: TrendingUpIcon,
111-
},
112-
{
113-
path: Path.TRADEHISTORY,
114-
text: "Trade History",
115-
component: Tradehistory,
116-
icon: HistoryIcon,
117-
},
118-
{
119-
path: Path.WALLETS,
120-
text: "Wallets",
121-
component: Wallets,
122-
icon: AccountBalanceWalletOutlinedIcon,
123-
},
124-
{
125-
path: Path.CONSOLE,
126-
text: "Console",
127-
component: Console,
128-
icon: SportsEsportsIcon,
129-
},
130-
];
131-
132-
const disconnect = (): void => {
133-
sendMessageToParent("disconnect");
134-
};
135-
13667
useEffect(() => {
13768
if (syncInProgress) {
13869
return;
@@ -204,63 +135,10 @@ const Dashboard = inject(SERVICE_STORE)(
204135

205136
return (
206137
<Box>
207-
<Drawer
208-
variant="permanent"
209-
classes={{
210-
paper: classes.drawerPaper,
211-
}}
212-
anchor="left"
213-
>
214-
<Grid container item>
215-
<Typography
216-
className={classes.header}
217-
variant="overline"
218-
component="p"
219-
color="textSecondary"
220-
>
221-
OpenDEX
222-
</Typography>
223-
<List className={classes.menuContainer}>
224-
{menuItems.map((item) => (
225-
<MenuItem
226-
path={item.path}
227-
text={item.text}
228-
component={item.component}
229-
key={item.text}
230-
icon={item.icon}
231-
isFallback={item.isFallback}
232-
isDisabled={item.path !== Path.OVERVIEW && syncInProgress}
233-
tooltipTextRows={menuItemTooltipMsg}
234-
/>
235-
))}
236-
</List>
237-
</Grid>
238-
<Grid container item direction="column" justify="flex-end">
239-
<Grid item container>
240-
<MenuItem
241-
path={Path.SETTINGS}
242-
text={"Settings"}
243-
component={Settings}
244-
icon={SettingsIcon}
245-
/>
246-
</Grid>
247-
{isElectron() && (
248-
<Grid item container justify="center">
249-
<Button
250-
text="Disconnect"
251-
tooltipTitle="Disconnect from opendex-docker"
252-
tooltipPlacement="top"
253-
size="small"
254-
startIcon={<CachedIcon />}
255-
variant="outlined"
256-
className={classes.drawerButton}
257-
fullWidth
258-
onClick={disconnect}
259-
/>
260-
</Grid>
261-
)}
262-
</Grid>
263-
</Drawer>
138+
<Menu
139+
syncInProgress={syncInProgress}
140+
menuItemTooltipMsg={menuItemTooltipMsg}
141+
/>
264142
<main className={classes.content}>
265143
<Grid item container>
266144
{opendexdReady &&

‎src/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import ReactDOM from "react-dom";
3-
import "./styles/styles.scss";
43
import App from "./App";
54

65
ReactDOM.render(

‎src/stories/Menu.stories.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
import StoryRouter from "storybook-react-router";
3+
import { storiesOf } from "@storybook/react";
4+
import { Menu } from "../common/components/navigation/Menu";
5+
6+
storiesOf("Menu", module)
7+
.addDecorator(StoryRouter())
8+
.add("MenuDefault", () => (
9+
<Menu syncInProgress={false} menuItemTooltipMsg={[]} />
10+
));

0 commit comments

Comments
 (0)