Import/export skeleton

src/App.js

@@ -33,6 +33,8 @@ import {
 } from './redux/actions/release_version_actions';
 import YesNo from './components/YesNo/YesNo';
 import {createModalConditionally} from './utils';
+import SkynetImport from './containers/SkynetImport/SkynetImport';
+import {displaySkynetImport} from './redux/actions/skynet_actions';
 
 const Constants = require('./constants');
 const Scheduler = require('node-schedule');
@@ -138,6 +140,17 @@ class App extends IPCContainer {
       !this.props.DismissNewReleasesAvailable &&
       (this.props.NewReleasesAvailable.length > 0);
 
+    const showSkynetImport = !showConfig &&
+      !showDependencies &&
+      !this.props.DownloadActive &&
+      !this.props.DisplayError &&
+      !this.props.DisplayInfo &&
+      !showNewReleases &&
+      !this.props.RebootRequired &&
+      !this.props.DisplaySelectAppPlatform &&
+      !showUpgrade &&
+      this.props.DisplayImport;
+
     const configDisplay = createModalConditionally(showConfig, <Configuration version={selectedVersion} remoteSupported={remoteSupported} />);
     const confirmDisplay = createModalConditionally(this.props.DisplayConfirmYesNo, <YesNo/>);
     const dependencyDisplay = createModalConditionally(showDependencies, <DependencyList/>, false, this.props.InstallActive);
@@ -148,6 +161,7 @@ class App extends IPCContainer {
     const rebootDisplay = createModalConditionally(this.props.RebootRequired, <Reboot />);
     const selectAppPlatformDisplay = createModalConditionally(this.props.DisplaySelectAppPlatform, <SelectAppPlatform/>);
     const upgradeDisplay = createModalConditionally(showUpgrade, <UpgradeUI/>);
+    const importDisplay = createModalConditionally(showSkynetImport, <SkynetImport/>);
 
     let mainContent = [];
     if (this.props.DisplaySelectAppPlatform || !this.props.AppReady) {
@@ -211,6 +225,7 @@ class App extends IPCContainer {
             {mainContent}
           </div>
         </div>
+        {importDisplay}
         {newReleasesDisplay}
         {selectAppPlatformDisplay}
         {dependencyDisplay}
@@ -236,6 +251,7 @@ const mapStateToProps = state => {
     DisplayConfiguration: state.mounts.DisplayConfiguration,
     DisplayConfirmYesNo: state.common.DisplayConfirmYesNo,
     DisplayError: state.error.DisplayError,
+    DisplayImport: state.skynet.DisplayImport,
     DisplayInfo: state.error.DisplayInfo,
     DisplaySelectAppPlatform: state.common.DisplaySelectAppPlatform,
     DismissNewReleasesAvailable: state.relver.DismissNewReleasesAvailable,

src/containers/AddRemoteMount/AddRemoteMount.js

@@ -62,7 +62,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
     const displayAdd = createModalConditionally(this.state.Display, (
       <Box dxDark
            dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
-        <h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote Mount</h1>
+        <h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote Mount</h1>
         <Text text={'Hostname or IP'}
               textAlign={'left'}
               type={'Heading2'}/>

src/containers/MountItems/MountItem/MountItem.js

@@ -32,8 +32,8 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = dispatch => {
   return {
     displayConfiguration: (provider, remote) => dispatch(displayConfiguration(provider, remote)),
-    displaySkynetExport: () => dispatch(displaySkynetExport()),
+    displaySkynetExport: display => dispatch(displaySkynetExport(display)),
-    displaySkynetImport: () => dispatch(displaySkynetImport()),
+    displaySkynetImport: display => dispatch(displaySkynetImport(display)),
     removeRemoteMount: provider => dispatch(removeRemoteMount(provider)),
     setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
   }
@@ -185,7 +185,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
         {(props.provider === 'Skynet') ? (
           <a href={'#'}
              col={configButton ? 24 : 18}
-             onClick={props.MState.AllowMount ? () => props.displaySkynetExport() : e => {e.preventDefault();}}
+             onClick={props.MState.AllowMount ? () => props.displaySkynetExport(true) : e => {e.preventDefault();}}
              rowSpan={5}
              style={{...pointer, fontWeight: 'normal'}}>
             <u>Export</u>
@@ -194,7 +194,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
         {(props.provider === 'Skynet') ? (
           <a href={'#'}
              col={configButton ? 24 + 13 : 18 + 13}
-             onClick={props.MState.AllowMount ? () => props.displaySkynetImport() : e => {e.preventDefault();}}
+             onClick={props.MState.AllowMount ? () => props.displaySkynetImport(true) : e => {e.preventDefault();}}
              rowSpan={5}
              style={{...pointer, fontWeight: 'normal'}}>
             <u>Import</u>

src/containers/SkynetImport/SkynetImport.css

@@ -0,0 +1,27 @@
+.SkynetImportTextArea {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: var(--control_background);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+  resize: none;
+  overflow-y: scroll;
+  overflow:-moz-scrollbars-horizontal;
+  white-space: nowrap;
+}
+
+.SkynetImportButtons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.SkynetImportHeading {
+  text-align: center;
+  padding-bottom: var(--default_spacing);
+}

src/containers/SkynetImport/SkynetImport.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import {Component} from 'react';
+import {connect} from 'react-redux';
+import './SkynetImport.css'
+import Box from '../../components/UI/Box/Box';
+import Button from '../../components/UI/Button/Button';
+import {displaySkynetImport} from '../../redux/actions/skynet_actions';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    displaySkynetImport: display => dispatch(displaySkynetImport(display)),
+  }
+};
+
+export default connect(null, mapDispatchToProps)(class extends Component {
+
+  state = {
+    import_list: '',
+  };
+
+  render() {
+    return (
+      <Box dxDark dxStyle={{height: 'auto', padding: 'var(--default_spacing)', width: 'calc(100vw - (var(--default_spacing) * 4)'}}>
+        <div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}>
+          <a href={'#'}
+             onClick={()=>this.props.displaySkynetImport(false)}
+             style={{cursor: 'pointer'}}>X</a>
+        </div>
+        <h1 className={'SkynetImportHeading'}>Import List</h1>
+        <textarea autoFocus={true}
+                  className={'SkynetImportTextArea'}
+                  onChange={e => this.setState({
+                    ...this.state,
+                    import_list: e.target.value,
+                  })}
+                  value={this.state.import_list}
+                  rows={10} />
+
+        <div className={'SkynetImportButtons'}>
+          <Button buttonStyles={{height: 'auto', marginTop: 'var(--default_spacing)', width: 'auto'}}>Import Syntax...</Button>
+          <Button buttonStyles={{height: 'auto', marginLeft: 'var(--default_spacing)', marginTop: 'var(--default_spacing)', width: 'auto'}}>Next</Button>
+        </div>
+      </Box>
+    );
+  }
+});

src/redux/actions/skynet_actions.js

@@ -1,13 +1,5 @@
+import {createAction} from '@reduxjs/toolkit';
 
 
-export const displaySkynetExport = () => {
+export const displaySkynetExport = createAction('skynet/displaySkynetExport');
-  return dispatch => {
+export const displaySkynetImport = createAction('skynet/displaySkynetImport');
-
-  };
-};
-
-export const displaySkynetImport = () => {
-  return dispatch => {
-
-  };
-};

src/redux/reducers/skynet_reducer.js

@@ -0,0 +1,20 @@
+import {createReducer} from '@reduxjs/toolkit';
+import * as Actions from '../actions/skynet_actions';
+
+export const skynetReducer = createReducer({
+  DisplayExport: false,
+  DisplayImport: false,
+}, {
+  [Actions.displaySkynetExport]: (state, action) => {
+    return {
+      ...state,
+      DisplayExport: action.payload,
+    }
+  },
+  [Actions.displaySkynetImport]: (state, action) => {
+    return {
+      ...state,
+      DisplayImport: action.payload,
+    }
+  },
+});

src/redux/store/createAppStore.js

@@ -5,6 +5,7 @@ import {errorReducer} from '../reducers/error_reducer';
 import {installReducer} from '../reducers/install_reducer';
 import {createMountReducer} from '../reducers/mount_reducer';
 import {releaseVersionReducer} from '../reducers/release_version_reducer';
+import {skynetReducer} from '../reducers/skynet_reducer';
 
 export default function createAppStore(platformInfo, version, state) {
   const reducer = {
@@ -14,6 +15,7 @@ export default function createAppStore(platformInfo, version, state) {
     install: installReducer,
     mounts: createMountReducer(state),
     relver: releaseVersionReducer,
+    skynet: skynetReducer,
   };
 
   const middleware = [...getDefaultMiddleware()];