[Repertory release notification icon] [Prevent release change when mount is busy] [Initial loading animation]

src/App.js

@@ -12,7 +12,7 @@ import Modal from './components/UI/Modal/Modal';
 import DownloadProgress from './components/DownloadProgress/DownloadProgress';
 import UpgradeUI from './components/UpgradeUI/UpgradeUI';
 import UpgradeIcon from './components/UpgradeIcon/UpgradeIcon';
-
+import Loading from './components/UI/Loading/Loading';
 const Scheduler = require('node-schedule');
 
 let ipcRenderer = null;
@@ -62,12 +62,21 @@ class App extends Component {
             const locationsLookup = {
               ...response.data.Locations[this.state.Platform],
             };
+
+            const latestVersion = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]].length - 1;
+            let version = this.state.Version;
+            if (version === -1) {
+              version = latestVersion;
+            }
+
             this.setState({
               AllowOptions: true,
               LocationsLookup: locationsLookup,
+              Version: version,
+              VersionAvailable: version !== latestVersion,
               VersionLookup: versionLookup,
             });
-            this.checkVersionInstalled(this.state.Release, this.state.Version, versionLookup);
+            this.checkVersionInstalled(this.state.Release, version, versionLookup);
           }).catch(error => {
           console.log(error);
         });
@@ -212,6 +221,7 @@ class App extends Component {
     },
     LocationsLookup: {},
     MissingDependencies: [],
