Updated prettierrc

.prettierrc.json

@@ -2,5 +2,6 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "jsxBracketSameLine": true
 }

.vim/coc-settings.json

@@ -16,6 +16,8 @@
     "WINFSP",
     "blockstorage",
     "centos",
+    "fontawesome",
+    "fortawesome",
     "msiexec",
     "norestart",
     "randomstring",

src/App.jsx

@@ -275,8 +275,7 @@ class App extends IPCContainer {
       mainContent.push(
         <Box
           key={'md_' + key++}
-          dxStyle={{ padding: 'var(--default_spacing)', height: 'auto' }}
+          dxStyle={{ padding: 'var(--default_spacing)', height: 'auto' }}>
-        >
           <ReleaseVersionDisplay
             downloadDisabled={!downloadEnabled}
             version={selectedVersion}
@@ -293,8 +292,7 @@ class App extends IPCContainer {
         mainContent.push(
           <Box
             dxStyle={{ padding: 'var(--default_spacing)', height: 'auto' }}
-            key={'md_' + key++}
+            key={'md_' + key++}>
-          >
             <MountItems
               s3Supported={s3Supported}
               remoteSupported={remoteSupported}
@@ -308,8 +306,7 @@ class App extends IPCContainer {
         mainContent.push(
           <Box
             dxStyle={{ padding: 'var(--default_spacing)', height: '170px' }}
-            key={'md_' + key++}
+            key={'md_' + key++}>
-          >
             <Loading />
           </Box>
         );

src/components/ApplicationBusy/ApplicationBusy.js

@@ -15,8 +15,7 @@ const ApplicationBusy = ({ title }) => {
         style={{
           paddingLeft: 'calc(50% - 16px)',
           paddingTop: 'var(--default_spacing)',
-        }}
+        }}>
-      >
         <Loader
           color={'var(--heading_text_color)'}
           height={32}

src/components/DependencyList/Dependency/Dependency.js

@@ -29,8 +29,7 @@ export default connect(mapStateToProps)((props) => {
                   onClick={() => {
                     props.onDownload();
                     return false;
-                  }}
+                  }}>
-                >
                   <u>Install</u>
                 </a>
               ) : (

src/components/DependencyList/DependencyList.js

@@ -53,8 +53,7 @@ export default connect(
         paddingRight: '4px',
         boxSizing: 'border-box',
         display: 'block',
-      }}
+      }}>
-    >
       <a
         href={'#'}
         onClick={
@@ -64,8 +63,7 @@ export default connect(
         }
         style={{
           cursor: props.AllowDismissDependencies ? 'pointer' : 'no-drop',
-        }}
+        }}>
-      >
         X
       </a>
     </div>
@@ -80,15 +78,13 @@ export default connect(
           height: 'auto',
           paddingBottom: '5px',
           boxSizing: 'border-box',
-        }}
+        }}>
-      >
         <h1
           style={{
             width: '100%',
             textAlign: 'center',
             color: 'var(--text_color_error)',
-          }}
+          }}>
-        >
           Missing Dependencies
         </h1>
       </div>

src/components/NewReleases/NewRelease/NewRelease.jsx

