add open and save button

Chrome has an annoying warning when downloading .py files, e.g https://stackoverflow.com/q/34130774/1976323

Workaround is to enable the "Ask where to save each file before downloading" setting.

src/components/LoadButton.tsx

@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import * as editor from '../actions/editor';
+import * as notification from '../actions/notification';
+import { RootState } from '../reducers';
+import OpenFileButton, { OpenFileButtonProps } from './OpenFileButton';
+
+type StateProps = Pick<OpenFileButtonProps, 'enabled'>;
+type DispatchProps = Pick<OpenFileButtonProps, 'onFile' | 'onReject'>;
+type OwnProps = Pick<OpenFileButtonProps, 'id'>;
+
+const mapStateToProps = (state: RootState): StateProps => ({
+    enabled: state.editor.current !== null,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    onFile: (data): void => {
+        dispatch(editor.open(data));
+    },
+    onReject: (file): void => {
+        dispatch(
+            notification.add('error', `'${file.name}' is not a valid python file.`),
+        );
+    },
+});
+
+const mergeProps = (
+    stateProps: StateProps,
+    dispatchProps: DispatchProps,
+    ownProps: OwnProps,
+): OpenFileButtonProps => ({
+    fileExtension: '.py',
+    tooltip: 'Load file',
+    icon: 'open.svg',
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(OpenFileButton);

src/components/SaveButton.tsx

@@ -0,0 +1,33 @@
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import * as editor from '../actions/editor';
+import { RootState } from '../reducers';
+import ActionButton, { ActionButtonProps } from './ActionButton';
+
+type StateProps = Pick<ActionButtonProps, 'enabled' | 'context'>;
+type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
+type OwnProps = Pick<ActionButtonProps, 'id'>;
+
+const mapStateToProps = (state: RootState): StateProps => ({
+    enabled: state.editor.current !== null,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    onAction: (): void => {
+        dispatch(editor.save());
+    },
+});
+
+const mergeProps = (
+    stateProps: StateProps,
+    dispatchProps: DispatchProps,
+    ownProps: OwnProps,
+): ActionButtonProps => ({
+    tooltip: 'Save file',
+    icon: 'download.svg',
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ActionButton);

src/components/Toolbar.tsx

@@ -3,14 +3,20 @@ import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
 import BluetoothButton from './BluetoothButton';
 import FlashButton from './FlashButton';
+import LoadButton from './LoadButton';
 import ReplButton from './ReplButton';
 import RunButton from './RunButton';
+import SaveButton from './SaveButton';
 import StopButton from './StopButton';
 
 class Toolbar extends React.Component {
     render(): JSX.Element {
         return (
             <ButtonToolbar className="m-2">
+                <ButtonGroup className="mr-2" size="lg">
+                    <LoadButton id="load" />
+                    <SaveButton id="save" />
+                </ButtonGroup>
                 <ButtonGroup className="mr-2" size="lg">
                     <BluetoothButton id="bluetooth" />
                     <RunButton id="run" />