Movie the torrent progress bar in a new component

frontend/js/components/torrents/list/progress.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { prettySize } from "../../../utils";
+
+export const Progress = ({ torrent }) => {
+  var progressStyle = torrent.status.is_finished
+    ? "success"
+    : "info progress-bar-striped progress-bar-animated";
+  const progressBarClass = "progress-bar bg-" + progressStyle;
+
+  var percentDone = torrent.status.percent_done;
+  const started = percentDone !== 0;
+  if (started) {
+    percentDone = Number(percentDone).toFixed(1) + "%";
+  }
+
+  // Pretty sizes
+  const downloadedSize = prettySize(torrent.status.downloaded_size);
+  const totalSize = prettySize(torrent.status.total_size);
+  const downloadRate = prettySize(torrent.status.download_rate) + "/s";
+  return (
+    <div className="card-body pb-0">
+      {started && (
+        <>
+          <div className="progress bg-light">
+            <div
+              className={progressBarClass}
+              style={{ width: percentDone }}
+              role="progressbar"
+              aria-valuenow={percentDone}
+              aria-valuemin="0"
+              aria-valuemax="100"
+            ></div>
+          </div>
+          <p>
+            {downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
+          </p>
+        </>
+      )}
+      {!started && <p>Download not yet started</p>}
+    </div>
+  );
+};
+Progress.propTypes = {
+  torrent: PropTypes.object.isRequired,
+};

frontend/js/components/torrents/list/torrent.js

@@ -2,23 +2,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useDispatch } from "react-redux";
 
-import { prettySize, prettyEpisodeName } from "../../../utils";
+import { prettyEpisodeName } from "../../../utils";
 import { removeTorrent } from "../../../actions/torrents";
 
+import { Progress } from "./progress";
+
 export const Torrent = ({ torrent }) => {
   const dispatch = useDispatch();
 
-  var progressStyle = torrent.status.is_finished
-    ? "success"
-    : "info progress-bar-striped progress-bar-animated";
-  const progressBarClass = "progress-bar bg-" + progressStyle;
-
-  var percentDone = torrent.status.percent_done;
-  const started = percentDone !== 0;
-  if (started) {
-    percentDone = Number(percentDone).toFixed(1) + "%";
-  }
-
   const torrentTitle = (torrent) => {
     switch (torrent.type) {
       case "movie":
@@ -36,10 +27,6 @@ export const Torrent = ({ torrent }) => {
     }
   };
 
-  // Pretty sizes
-  const downloadedSize = prettySize(torrent.status.downloaded_size);
-  const totalSize = prettySize(torrent.status.total_size);
-  const downloadRate = prettySize(torrent.status.download_rate) + "/s";
   return (
     <div className="card w-100 mb-3">
       <h5 className="card-header">
@@ -49,26 +36,7 @@ export const Torrent = ({ torrent }) => {
           onClick={() => dispatch(removeTorrent(torrent.status.id))}
         ></span>
       </h5>
-      <div className="card-body pb-0">
+      <Progress torrent={torrent} />
-        {started && (
-          <React.Fragment>
-            <div className="progress bg-light">
-              <div
-                className={progressBarClass}
-                style={{ width: percentDone }}
-                role="progressbar"
-                aria-valuenow={percentDone}
-                aria-valuemin="0"
-                aria-valuemax="100"
-              ></div>
-            </div>
-            <p>
-              {downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
-            </p>
-          </React.Fragment>
-        )}
-        {!started && <p>Download not yet started</p>}
-      </div>
     </div>
   );
 };