Update the admin panel

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);

frontend/js/components/admins/stats.js

@@ -1,7 +1,7 @@
 import React from "react"
+import PropTypes from "prop-types"
 
-export default function Stats(props) {
-  return (
+export const Stats = props => (
   <div>
     <h2 className="hidden-xs">Stats</h2>
     <Stat
@@ -23,11 +23,10 @@ export default function Stats(props) {
       torrentCountById={props.stats.get("episodes_torrents_count_by_id")}
     />
   </div>
-  );
-}
+)
+Stats.propTypes = { stats: PropTypes.object }
 
-function Stat(props) {
-  return (
+const Stat = props => (
   <div className="col-xs-4">
     <div className="panel panel-default">
       <div className="panel-heading">
@@ -41,10 +40,13 @@ function Stat(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 };

frontend/js/components/admins/users.js

@@ -1,10 +1,11 @@
-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 (
+export const UserList = props => (
   <div>
     <h2 className="hidden-xs">Users</h2>
     <h3 className="visible-xs">Users</h3>
@@ -21,169 +22,116 @@ export default function UserList(props) {
         </tr>
       </thead>
       <tbody>
-          {props.users.map(function(el, index) {
-            return (
-              <User
-                key={index}
-                data={el}
-                updateUser={props.updateUser}
-              />
-            );
-          })}
+        {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() {
+    setModal(false);
+  };
+
   return (
     <span>
-        <span className="fa fa-pencil clickable" onClick={this.showModal}></span>
-        <Modal show={this.state.showModal} onHide={this.hideModal}>
+      <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 - {this.props.data.get("Name")}
+            &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) => this.handleSubmit(ev)}>
+          <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={this.state.activated}
-                  onClick={this.handleActivatedToggle}
+              <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={this.state.admin}
-                  onClick={this.handleAdminToggle}
-                />
+              <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={this.state.polochonUrl}
-                  onChange={this.handleUrlInput}
-                  ref="polochonUrl"
-                />
+              <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={this.state.polochonToken}
-                  onChange={this.handleTokenInput}
-                  ref="polochonToken"
-                />
+              <input className="form-control" value={token} onChange={(e) => setToken(e.target.value)} />
             </div>
           </form>
         </Modal.Body>
         <Modal.Footer>
-            <Button bsStyle="success" onClick={this.handleSubmit}>Apply</Button>
-            <Button onClick={this.hideModal}>Close</Button>
+          <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,
+};