Skip to content

Commit f1e3f4f

Browse files
Methuselah96Methuselah96
authoredAug 27, 2020
feat(redux-devtools): convert counter example to TypeScript (#616)
* stash * finish * optional
·
v3.0.0-beta.1counter-redux@0.1.0
1 parent 2faa163 commit f1e3f4f

32 files changed

+321
-122
lines changed
 

‎packages/react-json-tree/examples/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@
1313
},
1414
"scripts": {
1515
"start": "webpack-dev-server --open",
16-
"stats": "NODE_ENV=production webpack --json > dist/stats.json"
16+
"stats": "NODE_ENV=production webpack --json > dist/stats.json",
17+
"lint": "eslint . --ext .ts,.tsx",
18+
"lint:fix": "eslint . --ext .ts,.tsx --fix",
19+
"type-check": "tsc --noEmit",
20+
"type-check:watch": "npm run type-check -- --watch"
1721
},
1822
"dependencies": {
1923
"immutable": "^4.0.0-rc.12",

‎packages/redux-devtools-dock-monitor/src/DockMonitor.tsx

+38-5
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,29 @@ interface KeyObject {
2323
sequence: string;
2424
}
2525

26+
interface ExternalProps<S, A extends Action<unknown>> {
27+
defaultPosition: 'left' | 'top' | 'right' | 'bottom';
28+
defaultIsVisible: boolean;
29+
defaultSize: number;
30+
toggleVisibilityKey: string;
31+
changePositionKey: string;
32+
changeMonitorKey?: string;
33+
fluid: boolean;
34+
35+
dispatch: Dispatch<DockMonitorAction>;
36+
37+
children:
38+
| Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>
39+
| Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>[];
40+
}
41+
42+
interface DefaultProps {
43+
defaultIsVisible: boolean;
44+
defaultPosition: 'left' | 'top' | 'right' | 'bottom';
45+
defaultSize: number;
46+
fluid: boolean;
47+
}
48+
2649
export interface DockMonitorProps<S, A extends Action<unknown>>
2750
extends LiftedState<S, A, DockMonitorState> {
2851
defaultPosition: 'left' | 'top' | 'right' | 'bottom';
@@ -40,10 +63,9 @@ export interface DockMonitorProps<S, A extends Action<unknown>>
4063
| Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>[];
4164
}
4265

43-
export default class DockMonitor<
44-
S,
45-
A extends Action<unknown>
46-
> extends Component<DockMonitorProps<S, A>> {
66+
class DockMonitor<S, A extends Action<unknown>> extends Component<
67+
DockMonitorProps<S, A>
68+
> {
4769
static update = reducer;
4870

4971
static propTypes = {
@@ -64,7 +86,7 @@ export default class DockMonitor<
6486
}),
6587
};
6688

67-
static defaultProps = {
89+
static defaultProps: DefaultProps = {
6890
defaultIsVisible: true,
6991
defaultPosition: 'right',
7092
defaultSize: 0.3,
@@ -212,3 +234,14 @@ export default class DockMonitor<
212234
);
213235
}
214236
}
237+
238+
export default (DockMonitor as unknown) as React.ComponentType<
239+
ExternalProps<unknown, Action<unknown>>
240+
> & {
241+
update(
242+
monitorProps: ExternalProps<unknown, Action<unknown>>,
243+
state: DockMonitorState | undefined,
244+
action: DockMonitorAction
245+
): DockMonitorState;
246+
defaultProps: DefaultProps;
247+
};

‎packages/redux-devtools-log-monitor/src/LogMonitor.tsx

+38-5
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import reducer, { LogMonitorState } from './reducers';
1313
import LogMonitorButtonBar from './LogMonitorButtonBar';
1414
import LogMonitorEntryList from './LogMonitorEntryList';
1515
import debounce from 'lodash.debounce';
16+
import { DockMonitorState } from 'redux-devtools-dock-monitor/lib/reducers';
17+
import { DockMonitorAction } from 'redux-devtools-dock-monitor/lib/actions';
1618

1719
// eslint-disable-next-line @typescript-eslint/unbound-method
1820
const { toggleAction, setActionsActive } = ActionCreators;
@@ -41,6 +43,27 @@ const styles: {
4143
},
4244
};
4345

