Progress bar

src/ui/App.tsx

@@ -30,15 +30,6 @@ async function download() {
   const path = 'S:/Cultivation/grassclipper.zip'
   const url = 'https://github.com/Grasscutters/GrassClipper/releases/download/v0.9.7/GrassClipper.zip'
   downloadHandler.addDownload(url, path)
-
-  const intv = setInterval(() => {
-    const prog = downloadHandler.getDownloadProgress(path)
-    console.log(prog)
-
-    if (prog.status === 'finished') {
-      clearInterval(intv)
-    }
-  }, 500)
 }
 
 async function toggleGrasscutter() {
@@ -61,16 +52,16 @@ function App() {
           <Checkbox label="Connect via Grasscutter" onChange={toggleGrasscutter} />
         </div>
         <BigButton text="PLAY DA GAME :D" onClick={playGame} id="officialPlay" />
+      </div>
 
       <div id="downloadProgress" style={{
         position: 'absolute',
         top: '50%',
         left: '50%',
+        width: '50%'
       }}>
 
         <ProgressBar path="S:/Cultivation/grassclipper.zip" downloadManager={downloadHandler} />
-
-        </div>
       </div>
     </div>
   )

src/ui/components/common/ProgressBar.css

@@ -0,0 +1,21 @@
+.ProgressBar, .InnerProgress {
+  border-radius: 20px;
+}
+
+.ProgressBarWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ProgressBar {
+  height: 20px;
+  width: 80%;
+  background-color: #fff;
+  color: #fff;
+}
+
+.InnerProgress {
+  height: 100%;
+  background-color: #00a8ff;
+}

src/ui/components/common/ProgressBar.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import './ProgressBar.css'
 
 interface IProps {
   path: string,
@@ -18,7 +19,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
     this.state = {
       progress: 0,
       status: '',
-      total: this.props.downloadManager.getDownloadProgress(this.props.path).total,
+      total: this.props.downloadManager.getDownloadProgress(this.props.path)?.total || 0,
     }
   }
 
@@ -27,22 +28,41 @@ export default class ProgressBar extends React.Component<IProps, IState> {
     const intv = setInterval(() => {
       const prog = this.props.downloadManager.getDownloadProgress(this.props.path)
       this.setState({
-        progress: prog.progress,
-        status: prog.status,
+        progress: parseInt(prog?.progress || 0, 10),
+        status: prog?.status || 'error',
+        total: prog?.total || 0,
       })
 
-      if (prog.status === 'finished') {
+      console.log(prog)
+
+      if (this.state.status === 'finished' /* || this.state.status === 'error' */) {
+        // Ensure progress is 100%
+
         clearInterval(intv)
       }
-    }, 100)
+    }, 500)
   }
 
   render() {
     return (
+      <div className="ProgressBarWrapper">
         <div className="ProgressBar">
           <div className="InnerProgress" style={{
-          width: `${this.state.progress / this.state.total}%`,
+            width: `${(() => {
+              // Handles files with content-lengths of 0
+              if (this.state.status === 'finished') {
+                return '100'
+              }
+
+              if (this.state.total <= 0) {
+                return '0'
+              }
+
+              return this.state.progress / this.state.total * 100
+            })()}%`,
           }}></div>
+        </div>
+
         <div className="ProgressText">
           {this.state.status}
         </div>