From d1af1d3437c67b50866492445fb457d72b71f2a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Tue, 9 Jul 2019 23:19:04 +0200
Subject: [PATCH] Update user profile to add the polochon selection

---
 frontend/js/actions/polochon.js         |   5 +-
 frontend/js/components/users/edit.js    | 134 ++++++++++++++++++++++++
 frontend/js/components/users/profile.js | 128 +++-------------------
 frontend/js/reducers/users.js           |   2 +
 4 files changed, 155 insertions(+), 114 deletions(-)
 create mode 100644 frontend/js/components/users/edit.js

diff --git a/frontend/js/actions/polochon.js b/frontend/js/actions/polochon.js
index acac051..a5c97ef 100644
--- a/frontend/js/actions/polochon.js
+++ b/frontend/js/actions/polochon.js
@@ -14,6 +14,7 @@ export const addPolochon = (params) => request(
   "ADD_POLOCHON",
   configureAxios().post("/polochons", params),
   [
+    () => getPolochons(),
     () => getManagedPolochons(),
   ],
 )
@@ -22,14 +23,16 @@ export const updatePolochon = ({ id, ...params }) => request(
   "UPDATE_POLOCHON",
   configureAxios().post(`/polochons/${id}`, params),
   [
+    () => getPolochons(),
     () => getManagedPolochons(),
   ],
 )
 
 export const deletePolochon = (id) => request(
-  "UPDATE_POLOCHON",
+  "DELETE_POLOCHON",
   configureAxios().delete(`/polochons/${id}`),
   [
+    () => getPolochons(),
     () => getManagedPolochons(),
   ],
 )
