Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

Commit 8425394

Browse files
thefringeninjathefringeninja
committed
balance of components sorted
1 parent a5a1666 commit 8425394

File tree

9 files changed

+154
-104
lines changed

9 files changed

+154
-104
lines changed

src/components/Icons/SqlStreamStore.js renamed to src/components/Icons/SqlStreamStore.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react';
21
import { SvgIcon } from '@material-ui/core';
2+
import { SvgIconProps } from '@material-ui/core/SvgIcon';
3+
import React, { ComponentType } from 'react';
34
/* eslint-disable max-len */
4-
const SqlStreamStore = props => (
5+
const SqlStreamStore: ComponentType<SvgIconProps> = props => (
56
<SvgIcon {...props} viewBox={'0 0 448.687 627.153'}>
67
<g transform={'translate(-88.5 -116.776)'}>
78
<ellipse

src/components/Icons/index.js renamed to src/components/Icons/index.ts

File renamed without changes.

src/components/Loading.js renamed to src/components/Loading.tsx

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
1-
import React from 'react';
21
import { LinearProgress, Modal } from '@material-ui/core';
2+
import React from 'react';
33

4-
const variants = {
5-
true: 'indeterminate',
6-
false: 'determinate',
7-
};
8-
9-
const values = {
10-
true: undefined,
11-
false: 0,
12-
};
13-
14-
const Loading = ({ open }) => (
4+
const Loading = ({ open }: { open: boolean }) => (
155
<div>
16-
<LinearProgress variant={variants[open]} value={values[open]} />
6+
<LinearProgress
7+
variant={open ? 'indeterminate' : 'determinate'}
8+
value={open ? undefined : 0}
9+
/>
1710
<Modal disableBackdropClick disableEscapeKeyDown open={open}>
1811
<span />
1912
</Modal>

src/components/Notifications.js renamed to src/components/Notifications.tsx

Lines changed: 60 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
1-
import React, { createElement } from 'react';
2-
import { Observable as obs } from 'rxjs';
31
import {
42
IconButton,
53
Snackbar,
64
SnackbarContent,
5+
WithStyles,
76
withStyles,
87
} from '@material-ui/core';
9-
import { Close, CheckCircle, Warning, Error, Info } from '../components/Icons';
10-
import { green, amber, blue, red } from '@material-ui/core/colors';
8+
import { amber, blue, green, red } from '@material-ui/core/colors';
119
import classNames from 'classnames';
10+
import React, {ComponentType, createElement, ReactNode, StatelessComponent} from 'react';
11+
import { Observable as obs } from 'rxjs';
1212
import uuid from 'uuid';
13-
import { actions } from '../stream-store';
13+
import { CheckCircle, Close, Error, Info, Warning } from '../components/Icons';
1414
import { connect, createAction, createState } from '../reactive';
15+
import { actions } from '../stream-store';
16+
import { HttpProblemDetailsResponse, HttpResponse } from '../types';
1517

1618
const iconsByVariant = {
17-
success: CheckCircle,
18-
warning: Warning,
1919
error: Error,
2020
info: Info,
21+
success: CheckCircle,
22+
warning: Warning,
2123
};
2224

23-
const formatTitle = ({ status, statusText }) => `${status} ${statusText}`;
25+
const formatTitle = ({
26+
status,
27+
statusText,
28+
}: {
29+
status: number;
30+
statusText: string;
31+
}) => `${status} ${statusText}`;
2432

25-
const formatSubheader = ({ title, type }) =>
33+
const formatSubheader = ({ title, type }: { title: string; type: string }) =>
2634
title ? `${title} (${type})` : null;
2735

28-
const formatContent = ({ detail }) =>
29-
detail
36+
const formatContent = ({ detail }: { detail?: string }): ReactNode[] =>
37+
!!detail
3038
? detail
3139
.split(/\r|\n/)
3240
.filter(x => x.length)
@@ -38,28 +46,28 @@ const formatContent = ({ detail }) =>
3846
],
3947
[],
4048
)
41-
: null;
49+
: [];
4250

4351
const responses$ = obs.merge(
4452
...Object.keys(actions).map(verb => actions[verb].response),
4553
);
4654

4755
const clientError$ = responses$
4856
.filter(({ status }) => status >= 400 && status < 500)
49-
.map(({ body, ...response }) => ({
50-
variant: 'warning',
51-
title: formatTitle(response),
52-
subheader: formatSubheader(body),
57+
.map(({ body, ...response }: HttpProblemDetailsResponse) => ({
5358
content: formatContent(body),
59+
subheader: formatSubheader(body),
60+
title: formatTitle(response),
61+
variant: 'warning',
5462
}));
5563

5664
const serverError$ = responses$
5765
.filter(({ status }) => status >= 500)
58-
.map(({ body, ...response }) => ({
59-
variant: 'error',
60-
title: formatTitle(response),
61-
subheader: formatSubheader(body),
66+
.map(({ body, ...response }: HttpProblemDetailsResponse) => ({
6267
content: formatContent(body),
68+
subheader: formatSubheader(body),
69+
title: formatTitle(response),
70+
variant: 'error',
6371
}));
6472

6573
const unsafe = Object.keys(actions)
@@ -69,10 +77,10 @@ const unsafe = Object.keys(actions)
6977
const success$ = obs
7078
.merge(...unsafe)
7179
.filter(({ status }) => status < 400)
72-
.map(response => ({
73-
variant: 'success',
74-
title: formatTitle(response),
80+
.map((response: HttpResponse) => ({
7581
autoHideDuration: 2000,
82+
title: formatTitle(response),
83+
variant: 'success',
7684
}));
7785

7886
const dismiss = createAction();
@@ -102,48 +110,58 @@ const state$ = createState(
102110
);
103111

104112
const styles = theme => ({
105-
success: {
106-
backgroundColor: green[600],
107-
},
108113
error: {
109114
backgroundColor: red[500],
110115
},
111-
info: {
112-
backgroundColor: blue[500],
113-
},
114-
warning: {
115-
backgroundColor: amber[700],
116-
},
117116
icon: {
118117
fontSize: 20,
119118
},
120119
iconVariant: {
121-
opacity: 0.9,
122120
marginRight: theme.spacing.unit,
121+
opacity: 0.9,
122+
},
123+
info: {
124+
backgroundColor: blue[500],
123125
},
124126
message: {
125-
display: 'flex',
126127
alignItems: 'center',
128+
display: 'flex',
129+
},
130+
success: {
131+
backgroundColor: green[600],
132+
},
133+
warning: {
134+
backgroundColor: amber[700],
127135
},
128136
});
129137

130-
const Notification = withStyles(styles)(
138+
interface NotificationProps {
139+
autoHideDuration: number | undefined;
140+
className: string;
141+
content: ReactNode;
142+
messageId: string;
143+
subheader: string;
144+
title: string;
145+
variant: string;
146+
}
147+
148+
const Notification: ComponentType<NotificationProps> = withStyles(styles)(
131149
({
132-
classes,
150+
autoHideDuration,
133151
className,
152+
classes,
153+
content,
134154
messageId,
135-
title,
136155
subheader,
137-
content,
156+
title,
138157
variant,
139-
autoHideDuration,
140158
...other
141-
}) => (
159+
}: NotificationProps & WithStyles<typeof styles>) => (
142160
<Snackbar
143161
open
144162
anchorOrigin={{
145-
vertical: 'bottom',
146163
horizontal: 'right',
164+
vertical: 'bottom',
147165
}}
148166
autoHideDuration={autoHideDuration}
149167
>
@@ -166,7 +184,6 @@ const Notification = withStyles(styles)(
166184
<IconButton
167185
key="close"
168186
color="inherit"
169-
className={classes.close}
170187
onClick={() => dismiss.next(messageId)}
171188
>
172189
<Close className={classes.icon} />
@@ -178,7 +195,7 @@ const Notification = withStyles(styles)(
178195
),
179196
);
180197

181-
const Notifications = ({ notifications }) => (
198+
const Notifications: StatelessComponent<{ notifications: NotificationProps[] }> = ({ notifications }) => (
182199
<div>
183200
{notifications.map(notification => (
184201
<Notification key={notification.messageId} {...notification} />

‎src/components/StreamBrowser.js‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/components/StreamBrowser.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {
2+
LinearProgress,
3+
List,
4+
ListItem,
5+
ListItemText,
6+
Typography,
7+
WithStyles,
8+
withStyles,
9+
} from '@material-ui/core';
10+
import React, { ComponentType } from 'react';
11+
import { HalLink } from '../types';
12+
import Hyperlink from './Hyperlink';
13+
14+
const styles = theme => ({
15+
browser: {
16+
padding: theme.spacing.unit * 2.5,
17+
},
18+
});
19+
20+
interface StreamBrowserProps {
21+
loading: boolean;
22+
streams: HalLink[];
23+
}
24+
25+
const StreamBrowser: ComponentType<StreamBrowserProps> = withStyles(styles)(
26+
({
27+
streams,
28+
classes,
29+
loading,
30+
}: StreamBrowserProps & WithStyles<typeof styles>) => (
31+
<div className={classes.browser}>
32+
<Typography variant={'title'}>Stream Browser</Typography>
33+
{loading ? (
34+
<LinearProgress />
35+
) : streams.length ? (
36+
<List>
37+
{streams.map(link => (
38+
<ListItem key={link.href}>
39+
<ListItemText>
40+
<Hyperlink link={link}>{link.title}</Hyperlink>
41+
</ListItemText>
42+
</ListItem>
43+
))}
44+
</List>
45+
) : (
46+
<Typography variant={'body2'}>
47+
No matching streams found.
48+
</Typography>
49+
)}
50+
</div>
51+
),
52+
);
53+
54+
export default StreamBrowser;

src/components/StripeyTable/index.js renamed to src/components/StripeyTable/index.tsx

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import React from 'react';
21
import {
32
Table,
43
TableBody,
5-
TableRow as MaterialTableRow,
64
TableCell as MaterialTableCell,
7-
TableHead,
85
TableFooter,
6+
TableHead,
7+
TableRow as MaterialTableRow,
8+
WithStyles,
99
withStyles,
1010
} from '@material-ui/core';
11+
import { TableRowProps } from '@material-ui/core/TableRow';
12+
import React from 'react';
1113

1214
const TableCell = withStyles(theme => ({
1315
head: {
@@ -16,14 +18,21 @@ const TableCell = withStyles(theme => ({
1618
},
1719
}))(MaterialTableCell);
1820

19-
const TableRow = withStyles(theme => ({
21+
const tableRowStyles = theme => ({
2022
row: {
2123
'&:nth-of-type(odd)': {
2224
backgroundColor: theme.palette.background.paper,
2325
},
2426
},
25-
}))(({ classes, ...props }) => (
26-
<MaterialTableRow {...props} className={classes.row} />
27-
));
27+
});
28+
29+
const TableRow = withStyles(tableRowStyles)(
30+
({
31+
classes,
32+
...props
33+
}: TableRowProps & WithStyles<typeof tableRowStyles>) => (
34+
<MaterialTableRow {...props} className={classes.row} />
35+
),
36+
);
2837

2938
export { Table, TableBody, TableHead, TableCell, TableRow, TableFooter };

src/components/index.js renamed to src/components/index.ts

File renamed without changes.

‎src/types/index.d.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,18 @@ export interface NavigatableProps {
2727
onNavigate: NavigationHandler;
2828
authorization?: string;
2929
}
30+
31+
export interface HttpResponse {
32+
body: { [key: string]: any } | string | undefined;
33+
status: number;
34+
statusText: string;
35+
ok: boolean;
36+
}
37+
38+
export interface HttpProblemDetailsResponse extends HttpResponse {
39+
body: {
40+
detail?: any;
41+
title: string;
42+
type: string;
43+
};
44+
}

0 commit comments

Comments
 (0)