Run prettier formatter

src/ui/components/common/BigButton.css

@@ -27,4 +27,4 @@
 
 .BigButton.disabled:hover {
   background: linear-gradient(#949494, #9c9c9c);
-}
+}

src/ui/components/common/BigButton.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 import './BigButton.css'
 
 interface IProps {
-  children: React.ReactNode;
-  onClick: () => unknown;
-  id: string;
-  disabled?: boolean;
+  children: React.ReactNode
+  onClick: () => unknown
+  id: string
+  disabled?: boolean
 }
 
 interface IState {
-  disabled?: boolean;
+  disabled?: boolean
 }
 
 export default class BigButton extends React.Component<IProps, IState> {
@@ -17,7 +17,7 @@ export default class BigButton extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      disabled: this.props.disabled
+      disabled: this.props.disabled,
     }
 
     this.handleClick = this.handleClick.bind(this)
@@ -25,7 +25,7 @@ export default class BigButton extends React.Component<IProps, IState> {
 
   static getDerivedStateFromProps(props: IProps, _state: IState) {
     return {
-      disabled: props.disabled
+      disabled: props.disabled,
     }
   }
 
@@ -37,9 +37,13 @@ export default class BigButton extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className={'BigButton ' + (this.state.disabled ? 'disabled' : '')} onClick={this.handleClick} id={this.props.id}>
+      <div
+        className={'BigButton ' + (this.state.disabled ? 'disabled' : '')}
+        onClick={this.handleClick}
+        id={this.props.id}
+      >
         <div className="BigButtonText">{this.props.children}</div>
       </div>
     )
   }
-}
+}

src/ui/components/common/Checkbox.css

@@ -1,4 +1,4 @@
-.Checkbox input[type="checkbox"] {
+.Checkbox input[type='checkbox'] {
   display: none;
 }
 
@@ -17,10 +17,10 @@
 
 .CheckboxDisplay img {
   height: 100%;
-  filter: invert(99%) sepia(0%) saturate(1188%) hue-rotate(186deg) brightness(97%) contrast(67%)
+  filter: invert(99%) sepia(0%) saturate(1188%) hue-rotate(186deg) brightness(97%) contrast(67%);
 }
 
 .Checkbox label {
   display: flex;
   flex-direction: row;
-}
+}

src/ui/components/common/Checkbox.tsx

@@ -4,9 +4,9 @@ import checkmark from '../../../resources/icons/check.svg'
 import './Checkbox.css'
 
 interface IProps {
-  label?: string,
-  checked: boolean,
-  onChange: () => void,
+  label?: string
+  checked: boolean
+  onChange: () => void
   id: string
 }
 
@@ -19,14 +19,14 @@ export default class Checkbox extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      checked: props.checked
+      checked: props.checked,
     }
   }
 
   static getDerivedStateFromProps(props: IProps, state: IState) {
     if (props.checked !== state.checked) {
       return {
-        checked: props.checked
+        checked: props.checked,
       }
     }
 
@@ -41,14 +41,12 @@ export default class Checkbox extends React.Component<IProps, IState> {
   render() {
     return (
       <div className="Checkbox">
-        <input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
+        <input type="checkbox" id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
         <label htmlFor={this.props.id}>
-          <div className="CheckboxDisplay">
-            {this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
-          </div>
+          <div className="CheckboxDisplay">{this.state.checked ? <img src={checkmark} alt="Checkmark" /> : null}</div>
           <span>{this.props.label || ''}</span>
         </label>
       </div>
     )
   }
-}
+}

src/ui/components/common/DirInput.css

@@ -24,4 +24,4 @@
 
 .FileSelectIcon img {
   height: 100%;
-}
+}

src/ui/components/common/DirInput.tsx

@@ -14,7 +14,7 @@ interface IProps {
   readonly?: boolean
   placeholder?: string
   folder?: boolean
-  customClearBehaviour?: () => void,
+  customClearBehaviour?: () => void
   openFolder?: string
 }
 
