Settings.jsx 2 KB
Newer Older
Jaden's avatar
Jaden committed
1 2 3 4 5 6 7 8
// @flow
import React from 'react';
import {
	Button,
	Form, FormGroup, Label, Input,
	Modal, ModalHeader, ModalBody, ModalFooter,
} from 'reactstrap';

9 10 11 12 13
import { connect } from 'react-redux';
import * as Actions from '@store/actions.js';

import * as Selectors from '@store/selectors';

14
import { genModuleApiFuncs } from '@helpers/api';
15 16
import type { BeatSettings } from '@helpers/beat';

Jaden's avatar
Jaden committed
17 18 19
type Props = {
	isOpen: boolean,
	toggle: () => mixed,
20 21
	settings: BeatSettings,
	updateSettings: (obj: BeatSettings) => any,
22
	fetchAllObjects: () => any,
Jaden's avatar
Jaden committed
23 24
};

25 26 27 28 29
export class Settings extends React.PureComponent<Props> {
	constructor(props: Props){
		super(props);
	}

30
	save = async () => {
31
		await genModuleApiFuncs('settings').put(this.props.settings);
32 33 34
		await this.props.fetchAllObjects();
	}

35 36 37 38 39 40 41 42 43 44 45 46
	render = () => {
		const {isOpen, toggle, settings} = this.props;
		return (
			<Modal isOpen={isOpen} toggle={toggle} autoFocus={true}>
				<ModalHeader toggle={toggle}>Settings</ModalHeader>
				<ModalBody>
					<Form>
						{
							Object.entries(settings).map(([name, val], i) =>
								<FormGroup key={i}>
									<Label>{ name }</Label>
									<Input
47
										autoFocus
48 49 50 51 52 53 54 55 56 57 58 59
										value={val}
										onChange={e => {
											this.props.updateSettings({
												...settings,
												[name]: e.target.value,
											});
										}}
									/>
								</FormGroup>
							)
						}
					</Form>
60
					<a href='https://gitlab.idiap.ch/beat/beat.editor'>Github</a>
61 62
				</ModalBody>
				<ModalFooter>
63
					<Button color="primary" onClick={this.save}>Write Settings to server</Button>
64
					<Button color="secondary" onClick={toggle}>Close</Button>
65 66 67 68 69 70
				</ModalFooter>
			</Modal>
		);
	}
}

71
const mapStateToProps = state => ({
72 73 74
	settings: Selectors.settingsGet(state),
});

75
const mapDispatchToProps = (dispatch, ownProps) => ({
76 77 78
	updateSettings: (obj) => {
		dispatch(Actions.settingsUpdate(obj));
	},
79 80 81
	fetchAllObjects: () => {
		dispatch(Actions.fetchAllObjects());
	},
82 83 84
});

export default connect(mapStateToProps, mapDispatchToProps)(Settings);