mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-10-27 06:01:29 +03:00
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { connect, ResolveThunks } from 'react-redux';
|
|
import { Container, Notification } from '@redux-devtools/ui';
|
|
import {
|
|
clearNotification,
|
|
getActiveInstance,
|
|
Header,
|
|
Settings,
|
|
StoreState,
|
|
} from '@redux-devtools/app';
|
|
import Actions from './Actions';
|
|
|
|
type StateProps = ReturnType<typeof mapStateToProps>;
|
|
type DispatchProps = ResolveThunks<typeof actionCreators>;
|
|
interface OwnProps {
|
|
readonly position: string;
|
|
}
|
|
type Props = StateProps & DispatchProps & OwnProps;
|
|
|
|
class App extends Component<Props> {
|
|
render() {
|
|
const { position, options, section, theme, notification } = this.props;
|
|
if (!position && (!options || !options.features)) {
|
|
return (
|
|
<div style={{ padding: '20px', width: '100%', textAlign: 'center' }}>
|
|
No store found. Make sure to follow{' '}
|
|
<a
|
|
href="https://github.com/zalmoxisus/redux-devtools-extension#usage"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
the instructions
|
|
</a>
|
|
.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
let body;
|
|
switch (section) {
|
|
case 'Settings':
|
|
body = <Settings />;
|
|
break;
|
|
default:
|
|
body = <Actions position={position} />;
|
|
}
|
|
|
|
return (
|
|
<Container themeData={theme}>
|
|
<Header section={section} />
|
|
{body}
|
|
{notification && (
|
|
<Notification
|
|
type={notification.type}
|
|
onClose={this.props.clearNotification}
|
|
>
|
|
{notification.message}
|
|
</Notification>
|
|
)}
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state: StoreState) {
|
|
const instances = state.instances;
|
|
const id = getActiveInstance(instances);
|
|
return {
|
|
options: instances.options[id],
|
|
section: state.section,
|
|
theme: state.theme,
|
|
notification: state.notification,
|
|
};
|
|
}
|
|
|
|
const actionCreators = {
|
|
clearNotification,
|
|
};
|
|
|
|
export default connect(mapStateToProps, actionCreators)(App);
|