Skip to content

Commit dd94c17

Browse files
QuernestQuernest
committed
header hook, dataset class instead service
1 parent 679855c commit dd94c17

File tree

13 files changed

+258
-318
lines changed

13 files changed

+258
-318
lines changed

‎src/components/Header.tsx

Lines changed: 107 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -9,155 +9,127 @@ import List from "@material-ui/core/List";
99
import ListItem from "@material-ui/core/ListItem";
1010
import ListItemIcon from "@material-ui/core/ListItemIcon";
1111
import ListItemText from "@material-ui/core/ListItemText";
12-
import {
13-
createStyles,
14-
Theme,
15-
WithStyles,
16-
withStyles
17-
} from "@material-ui/core/styles";
12+
import { Theme } from "@material-ui/core/styles";
1813
import Toolbar from "@material-ui/core/Toolbar";
1914
import MenuIcon from "@material-ui/icons/Menu";
20-
import React from "react";
15+
import React, { useState } from "react";
2116
import { Link } from "react-router-dom";
22-
import { withRouter } from "react-router-dom";
23-
import compose from "recompose/compose";
24-
import { IRoute } from "src/router";
17+
import { withRouter, RouteComponentProps } from "react-router-dom";
18+
import { IRoute } from "../router";
19+
import { makeStyles } from "@material-ui/styles";
2520

26-
const styles = ({ breakpoints }: Theme) =>
27-
createStyles({
28-
wrap: {
29-
width: "100%",
30-
maxWidth: breakpoints.values.lg,
31-
marginLeft: "auto",
32-
marginRight: "auto"
33-
},
34-
menuButton: {
35-
marginLeft: -12
36-
},
37-
list: {
38-
width: 250
39-
},
40-
right: {
41-
marginLeft: "auto"
42-
}
43-
});
21+
const useStyles = makeStyles(({ breakpoints }: Theme) => ({
22+
wrap: {
23+
width: "100%",
24+
maxWidth: breakpoints.values.lg,
25+
marginLeft: "auto",
26+
marginRight: "auto"
27+
},
28+
menuButton: {
29+
marginLeft: -12
30+
},
31+
list: {
32+
width: 250
33+
},
34+
right: {
35+
marginLeft: "auto"
36+
}
37+
}));
4438