46+
interface ExternalProps<S, A extends Action<unknown>> {
47+
dispatch: Dispatch<LogMonitorAction | LiftedAction<S, A, LogMonitorState>>;
48+
49+
preserveScrollTop: boolean;
50+
select: (state: S) => unknown;
51+
theme: keyof typeof themes | Base16Theme;
52+
expandActionRoot: boolean;
53+
expandStateRoot: boolean;
54+
markStateDiff: boolean;
55+
hideMainButtons?: boolean;
56+
}
57+
58+
interface DefaultProps<S> {
59+
select: (state: unknown) => unknown;
60+
theme: keyof typeof themes | Base16Theme;
61+
preserveScrollTop: boolean;
62+
expandActionRoot: boolean;
63+
expandStateRoot: boolean;
64+
markStateDiff: boolean;
65+
}
66+
4467
export interface LogMonitorProps<S, A extends Action<unknown>>
4568
extends LiftedState<S, A, LogMonitorState> {
4669
dispatch: Dispatch<LogMonitorAction | LiftedAction<S, A, LogMonitorState>>;
@@ -54,10 +77,9 @@ export interface LogMonitorProps<S, A extends Action<unknown>>
5477
hideMainButtons?: boolean;
5578
}
5679

57-
export default class LogMonitor<
58-
S,
59-
A extends Action<unknown>
60-
> extends PureComponent<LogMonitorProps<S, A>> {
80+
class LogMonitor<S, A extends Action<unknown>> extends PureComponent<
81+
LogMonitorProps<S, A>
82+
> {
6183
static update = reducer;
6284

6385
static propTypes = {
@@ -80,7 +102,7 @@ export default class LogMonitor<
80102
hideMainButtons: PropTypes.bool,
81103
};
82104

83-
static defaultProps = {
105+
static defaultProps: DefaultProps<unknown> = {
84106
select: (state: unknown) => state,
85107
theme: 'nicinabox',
86108
preserveScrollTop: true,
@@ -248,3 +270,14 @@ export default class LogMonitor<
248270
);
249271
}
250272
}
273+
274+
export default (LogMonitor as unknown) as React.ComponentType<
275+
ExternalProps<unknown, Action<unknown>>
276+
> & {
277+
update(
278+
monitorProps: ExternalProps<unknown, Action<unknown>>,
279+
state: DockMonitorState | undefined,
280+
action: DockMonitorAction
281+
): DockMonitorState;
282+
defaultProps: DefaultProps<unknown>;
283+
};

‎packages/redux-devtools/examples/counter/.babelrc

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
2-
"presets": ["@babel/preset-env", "@babel/preset-react"],
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react",
5+
"@babel/preset-typescript"
6+
],
37
"plugins": [
48
"@babel/plugin-proposal-class-properties",
59
"react-hot-loader/babel"

‎packages/redux-devtools/examples/counter/.eslintrc.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
extends: '../../../../.eslintrc',
3+
overrides: [
4+
{
5+
files: ['*.ts', '*.tsx'],
6+
extends: '../../../../eslintrc.ts.react.base.json',
7+
parserOptions: {
8+
tsconfigRootDir: __dirname,
9+
project: ['./tsconfig.json'],
10+
},
11+
},
12+
{
13+
files: ['webpack.config.ts'],
14+
extends: '../../../../eslintrc.ts.base.json',
15+
parserOptions: {
16+
tsconfigRootDir: __dirname,
17+
project: ['./tsconfig.webpack.json'],
18+
},
19+
},
20+
],
21+
};

‎packages/redux-devtools/examples/counter/package.json