@@ -74,8 +74,7 @@ export default connect(
               <td width="50%">
                 <Button
                   buttonStyles={{ width: '100%' }}
-                  clicked={displayChanges}
+                  clicked={displayChanges}>
-                >
                   Changes
                 </Button>
               </td>
@@ -86,8 +85,7 @@ export default connect(
                 {!isActiveRelease ? (
                   <Button
                     buttonStyles={{ width: '100%' }}
-                    clicked={setReleaseAndVersion}
+                    clicked={setReleaseAndVersion}>
-                  >
                     Activate
                   </Button>
                 ) : null}

src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js

@@ -138,8 +138,7 @@ export default connect(
         colSpan={20}
         key={key++}
         row={5}
-        rowSpan={7}
+        rowSpan={7}>
-      >
         Install
       </Button>
     );

src/components/UI/Box/Box.js

@@ -20,8 +20,7 @@ const Box = (props) => {
     <div
       onClick={props.clicked}
       className={styleList.join(' ')}
-      style={{ ...props.dxStyle }}
+      style={{ ...props.dxStyle }}>
-    >
       {props.children}
     </div>
   );

src/components/UI/Button/Button.js

@@ -8,8 +8,7 @@ const Button = (props) => {
       autoFocus={props.autoFocus}
       className={'Button'}
       style={props.buttonStyles}
-      onClick={props.clicked}
+      onClick={props.clicked}>
-    >
       {props.children}
     </button>
   );

src/components/UI/DropDown/DropDown.js

@@ -21,8 +21,7 @@ const DropDown = (props) => {
         autoFocus={props.autoFocus}
         disabled={props.disabled}
         onChange={props.changed}
-        value={props.selected}
+        value={props.selected}>
-      >
         {options}
       </select>
     </div>

src/components/UI/Grid/Grid.js

@@ -115,8 +115,7 @@ export default class Grid extends Component {
               col={col}
               rowSpan={rowSpan}
               colSpan={colSpan}
-              key={'gc_' + i}
+              key={'gc_' + i}>
-            >
               {child}
             </GridComponent>
           );

src/components/UpgradeUI/UpgradeUI.js

@@ -59,8 +59,7 @@ export default connect(
             <td width="50%">
               <Button
                 buttonStyles={{ width: '100%' }}
-                clicked={() => props.setDismissUIUpgrade(true)}
+                clicked={() => props.setDismissUIUpgrade(true)}>
-              >
                 Cancel
               </Button>
             </td>

src/components/YesNo/YesNo.js

@@ -27,8 +27,7 @@ export default connect(
         minWidth: '180px',
         height: 'auto',
         padding: 'var(--default_spacing)',
-      }}
+      }}>
-    >
       <div style={{ width: '100%', height: 'auto' }}>
         <h1 style={{ width: '100%', textAlign: 'center' }}>{props.Title}</h1>
       </div>
@@ -38,16 +37,14 @@ export default connect(
             <td width="50%">
               <Button
                 buttonStyles={{ width: '100%' }}
-                clicked={() => props.hideConfirmYesNo(true)}
+                clicked={() => props.hideConfirmYesNo(true)}>
-              >
                 Yes
               </Button>
             </td>
             <td width="50%">
               <Button
                 buttonStyles={{ width: '100%' }}
-                clicked={() => props.hideConfirmYesNo(false)}
+                clicked={() => props.hideConfirmYesNo(false)}>
-              >
                 No
               </Button>
             </td>

src/containers/AddMount/AddMount.js

@@ -137,14 +137,12 @@ export default connect(
             width: 'auto',
             height: 'auto',
             padding: 'var(--default_spacing)',
-          }}
+          }}>
-        >
           <h1
             style={{
               textAlign: 'center',
               paddingBottom: 'var(--default_spacing)',
-            }}
+            }}>
-          >
             Add Remote Mount
           </h1>
           <Text text={'Hostname or IP'} textAlign={'left'} type={'Heading2'} />
@@ -178,15 +176,13 @@ export default connect(
           <div style={{ display: 'flex', flexDirection: 'row' }}>
             <Button
               buttonStyles={{ width: '100%' }}
-              clicked={() => this.addRemoteMount()}
+              clicked={() => this.addRemoteMount()}>
-            >
               OK
             </Button>
             <div style={{ paddingLeft: 'var(--default_spacing)' }} />
             <Button
               buttonStyles={{ width: '100%' }}
-              clicked={() => this.setState({ DisplayRemote: false })}
+              clicked={() => this.setState({ DisplayRemote: false })}>
-            >
               Cancel
             </Button>
           </div>
@@ -201,14 +197,12 @@ export default connect(
             width: 'auto',
             height: 'auto',
             padding: 'var(--default_spacing)',
-          }}
+          }}>
-        >
           <h1
             style={{
               textAlign: 'center',
               paddingBottom: 'var(--default_spacing)',
-            }}
+            }}>
-          >
             Add S3 Mount
           </h1>
           <div style={{ display: 'flex', flexDirection: 'row' }}>
