From 2897f73cb99a69a2708e0980c7da91aecddcece9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Wed, 15 May 2019 14:39:34 +0200
Subject: [PATCH] Update the admin panel

---
 frontend/js/components/admins/panel.js |  50 +++--
 frontend/js/components/admins/stats.js |  85 ++++----
 frontend/js/components/admins/users.js | 270 ++++++++++---------------
 3 files changed, 176 insertions(+), 229 deletions(-)

diff --git a/frontend/js/components/admins/panel.js b/frontend/js/components/admins/panel.js
index 74e2ce5..ebc83c3 100644
--- a/frontend/js/components/admins/panel.js
+++ b/frontend/js/components/admins/panel.js
@@ -1,37 +1,33 @@
 import React from "react"
+import PropTypes from "prop-types"
 import { connect } from "react-redux"
 import { bindActionCreators } from "redux"
 import { updateUser } from "../../actions/admins"
 
 import Modules from "../modules/modules"
-import UserList from "./users"
-import Stats from "./stats"
+import { UserList } from "./users"
+import { Stats } from "./stats"
 
-function mapStateToProps(state) {
-  return {
-    users : state.adminStore.get("users"),
-    stats : state.adminStore.get("stats"),
-    modules : state.adminStore.get("modules"),
-  };
-}
-const mapDispatchToProps = (dipatch) =>
+const AdminPanel = props => (
+  <React.Fragment>
+    <Stats stats={props.stats}/>
+    <UserList users={props.users} updateUser={props.updateUser}/>
+    <Modules modules={props.modules}/>
+  </React.Fragment>
+)
+AdminPanel.propTypes = {
+  stats: PropTypes.object,
+  users: PropTypes.object,
+  modules: PropTypes.object,
+  updateUser: PropTypes.func,
+};
+
+const mapStateToProps = state => ({
+  users: state.adminStore.get("users"),
+  stats: state.adminStore.get("stats"),
+  modules: state.adminStore.get("modules"),
+});
+const mapDispatchToProps = dipatch =>
   bindActionCreators({ updateUser }, dipatch)
 
-function AdminPanel(props) {
-  return (
-    <div>
-      <Stats
-        stats={props.stats}
-      />
-      <UserList
-        users={props.users}
-        updateUser={props.updateUser}
-      />
-      <Modules
-        modules={props.modules}
-      />
-    </div>
-  );
-}
-
 export default connect(mapStateToProps, mapDispatchToProps)(AdminPanel);
diff --git a/frontend/js/components/admins/stats.js b/frontend/js/components/admins/stats.js
index 141ed56..838a4e7 100644
--- a/frontend/js/components/admins/stats.js
+++ b/frontend/js/components/admins/stats.js
@@ -1,50 +1,52 @@
 import React from "react"
+import PropTypes from "prop-types"
 
-export default function Stats(props) {
-  return (
-    <div>
-      <h2 className="hidden-xs">Stats</h2>
-      <Stat
-        name="Movies"
-        count={props.stats.get("movies_count")}
-        torrentCount={props.stats.get("movies_torrents_count")}
-        torrentCountById={props.stats.get("movies_torrents_count_by_id")}
-      />
-      <Stat
-        name="Shows"
-        count={props.stats.get("shows_count")}
-        torrentCount={props.stats.get("episodes_torrents_count")}
-        torrentCountById={props.stats.get("shows_torrents_count_by_id")}
-      />
-      <Stat
-        name="Episodes"
-        count={props.stats.get("episodes_count")}
-        torrentCount={props.stats.get("episodes_torrents_count")}
-        torrentCountById={props.stats.get("episodes_torrents_count_by_id")}
-      />
-    </div>
-  );
-}
+export const Stats = props => (
+  <div>
+    <h2 className="hidden-xs">Stats</h2>
+    <Stat
+      name="Movies"
+      count={props.stats.get("movies_count")}
+      torrentCount={props.stats.get("movies_torrents_count")}
+      torrentCountById={props.stats.get("movies_torrents_count_by_id")}
+    />
+    <Stat
+      name="Shows"
+      count={props.stats.get("shows_count")}
+      torrentCount={props.stats.get("episodes_torrents_count")}
+      torrentCountById={props.stats.get("shows_torrents_count_by_id")}
+    />
+    <Stat
+      name="Episodes"
+      count={props.stats.get("episodes_count")}
+      torrentCount={props.stats.get("episodes_torrents_count")}
+      torrentCountById={props.stats.get("episodes_torrents_count_by_id")}
+    />
+  </div>
+)
+Stats.propTypes = { stats: PropTypes.object }
 
