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

Commit 21403e7

Browse files
thefringeninjathefringeninja
authored
Merge pull request #16 from thefringeninja/tsx-components
Convert Components to Typescript
2 parents 6717f24 + 32f201c commit 21403e7

File tree

17 files changed

+237
-152
lines changed

17 files changed

+237
-152
lines changed

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import React from 'react';
1+
import React, { ReactNode, StatelessComponent } from 'react';
22
import getDisplayName from './getDisplayName';
33

4-
const { Consumer, Provider } = React.createContext();
4+
const { Consumer, Provider } = React.createContext<string | undefined>(
5+
undefined,
6+
);
57

6-
const AuthorizationProvider = ({ authorization, children }) => (
8+
const AuthorizationProvider: StatelessComponent<{
9+
authorization: string | undefined;
10+
children: ReactNode;
11+
}> = ({ authorization, children }) => (
712
<Provider value={authorization}>{children}</Provider>
813
);
914

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/NavigationProvider.js renamed to src/components/NavigationProvider.tsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1-
import React from 'react';
1+
import React, { ReactNode, StatelessComponent } from 'react';
2+
import { NavigationHandler } from '../types';
23
import getDisplayName from './getDisplayName';
3-
const { Consumer, Provider } = React.createContext();
44

5-
const NavigationProvider = ({ onNavigate, children }) => (
5+
const defaultNavigationHandler: NavigationHandler = (link, authorization) => {
6+
return;
7+
};
8+
9+
const { Consumer, Provider } = React.createContext<NavigationHandler>(
10+
defaultNavigationHandler,
11+
);
12+
13+
const NavigationProvider: StatelessComponent<{
14+
onNavigate: NavigationHandler;
15+
children: ReactNode;
16+
}> = ({ onNavigate, children }) => (
617
<Provider value={onNavigate}>{children}</Provider>
718
);
819

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/RelIcon.js renamed to src/components/RelIcon.ts

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import { createElement } from 'react';
1+
import { SvgIconProps } from '@material-ui/core/SvgIcon';
2+
import { createElement, ReactElement } from 'react';
3+
import { rels } from '../stream-store';
24
import {
3-
Publish,
4-
Settings,
5+
ChevronLeft,
6+
ChevronRight,
57
DeleteForever,
68
FirstPage,
9+
Help,
710
LastPage,
8-
ChevronLeft,
9-
ChevronRight,
10-
RssFeed,
11+
List,
12+
Publish,
1113
Refresh,
14+
RssFeed,
1215
Search,
16+
Settings,
1317
SqlStreamStore,
14-
List,
15-
Help,
1618
} from './Icons';
17-
import { rels } from '../stream-store';
1819

1920
const fontIconByRel = {
2021
[rels.first]: FirstPage,
@@ -32,7 +33,11 @@ const fontIconByRel = {
3233
[rels.curies]: Help,
3334
};
3435

35-
const RelIcon = ({ rel, ...props }) =>
36+
interface RelIconProps extends SvgIconProps {
37+
rel: string;
38+
}
39+
40+
const RelIcon = ({ rel, ...props }: RelIconProps): ReactElement<SvgIconProps> =>
3641
createElement(fontIconByRel[rel] || SqlStreamStore, props);
3742

3843
export default RelIcon;

‎src/components/StreamBrowser.js‎

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

0 commit comments

Comments
 (0)