@@ -283,15 +277,13 @@ export default connect(
             <div style={{ width: '200%' }} />
             <Button
               buttonStyles={{ width: '100%' }}
-              clicked={() => this.addS3Mount()}
+              clicked={() => this.addS3Mount()}>
-            >
               OK
             </Button>
             <div style={{ paddingLeft: 'var(--default_spacing)' }} />
             <Button
               buttonStyles={{ width: '100%' }}
-              clicked={() => this.setState({ DisplayS3: false })}
+              clicked={() => this.setState({ DisplayS3: false })}>
-            >
               Cancel
             </Button>
           </div>
@@ -306,8 +298,7 @@ export default connect(
             {this.props.remoteSupported ? (
               <Button
                 className={'AddMountButton'}
-                clicked={this.handleAddRemoteMount}
+                clicked={this.handleAddRemoteMount}>
-              >
                 Add Remote Mount
               </Button>
             ) : null}
@@ -317,8 +308,7 @@ export default connect(
             {this.props.s3Supported ? (
               <Button
                 className={'AddMountButton'}
-                clicked={this.handleAddS3Mount}
+                clicked={this.handleAddS3Mount}>
-              >
                 Add S3 Mount
               </Button>
             ) : null}

src/containers/Configuration/Configuration.js

@@ -163,7 +163,7 @@ class Configuration extends IPCContainer {
     });
   };
 
-  onGetConfigReply = (event, arg) => {
+  onGetConfigReply = (_, arg) => {
     if (arg.data.Success) {
       const list = this.createItemList(arg.data.Config, this.state.Template);
       const itemListCopy = JSON.parse(JSON.stringify(list.ItemList));
@@ -207,7 +207,7 @@ class Configuration extends IPCContainer {
     }
   };
 
-  onGetConfigTemplateReply = (event, arg) => {
+  onGetConfigTemplateReply = (_, arg) => {
     if (arg.data.Success) {
       this.setState(
         {
@@ -318,16 +318,14 @@ class Configuration extends IPCContainer {
                   <td align="center" width="50%">
                     <Button
                       clicked={this.saveAndClose}
-                      disabled={this.state.Saving}
+                      disabled={this.state.Saving}>
-                    >
                       Yes
                     </Button>
                   </td>
                   <td align="center" width="50%">
                     <Button
                       clicked={this.props.hideConfiguration}
-                      disabled={this.state.Saving}
+                      disabled={this.state.Saving}>
-                    >
                       No
                     </Button>
                   </td>
@@ -340,6 +338,12 @@ class Configuration extends IPCContainer {
     }
 
     let autoFocus = true;
+    const getAutoFocus = () => {
+      return autoFocus;
+    };
+    const setAutoFocus = (value) => {
+      autoFocus = value;
+    };
 
     let objectItems = [];
     for (const key of Object.keys(this.state.ObjectLookup)) {
@@ -348,8 +352,8 @@ class Configuration extends IPCContainer {
           <h2>{key}</h2>
           <div>
             {this.state.ObjectLookup[key].map((k, i) => {
-              const shouldFocus = autoFocus;
+              const shouldFocus = getAutoFocus();
-              autoFocus = false;
+              setAutoFocus(false);
               return !k.advanced ||
                 (this.state.ShowAdvanced && k.advanced && !k.remote) ||
                 this.showRemoteConfigItem(k, this.state.ObjectLookup[key]) ? (
@@ -407,13 +411,11 @@ class Configuration extends IPCContainer {
               marginTop: '-4px',
               boxSizing: 'border-box',
               display: 'block',
-            }}
+            }}>
-          >
             <a
               href={'#'}
               onClick={this.checkSaveRequired}
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: 'pointer' }}>
-            >
               X
             </a>
           </div>
@@ -434,8 +436,7 @@ class Configuration extends IPCContainer {
                 clicked={() => {
                   this.props.displayPinnedManager(true);
                   return false;
-                }}
+                }}>
-              >
                 &nbsp;Pinned File Manager...&nbsp;
               </Button>
             ) : null}

src/containers/Configuration/ConfigurationItem/ConfigurationItem.js

@@ -46,8 +46,7 @@ export default connect(
         onClick={() => {
           displayInfo();
           return false;
-        }}
+        }}>
-      >
         <FontAwesomeIcon icon={faInfoCircle} />
       </a>
     );

src/containers/MountItems/MountItem/MountItem.js

@@ -112,8 +112,7 @@ export default connect(
         colSpan={inputColumnSpan - 8}
         key={'i' + key++}
         row={secondRow}
-        rowSpan={7}
+        rowSpan={7}>
-      >
         <input
           disabled={!props.MState.AllowMount || props.MState.Mounted}
           maxLength={4096}
@@ -135,8 +134,7 @@ export default connect(
         disabled={props.MState.Mounted || !props.MState.AllowMount}
         key={'b' + key++}
         row={secondRow}
-        rowSpan={7}
+        rowSpan={7}>
-      >
         ...
       </Button>
     );
@@ -172,8 +170,7 @@ export default connect(
       colSpan={21}
       disabled={!props.MState.AllowMount}
       row={secondRow}
-      rowSpan={7}
+      rowSpan={7}>
-    >
       {buttonDisplay}
     </Button>
   );
@@ -183,8 +180,7 @@ export default connect(
       col={inputColumnSpan + 24}
       colSpan={28}
       row={secondRow}
-      rowSpan={7}
+      rowSpan={7}>
-    >
       <CheckBox
         changed={handleAutoMountChanged}
         checked={props.PState.AutoMount}
@@ -198,8 +194,7 @@ export default connect(
       col={inputColumnSpan + 24 + 28}
       colSpan={24}
       row={secondRow}
-      rowSpan={7}
+      rowSpan={7}>
-    >
       <CheckBox
         changed={handleAutoRestartChanged}
         checked={props.PState.AutoRestart}
@@ -222,8 +217,7 @@ export default connect(
     removeControl = (
       <RootElem
         col={(dimensions) => dimensions.columns - 6}
-        row={secondRow + 3}
+        row={secondRow + 3}>
-      >
         <a href={'#'} onClick={handleRemoveMount} style={removeStyle}>
           <FontAwesomeIcon icon={faTrashAlt} />
         </a>
@@ -264,8 +258,7 @@ export default connect(
                   }
             }
             rowSpan={5}
-            style={{ ...pointer, fontWeight: 'normal' }}
+            style={{ ...pointer, fontWeight: 'normal' }}>
-          >
             <u>Export</u>
           </a>
         ) : null}
@@ -281,8 +274,7 @@ export default connect(
                   }
             }
             rowSpan={5}
-            style={{ ...pointer, fontWeight: 'normal' }}
+            style={{ ...pointer, fontWeight: 'normal' }}>
-          >
             <u>Import</u>
           </a>
         ) : null}

src/containers/MountItems/MountItems.js

@@ -430,8 +430,7 @@ class MountItems extends IPCContainer {
               clicked={() =>
                 this.cancelRetryMount(provider, () => this.detectMounts())
               }
-              key={'rl_' + retryList.length}
+              key={'rl_' + retryList.length}>
-            >
               Cancel {provider} Remount (
               {this.state.RetryItems[provider].RetrySeconds}s)
             </Button>
@@ -451,15 +450,13 @@ class MountItems extends IPCContainer {
         <Modal>
           <Box
             dxDark
-            dxStyle={{ padding: 'var(--default_spacing)', minWidth: '70vw' }}
+            dxStyle={{ padding: 'var(--default_spacing)', minWidth: '70vw' }}>
-          >
             <h1
               style={{
                 textAlign: 'center',
                 paddingBottom: 'var(--default_spacing)',
                 color: 'var(--text_color_error)',
-              }}
+              }}>
-            >
               Mount Failed
             </h1>
             {retryList}
@@ -563,8 +560,7 @@ class MountItems extends IPCContainer {
             this.props.remoteSupported || this.props.s3Supported
               ? 'MountItemsRemote'
               : 'MountItems'
-          }
+          }>
-        >
           {items}
         </div>
         <div style={{ paddingTop: 'var(--default_spacing)' }} />

src/containers/PinnedManager/PinnedManager.js

@@ -119,8 +119,7 @@ export default connect(
                   this.grabDirectoryItems();
                 }
               );
-            }}
+            }}>
-          >
             <FontAwesomeIcon
               icon={faFolder}
               fixedWidth