diff --git a/frontend/js/components/users/edit.js b/frontend/js/components/users/edit.js
new file mode 100644
index 0000000..240dc4a
--- /dev/null
+++ b/frontend/js/components/users/edit.js
@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from "react"
+import PropTypes from "prop-types"
+import { connect } from "react-redux"
+import Loader from "../loader/loader"
+import { List } from "immutable"
+
+import { getUserInfos, updateUser } from "../../actions/users"
+import { getPolochons } from "../../actions/polochon"
+
+import { FormInput } from "../forms/input"
+
+const mapStateToProps = (state) => ({
+  loading: state.userStore.get("loading"),
+  publicPolochons: state.polochon.get("public"),
+  polochonId: state.userStore.get("polochonId"),
+  polochonToken: state.userStore.get("polochonToken"),
+  polochonActivated: state.userStore.get("polochonActivated"),
+});
+
+const mapDispatchToProps = {
+    updateUser, getPolochons, getUserInfos,
+}
+
+const UserEditConnect = ({
+  loading,
+  polochonId,
+  polochonToken,
+  polochonActivated,
+  updateUser,
+  getPolochons,
+  getUserInfos,
+  publicPolochons,
+}) => {
+  const [id, setId] = useState(polochonId);
+  const [token, setToken] = useState(polochonToken);
+  const [password, setPassword] = useState("");
+  const [passwordConfirm, setPasswordConfirm] = useState("");
+
+  useEffect(() => {
+    getPolochons();
+    getUserInfos();
+  }, [getPolochons, getUserInfos])
+
+  useEffect(() => {
+    setId(polochonId);
+    setToken(polochonToken);
+  }, [polochonToken, polochonId])
+
+  const handleSubmit = (ev) => {
+    ev.preventDefault();
+    updateUser({
+      "password": password,
+      "password_confirm": passwordConfirm,
+      "polochon_id": id,
+      "polochon_token": token,
+    });
+  }
+
+  if (loading) { return (<Loader />) }
+
+  return (
+    <div className="row mb-3">
+      <div className="col-12 col-md-6 offset-md-3">
+        <h2>Edit user</h2>
+        <hr />
+        <form className="form-horizontal" onSubmit={(ev) => handleSubmit(ev)}>
+          <div className="form-group">
+            <label className="control-label">
+              Polochon
+              {polochonActivated ||
+                  <span className="ml-1 text text-primary">(Needs activation from admin)</span>
+              }
+            </label>
+            <select
+              className="form-control"
+              value={id}
+              onChange={(e) => setId(e.target.options[e.target.selectedIndex].value)}
+            >
+              {publicPolochons.map((el, index) => (
+                <option
+                  value={el.get("id")}
+                  key={index}>
+                  {el.get("name")} ({el.get("url")})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <FormInput label="token" value={token} updateValue={setToken} />
+
+          <hr />
+
+          <div className="form-group">
+            <label className="control-label">Password</label>
+            <input
+              className="form-control"
+              type="password"
+              autoComplete="off"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+
+          <div className="form-group">
+            <label className="control-label">Confirm Password</label>
+            <input
+              className="form-control"
+              type="password"
+              autoComplete="off"
+              value={passwordConfirm}
+              onChange={(e) => setPasswordConfirm(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <input type="submit" className="btn btn-primary pull-right" value="Update"/>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+UserEditConnect.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  polochonId: PropTypes.string,
+  polochonToken: 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/profile.js b/frontend/js/components/users/profile.js
index 207780c..031b73e 100644
--- a/frontend/js/components/users/profile.js
+++ b/frontend/js/components/users/profile.js
@@ -1,144 +1,46 @@
-import React, { useState, useEffect } from "react"
+import React, { useEffect } from "react"
 import PropTypes from "prop-types"
 import { connect } from "react-redux"
-import Loader from "../loader/loader"
 import { Map } from "immutable"
 
 import { PolochonList } from "../polochons/list"
+import { UserEdit } from "./edit"
 
-import {
-  updateUser, getUserInfos,
-  getUserTokens, getUserModules
-} from "../../actions/users"
+import { getUserModules } from "../../actions/users"
 import Modules from "../modules/modules"
 
 const mapStateToProps = (state) => ({
-  isLoading: state.userStore.get("loading"),
-  token: state.userStore.get("polochonToken"),
-  url: state.userStore.get("polochonUrl"),
   modules : state.userStore.get("modules"),
   modulesLoading : state.userStore.get("modulesLoading"),
 });
 
-const mapDispatchToProps = {
-    updateUser, getUserInfos,
-    getUserTokens, getUserModules
-}
+const mapDispatchToProps = { getUserModules }
 
-const UserProfile = (props) => {
+const UserProfile = ({
+  modules,
+  modulesLoading,
+  getUserModules
+
+}) => {
   useEffect(() => {
-    props.getUserInfos();
-    props.getUserModules();
-  }, [])
+    getUserModules();
+  }, [getUserModules])
 
   return (
     <div>
-      <UserEdit
-        isLoading={props.isLoading}
-        token={props.token}
-        url={props.url}
-        updateUser={props.updateUser}
-      />
+      <UserEdit />
       <PolochonList />
       <Modules
-        modules={props.modules}
-        isLoading={props.modulesLoading}
+        modules={modules}
+        isLoading={modulesLoading}
       />
     </div>
   )
 }
 UserProfile.propTypes = {
-  isLoading: PropTypes.bool.isRequired,
-  token: PropTypes.string,
-  url: PropTypes.string,
-  updateUser: PropTypes.func.isRequired,
-  getUserInfos: PropTypes.func.isRequired,
   getUserModules: PropTypes.func.isRequired,
   modules: PropTypes.instanceOf(Map),
   modulesLoading: PropTypes.bool.isRequired,
 };
 
-const UserEdit = (props) => {
-  if (props.isLoading) {
-    return <Loader />
-  }
-
-  const [url, setUrl] = useState(props.url);
-  const [token, setToken] = useState(props.token);
-  const [password, setPassword] = useState("");
-  const [passwordConfirm, setPasswordConfirm] = useState("");
-
-  const handleSubmit = (ev) => {
-    ev.preventDefault();
-    props.updateUser({
-      "polochon_url": url,
-      "polochon_token": token,
-      "password": password,
-      "password_confirm": passwordConfirm,
-    });
-  }
-
-  return (
-    <div className="row mb-3">
-      <div className="col-12 col-md-6 offset-md-3">
-        <h2>Edit user</h2>
-        <hr />
-        <form className="form-horizontal" onSubmit={(ev) => handleSubmit(ev)}>
-          <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>
-
-          <hr />
-
-          <div className="form-group">
-            <label className="control-label">Password</label>
-            <input
-              className="form-control"
-              type="password"
-              autoComplete="off"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
-
-          <div className="form-group">
-            <label className="control-label">Confirm Password</label>
-            <input
-              className="form-control"
-              type="password"
-              autoComplete="off"
-              value={passwordConfirm}
-              onChange={(e) => setPasswordConfirm(e.target.value)}
-            />
-          </div>
-
-          <div>
-            <input type="submit" className="btn btn-primary pull-right" value="Update"/>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
-UserEdit.propTypes = {
-  isLoading: PropTypes.bool.isRequired,
-  token: PropTypes.string,
-  url: PropTypes.string,
-  updateUser: PropTypes.func.isRequired,
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);
diff --git a/frontend/js/reducers/users.js b/frontend/js/reducers/users.js
index 557f27c..0812611 100644
--- a/frontend/js/reducers/users.js
+++ b/frontend/js/reducers/users.js
@@ -14,6 +14,7 @@ const defaultState = Map({
   polochonToken: "",
   polochonUrl: "",
   polochonName: "",
+  polochonId: "",
   polochonActivated: false,
   tokens: List(),
   modules: Map(),
@@ -48,6 +49,7 @@ const handlers = {
     polochonToken: action.payload.response.data.token,
     polochonUrl: action.payload.response.data.url,
     polochonName: action.payload.response.data.name,
+    polochonId: action.payload.response.data.id,
     polochonActivated: action.payload.response.data.activated,
     loading: false,
   })),