+20-19
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,40 @@
22
"name": "counter-redux",
33
"version": "0.0.1",
44
"description": "Counter example for redux",
5-
"private": true,
6-
"main": "src/index.js",
7-
"scripts": {
8-
"start": "webpack-dev-server --open"
5+
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools/examples/counter",
6+
"bugs": {
7+
"url": "https://github.com/reduxjs/redux-devtools/issues"
98
},
9+
"license": "MIT",
1010
"repository": {
1111
"type": "git",
1212
"url": "https://github.com/reduxjs/redux-devtools.git"
1313
},
14-
"license": "MIT",
15-
"bugs": {
16-
"url": "https://github.com/reduxjs/redux-devtools/issues"
14+
"scripts": {
15+
"start": "webpack-dev-server --open",
16+
"lint": "eslint . --ext .ts,.tsx",
17+
"lint:fix": "eslint . --ext .ts,.tsx --fix",
18+
"type-check": "tsc --noEmit",
19+
"type-check:watch": "npm run type-check -- --watch"
1720
},
18-
"homepage": "https://github.com/reduxjs/redux-devtools#readme",
1921
"dependencies": {
2022
"prop-types": "^15.7.2",
2123
"react": "^16.13.1",
2224
"react-dom": "^16.13.1",
2325
"react-hot-loader": "^4.12.21",
2426
"react-redux": "^7.2.1",
2527
"redux": "^4.0.5",
26-
"redux-thunk": "^2.3.0"
27-
},
28-
"devDependencies": {
29-
"@babel/core": "^7.11.1",
30-
"@babel/plugin-proposal-class-properties": "^7.10.4",
31-
"@babel/preset-env": "^7.11.0",
32-
"@babel/preset-react": "^7.10.4",
33-
"babel-loader": "^8.1.0",
3428
"redux-devtools": "^3.6.1",
3529
"redux-devtools-dock-monitor": "^1.1.4",
3630
"redux-devtools-log-monitor": "^2.0.1",
37-
"webpack": "^4.44.1",
38-
"webpack-dev-server": "^3.11.0"
39-
}
31+
"redux-thunk": "^2.3.0"
32+
},
33+
"devDependencies": {
34+
"@types/prop-types": "^15.7.3",
35+
"@types/react": "^16.9.46",
36+
"@types/react-dom": "^16.9.8",
37+
"@types/react-redux": "^7.1.9",
38+
"@types/webpack-env": "^1.15.2"
39+
},
40+
"private": true
4041
}

‎packages/redux-devtools/examples/counter/src/actions/CounterActions.js

-33
This file was deleted.

‎packages/redux-devtools/examples/counter/src/actions/CounterActions.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { ThunkAction } from 'redux-thunk';
2+
import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes';
3+
import { CounterState } from '../reducers';
4+
5+
interface IncrementCounterAction {
6+
type: typeof INCREMENT_COUNTER;
7+
}
8+
export function increment(): IncrementCounterAction {
9+
return {
10+
type: INCREMENT_COUNTER,
11+
};
12+
}
13+
14+
interface DecrementCounterAction {
15+
type: typeof DECREMENT_COUNTER;
16+
}
17+
export function decrement(): DecrementCounterAction {
18+
return {
19+
type: DECREMENT_COUNTER,
20+
};
21+
}
22+
23+
export type CounterAction = IncrementCounterAction | DecrementCounterAction;
24+
25+
export function incrementIfOdd(): ThunkAction<
26+
void,
27+
CounterState,
28+
never,
29+
CounterAction
30+
> {
31+
return (dispatch, getState) => {
32+
const { counter } = getState();
33+
34+
if (counter % 2 === 0) {
35+
return;
36+
}
37+
38+
dispatch(increment());
39+
};
40+
}
41+
42+
export function incrementAsync(): ThunkAction<
43+
void,
44+
CounterState,
45+
never,
46+
CounterAction
47+
> {
48+
return (dispatch) => {
49+
setTimeout(() => {
50+
dispatch(increment());
51+
}, 1000);
52+
};
53+
}

‎packages/redux-devtools/examples/counter/src/components/Counter.js renamed to ‎packages/redux-devtools/examples/counter/src/components/Counter.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33

4-
export default class Counter extends Component {
4+
interface Props {
5+
increment: () => void;
6+
incrementIfOdd: () => void;
7+
decrement: () => void;
8+
counter: number;
9+
}
10+
11+
export default class Counter extends Component<Props> {
512
static propTypes = {
613
increment: PropTypes.func.isRequired,
714
incrementIfOdd: PropTypes.func.isRequired,

‎packages/redux-devtools/examples/counter/src/containers/CounterApp.js renamed to ‎packages/redux-devtools/examples/counter/src/containers/CounterApp.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
import React, { Component } from 'react';
2-
import { bindActionCreators } from 'redux';
2+
import { bindActionCreators, Dispatch } from 'redux';
33
import { connect } from 'react-redux';
44
import Counter from '../components/Counter';
55
import * as CounterActions from '../actions/CounterActions';
6+
import { CounterAction } from '../actions/CounterActions';
7+
import { CounterState } from '../reducers';
68

7-
class CounterApp extends Component {
9+
interface Props {
10+
counter: number;
11+
dispatch: Dispatch<CounterAction>;
12+
}
13+
14+
class CounterApp extends Component<Props> {
815
render() {
916
const { counter, dispatch } = this.props;
1017
return (
@@ -16,7 +23,7 @@ class CounterApp extends Component {
1623
}
1724
}
1825

19-
function select(state) {
26+
function select(state: CounterState) {
2027
return {
2128
counter: state.counter,
2229
};

0 commit comments

Comments
 (0)
Please sign in to comment.