frontend/js/components/list/explorerOptions.js

@@ -1,115 +1,108 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { withRouter } from "react-router-dom";
 import { Form, FormGroup, FormControl, FormLabel } from "react-bootstrap";
 
-class ExplorerOptions extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleSourceChange = this.handleSourceChange.bind(this);
-    this.handleCategoryChange = this.handleCategoryChange.bind(this);
+const ExplorerOptions = ({ display, params, options, type, history }) => {
+  // Should this componennt be displayed
+  if (!display) {
+    return null;
   }
-  handleSourceChange(event) {
+
+  if (
+    !params ||
+    !params.source ||
+    !params.category ||
+    params.source === "" ||
+    params.category === ""
+  ) {
+    return null;
+  }
+
+  const handleSourceChange = event => {
     let source = event.target.value;
-    let category = this.props.options.get(event.target.value).first();
-    this.props.history.push(
-      `/${this.props.type}/explore/${source}/${category}`
-    );
-  }
-  handleCategoryChange(event) {
-    let source = this.props.params.source;
+    let category = options.get(event.target.value).first();
+    history.push(`/${type}/explore/${source}/${category}`);
+  };
+
+  const handleCategoryChange = event => {
+    let source = params.source;
     let category = event.target.value;
-    this.props.history.push(
-      `/${this.props.type}/explore/${source}/${category}`
-    );
-  }
-  propsValid(props) {
-    if (
-      !props.params ||
-      !props.params.source ||
-      !props.params.category ||
-      props.params.source === "" ||
-      props.params.category === ""
-    ) {
-      return false;
-    }
-    return true;
-  }
-  prettyName(name) {
+    history.push(`/${type}/explore/${source}/${category}`);
+  };
+
+  const prettyName = name => {
     return name
       .replace("_", " ")
       .split(" ")
       .map(w => w[0].toUpperCase() + w.substr(1))
       .join(" ");
+  };
+
+  // Options are not yet fetched
+  if (options.size === 0) {
+    return null;
   }
-  render() {
-    // Should this componennt be displayed
-    if (!this.props.display) {
-      return null;
-    }
 
-    // Options are not yet fetched
-    if (this.props.options.size === 0) {
-      return null;
-    }
+  let source = params.source;
+  let category = params.category;
+  let categories = options.get(params.source);
 
-    // Invalid props
-    if (!this.propsValid(this.props)) {
-      return;
-    }
-
-    let source = this.props.params.source;
-    let category = this.props.params.category;
-    let categories = this.props.options.get(this.props.params.source);
-
-    return (
-      <div className="row">
-        <div className="col-xs-12 col-md-12">
-          <Form>
-            <div className="row">
-              <div className="col-xs-12 col-md-6">
-                <FormGroup>
-                  <FormLabel>Source</FormLabel>
-                  <FormControl
-                    bsPrefix="form-control input-sm"
-                    as="select"
-                    onChange={this.handleSourceChange}
-                    value={source}
-                  >
-                    {this.props.options.keySeq().map(function(source) {
-                      return (
-                        <option key={source} value={source}>
-                          {this.prettyName(source)}
-                        </option>
-                      );
-                    }, this)}
-                  </FormControl>
-                </FormGroup>
-              </div>
-              <div className="col-xs-12 col-md-6">
-                <FormGroup>
-                  <FormLabel>Category</FormLabel>
-                  <FormControl
-                    bsPrefix="form-control input-sm"
-                    as="select"
-                    onChange={this.handleCategoryChange}
-                    value={category}
-                  >
-                    {categories.map(function(category) {
-                      return (
-                        <option key={category} value={category}>
-                          {this.prettyName(category)}
-                        </option>
-                      );
-                    }, this)}
-                  </FormControl>
-                </FormGroup>
-              </div>
+  return (
+    <div className="row">
+      <div className="col-xs-12 col-md-12">
+        <Form>
+          <div className="row">
+            <div className="col-xs-12 col-md-6">
+              <FormGroup>
+                <FormLabel>Source</FormLabel>
+                <FormControl
+                  bsPrefix="form-control input-sm"
+                  as="select"
+                  onChange={handleSourceChange}
+                  value={source}
+                >
+                  {options.keySeq().map(function(source) {
+                    return (
+                      <option key={source} value={source}>
+                        {prettyName(source)}
+                      </option>
+                    );
+                  })}
+                </FormControl>
+              </FormGroup>
             </div>
-          </Form>
-        </div>
+            <div className="col-xs-12 col-md-6">
+              <FormGroup>
+                <FormLabel>Category</FormLabel>
+                <FormControl
+                  bsPrefix="form-control input-sm"
+                  as="select"
+                  onChange={handleCategoryChange}
+                  value={category}
+                >
+                  {categories.map(function(category) {
+                    return (
+                      <option key={category} value={category}>
+                        {prettyName(category)}
+                      </option>
+                    );
+                  })}
+                </FormControl>
+              </FormGroup>
+            </div>
+          </div>
+        </Form>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+ExplorerOptions.propTypes = {
+  params: PropTypes.object,
+  history: PropTypes.object,
+  type: PropTypes.string,
+  options: PropTypes.object,
+  display: PropTypes.bool
+};
 
 export default withRouter(ExplorerOptions);

frontend/js/components/users/edit.js

@@ -48,8 +48,8 @@ const UserEditConnect = ({
     ev.preventDefault();
     updateUser({
       password: password,
-      password_confirm: passwordConfirm,
-      polochon_id: id
+      password_confirm: passwordConfirm, // eslint-disable-line camelcase
+      polochon_id: id // eslint-disable-line camelcase
     });
   };
 

frontend/js/components/users/signup.js

@@ -13,20 +13,20 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = { userSignUp };
 
 const UserSignUp = props => {
-  if (props.isLogged) {
-    return <Redirect to="/" />;
-  }
-
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [passwordConfirm, setPasswordConfirm] = useState("");
 
+  if (props.isLogged) {
+    return <Redirect to="/" />;
+  }
+
   const handleSubmit = e => {
     e.preventDefault();
     props.userSignUp({
       username: username,
       password: password,
-      password_confirm: passwordConfirm
+      password_confirm: passwordConfirm // eslint-disable-line camelcase
     });
   };
 

frontend/js/components/users/tokens.js

@@ -31,7 +31,7 @@ const UserTokens = props => {
 };
 UserTokens.propTypes = {
   tokens: PropTypes.instanceOf(List),
-  isLoading: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool,
   getUserTokens: PropTypes.func.isRequired,
   deleteUserToken: PropTypes.func.isRequired
 };
@@ -89,14 +89,14 @@ Actions.propTypes = {
   deleteToken: PropTypes.func.isRequired
 };
 
-const Logo = props => {
+const Logo = ({ ua, device, browser }) => {
   var className;
-  if (props.ua === "canape-cli") {
+  if (ua === "canape-cli") {
     className = "terminal";
-  } else if (props.device.type == "mobile") {
+  } else if (device.type == "mobile") {
     className = "mobile";
   } else {
-    switch (props.browser.name) {
+    switch (browser.name) {
       case "Chrome":
       case "chrome":
         className = "chrome";
@@ -117,42 +117,58 @@ const Logo = props => {
 
   return <span className={`fa fa-${className}`}></span>;
 };
+Logo.propTypes = {
+  ua: PropTypes.string,
+  device: PropTypes.object,
+  browser: PropTypes.object
+};
 
-const OS = props => {
+const OS = ({ name, version }) => {
   var osName = "-";
 
-  if (props.name !== undefined) {
-    osName = props.name;
+  if (name !== undefined) {
+    osName = name;
 
-    if (props.version !== undefined) {
-      osName += " " + props.version;
+    if (version !== undefined) {
+      osName += " " + version;
     }
   }
 
   return <span> {osName}</span>;
 };
+OS.propTypes = {
+  name: PropTypes.string,
+  version: PropTypes.string
+};
 
-const Device = props => {
+const Device = ({ model }) => {
   var deviceName = "-";
 
-  if (props.model !== undefined) {
-    deviceName = props.model;
+  if (model !== undefined) {
+    deviceName = model;
   }
 
   return <span> {deviceName}</span>;
 };
+Device.propTypes = {
+  model: PropTypes.string
+};
 
-const Browser = props => {
+const Browser = ({ name, version }) => {
   var browserName = "-";
-  if (props.name !== undefined) {
-    browserName = props.name;
+  if (name !== undefined) {
+    browserName = name;
 
-    if (props.version !== undefined) {
-      browserName += " - " + props.version;
+    if (version !== undefined) {
+      browserName += " - " + version;
     }
   }
 
   return <span> {browserName}</span>;
 };
+Browser.propTypes = {
+  name: PropTypes.string,
+  version: PropTypes.string
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(UserTokens);

frontend/js/reducers/show.js

@@ -15,8 +15,8 @@ const handlers = {
     return state.mergeDeep(
       fromJS({
         show: {
-          tracked_season: action.payload.season,
-          tracked_episode: action.payload.episode
+          tracked_season: action.payload.season, // eslint-disable-line camelcase
+          tracked_episode: action.payload.episode // eslint-disable-line camelcase
         }
       })
     );

frontend/webpack.config.js

@@ -82,13 +82,13 @@ const config = {
         "apple-mobile-web-app-title": "Canapé"
       },
       name: "Canapé",
-      short_name: "Canapé",
-      background_color: "#4e5d6c",
-      theme_color: "#4e5d6c",
+      short_name: "Canapé", // eslint-disable-line camelcase
+      background_color: "#4e5d6c", // eslint-disable-line camelcase
+      theme_color: "#4e5d6c", // eslint-disable-line camelcase
       display: "standalone",
       orientation: "omit",
       scope: "/",
-      start_url: "/",
+      start_url: "/", // eslint-disable-line camelcase
       icons: [
         {
           src: path.resolve(__dirname, "img/android-chrome-512x512.png"),