@@ -177,16 +176,14 @@ export default connect(
             height: 'calc(100vh - (var(--default_spacing) * 4)',
             padding: 'var(--default_spacing)',
             width: 'calc(100vw - (var(--default_spacing) * 4)',
-          }}
+          }}>
-        >
           <div className={'PinnedManager'}>
             <div className={'PinnedManagerHeading'}>
               <div className={'PinnedManagerClose'}>
                 <a
                   href={'#'}
                   onClick={() => this.props.displayPinnedManager(false)}
-                  style={{ cursor: 'pointer', flex: '0' }}
+                  style={{ cursor: 'pointer', flex: '0' }}>
-                >
                   X
                 </a>
               </div>

src/containers/SelectAppPlatform/SelectAppPlatform.js

@@ -83,8 +83,7 @@ class SelectAppPlatform extends IPCContainer {
           />
           <Button
             clicked={this.handleTestClicked}
-            disabled={this.props.InstallTestActive}
+            disabled={this.props.InstallTestActive}>
-          >
             Test
           </Button>
         </div>

src/containers/SkynetExport/SkynetExport.js

@@ -179,8 +179,7 @@ export default connect(
             height: '90vh',
             padding: 'var(--default_spacing)',
             width: 'calc(100vw - (var(--default_spacing) * 4)',
-          }}
+          }}>
-        >
           <div
             style={{
               float: 'right',
@@ -189,13 +188,11 @@ export default connect(
               marginTop: '-4px',
               boxSizing: 'border-box',
               display: 'block',
-            }}
+            }}>
-          >
             <a
               href={'#'}
               onClick={() => this.props.displaySkynetExport(false)}
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: 'pointer' }}>
-            >
               X
             </a>
           </div>
