Work on MyAccount stuff

src/components/management/AccountManager/MyAccount.jsx

@@ -0,0 +1,37 @@
+import Inferno from 'inferno';
+import { Component } from 'inferno';
+import PropTypes from 'prop-types';
+
+export class LoginForm extends Component {
+  constructor(props) {
+    super(props);
+
+    PropTypes.checkPropTypes({
+      email: PropTypes.string.isRequired,
+      username: PropTypes.string.isRequired,
+      publicName: PropTypes.string.isRequired,
+      allowEmails: PropTypes.bool.isRequired,
+      useIPAPronunciation: PropTypes.bool.isRequired,
+      userDictionaries: PropTypes.array.isRequired,
+      updateUserData: PropTypes.func,
+      changeDictionary: PropTypes.func,
+    }, props, 'prop', 'LoginForm');
+
+    this.state = {
+      email: this.props.email,
+      username: this.props.username,
+      publicName: this.props.publicName,
+      allowEmails: this.props.allowEmails,
+      useIPAPronunciation: this.props.useIPAPronunciation,
+      userDictionaries: this.props.userDictionaries,
+    };
+  }
+  
+  render() {
+    return (
+      <div className='content has-text-left'>
+        <p>Hello My Account!</p>
+      </div>
+    );
+  }
+}

src/components/management/AccountManager/index.jsx

@@ -6,9 +6,18 @@ import store from 'store';
 
 import { Modal } from '../../structure/Modal';
 import { LoginForm } from './LoginForm';
+// import { MyAccount } from './MyAccount';
 
 import { request } from '../../../Helpers';
 
+const defaultUserData = {
+  email: '',
+  username: '',
+  publicName: '',
+  allowEmails: true,
+  useIPAPronunciation: true,
+};
+
 export class AccountManager extends Component {
   constructor (props) {
     super(props);
@@ -17,9 +26,21 @@ export class AccountManager extends Component {
       updater: PropTypes.object.isRequired,
     }, props, 'prop', 'AccountManager');
 
+    const userData = store.get('LexicongaUserData');
+    
     this.state = {
       isLoggedIn: false,
+      userData: {
+        email: userData ? userData.email : defaultUserData.email,
+        username: userData ? userData.username : defaultUserData.username,
+        publicName: userData ? userData.publicName : defaultUserData.publicName,
+        allowEmails: userData ? userData.allowEmails : defaultUserData.allowEmails,
+        useIPAPronunciation: userData ? userData.useIPAPronunciation : defaultUserData.useIPAPronunciation,
+      },
+      userDictionaries: [],
     };
+
+    this.getDictionaryNames();
   }
 
   logIn (email, password) {
@@ -28,7 +49,12 @@ export class AccountManager extends Component {
 
   logOut () {
     store.remove('LexicongaToken');
-    this.setState({ isLoggedIn: false });
+    store.remove('LexicongaUserData');
+    this.setState({
+      isLoggedIn: false,
+      userData: Object.assign({}, defaultUserData),
+      userDictionaries: [],
+    });
   }
 
   signUp (email, password, userData) {
@@ -44,23 +70,71 @@ export class AccountManager extends Component {
     if (error) {
       console.error(data);
     } else {
-      store.set('LexicongaToken', data);
+      store.set('LexicongaToken', data.token);
-      this.setState({ isLoggedIn: true }, () => {
+      store.set('LexicongaUserData', data.user);
+      this.setState({
+        isLoggedIn: true,
+        userData: data.user,
+      }, () => {
+        this.getDictionaryNames();
         this.props.updater.sync();
       });
     }
   }
 
+  updateUserData (newUserData) {
+    const token = store.get('LexicongaToken');
+
+    if (token) {
+      store.set('LexicongaUserData', newUserData);
+      this.setState({ userData: newUserData }, () => {
+        request('set-user-data', { token, userData: newUserData }, (response) => {
+          const {data, error} = response;
+          if (error) {
+            console.error(data);
+          } else {
+            console.log(data);
+          }
+        })
+      });
+    }
+  }
+
+  getDictionaryNames () {
+    const token = store.get('LexicongaToken');
+
+    if (token) {
+      return request('get-all-dictionary-names', { token }, (response) => {
+        const {data, error} = response;
+        if (error) {
+          console.error(data);
+        } else {
+          this.setState({ userDictionaries: data });
+        }
+      });
+    }
+  }
+
   render () {
     const token = store.get('LexicongaToken');
     
     if (token) {
+      const { userData } = this.state;
+
       return (
         <div>
-          <Modal buttonText='Account' title='My Account'>
+          <Modal buttonText='Account' title='My Account' onShow={ this.getDictionaryNames.bind(this) }>
             <div className='content has-text-left'>
               <p>Hello My Account!</p>
             </div>
+            {/* <MyAccount
+              email={ userData.email }
+              username={ userData.username }
+              publicName={ userData.publicName }
+              allowEmails={ userData.allowEmails }
+              useIPAPronunciation={ userData.useIPAPronunciation }
+              updateUserData={ this.updateUserData.bind(this) }
+              changeDictionary={ () => {} } /> */}
           </Modal>
           <a className='button' onClick={this.logOut.bind(this)}>
             Log Out