45-
interface IHeaderBaseProps extends WithStyles<typeof styles> {
39+
interface IHeaderProps extends RouteComponentProps {
4640
routes: IRoute[];
47-
location: Location;
48-
}
49-
50-
interface IHeaderBaseState {
51-
isOpenDrawer: boolean;
5241
}
5342

54-
class HeaderBase extends React.Component<IHeaderBaseProps, IHeaderBaseState> {
55-
public readonly state = {
56-
isOpenDrawer: false
57-
};
43+
export const HeaderBase: React.FC<IHeaderProps> = ({ routes, location }) => {
44+
const classes = useStyles();
45+
const [isOpenDrawer, toggleDrawer] = useState<boolean>(false);
5846

59-
protected toggleDrawer = (isOpenDrawer: boolean) => () => {
60-
this.setState({
61-
isOpenDrawer
62-
});
63-
};
47+
const links = routes.map(({ path, title }, i) => {
48+
if (path && title) {
49+
return (
50+
<Button
51+
key={i}
52+
{...{
53+
component: Link,
54+
to: path,
55+
replace: path === location.pathname
56+
} as any}
57+
variant="text"
58+
color="inherit"
59+
>
60+
{title || ""}
61+
</Button>
62+
);
63+
}
6464

65-
public render() {
66-
const { classes, location, routes } = this.props;
67-
const { isOpenDrawer } = this.state;
65+
return null;
66+
});
6867

69-
const links = routes.map(({ path, title }, i) => {
70-
if (path && title) {
71-
return (
72-
<Button
73-
key={i}
74-
{...{
75-
component: Link,
76-
to: path,
77-
replace: path === location.pathname
78-
} as any}
79-
variant="text"
80-
color="inherit"
81-
>
82-
{title || ""}
83-
</Button>
84-
);
85-
}
68+
const drawerLinks = routes.map(({ path, title, icon }, i) => {
69+
if (path && title && icon) {
70+
const Icon = icon;
8671

87-
return null;
88-
});
72+
return (
73+
<ListItem
74+
key={i}
75+
{...{
76+
component: Link,
77+
to: path,
78+
replace: path === location.pathname
79+
} as any}
80+
button={true}
81+
>
82+
<ListItemIcon>
83+
<Icon color={path === location.pathname ? "primary" : "inherit"} />
84+
</ListItemIcon>
85+
<ListItemText primary={title} />
86+
</ListItem>
87+
);
88+
}
8989

90-
const drawerLinks = routes.map(({ path, title, icon }, i) => {
91-
if (path && title && icon) {
92-
const Icon = icon;
90+
return null;
91+
});
9392

94-
return (
95-
<ListItem
96-
key={i}
97-
{...{
98-
component: Link,
99-
to: path,
100-
replace: path === location.pathname
101-
} as any}
102-
button={true}
93+
return (
94+
<React.Fragment>
95+
<AppBar position="static">
96+
<Toolbar>
97+
<div className={classes.wrap}>
98+
<Grid container={true} alignItems="center">
99+
<Hidden mdUp={true}>
100+
<IconButton
101+
onClick={() => toggleDrawer(true)}
102+
className={classes.menuButton}
103+
color="inherit"
104+
aria-label="Menu"
105+
>
106+
<MenuIcon />
107+
</IconButton>
108+
</Hidden>
109+
<Hidden smDown={true}>
110+
<div className={classes.right}>{links}</div>
111+
</Hidden>
112+
</Grid>
113+
</div>
114+
</Toolbar>
115+
</AppBar>
116+
<Hidden mdUp={true}>
117+
<Drawer open={isOpenDrawer} onClose={() => toggleDrawer(false)}>
118+
<div
119+
tabIndex={0}
120+
role="button"
121+
onClick={() => toggleDrawer(false)}
122+
onKeyDown={() => toggleDrawer(false)}
103123
>
104-
<ListItemIcon>
105-
<Icon
106-
color={path === location.pathname ? "primary" : "inherit"}
107-
/>
108-
</ListItemIcon>
109-
<ListItemText primary={title} />
110-
</ListItem>
111-
);
112-
}
113-
114-
return null;
115-
});
116-
117-
return (
118-
<React.Fragment>
119-
<AppBar position="static">
120-
<Toolbar>
121-
<div className={classes.wrap}>
122-
<Grid container={true} alignItems="center">
123-
<Hidden mdUp={true}>
124-
<IconButton
125-
onClick={this.toggleDrawer(true)}
126-
className={classes.menuButton}
127-
color="inherit"
128-
aria-label="Menu"
129-
>
130-
<MenuIcon />
131-
</IconButton>
132-
</Hidden>
133-
<Hidden smDown={true}>
134-
<div className={classes.right}>{links}</div>
135-
</Hidden>
136-
</Grid>
124+
<div className={classes.list}>
125+
<List>{drawerLinks}</List>
126+
<Divider />
137127
</div>
138-
</Toolbar>
139-
</AppBar>
140-
<Hidden mdUp={true}>
141-
<Drawer open={isOpenDrawer} onClose={this.toggleDrawer(false)}>
142-
<div
143-
tabIndex={0}
144-
role="button"
145-
onClick={this.toggleDrawer(false)}
146-
onKeyDown={this.toggleDrawer(false)}
147-
>
148-
<div className={classes.list}>
149-
<List>{drawerLinks}</List>
150-
<Divider />
151-
</div>
152-
</div>
153-
</Drawer>
154-
</Hidden>
155-
</React.Fragment>
156-
);
157-
}
158-
}
128+
</div>
129+
</Drawer>
130+
</Hidden>
131+
</React.Fragment>
132+
);
133+
};
159134

160-
export const Header = compose<IHeaderBaseProps, any>(
161-
withRouter,
162-
withStyles(styles)
163-
)(HeaderBase);
135+
export const Header = withRouter(HeaderBase);

‎src/components/pca/CalculateControls.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
generateColumns,
1212
generateRows
1313
} from "../../components";
14-
import { IDatasetRequiredColumnsIndexes, IFilePreview } from "../../models";
14+
import { IDatasetRequiredColumnsIndexes, IParsedFile } from "../../models";
1515

1616
const useStyles = makeStyles(({ spacing, palette }: Theme) => ({
1717
root: {
@@ -35,7 +35,7 @@ const useStyles = makeStyles(({ spacing, palette }: Theme) => ({
3535

3636
interface ICalculateControlsProps {
3737
calculating?: boolean;
38-
filePreview: IFilePreview;
38+
parsedFile: IParsedFile;
3939
datasetRequiredColumnsIdxs: IDatasetRequiredColumnsIndexes;
4040
onCalculate: () => void;
4141
onChangeDatasetRequiredColumns: (
@@ -45,19 +45,19 @@ interface ICalculateControlsProps {
4545

4646
export const CalculateControls: React.FC<ICalculateControlsProps> = ({
4747
calculating,
48-
filePreview,
48+
parsedFile,
4949
onChangeDatasetRequiredColumns,
5050
datasetRequiredColumnsIdxs,
5151
onCalculate
5252
}) => {
5353
const classes = useStyles();
5454

5555
const DatasetTable = React.useMemo(() => {
56-
const columns = generateColumns(filePreview.columns);
57-
const rows = generateRows(filePreview.rows, filePreview.columns);
56+
const columns = generateColumns(parsedFile.columns);
57+
const rows = generateRows(parsedFile.rows, parsedFile.columns);
5858

5959
return <Table title="Dataset preview" rows={rows} columns={columns} />;
60-
}, [filePreview]);
60+
}, [parsedFile]);
6161

6262
return (
6363
<div className={classes.root}>
@@ -83,8 +83,8 @@ export const CalculateControls: React.FC<ICalculateControlsProps> = ({
8383
</Grid>
8484
<Grid item={true} xs={12}>
8585
<DatasetControls
86-
rows={filePreview.rows}
87-
columns={filePreview.columns}
86+
rows={parsedFile.rows}
87+
columns={parsedFile.columns}
8888
onChange={onChangeDatasetRequiredColumns}
8989
datasetRequiredColumnsIdxs={datasetRequiredColumnsIdxs}
9090
/>

0 commit comments

Comments
 (0)