main progress bar

src/ui/App.tsx

@@ -9,13 +9,13 @@ import DownloadHandler from '../utils/download'
 import Topbar from './components/TopBar'
 import ServerLaunchSection from './components/ServerLaunchSection'
 import ProgressBar from './components/common/ProgressBar'
+import MainProgressBar from './components/common/MainProgressBar'
 
 const downloadHandler = new DownloadHandler()
 
-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)
+async function download(url: string, filename: string, path: string) {
+  const completePath = `${path}/${filename}`
+  downloadHandler.addDownload(url, completePath)
 }
 
 function App() {
@@ -23,13 +23,12 @@ function App() {
     <div className="App">
       <Topbar />
 
-      <button onClick={download}>download file test</button>
+      <button>download file test</button>
 
       <ServerLaunchSection />
 
       <div id="DownloadProgress">
-
-        <ProgressBar path="S:/Cultivation/grassclipper.zip" downloadManager={downloadHandler} />
+        <MainProgressBar downloadManager={downloadHandler} />
       </div>
     </div>
   )

src/ui/components/common/MainProgressBar.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import './ProgressBar.css'
+
+interface IProps {
+  downloadManager: any,
+}
+
+interface IState {
+  average: number,
+  files: number,
+  total: number
+}
+
+/**
+ * This component differes because it averages all downloads together
+ */
+export default class ProgressBar extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    const { average, files, total } = this.props.downloadManager.getTotalAverage()
+
+    this.state = {
+      average,
+      files,
+      total
+    }
+  }
+
+  componentDidMount() {
+    // Periodically check the progress of passed file path
+    const intv = setInterval(() => {
+      const prog = this.props.downloadManager.getTotalAverage()
+      this.setState({
+        average: parseInt(prog?.avergae || 0, 10),
+        files: prog?.files,
+        total: prog?.total || 0,
+      })
+
+      if (this.state.files === 0 /* || this.state.status === 'error' */) {
+        clearInterval(intv)
+      }
+    }, 500)
+  }
+
+  render() {
+    return (
+      <div className="ProgressBarWrapper">
+        <div className="ProgressBar">
+          <div className="InnerProgress" style={{
+            width: `${(() => {
+              // Handles no files downloading
+              if (this.state.files === 0) {
+                return '100'
+              }
+
+              if (this.state.total <= 0) {
+                return '0'
+              }
+
+              return this.state.average
+            })()}%`,
+          }}></div>
+        </div>
+
+        <div className="ProgressText">
+          Files Downloading: {this.state.files}
+        </div>
+      </div>
+    )
+  }
+}

src/utils/download.ts

@@ -54,4 +54,16 @@ export default class DownloadHandler {
     const index = this.downloads.findIndex(download => download.path === path)
     return this.downloads[index] || null
   }
+
+  getTotalAverage() {
+    const files = this.downloads.filter(d => d.status !== 'finished')
+    const total = files.reduce((acc, d) => acc + d.total, 0)
+    const progress = files.reduce((acc, d) => acc + d.progress, 0)
+
+    return {
+      average: (progress / total) * 100,
+      files: this.downloads.filter(d => d.status !== 'finished').length,
+      totalSize: total,
+    }
+  }
 }