Add a box for setting the downloads dir in the downloads section

app/components/Downloads/DownloadsHeader/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Icon,
+  Segment
+} from 'semantic-ui-react';
+import { remote } from 'electron';
+import { withTranslation } from 'react-i18next';
+import { compose, withHandlers } from 'recompose';
+
+import styles from './styles.scss';
+
+const DownloadsHeader = ({
+  directory,
+  setDirectory,
+  t
+}) => {
+  return (
+    <Segment className={styles.downloads_header}>
+      <span className={styles.label}>
+        Saving in:
+        <span className={styles.directory}>
+          { directory }
+        </span>
+      </span>
+      <Button
+        icon
+        inverted
+        labelPosition='left'
+        onClick={setDirectory}
+      >
+        <Icon name='folder open' />
+        { t('downloads-dir-button') }
+      </Button>
+    </Segment>
+  );
+};
+
+DownloadsHeader.propTypes = {
+  directory: PropTypes.string,
+  setDirectory: PropTypes.func,
+  setStringOption: PropTypes.func
+};
+
+DownloadsHeader.defaultProps = {
+  directory: '',
+  setDirectory: () => {},
+  setStringOption: () => {}
+};
+
+export default compose(
+  withTranslation('settings'),
+  withHandlers({
+    setDirectory: ({setStringOption}) => () => {
+      let dialogResult = remote.dialog.showOpenDialog({
+        properties: ['openDirectory']
+      });
+      if (!_.isNil(dialogResult)) {
+        setStringOption(
+          'downloads.dir',
+          _.head(dialogResult)
+        );
+      }
+    }
+  })
+)(DownloadsHeader);

app/components/Downloads/DownloadsHeader/styles.scss

@@ -0,0 +1,15 @@
+.downloads_header {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+
+  .label, .directory {
+    display: flex;
+    align-items: center;
+  }
+
+  .directory {
+    margin-left: 1rem;
+    font-weight: bold;
+  }
+}

app/components/Downloads/index.js

@@ -4,6 +4,7 @@ import FontAwesome from 'react-fontawesome';
 
 import Header from '../Header';
 import DownloadsList from './DownloadsList';
+import DownloadsHeader from './DownloadsHeader';
 
 import styles from './styles.scss';
 import { useTranslation } from 'react-i18next';
@@ -20,12 +21,20 @@ const EmptyState = () => {
   );
 };
 
-const Downloads = props => {
-  const { downloads, clearFinishedTracks } = props;
+const Downloads = ({
+  downloads,
+  downloadsDir,
+  clearFinishedTracks,
+  setStringOption
+}) => {
   const { t } = useTranslation('downloads');
 
   return (
     <div className={styles.downloads_container}>
+      <DownloadsHeader
+        directory={downloadsDir}
+        setStringOption={setStringOption}
+      />
       {downloads.length === 0 && <EmptyState />}
       {downloads.length > 0 && (
         <React.Fragment>
@@ -42,12 +51,16 @@ const Downloads = props => {
 
 Downloads.propTypes = {
   downloads: PropTypes.array,
-  clearFinishedTracks: PropTypes.func
+  downloadsDir: PropTypes.string,
+  clearFinishedTracks: PropTypes.func,
+  setStringOption: PropTypes.func
 };
 
 Downloads.defaultProps = {
   downloads: [],
-  clearFinishedTracks: () => {}
+  downloadsDir: '',
+  clearFinishedTracks: () => {},
+  setStringOption: () => {}
 };
 
 export default Downloads;

app/containers/DownloadsContainer/index.js

@@ -4,13 +4,16 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import * as DownloadActions from '../../actions/downloads';
+import * as SettingsActions from '../../actions/settings';
 import Downloads from '../../components/Downloads';
 
 const DownloadsContainer = props => {
   return (
     <Downloads
       downloads={props.downloads}
+      downloadsDir={props.settings['downloads.dir']}
       clearFinishedTracks={props.downloadActions.clearFinishedDownloads}
+      setStringOption={props.settingsActions.setStringOption}
     />
   );
 };
@@ -19,6 +22,9 @@ DownloadsContainer.propTypes = {
   downloads: PropTypes.array,
   downloadActions: PropTypes.shape({
     clearFinishedDownloads: PropTypes.func
+  }),
+  settingsActions: PropTypes.shape({
+    setStringOption: PropTypes.func
   })
 };
 
@@ -29,13 +35,15 @@ DownloadsContainer.defaultProps = {
 
 function mapStateToProps (state) {
   return {
-    downloads: state.downloads.downloads
+    downloads: state.downloads.downloads,
+    settings: state.settings
   };
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    downloadActions: bindActionCreators(DownloadActions, dispatch)
+    downloadActions: bindActionCreators(DownloadActions, dispatch),
+    settingsActions: bindActionCreators(SettingsActions, dispatch)
   };
 }