Move torrent list components in separate files

frontend/js/components/torrents/list.js

@@ -1,9 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
-import PropTypes from "prop-types";
-import { useDispatch, useSelector } from "react-redux";
 
-import { prettySize, prettyEpisodeName } from "../../utils";
+import { AddTorrent } from "./list/addTorrent";
-import { addTorrent, removeTorrent } from "../../actions/torrents";
+import { Torrents } from "./list/torrents";
 
 export const TorrentList = () => {
   return (
@@ -15,125 +13,3 @@ export const TorrentList = () => {
     </div>
   );
 };
-
-const AddTorrent = () => {
-  const dispatch = useDispatch();
-  const [url, setUrl] = useState("");
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (url === "") {
-      return;
-    }
-    dispatch(
-      addTorrent({
-        result: { url: url },
-      })
-    );
-    setUrl("");
-  };
-
-  return (
-    <form onSubmit={(e) => handleSubmit(e)}>
-      <input
-        type="text"
-        className="form-control mb-3 w-100"
-        placeholder="Add torrent URL"
-        onSubmit={handleSubmit}
-        value={url}
-        onChange={(e) => setUrl(e.target.value)}
-      />
-    </form>
-  );
-};
-
-const Torrents = () => {
-  const torrents = useSelector((state) => state.torrents.torrents);
-
-  if (torrents.length === 0) {
-    return (
-      <div className="jumbotron">
-        <h2>No torrents</h2>
-      </div>
-    );
-  }
-
-  return (
-    <div className="d-flex flex-wrap">
-      {torrents.map((torrent, index) => (
-        <Torrent key={index} torrent={torrent} />
-      ))}
-    </div>
-  );
-};
-
-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":
-        return torrent.video ? torrent.video.title : torrent.status.name;
-      case "episode":
-        return torrent.video
-          ? prettyEpisodeName(
-              torrent.video.show_title,
-              torrent.video.season,
-              torrent.video.episode
-            )
-          : torrent.status.name;
-      default:
-        return torrent.status.name;
-    }
-  };
-
-  // 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">
-        <span className="text text-break">{torrentTitle(torrent)}</span>
-        <span
-          className="fa fa-trash clickable pull-right"
-          onClick={() => dispatch(removeTorrent(torrent.status.id))}
-        ></span>
-      </h5>
-      <div className="card-body pb-0">
-        {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>
-  );
-};
-Torrent.propTypes = {
-  torrent: PropTypes.object.isRequired,
-};

frontend/js/components/torrents/list/addTorrent.js

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { addTorrent } from "../../../actions/torrents";
+
+export const AddTorrent = () => {
+  const dispatch = useDispatch();
+  const [url, setUrl] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (url === "") {
+      return;
+    }
+    dispatch(
+      addTorrent({
+        result: { url: url },
+      })
+    );
+    setUrl("");
+  };
+
+  return (
+    <form onSubmit={(e) => handleSubmit(e)}>
+      <input
+        type="text"
+        className="form-control mb-3 w-100"
+        placeholder="Add torrent URL"
+        onSubmit={handleSubmit}
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+      />
+    </form>
+  );
+};

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

@@ -0,0 +1,77 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useDispatch } from "react-redux";
+
+import { prettySize, prettyEpisodeName } from "../../../utils";
+import { removeTorrent } from "../../../actions/torrents";
+
+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":
+        return torrent.video ? torrent.video.title : torrent.status.name;
+      case "episode":
+        return torrent.video
+          ? prettyEpisodeName(
+              torrent.video.show_title,
+              torrent.video.season,
+              torrent.video.episode
+            )
+          : torrent.status.name;
+      default:
+        return torrent.status.name;
+    }
+  };
+
+  // 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">
+        <span className="text text-break">{torrentTitle(torrent)}</span>
+        <span
+          className="fa fa-trash clickable pull-right"
+          onClick={() => dispatch(removeTorrent(torrent.status.id))}
+        ></span>
+      </h5>
+      <div className="card-body pb-0">
+        {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>
+  );
+};
+Torrent.propTypes = {
+  torrent: PropTypes.object.isRequired,
+};

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+import { Torrent } from "./torrent";
+
+export const Torrents = () => {
+  const torrents = useSelector((state) => state.torrents.torrents);
+
+  if (torrents.length === 0) {
+    return (
+      <div className="jumbotron">
+        <h2>No torrents</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div className="d-flex flex-wrap">
+      {torrents.map((torrent, index) => (
+        <Torrent key={index} torrent={torrent} />
+      ))}
+    </div>
+  );
+};