From 27f0b742a4d8af81e547ef4496d01855c9b8b381 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Fri, 3 Apr 2020 00:44:45 +0200
Subject: [PATCH] Use redux hooks on user components

---
 frontend/js/components/users/activation.js | 24 +++-----
 frontend/js/components/users/edit.js       | 66 +++++++---------------
 frontend/js/components/users/login.js      | 37 +++++-------
 frontend/js/components/users/logout.js     | 22 +++-----
 frontend/js/components/users/profile.js    | 28 ++++-----
 frontend/js/components/users/signup.js     | 46 +++++++--------
 frontend/js/components/users/tokens.js     | 39 ++++++-------
 7 files changed, 98 insertions(+), 164 deletions(-)

diff --git a/frontend/js/components/users/activation.js b/frontend/js/components/users/activation.js
index 51b0ae3..34387a3 100644
--- a/frontend/js/components/users/activation.js
+++ b/frontend/js/components/users/activation.js
@@ -1,19 +1,18 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
 import { Redirect, Link } from "react-router-dom";
 
-const mapStateToProps = (state) => ({
-  isActivated: state.userStore.get("isActivated"),
-  isLogged: state.userStore.get("isLogged"),
-});
+const UserActivation = () => {
+  const isLogged = useSelector((state) => state.userStore.get("isLogged"));
+  const isActivated = useSelector((state) =>
+    state.userStore.get("isActivated")
+  );
 
-const UserActivation = (props) => {
-  if (!props.isLogged) {
+  if (!isLogged) {
     return <Redirect to="/users/login" />;
   }
 
-  if (props.isActivated) {
+  if (isActivated) {
     return <Redirect to="/" />;
   }
 
@@ -31,9 +30,4 @@ const UserActivation = (props) => {
     </div>
   );
 };
-UserActivation.propTypes = {
-  isActivated: PropTypes.bool.isRequired,
-  isLogged: PropTypes.bool.isRequired,
-};
-
-export default connect(mapStateToProps)(UserActivation);
+export default UserActivation;
diff --git a/frontend/js/components/users/edit.js b/frontend/js/components/users/edit.js
index a34c03c..c24e24f 100644
--- a/frontend/js/components/users/edit.js
+++ b/frontend/js/components/users/edit.js
@@ -1,44 +1,30 @@
 import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import Loader from "../loader/loader";
-import { List } from "immutable";
 
 import { getUserInfos, updateUser } from "../../actions/users";
 import { getPolochons } from "../../actions/polochon";
 
 import { PolochonSelect } from "../polochons/select";
 
-const mapStateToProps = (state) => ({
-  loading: state.userStore.get("loading"),
-  publicPolochons: state.polochon.get("public"),
-  polochonId: state.userStore.get("polochonId"),
-  polochonActivated: state.userStore.get("polochonActivated"),
-});
+export const UserEdit = () => {
+  const dispatch = useDispatch();
 
-const mapDispatchToProps = {
-  updateUser,
-  getPolochons,
-  getUserInfos,
-};
-
-const UserEditConnect = ({
-  loading,
-  polochonId,
-  polochonActivated,
-  updateUser,
-  getPolochons,
-  getUserInfos,
-  publicPolochons,
-}) => {
   const [id, setId] = useState(polochonId);
   const [password, setPassword] = useState("");
   const [passwordConfirm, setPasswordConfirm] = useState("");
 
+  const loading = useSelector((state) => state.userStore.get("loading"));
+  const publicPolochons = useSelector((state) => state.polochon.get("public"));
+  const polochonId = useSelector((state) => state.userStore.get("polochonId"));
+  const polochonActivated = useSelector((state) =>
+    state.userStore.get("polochonActivated")
+  );
+
   useEffect(() => {
-    getPolochons();
-    getUserInfos();
-  }, [getPolochons, getUserInfos]);
+    dispatch(getPolochons());
+    dispatch(getUserInfos());
+  }, [dispatch]);
 
   useEffect(() => {
     setId(polochonId);
@@ -46,11 +32,13 @@ const UserEditConnect = ({
 
   const handleSubmit = (ev) => {
     ev.preventDefault();
-    updateUser({
-      password: password,
-      password_confirm: passwordConfirm, // eslint-disable-line camelcase
-      polochon_id: id, // eslint-disable-line camelcase
-    });
+    dispatch(
+      updateUser({
+        password: password,
+        password_confirm: passwordConfirm, // eslint-disable-line camelcase
+        polochon_id: id, // eslint-disable-line camelcase
+      })
+    );
   };
 
   if (loading) {
@@ -115,17 +103,3 @@ const UserEditConnect = ({
     </div>
   );
 };
-UserEditConnect.propTypes = {
-  loading: PropTypes.bool.isRequired,
-  polochonId: PropTypes.string,
-  polochonActivated: PropTypes.bool,
-  updateUser: PropTypes.func,
-  getPolochons: PropTypes.func,
-  getUserInfos: PropTypes.func,
-  publicPolochons: PropTypes.instanceOf(List),
-};
-
-export const UserEdit = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(UserEditConnect);
diff --git a/frontend/js/components/users/login.js b/frontend/js/components/users/login.js
index 3b5632a..45c8b61 100644
--- a/frontend/js/components/users/login.js
+++ b/frontend/js/components/users/login.js
@@ -1,29 +1,28 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Redirect, Link } from "react-router-dom";
 
 import { loginUser } from "../../actions/users";
 
-const mapStateToProps = (state) => ({
-  isLogged: state.userStore.get("isLogged"),
-  isLoading: state.userStore.get("loading"),
-  error: state.userStore.get("error"),
-});
-const mapDispatchToProps = { loginUser };
+const UserLoginForm = () => {
+  const dispatch = useDispatch();
+
+  const isLogged = useSelector((state) => state.userStore.get("isLogged"));
+  const isLoading = useSelector((state) => state.userStore.get("loading"));
+  const error = useSelector((state) => state.userStore.get("error"));
 
-const UserLoginForm = (props) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (!props.isLoading) {
-      props.loginUser(username, password);
+    if (!isLoading) {
+      dispatch(loginUser(username, password));
     }
   };
 
-  if (props.isLogged) {
+  if (isLogged) {
     return <Redirect to="/" />;
   }
 
@@ -32,8 +31,8 @@ const UserLoginForm = (props) => {
       <div className="col-10 offset-1 col-md-6 offset-md-3">
         <h2>Log in</h2>
         <hr />
-        {props.error && props.error !== "" && (
-          <div className="alert alert-danger">{props.error}</div>
+        {error && error !== "" && (
+          <div className="alert alert-danger">{error}</div>
         )}
         <form className="form-horizontal" onSubmit={(e) => handleSubmit(e)}>
           <div>
@@ -66,12 +65,12 @@ const UserLoginForm = (props) => {
                 No account yet ? <Link to="/users/signup">Create one</Link>
               </small>
             </span>
-            {props.isLoading && (
+            {isLoading && (
               <button className="btn btn-primary pull-right">
                 <i className="fa fa-spinner fa-spin"></i>
               </button>
             )}
-            {props.isLoading || (
+            {isLoading || (
               <span className="spaced-icons">
                 <input
                   className="btn btn-primary pull-right"
@@ -87,11 +86,5 @@ const UserLoginForm = (props) => {
     </div>
   );
 };
-UserLoginForm.propTypes = {
-  loginUser: PropTypes.func.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  isLogged: PropTypes.bool.isRequired,
-  error: PropTypes.string,
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserLoginForm);
+export default UserLoginForm;
diff --git a/frontend/js/components/users/logout.js b/frontend/js/components/users/logout.js
index 60de1c9..43535f4 100644
--- a/frontend/js/components/users/logout.js
+++ b/frontend/js/components/users/logout.js
@@ -1,26 +1,18 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Redirect } from "react-router-dom";
 
 import { userLogout } from "../../actions/users";
 
-const mapStateToProps = (state) => ({
-  isLogged: state.userStore.get("isLogged"),
-});
-const mapDispatchToProps = { userLogout };
+const UserLogout = () => {
+  const dispatch = useDispatch();
+  const isLogged = useSelector((state) => state.userStore.get("isLogged"));
 
-const UserLogout = (props) => {
-  if (props.isLogged) {
-    props.userLogout();
+  if (isLogged) {
+    dispatch(userLogout());
   }
 
   return <Redirect to="/users/login" />;
 };
-UserLogout.propTypes = {
-  isLogged: PropTypes.bool.isRequired,
-  userLogout: PropTypes.func.isRequired,
-  history: PropTypes.object,
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserLogout);
+export default UserLogout;
diff --git a/frontend/js/components/users/profile.js b/frontend/js/components/users/profile.js
index 22388c9..9e07b24 100644
--- a/frontend/js/components/users/profile.js
+++ b/frontend/js/components/users/profile.js
@@ -1,7 +1,5 @@
 import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Map } from "immutable";
+import { useDispatch, useSelector } from "react-redux";
 
 import { PolochonList } from "../polochons/list";
 import { UserEdit } from "./edit";
@@ -9,17 +7,16 @@ import { UserEdit } from "./edit";
 import { getUserModules } from "../../actions/users";
 import Modules from "../modules/modules";
 
-const mapStateToProps = (state) => ({
-  modules: state.userStore.get("modules"),
-  modulesLoading: state.userStore.get("modulesLoading"),
-});
+const UserProfile = () => {
+  const dispatch = useDispatch();
+  const modules = useSelector((state) => state.userStore.get("modules"));
+  const modulesLoading = useSelector((state) =>
+    state.userStore.get("modulesLoading")
+  );
 
-const mapDispatchToProps = { getUserModules };
-
-const UserProfile = ({ modules, modulesLoading, getUserModules }) => {
   useEffect(() => {
-    getUserModules();
-  }, [getUserModules]);
+    dispatch(getUserModules());
+  }, [dispatch]);
 
   return (
     <div>
@@ -29,10 +26,5 @@ const UserProfile = ({ modules, modulesLoading, getUserModules }) => {
     </div>
   );
 };
-UserProfile.propTypes = {
-  getUserModules: PropTypes.func.isRequired,
-  modules: PropTypes.instanceOf(Map),
-  modulesLoading: PropTypes.bool.isRequired,
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);
+export default UserProfile;
diff --git a/frontend/js/components/users/signup.js b/frontend/js/components/users/signup.js
index 63d263f..f7b7fb1 100644
--- a/frontend/js/components/users/signup.js
+++ b/frontend/js/components/users/signup.js
@@ -1,33 +1,33 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Redirect } from "react-router-dom";
 
 import { userSignUp } from "../../actions/users";
 
-const mapStateToProps = (state) => ({
-  isLogged: state.userStore.get("isLogged"),
-  isLoading: state.userStore.get("loading"),
-  error: state.userStore.get("error"),
-});
-const mapDispatchToProps = { userSignUp };
+const UserSignUp = () => {
+  const dispatch = useDispatch();
 
-const UserSignUp = (props) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [passwordConfirm, setPasswordConfirm] = useState("");
 
-  if (props.isLogged) {
+  const isLogged = useSelector((state) => state.userStore.get("isLogged"));
+  const isLoading = useSelector((state) => state.userStore.get("loading"));
+  const error = useSelector((state) => state.userStore.get("error"));
+
+  if (isLogged) {
     return <Redirect to="/" />;
   }
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    props.userSignUp({
-      username: username,
-      password: password,
-      password_confirm: passwordConfirm, // eslint-disable-line camelcase
-    });
+    dispatch(
+      userSignUp({
+        username: username,
+        password: password,
+        password_confirm: passwordConfirm, // eslint-disable-line camelcase
+      })
+    );
   };
 
   return (
@@ -35,8 +35,8 @@ const UserSignUp = (props) => {
       <div className="col-10 offset-1 col-md-6 offset-md-3">
         <h2>Sign up</h2>
         <hr />
-        {props.error && props.error !== "" && (
-          <div className="alert alert-danger">{props.error}</div>
+        {error && error !== "" && (
+          <div className="alert alert-danger">{error}</div>
         )}
 
         <form className="form-horizontal" onSubmit={(e) => handleSubmit(e)}>
@@ -70,12 +70,12 @@ const UserSignUp = (props) => {
             />
           </div>
           <div>
-            {props.isLoading && (
+            {isLoading && (
               <button className="btn btn-primary pull-right">
                 <i className="fa fa-spinner fa-spin"></i>
               </button>
             )}
-            {props.isLoading || (
+            {isLoading || (
               <span>
                 <input
                   className="btn btn-primary pull-right"
@@ -90,11 +90,5 @@ const UserSignUp = (props) => {
     </div>
   );
 };
-UserSignUp.propTypes = {
-  isLogged: PropTypes.bool.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  userSignUp: PropTypes.func.isRequired,
-  error: PropTypes.string,
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserSignUp);
+export default UserSignUp;
diff --git a/frontend/js/components/users/tokens.js b/frontend/js/components/users/tokens.js
index 696e9d0..4c9e999 100644
--- a/frontend/js/components/users/tokens.js
+++ b/frontend/js/components/users/tokens.js
@@ -1,40 +1,35 @@
-import React, { useState } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { UAParser } from "ua-parser-js";
 import moment from "moment";
-import { Map, List } from "immutable";
+import { Map } from "immutable";
 
 import { getUserTokens, deleteUserToken } from "../../actions/users";
 
-const mapStateToProps = (state) => ({
-  tokens: state.userStore.get("tokens"),
-});
-const mapDispatchToProps = { getUserTokens, deleteUserToken };
+const UserTokens = () => {
+  const dispatch = useDispatch();
 
-const UserTokens = (props) => {
-  const [fetched, setIsFetched] = useState(false);
-  if (!fetched) {
-    props.getUserTokens();
-    setIsFetched(true);
-  }
+  const tokens = useSelector((state) => state.userStore.get("tokens"));
+
+  useEffect(() => {
+    dispatch(getUserTokens());
+  }, [dispatch]);
 
   return (
     <div className="row">
       <div className="col-12">
-        {props.tokens.map((el, index) => (
-          <Token key={index} data={el} deleteToken={props.deleteUserToken} />
+        {tokens.map((el, index) => (
+          <Token
+            key={index}
+            data={el}
+            deleteToken={(token) => dispatch(deleteUserToken(token))}
+          />
         ))}
       </div>
     </div>
   );
 };
-UserTokens.propTypes = {
-  tokens: PropTypes.instanceOf(List),
-  isLoading: PropTypes.bool,
-  getUserTokens: PropTypes.func.isRequired,
-  deleteUserToken: PropTypes.func.isRequired,
-};
 
 const Token = (props) => {
   const ua = UAParser(props.data.get("user_agent"));
@@ -171,4 +166,4 @@ Browser.propTypes = {
   version: PropTypes.string,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserTokens);
+export default UserTokens;