Load user data from redux

#134

app/javascript/containers/UserSettings/UserSettings.jsx

@@ -1,9 +1,36 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import classes from './UserSettings.sass'
 import SecondLevelNavigation from "../../components/Navigation/SecondLevelNavigation/SecondLevelNavigation";
 import TextInputWithLabel from "../../components/TextInputWithLabel/TextInputWithLabel";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+
+const UserSettings = (props) => {
+ const [userSettings, setUserSettings] = useState({
+ name: '',
+ email: '',
+ phone: '',
+ password: '**********',
+ passwordConfirmation: '**********'
+ });
+
+ useEffect(() => {
+ const user = props.user;
+
+ const userData = {
+ name: user.name,
+ email: user.email,
+ phone: user.phone,
+ };
+
+ setUserSettings(userData)
+
+ return () => {
+ // cleanup
+ };
+ }, []);
+
 
-const UserSettings = () => {
  return (
  <div className={classes.UserSettings}>
  <SecondLevelNavigation>
@@ -18,18 +45,42 @@ const UserSettings = () => {
 
  <div className={classes.formInputs}>
  <div>
- <TextInputWithLabel className={classes.textInput} label="Nome Completo" />
- <TextInputWithLabel className={classes.textInput} label="Email" />
- <TextInputWithLabel className={classes.textInput} label="Telefone" />
+ <TextInputWithLabel
+ className={classes.textInput}
+ label="Nome Completo"
+ value={userSettings.name}
+ />
+ <TextInputWithLabel
+ className={classes.textInput}
+ label="Email"
+ value={userSettings.email}
+ />
+ <TextInputWithLabel
+ className={classes.textInput}
+ label="Telefone"
+ value={userSettings.phone}
+ />
  </div>
  <div>
- <TextInputWithLabel className={classes.textInput} label="Senha" />
- <TextInputWithLabel className={classes.textInput} label="Confirmação de senha" />
+ <TextInputWithLabel
+ className={classes.textInput}
+ label="Senha"
+ value={userSettings.password}
+ />
+ <TextInputWithLabel
+ className={classes.textInput}
+ label="Confirmação de senha"
+ value={userSettings.passwordConfirmation}
+ />
  </div>
  </div>
  </div>
  </div>
  );
 };
 
-export default UserSettings;
+const mapStateToProps = createStructuredSelector({
+ user: state => state.app.user
+});
+
+export default connect(mapStateToProps, null)(UserSettings);

app/views/static/index.html.erb

@@ -1,3 +1,8 @@
 <%= javascript_pack_tag 'application' %>
 
-<%= react_component('App', user: { email: current_user&.email, group: current_user&.group }) %>
+<%= react_component('App', user: {
+ email: current_user&.email,
+ name: current_user&.name,
+ phone: current_user&.phone,
+ group: current_user&.group,
+}) %>