begin progress bar element

src/ui/App.tsx

@@ -13,6 +13,7 @@ import { getConfig, saveConfig } from '../utils/configuration'
 import Topbar from './components/TopBar'
 import BigButton from './components/common/BigButton'
 import Checkbox from './components/common/Checkbox'
+import ProgressBar from './components/common/ProgressBar'
 
 const downloadHandler = new DownloadHandler()
 
@@ -60,6 +61,16 @@ function App() {
           <Checkbox label="Connect via Grasscutter" onChange={toggleGrasscutter} />
         </div>
         <BigButton text="PLAY DA GAME :D" onClick={playGame} id="officialPlay" />
+
+        <div id="downloadProgress" style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+        }}>
+
+          <ProgressBar path="S:/Cultivation/grassclipper.zip" downloadManager={downloadHandler} />
+
+        </div>
       </div>
     </div>
   )

src/ui/components/common/BigButton.tsx

@@ -12,8 +12,7 @@ interface IState {
 }
 
 export default class BigButton extends React.Component<IProps, IState> {
-
-  constructor(props: { text: string, onClick: () => any, id: string }) {
+  constructor(props: IProps) {
     super(props)
 
     this.state = {

src/ui/components/common/ProgressBar.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+interface IProps {
+  path: string,
+  downloadManager: any,
+}
+
+interface IState {
+  progress: number,
+  status: string,
+  total: number,
+}
+
+export default class ProgressBar extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      progress: 0,
+      status: '',
+      total: this.props.downloadManager.getDownloadProgress(this.props.path).total,
+    }
+  }
+
+  componentDidMount() {
+    // Periodically check the progress of passed file path
+    const intv = setInterval(() => {
+      const prog = this.props.downloadManager.getDownloadProgress(this.props.path)
+      this.setState({
+        progress: prog.progress,
+        status: prog.status,
+      })
+
+      if (prog.status === 'finished') {
+        clearInterval(intv)
+      }
+    }, 100)
+  }
+
+  render() {
+    return (
+      <div className="ProgressBar">
+        <div className="InnerProgress" style={{
+          width: `${this.state.progress / this.state.total}%`,
+        }}></div>
+        <div className="ProgressText">
+          {this.state.status}
+        </div>
+      </div>
+    )
+  }
+}