@@ -31,7 +31,7 @@ export default class DirInput extends React.Component<IProps, IState> {
     this.state = {
       value: props.value || '',
       placeholder: this.props.placeholder || 'Select file or folder...',
-      folder: this.props.folder || false
+      folder: this.props.folder || false,
     }
 
     this.handleIconClick = this.handleIconClick.bind(this)
@@ -54,8 +54,8 @@ export default class DirInput extends React.Component<IProps, IState> {
   async componentDidMount() {
     if (!this.props.placeholder) {
       const translation = await translate('components.select_file')
-      this.setState( {
-        placeholder: translation
+      this.setState({
+        placeholder: translation,
       })
     }
   }
@@ -65,15 +65,13 @@ export default class DirInput extends React.Component<IProps, IState> {
 
     if (this.state.folder) {
       path = await open({
-        directory: true
+        directory: true,
       })
     } else {
       console.log(this.props.openFolder)
       path = await open({
-        filters: [
-          { name: 'Files', extensions: this.props.extensions || ['*'] }
-        ],
-        defaultPath: this.props.openFolder
+        filters: [{ name: 'Files', extensions: this.props.extensions || ['*'] }],
+        defaultPath: this.props.openFolder,
       })
     }
 
@@ -81,7 +79,7 @@ export default class DirInput extends React.Component<IProps, IState> {
     if (!path) return
 
     this.setState({
-      value: path
+      value: path,
     })
 
     if (this.props.onChange) this.props.onChange(path)
@@ -89,12 +87,13 @@ export default class DirInput extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className='DirInput'>
+      <div className="DirInput">
         <TextInput
           value={this.state.value}
           placeholder={this.state.placeholder}
           clearable={this.props.clearable !== undefined ? this.props.clearable : true}
-          readOnly={this.props.readonly !== undefined ? this.props.readonly : true } onChange={(text: string) => {
+          readOnly={this.props.readonly !== undefined ? this.props.readonly : true}
+          onChange={(text: string) => {
             this.setState({ value: text })
 
             if (this.props.onChange) this.props.onChange(text)
@@ -108,4 +107,4 @@ export default class DirInput extends React.Component<IProps, IState> {
       </div>
     )
   }
-}
+}

src/ui/components/common/DownloadList.css

@@ -4,4 +4,4 @@
   flex: 1;
   overflow-y: auto;
   padding: 10px;
-}
+}

src/ui/components/common/DownloadList.tsx

@@ -5,7 +5,7 @@ import DownloadSection from './DownloadSection'
 import './DownloadList.css'
 
 interface IProps {
-  downloadManager: DownloadHandler;
+  downloadManager: DownloadHandler
 }
 
 export default class DownloadList extends React.Component<IProps, never> {
@@ -16,17 +16,14 @@ export default class DownloadList extends React.Component<IProps, never> {
   render() {
     const list = this.props.downloadManager.getDownloads().map((download) => {
       return (
-        <DownloadSection key={download.path} downloadName={download.path} downloadManager={this.props.downloadManager} />
+        <DownloadSection
+          key={download.path}
+          downloadName={download.path}
+          downloadManager={this.props.downloadManager}
+        />
       )
     })
 
-
-    return (
-      <div className="DownloadList">
-        {
-          list.length > 0 ? list : 'No downloads present'
-        }
-      </div>
-    )
+    return <div className="DownloadList">{list.length > 0 ? list : 'No downloads present'}</div>
   }
-}
+}

src/ui/components/common/DownloadSection.css

@@ -26,4 +26,4 @@
 
 .DownloadStatus {
   text-align: right;
-}
+}

src/ui/components/common/DownloadSection.tsx

@@ -5,8 +5,8 @@ import ProgressBar from './ProgressBar'
 import './DownloadSection.css'
 
 interface IProps {
-  downloadManager: DownloadHandler;
-  downloadName: string;
+  downloadManager: DownloadHandler
+  downloadName: string
 }
 
 export default class DownloadSection extends React.Component<IProps, never> {
@@ -32,4 +32,4 @@ export default class DownloadSection extends React.Component<IProps, never> {
       </div>
     )
   }
-}
+}

src/ui/components/common/HelpButton.css

@@ -30,4 +30,4 @@
   right: -450%;
   width: 200px;
   height: 120px;
-}
+}

src/ui/components/common/HelpButton.tsx

@@ -5,7 +5,7 @@ import Help from '../../../resources/icons/help.svg'
 import MiniDialog from '../MiniDialog'
 
 interface IProps {
-  children?: React.ReactNode[] | React.ReactNode;
+  children?: React.ReactNode[] | React.ReactNode
   contents?: string
   id?: string
 }
