Settings: change to react hooks + remove unneeded props.

master
Tom Hacohen 5 years ago
parent bf7590dd91
commit f3a533ab2d

@ -2,15 +2,14 @@
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { connect, useSelector } from 'react-redux';
import { History } from 'history';
import { useSelector } from 'react-redux';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import { store, StoreState, SettingsType } from '../store';
import { store, StoreState } from '../store';
import { setSettings } from '../store/actions';
import Container from '../widgets/Container';
@ -36,67 +35,37 @@ function SecurityFingerprint() {
);
}
interface PropsType {
history: History;
}
interface PropsTypeInner extends PropsType {
settings: SettingsType;
}
class Settings extends React.PureComponent<PropsTypeInner> {
constructor(props: any) {
super(props);
this.onCancel = this.onCancel.bind(this);
this.handleChange = this.handleChange.bind(this);
}
public render() {
const { settings } = this.props;
return (
<>
<AppBarOverride title="Settings" />
<Container>
<h1>Security Fingerprint</h1>
<SecurityFingerprint />
<h1>Date & Time</h1>
<FormControl style={{ width: '15em' }}>
<InputLabel>
Locale
</InputLabel>
<Select
name="locale"
value={settings.locale}
onChange={this.handleChange}
>
<MenuItem value="en-gb">English (United Kingdom)</MenuItem>
<MenuItem value="en-us">English (United States)</MenuItem>
</Select>
</FormControl>
</Container>
</>
);
}
export default React.memo(function Settings() {
const settings = useSelector((state: StoreState) => state.settings);
public onCancel() {
this.props.history.goBack();
}
private handleChange(event: React.ChangeEvent<any>) {
function handleChange(event: React.ChangeEvent<any>) {
const name = event.target.name;
const value = event.target.value;
const { settings } = this.props;
store.dispatch(setSettings({ ...settings, [name]: value }));
}
}
const mapStateToProps = (state: StoreState, _props: PropsType) => {
return {
settings: state.settings,
};
};
export default connect(
mapStateToProps
)(Settings);
return (
<>
<AppBarOverride title="Settings" />
<Container>
<h1>Security Fingerprint</h1>
<SecurityFingerprint />
<h1>Date & Time</h1>
<FormControl style={{ width: '15em' }}>
<InputLabel>
Locale
</InputLabel>
<Select
name="locale"
value={settings.locale}
onChange={handleChange}
>
<MenuItem value="en-gb">English (United Kingdom)</MenuItem>
<MenuItem value="en-us">English (United States)</MenuItem>
</Select>
</FormControl>
</Container>
</>
);
});

@ -214,10 +214,8 @@ export default withRouter(function SyncGate(props: RouteComponentProps<{}> & Pro
<Route
path={routeResolver.getRoute('settings')}
exact
render={({ history }) => (
<Settings
history={history}
/>
render={() => (
<Settings />
)}
/>
<Route

Loading…
Cancel
Save