-function Stat(props) {
-  return (
-    <div className="col-xs-4">
-      <div className="panel panel-default">
-        <div className="panel-heading">
-          <h3 className="panel-title">
-            {props.name}
-            <span className="label label-info pull-right">{props.count}</span>
-          </h3>
-        </div>
-        <div className="panel-body">
-          <TorrentsStat data={props} />
-        </div>
+const Stat = props => (
+  <div className="col-xs-4">
+    <div className="panel panel-default">
+      <div className="panel-heading">
+        <h3 className="panel-title">
+          {props.name}
+          <span className="label label-info pull-right">{props.count}</span>
+        </h3>
+      </div>
+      <div className="panel-body">
+        <TorrentsStat data={props} />
       </div>
     </div>
-  );
-}
+  </div>
+)
+Stat.propTypes = {
+  name: PropTypes.string,
+  count: PropTypes.number,
+};
 
-function TorrentsStat(props) {
+const TorrentsStat = function(props) {
   if (props.data.torrentCount === undefined) {
     return (<span>No torrents</span>);
   }
@@ -57,3 +59,4 @@ function TorrentsStat(props) {
     </span>
   );
 }
+TorrentsStat.propTypes = { data: PropTypes.object };
diff --git a/frontend/js/components/admins/users.js b/frontend/js/components/admins/users.js
index 7f963b8..deb9a47 100644
--- a/frontend/js/components/admins/users.js
+++ b/frontend/js/components/admins/users.js
@@ -1,189 +1,137 @@
-import React from "react"
+import React, { useState } from "react"
+import PropTypes from "prop-types"
+import { List } from "immutable"
 
 import { Button, Modal } from "react-bootstrap"
 import Toggle from "react-bootstrap-toggle";
 
-export default function UserList(props) {
-  return (
-    <div>
-      <h2 className="hidden-xs">Users</h2>
-      <h3 className="visible-xs">Users</h3>
-      <table className="table">
-        <thead>
-          <tr className="active">
-            <th>#</th>
-            <th>Name</th>
-            <th>Activated</th>
-            <th>Admin</th>
-            <th>Polochon URL</th>
-            <th>Polochon token</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {props.users.map(function(el, index) {
-            return (
-              <User
-                key={index}
-                data={el}
-                updateUser={props.updateUser}
-              />
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-}
+export const UserList = props => (
+  <div>
+    <h2 className="hidden-xs">Users</h2>
+    <h3 className="visible-xs">Users</h3>
+    <table className="table">
+      <thead>
+        <tr className="active">
+          <th>#</th>
+          <th>Name</th>
+          <th>Activated</th>
+          <th>Admin</th>
+          <th>Polochon URL</th>
+          <th>Polochon token</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.users.map((el, index) =>
+          <User key={index} data={el} updateUser={props.updateUser}/>)}
+      </tbody>
+    </table>
+  </div>
+);
+UserList.propTypes = {
+  users: PropTypes.PropTypes.instanceOf(List),
+  updateUser: PropTypes.func,
+};
 
-function User(props) {
+const User = function(props) {
   const polochonConfig = props.data.get("RawConfig").get("polochon");
-  const polochonURL = polochonConfig ? polochonConfig.get("url") : "-";
+  const polochonUrl = polochonConfig ? polochonConfig.get("url") : "-";
   const polochonToken = polochonConfig ? polochonConfig.get("token") : "-";
   return (
     <tr>
       <td>{props.data.get("id")}</td>
       <td>{props.data.get("Name")}</td>
-      <td><UserActivationStatus data={props.data}/></td>
-      <td><UserAdminStatus data={props.data}/></td>
-      <td>{polochonURL}</td>
+      <td><UserActivationStatus activated={props.data.get("Activated")}/></td>
+      <td><UserAdminStatus admin={props.data.get("Admin")}/></td>
+      <td>{polochonUrl}</td>
       <td>{polochonToken}</td>
       <td>
         <UserEdit
           data={props.data}
           updateUser={props.updateUser}
+          polochonUrl={polochonUrl}
+          polochonToken={polochonToken}
         />
       </td>
     </tr>
   );
 }
+User.propTypes = {
+  data: PropTypes.object,
+  updateUser: PropTypes.func,
+};
 
-function UserAdminStatus(props) {
-  const admin = props.data.get("Admin");
-  const className = admin ? "fa fa-check" : "fa fa-times";
-  return (<span className={className}></span>);
-}
+const UserAdminStatus = props => (
+  <span className={props.admin ? "fa fa-check" : "fa fa-times"}></span>
+);
+UserAdminStatus.propTypes = { admin: PropTypes.bool.isRequired };
 
-function UserActivationStatus(props) {
-  const activated = props.data.get("Activated");
-  const className = activated ? "fa fa-check" : "fa fa-times text-danger";
-  return (<span className={className}></span>);
-}
+const UserActivationStatus = props => (
+  <span className={props.activated ? "fa fa-check" : "fa fa-times text-danger"}></span>
+);
+UserActivationStatus.propTypes = { activated: PropTypes.bool.isRequired };
 
-class UserEdit extends React.PureComponent {
-  constructor(props) {
-    super(props);
+function UserEdit(props) {
+  const [modal, setModal] = useState(false);
+  const [admin, setAdmin] = useState(props.data.get("Admin"));
+  const [activated, setActivated] = useState(props.data.get("Activated"));
+  const [url, setUrl] = useState(props.polochonUrl);
+  const [token, setToken] = useState(props.polochonToken);
 
-    // User props
-    const polochonConfig = props.data.get("RawConfig").get("polochon");
-    const polochonUrl = polochonConfig ? polochonConfig.get("url") : "";
-    const polochonToken = polochonConfig ? polochonConfig.get("token") : "";
-
-    // Functions
-    this.showModal = this.showModal.bind(this);
-    this.hideModal = this.hideModal.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleUrlInput = this.handleUrlInput.bind(this);
-    this.handleTokenInput = this.handleTokenInput.bind(this);
-    this.handleActivatedToggle = this.handleActivatedToggle.bind(this);
-    this.handleAdminToggle = this.handleAdminToggle.bind(this);
-
-    this.state = {
-      showModal: false,
-      polochonUrl: polochonUrl,
-      polochonToken: polochonToken,
-      activated: props.data.get("Activated"),
-      admin: props.data.get("Admin"),
-    };
-  }
-  showModal() {
-    this.setState({ showModal: true });
-  }
-  hideModal() {
-    this.setState({ showModal: false });
-  }
-  handleSubmit(e) {
+  const handleSubmit = function(e) {
     if (e) { e.preventDefault(); }
-    this.props.updateUser({
-      userId: this.props.data.get("id"),
-      admin: this.state.admin,
-      activated: this.state.activated,
-      polochonUrl: this.state.polochonUrl,
-      polochonToken: this.state.polochonToken,
+    props.updateUser({
+      userId: props.data.get("id"),
+      admin: admin,
+      activated: activated,
+      polochonUrl: url,
+      polochonToken: token,
     });
-    this.setState({ showModal: false });
-  }
-  handleTokenInput() {
-    this.setState({ polochonToken: this.refs.polochonToken.value });
-  }
-  handleUrlInput() {
-    this.setState({ polochonUrl: this.refs.polochonUrl.value });
-  }
-  handleActivatedToggle() {
-    this.setState({ activated: !this.state.activated });
-  }
-  handleAdminToggle() {
-    this.setState({ admin: !this.state.admin });
-  }
-  render() {
-    return (
-      <span>
-        <span className="fa fa-pencil clickable" onClick={this.showModal}></span>
-        <Modal show={this.state.showModal} onHide={this.hideModal}>
-          <Modal.Header closeButton>
-            <Modal.Title>
-              <i className="fa fa-pencil"></i>
-              &nbsp; Edit user - {this.props.data.get("Name")}
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body bsClass="modal-body admin-edit-user-modal">
-            <form className="form-horizontal" onSubmit={(ev) => this.handleSubmit(ev)}>
-              <div className="form-group">
-                <label>Account status</label>
-                <Toggle
-                  className="pull-right"
-                  on="Activated"
-                  off="Deactivated"
-                  active={this.state.activated}
-                  onClick={this.handleActivatedToggle}
-                />
-              </div>
-              <div className="form-group">
-                <label>Admin status</label>
-                <Toggle
-                  className="pull-right"
-                  on="Admin"
-                  off="User"
-                  active={this.state.admin}
-                  onClick={this.handleAdminToggle}
-                />
-              </div>
-              <div className="form-group">
-                <label className="control-label">Polochon URL</label>
-                <input
-                  className="form-control"
-                  value={this.state.polochonUrl}
-                  onChange={this.handleUrlInput}
-                  ref="polochonUrl"
-                />
-              </div>
-              <div className="form-group">
-                <label className="control-label">Polochon token</label>
-                <input
-                  className="form-control"
-                  value={this.state.polochonToken}
-                  onChange={this.handleTokenInput}
-                  ref="polochonToken"
-                />
-              </div>
-            </form>
-          </Modal.Body>
-          <Modal.Footer>
-            <Button bsStyle="success" onClick={this.handleSubmit}>Apply</Button>
-            <Button onClick={this.hideModal}>Close</Button>
-          </Modal.Footer>
-        </Modal>
-      </span>
-    );
-  }
+    setModal(false);
+  };
+
+  return (
+    <span>
+      <span className="fa fa-pencil clickable" onClick={() => setModal(true)}></span>
+      <Modal show={modal} onHide={() => setModal(false)}>
+        <Modal.Header closeButton>
+          <Modal.Title>
+            <i className="fa fa-pencil"></i>
+            &nbsp; Edit user - {props.data.get("Name")}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body bsClass="modal-body admin-edit-user-modal">
+          <form className="form-horizontal" onSubmit={(ev) => handleSubmit(ev)}>
+            <div className="form-group">
+              <label>Account status</label>
+              <Toggle className="pull-right" on="Activated" off="Deactivated" active={activated} onClick={() => setActivated(!activated)}
+              />
+            </div>
+            <div className="form-group">
+              <label>Admin status</label>
+              <Toggle className="pull-right" on="Admin" off="User" active={admin} onClick={() => setAdmin(!admin)} />
+            </div>
+            <div className="form-group">
+              <label className="control-label">Polochon URL</label>
+              <input className="form-control" value={url} onChange={(e) => setUrl(e.target.value)}/>
+            </div>
+            <div className="form-group">
+              <label className="control-label">Polochon token</label>
+              <input className="form-control" value={token} onChange={(e) => setToken(e.target.value)} />
+            </div>
+          </form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button bsStyle="success" onClick={handleSubmit}>Apply</Button>
+          <Button onClick={() => setModal(false)}>Close</Button>
+        </Modal.Footer>
+      </Modal>
+    </span>
+  );
 }
+UserEdit.propTypes = {
+  data: PropTypes.object,
+  updateUser: PropTypes.func,
+  polochonUrl: PropTypes.string,
+  polochonToken: PropTypes.string,
+};