@@ -205,8 +202,7 @@ export default connect(
           <div
             className={
               this.state.second_stage ? 'SkynetExportList' : 'SkynetExportTree'
-            }
+            }>
-          >
             {this.state.second_stage ? (
               this.state.checked.map((path) => {
                 return (
@@ -324,8 +320,7 @@ export default connect(
                   this.setState({
                     second_stage: false,
                   })
-                }
+                }>
-              >
                 {'Back'}
               </Button>
             ) : null}
@@ -336,8 +331,7 @@ export default connect(
                 marginTop: 'var(--default_spacing)',
                 width: 'auto',
               }}
-              clicked={this.handleNavigation}
+              clicked={this.handleNavigation}>
-            >
               {this.state.second_stage ? 'Export' : 'Next'}
             </Button>
           </div>

src/containers/SkynetImport/SkynetImport.js

@@ -191,8 +191,7 @@ export default connect(
             height: 'auto',
             padding: 'var(--default_spacing)',
             width: 'calc(100vw - (var(--default_spacing) * 4)',
-          }}
+          }}>
-        >
           <div
             style={{
               float: 'right',
@@ -201,13 +200,11 @@ export default connect(
               marginTop: '-4px',
               boxSizing: 'border-box',
               display: 'block',
-            }}
+            }}>
-          >
             <a
               href={'#'}
               onClick={() => this.props.displaySkynetImport(false)}
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: 'pointer' }}>
-            >
               X
             </a>
           </div>
@@ -236,8 +233,7 @@ export default connect(
                 marginTop: 'var(--default_spacing)',
                 width: 'auto',
               }}
-              clicked={this.displaySyntax}
+              clicked={this.displaySyntax}>
-            >
               Import Syntax...
             </Button>
             <div className={'SkynetActionButtons'}>
@@ -253,8 +249,7 @@ export default connect(
                     this.setState({
                       second_stage: false,
                     })
-                  }
+                  }>
-                >
                   {'Back'}
                 </Button>
               ) : null}
@@ -265,8 +260,7 @@ export default connect(
                   marginTop: 'var(--default_spacing)',
                   width: 'auto',
                 }}
-                clicked={this.handleNavigation}
+                clicked={this.handleNavigation}>
-              >
                 {this.state.second_stage ? 'Import' : 'Next'}
               </Button>
             </div>

src/containers/UI/Password/Password.js

@@ -122,8 +122,7 @@ export default class Password extends Component {
           <a
             href={'#'}
             className={'PasswordLink'}
-            onClick={this.handleActionClick}
+            onClick={this.handleActionClick}>
-          >
             <u>{this.state.button_text}</u>
           </a>
         )}
@@ -144,8 +143,7 @@ export default class Password extends Component {
         <a
           href={'#'}
           className={'PasswordShowHide'}
-          onClick={this.handleShowHideClick}
+          onClick={this.handleShowHideClick}>
-        >
           <FontAwesomeIcon
             icon={this.state.show_password ? faEye : faEyeSlash}
             fixedWidth