+    MountsBusy: false,
     Platform: 'unknown',
     Release: 3,
     ReleaseTypes: [
@@ -228,7 +238,8 @@ class App extends Component {
     UpgradeAvailable: false,
     UpgradeData: {},
     UpgradeDismissed: false,
-    Version: 0,
+    Version: -1,
+    VersionAvailable: false,
     VersionLookup: {
       Alpha: [
         'unavailable'
@@ -341,12 +352,13 @@ class App extends Component {
 
   handleReleaseChanged = (e) => {
     const val = parseInt(e.target.value, 10);
+    const versionIndex = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]].length - 1;
     this.setState({
       Release: val,
-      Version: 0
+      Version: versionIndex
     });
-    this.saveState(val, 0, this.state.Sia, this.state.Hyperspace);
+    this.saveState(val, versionIndex, this.state.Sia, this.state.Hyperspace);
-    this.checkVersionInstalled(val, 0);
+    this.checkVersionInstalled(val, versionIndex);
   };
 
   handleReleaseDownload = () => {
@@ -398,6 +410,10 @@ class App extends Component {
     this.setState({AutoMountChecked: true});
   };
 
+  notifyMountsBusy = (busy) => {
+    this.setState({MountsBusy: busy})
+  };
+  
   saveState = (release, version, sia, hyperspace)=> {
     if (ipcRenderer) {
       ipcRenderer.send('save_state', {
@@ -421,8 +437,11 @@ class App extends Component {
   };
 
   render() {
-    const selectedVersion = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]][this.state.Version];
+    const selectedVersion = (this.state.Version === -1) ?
+      'unavailable' :
+      this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]][this.state.Version];
     const downloadEnabled = this.state.AllowDownload &&
+      !this.state.MountsBusy &&
       !this.state.DownloadActive &&
       (((selectedVersion !== 'unavailable') && (selectedVersion !== this.state.RepertoryVersion)));
     const allowMount = this.state.RepertoryVersion !== 'none';
@@ -437,6 +456,7 @@ class App extends Component {
                                  processAutoMount={!this.state.AutoMountChecked}
                                  autoMountProcessed={this.notifyAutoMountProcessed}
                                  autoMountChanged={this.handleAutoMountChanged}
+                                 mountsBusy={this.notifyMountsBusy}
                                  version={this.state.RepertoryVersion}
                                  directory={Constants.DATA_LOCATIONS[this.state.Platform]}
                                  disabled={!allowMount}/>;
@@ -484,31 +504,31 @@ class App extends Component {
       );
     }
 
-    let options = null;
+    let mainContent = null;
     if (this.state.AllowOptions) {
-      options = (
+      mainContent = (
         <table width='100%' cellPadding='2'>
           <tbody>
           <tr>
-              <td width='33%'>
+            <td width='33.33%'>
               <h2>Release</h2>
             </td>
-              <td width='33%'>
+            <td width='33.33%'>
-                <h2>Version</h2>
+              <h2>Version<UpgradeIcon release available={this.state.VersionAvailable}/></h2>
             </td>
-              <td width='33%'>
+            <td width='33.33%'>
               <h2>Installed</h2>
             </td>
           </tr>
           <tr>
             <td>
-                <DropDown disabled={this.state.DownloadActive || this.state.ExtractActive}
+              <DropDown disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
                         items={this.state.ReleaseTypes}
                         selected={this.state.Release}
                         changed={this.handleReleaseChanged}/>
             </td>
             <td>
-                <DropDown disabled={this.state.DownloadActive || this.state.ExtractActive}
+              <DropDown disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
                         items={this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]]}
                         selected={this.state.Version}
                         changed={this.handleVersionChanged}/>
@@ -529,6 +549,8 @@ class App extends Component {
           </tr>
           </tbody>
         </table>);
+    } else {
+      mainContent = <Loading/>
     }
 
     return (
@@ -536,7 +558,7 @@ class App extends Component {
         {dependencyDisplay}
         {upgradeDisplay}
         {downloadDisplay}
-        <Box dxDark dxStyle={{'height': 'auto', 'padding': '2px'}}>
+        <Box dxDark dxStyle={{height: '9.3%', padding: '2px'}}>
           <table cellPadding={0} cellSpacing={0} style={{margin: 0, padding: 0}}>
             <tbody style={{margin: 0, padding: 0}}>
               <tr style={{margin: 0, padding: 0}}>
@@ -553,8 +575,8 @@ class App extends Component {
             </tbody>
           </table>
         </Box>
-        <Box dxStyle={{'padding': '4px', 'marginTop': '10px'}}>
+        <Box dxStyle={{padding: '4px', marginTop: '10px', height: '90.7%'}}>
-          {options}
+          {mainContent}
         </Box>
       </div>
     );

src/components/UI/Loading/Loading.css

@@ -0,0 +1,16 @@
+.Loading {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.Content {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  top: 50%; left: 50%;
+  transform: translate(-50%,-50%);
+  width: 28px;
+  height: 28px;
+}

src/components/UI/Loading/Loading.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Loading.css'
+import Loader from 'react-loader-spinner';
+
+export default CSSModules((props) => {
+  return (
+    <div
+      styleName='Loading'>
+      <div styleName='Content'>
+        <Loader color={'var(--heading_text_color)'}
+                height='28px'
+                width='28px'
+                type='ThreeDots'/>
+      </div>
+    </div>);
+}, styles, {allowMultiple: true});

src/components/UpgradeIcon/UpgradeIcon.css

@@ -7,8 +7,5 @@
   border: 0;
   box-sizing: border-box;
   cursor: pointer;
-}
+  opacity: 0.65;
-
-div.UpgradeIcon {
-  cursor: default;
 }

src/components/UpgradeIcon/UpgradeIcon.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './UpgradeIcon.css';
-import availableImage from '../../assets/images/upgrade_available.png';
+import availableImage from '../../assets/images/release_available.png';
 
 export default CSSModules((props) => {
+  let style;
+  if (props.release) {
+    style = {float: 'right', marginRight: '5%', cursor: 'default'};
+  }
+
   return props.available ?
-    <img alt='' styleName='UpgradeIcon' src={availableImage} onClick={props.clicked}/> :
+    <img alt='' style={style} styleName='UpgradeIcon' src={availableImage} onClick={props.clicked}/> :
-    <div styleName='UpgradeIcon'/> ;
+    null;
 }, styles, {allowMultiple: true});

src/containers/MountItems/MountItems.js

@@ -35,6 +35,8 @@ class MountItems extends Component {
             Sia: sia,
           });
 
+          this.props.mountsBusy(hs.Mounted || sia.Mounted);
+
           let hsLocation = arg.data.Locations.Hyperspace;
           if ((hsLocation.length === 0) && (this.props.platform === 'win32')) {
             hsLocation = this.props.hyperspace.MountLocation || arg.data.DriveLetters.Hyperspace[0];
@@ -92,6 +94,7 @@ class MountItems extends Component {
   };
 
   detectMounts = ()=> {
+    this.props.mountsBusy(true);
     ipcRenderer.send('detect_mounts', {
       Directory: this.props.directory,
       Version: this.props.version,
@@ -117,6 +120,8 @@ class MountItems extends Component {
         [storageType]: state,
       });
 
+      this.props.mountsBusy(true);
+
       if (mount) {
         ipcRenderer.send('mount_drive', {
           Directory: this.props.directory,