@@ -19,7 +19,7 @@ export default class HelpButton extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      opened: false
+      opened: false,
     }
 
     this.setOpen = this.setOpen.bind(this)
@@ -41,14 +41,15 @@ export default class HelpButton extends React.Component<IProps, IState> {
           <img src={Help} />
         </div>
 
-        <div className="HelpContents" style={{
-          display: this.state.opened ? 'block' : 'none'
-        }}>
-          <MiniDialog closeFn={this.setClosed}>
-            {this.props.contents || this.props.children}
-          </MiniDialog>
+        <div
+          className="HelpContents"
+          style={{
+            display: this.state.opened ? 'block' : 'none',
+          }}
+        >
+          <MiniDialog closeFn={this.setClosed}>{this.props.contents || this.props.children}</MiniDialog>
         </div>
       </div>
     )
   }
-}
+}

src/ui/components/common/MainProgressBar.tsx

@@ -4,15 +4,15 @@ import Tr from '../../../utils/language'
 import './ProgressBar.css'
 
 interface IProps {
-  downloadManager: DownloadHandler,
+  downloadManager: DownloadHandler
 }
 
 interface IState {
-  average: number,
-  files: number,
-  extracting: number,
-  total: number,
-  speed: string,
+  average: number
+  files: number
+  extracting: number
+  total: number
+  speed: string
 }
 
 /**
@@ -29,7 +29,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
       files,
       extracting,
       total: totalSize,
-      speed: '0 B/s'
+      speed: '0 B/s',
     }
   }
 
@@ -51,20 +51,23 @@ export default class ProgressBar extends React.Component<IProps, IState> {
     return (
       <div className="MainProgressBarWrapper">
         <div className="ProgressBar">
-          <div className="InnerProgress" style={{
-            width: `${(() => {
-              // Handles no files downloading
-              if (this.state.files === 0) {
-                return '100'
-              }
+          <div
+            className="InnerProgress"
+            style={{
+              width: `${(() => {
+                // Handles no files downloading
+                if (this.state.files === 0) {
+                  return '100'
+                }
 
-              if (this.state.total <= 0) {
-                return '0'
-              }
+                if (this.state.total <= 0) {
+                  return '0'
+                }
 
-              return this.state.average
-            })()}%`,
-          }}></div>
+                return this.state.average
+              })()}%`,
+            }}
+          ></div>
         </div>
 
         <div className="MainProgressText">
@@ -75,4 +78,4 @@ export default class ProgressBar extends React.Component<IProps, IState> {
       </div>
     )
   }
-}
+}

src/ui/components/common/ProgressBar.css

@@ -1,4 +1,5 @@
-.ProgressBar, .InnerProgress {
+.ProgressBar,
+.InnerProgress {
   border-radius: 4px;
 }
 
@@ -91,4 +92,4 @@
 
 .downloadStop:hover {
   cursor: pointer;
-}
+}

src/ui/components/common/ProgressBar.tsx

@@ -1,20 +1,20 @@
 import React from 'react'
 import { capitalize } from '../../../utils/string'
 
-import Stop from '../../../resources/icons/close.svg' 
+import Stop from '../../../resources/icons/close.svg'
 import './ProgressBar.css'
 import DownloadHandler from '../../../utils/download'
 import { translate } from '../../../utils/language'
 
 interface IProps {
-  path: string,
-  downloadManager: DownloadHandler,
+  path: string
+  downloadManager: DownloadHandler
 }
 
 interface IState {
-  progress: number,
-  status: string,
-  total: number,
+  progress: number
+  status: string
+  total: number
 }
 
 export default class ProgressBar extends React.Component<IProps, IState> {
@@ -36,7 +36,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
       const prog = this.props.downloadManager.getDownloadProgress(this.props.path)
       this.setState({
         progress: prog?.progress || 0,
-        status: await translate(`download_status.${prog?.status || 'stopped'}`) || 'stopped',
+        status: (await translate(`download_status.${prog?.status || 'stopped'}`)) || 'stopped',
         total: prog?.total || 0,
       })
 
@@ -54,24 +54,29 @@ export default class ProgressBar extends React.Component<IProps, IState> {
   render() {
     return (
       <div className="ProgressBarWrapper">
-        <div style={{
-          width: '80%'
-        }}>
+        <div
+          style={{
+            width: '80%',
+          }}
+        >
           <div className="ProgressBar">
-            <div className="InnerProgress" style={{
-              width: `${(() => {
-                // Handles files with content-lengths of 0
-                if (this.state.status === 'finished') {
-                  return '100'
-                }
+            <div
+              className="InnerProgress"
+              style={{
+                width: `${(() => {
+                  // Handles files with content-lengths of 0
+                  if (this.state.status === 'finished') {
+                    return '100'
+                  }
 
-                if (this.state.total <= 0) {
-                  return '0'
-                }
+                  if (this.state.total <= 0) {
+                    return '0'
+                  }
 
-                return this.state.progress / this.state.total * 100
-              })()}%`,
-            }}></div>
+                  return (this.state.progress / this.state.total) * 100
+                })()}%`,
+              }}
+            ></div>
           </div>
           <div className="DownloadControls">
             <div onClick={this.stopDownload} className="downloadStop">
@@ -80,10 +85,8 @@ export default class ProgressBar extends React.Component<IProps, IState> {
           </div>
         </div>
 
-        <div className="ProgressText">
-          {capitalize(this.state.status) || 'Waiting'}
-        </div>
+        <div className="ProgressText">{capitalize(this.state.status) || 'Waiting'}</div>
       </div>
     )
   }
-}
+}

src/ui/components/common/TextInput.css

@@ -17,7 +17,7 @@
   display: inline-block;
   position: absolute;
   right: 16%;
-  
+
   filter: invert(99%) sepia(0%) saturate(1188%) hue-rotate(186deg) brightness(97%) contrast(67%);
 }
 
@@ -28,4 +28,4 @@
 
 .TextInputClear {
   height: 100%;
-}
+}

src/ui/components/common/TextInput.tsx

@@ -4,15 +4,15 @@ import './TextInput.css'
 import Close from '../../../resources/icons/close.svg'
 
 interface IProps {
-  value?: string;
-  initalValue?: string;
-  placeholder?: string;
-  onChange?: (value: string) => void;
-  readOnly?: boolean;
-  id?: string;
-  clearable?: boolean;
-  customClearBehaviour?: () => void;
-  style?: React.CSSProperties;
+  value?: string
+  initalValue?: string
+  placeholder?: string
+  onChange?: (value: string) => void
+  readOnly?: boolean
+  id?: string
+  clearable?: boolean
+  customClearBehaviour?: () => void
+  style?: React.CSSProperties
 }
 
 interface IState {
@@ -24,14 +24,14 @@ export default class TextInput extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      value: props.value || ''
+      value: props.value || '',
     }
   }
 
   async componentDidMount() {
     if (this.props.initalValue) {
       this.setState({
-        value: this.props.initalValue
+        value: this.props.initalValue,
       })
     }
   }
@@ -43,26 +43,35 @@ export default class TextInput extends React.Component<IProps, IState> {
   render() {
     return (
       <div className="TextInputWrapper" style={this.props.style || {}}>
-        <input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
-          this.setState({ value: e.target.value })
-          if (this.props.onChange) this.props.onChange(e.target.value)
-        }} />
-        {
-          this.props.clearable ?
-            <div className="TextClear" onClick={() => {
+        <input
+          id={this.props?.id}
+          readOnly={this.props.readOnly || false}
+          placeholder={this.props.placeholder || ''}
+          className="TextInput"
+          value={this.state.value}
+          onChange={(e) => {
+            this.setState({ value: e.target.value })
+            if (this.props.onChange) this.props.onChange(e.target.value)
+          }}
+        />
+        {this.props.clearable ? (
+          <div
+            className="TextClear"
+            onClick={() => {
               // Run custom behaviour first
               if (this.props.customClearBehaviour) return this.props.customClearBehaviour()
 
               this.setState({ value: '' })
-    
+
               if (this.props.onChange) this.props.onChange('')
 
               this.forceUpdate()
-            }}>
-              <img src={Close} className="TextInputClear" />
-            </div> : null
-        }
+            }}
+          >
+            <img src={Close} className="TextInputClear" />
+          </div>
+        ) : null}
       </div>
     )
   }
-}
+}