BlockStorage/repertory-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Component refactoring

Browse Source
This commit is contained in:
Scott E. Graves
2018-10-03 14:54:05 -05:00
parent b4aa381023
commit b430465b7b
15 changed files with 390 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/App.js
View File

@@ -2,16 +2,17 @@ import React, {Component} from 'react';
import axios from 'axios';
import styles from './App.css';
import Box from './components/UI/Box/Box';
import Button from './components/UI/Button/Button';
import Configuration from './containers/Configuration/Configuration';
import CSSModules from 'react-css-modules';
import DependencyList from './components/DependencyList/DependencyList';
import DownloadProgress from './components/DownloadProgress/DownloadProgress';
import DropDown from './components/UI/DropDown/DropDown';
import ErrorDetails from './components/ErrorDetails/ErrorDetails';
import Grid from './components/UI/Grid/Grid';
import Loading from './components/UI/Loading/Loading';
import Modal from './components/UI/Modal/Modal';
import MountItems from './containers/MountItems/MountItems';
import ReleaseVersionDisplay from './components/ReleaseVersionDisplay/ReleaseVersionDisplay';
import Text from './components/UI/Text/Text';
import UpgradeIcon from './components/UpgradeIcon/UpgradeIcon';
import UpgradeUI from './components/UpgradeUI/UpgradeUI';
@@ -44,11 +45,11 @@ class App extends Component {
}
state = {
AllowOptions: false,
AllowDownload: false,
AutoMountProcessed: false,
ConfigStorageType: null,
DisplayError: false,
DisplayMainContent: false,
Error: null,
ErrorAction: null,
ErrorCritical: false,
@@ -74,7 +75,7 @@ class App extends Component {
'Beta',
'Alpha',
],
RepertoryVersion: 'none',
InstalledVersion: 'none',
Sia: {
AutoMount: false,
MountLocation: '',
@@ -305,10 +306,10 @@ class App extends Component {
onCheckInstalledReply = (event, arg) => {
const action = () => {
const repertoryVersion = arg.data.Success && arg.data.Exists ? arg.data.Version : 'none';
const installedVersion = arg.data.Success && arg.data.Exists ? arg.data.Version : 'none';
let versionAvailable = false;
if (repertoryVersion !== 'none') {
if (installedVersion !== 'none') {
const latestVersion = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]].length - 1;
let version = this.state.Version;
if (version === -1) {
@@ -321,7 +322,7 @@ class App extends Component {
AllowDownload: true,
DownloadingDependency: false,
MissingDependencies: arg.data.Dependencies,
RepertoryVersion: repertoryVersion,
InstalledVersion: installedVersion,
VersionAvailable: versionAvailable,
});
};
@@ -430,7 +431,7 @@ class App extends Component {
}
this.setState({
AllowOptions: true,
DisplayMainContent: true,
LocationsLookup: locationsLookup,
Version: version,
VersionAvailable: version !== latestVersion,
@@ -551,9 +552,9 @@ class App extends Component {
!this.state.MountsBusy &&
!this.state.DownloadActive &&
(selectedVersion !== 'unavailable') &&
(selectedVersion !== this.state.RepertoryVersion);
(selectedVersion !== this.state.InstalledVersion);
const allowMount = this.state.RepertoryVersion !== 'none';
const allowMount = this.state.InstalledVersion !== 'none';
const missingDependencies = (this.state.MissingDependencies.length > 0);
const allowConfig = this.state.LocationsLookup[selectedVersion] &&
this.state.LocationsLookup[selectedVersion].config_support;
@@ -596,23 +597,6 @@ class App extends Component {
);
}
let mountDisplay = null;
if (allowMount) {
mountDisplay = <MountItems allowConfig={allowConfig}
autoMountChanged={this.handleAutoMountChanged}
autoMountProcessed={this.notifyAutoMountProcessed}
changed={this.handleMountLocationChanged}
configClicked={this.handleConfigClicked}
directory={Constants.DATA_LOCATIONS[this.props.platform]}
errorHandler={this.setErrorState}
hyperspace={this.state.Hyperspace}
mountsBusy={this.notifyMountsBusy}
platform={this.props.platform}
processAutoMount={!this.state.AutoMountProcessed}
sia={this.state.Sia}
version={this.state.RepertoryVersion}/>;
}
let dependencyDisplay = null;
if (showDependencies) {
dependencyDisplay = (
@@ -634,14 +618,6 @@ class App extends Component {
</Modal>);
}
let releaseDisplay = null;
if (this.state.ExtractActive) {
releaseDisplay = <h3 style={{textAlign: 'center'}}>{'Activating <' + selectedVersion + '>'}</h3>
} else {
releaseDisplay = <Button clicked={this.handleReleaseDownload}
disabled={!downloadEnabled}>Install</Button>;
}
let upgradeDisplay = null;
if (showUpgrade) {
upgradeDisplay = (
@@ -652,53 +628,47 @@ class App extends Component {
);
}
let mainContent = null;
if (this.state.AllowOptions) {
mainContent = (
<table width='100%' cellPadding='2'>
<tbody>
<tr>
<td width='33.333%'>
<h2>Release</h2>
</td>
<td width='33.333%'>
<h2>Version<UpgradeIcon
release
available={this.state.VersionAvailable}/></h2>
</td>
<td width='33.333%'>
<h2>Installed</h2>
</td>
</tr>
<tr>
<td>
<DropDown changed={this.handleReleaseChanged}
disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
items={this.state.ReleaseTypes}
selected={this.state.Release}/>
</td>
<td>
<DropDown changed={this.handleVersionChanged}
disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
items={this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]]}
selected={this.state.Version}/>
</td>
<td>
{this.state.RepertoryVersion}
</td>
</tr>
<tr>
<td colSpan={3}>
{releaseDisplay}
</td>
</tr>
<tr>
<td colSpan={3}>
{mountDisplay}
</td>
</tr>
</tbody>
</table>);
let mainContent = [];
if (this.state.DisplayMainContent) {
let key = 0;
mainContent.push((
<div key={'rvd_' + key++}
style={{height: '40%'}}>
<ReleaseVersionDisplay disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
downloadClicked={this.handleReleaseDownload}
downloadDisabled={!downloadEnabled}
installedVersion={this.state.InstalledVersion}
release={this.state.Release}
releaseChanged={this.handleReleaseChanged}
releaseExtracting={this.state.ExtractActive}
releaseTypes={this.state.ReleaseTypes}
version={this.state.Version}
versionAvailable={this.state.VersionAvailable}
versionChanged={this.handleVersionChanged}
versions={this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]]}/>
</div>
));
if (allowMount) {
mainContent.push((
<div key={'md_' + key++}
style={{height: '60%'}}>
<MountItems allowConfig={allowConfig}
autoMountChanged={this.handleAutoMountChanged}
autoMountProcessed={this.notifyAutoMountProcessed}
changed={this.handleMountLocationChanged}
configClicked={this.handleConfigClicked}
directory={Constants.DATA_LOCATIONS[this.props.platform]}
errorHandler={this.setErrorState}
hyperspace={this.state.Hyperspace}
mountsBusy={this.notifyMountsBusy}
platform={this.props.platform}
processAutoMount={!this.state.AutoMountProcessed}
sia={this.state.Sia}
version={this.state.InstalledVersion}/>
</div>
));
}
} else {
mainContent = <Loading/>
}
@@ -710,32 +680,25 @@ class App extends Component {
{upgradeDisplay}
{downloadDisplay}
{configDisplay}
<Box dxStyle={{height: '9.3%', padding: '2px'}}>
<table cellPadding={0}
cellSpacing={0}
style={{margin: 0, padding: 0}}
width='100%'>
<tbody style={{margin: 0, padding: 0}}>
<tr style={{margin: 0, padding: 0}}>
<td style={{margin: 0, padding: 0}}
width='33.333%'/>
<td style={{margin: 0, padding: 0}}
width='33.333%'>
<h1 style={{'textAlign': 'center'}}>{'Repertory UI v' + this.props.version}</h1>
</td>
<td align='right'
style={{margin: 0, padding: 0}}
valign='middle'
width='33.333%'>
<UpgradeIcon
available={this.state.UpgradeAvailable}
clicked={()=>this.setState({UpgradeDismissed: false})}/>
</td>
</tr>
</tbody>
</table>
<Box dxStyle={{height: '28px'}}>
<Grid>
<Text col={0}
row={0}
colSpan={'remain'}
rowSpan={'remain'}
text={'Repertory UI v' + this.props.version}
textAlign={'center'}
type={'Heading1'}/>
<UpgradeIcon
available={!this.state.UpgradeAvailable}
clicked={()=>this.setState({UpgradeDismissed: false})}
col={dimensions => dimensions.columns - 7}
colSpan={6}
row={0}
rowSpan={'remain'}/>
</Grid>
</Box>
<Box dxStyle={{padding: '4px', marginTop: '10px', height: '90.7%'}}>
<Box dxStyle={{padding: '8px', marginTop: '10px', height: '238px'}}>
{mainContent}
</Box>
</div>