client - wip user account page

client/app/pages/user-account/user-account.scss

@@ -0,0 +1,20 @@
+.avatar-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px;
+  padding-left: 10px;
+
+  &__item {
+    margin-left: 10px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.1s ease-in-out;
+    top: 0;
+
+    &:hover, &__selected {
+      top: -1px;
+      box-shadow: 0 0 10px #00C0FF;
+    }
+  }
+}

client/app/pages/user-account/user-account.tsx

@@ -1,18 +1,135 @@
 import React from 'react';
+import { inject, observer } from 'mobx-react';
 import { RouteComponentProps } from 'react-router-dom';
-import { ContentContainer } from '../../components';
+import { get, groupBy, map } from 'lodash';
+import { ContentContainer, Portrait, ScrollToTop } from '../../components';
+import { UserStore } from '../../stores/user-store';
+import { UserService } from '../../services';
+import { AvatarList, CharacterModel } from '../../model';
+import './user-account.scss';
 
-interface Props extends RouteComponentProps<any> {}
+interface Props extends RouteComponentProps<any> {
+  userStore?: UserStore;
+}
 
-interface State {}
+interface State {
+  characters: {[realm: string]: CharacterModel[]};
+  selectedRealm?: string;
+  selectedCharIndex: number;
+}
 
+@inject('userStore')
+@observer
 export class UserAccount extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      characters: {},
+      selectedCharIndex: 0,
+    };
+  }
 
-  componentDidMount() {}
+  componentDidMount() {
+    this.getCharacters();
+  }
+
+  private selectedCharacter(): CharacterModel {
+    const { selectedRealm, selectedCharIndex } = this.state;
+    const char = get(this.state, `characters[${selectedRealm}][${selectedCharIndex}]`);
+    return char;
+  }
+
+  async getCharacters() {
+    try {
+      const res = await UserService.getCharacters() as any;
+      const characters = groupBy(res, 'realm');
+      this.setState({
+        characters,
+        selectedRealm: res[0].realm,
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  onRealmSelect(event: any) {
+    this.setState({ selectedRealm: event.target.value, selectedCharIndex: 0 });
+  }
+
+  onCharSelect(event: any) {
+    this.setState({ selectedCharIndex: event.target.value as any });
+  }
+
+  renderDropDowns() {
+    if (!this.selectedCharacter()) {
+      return <div></div>;
+    }
+    return (
+      <div style={{ marginBottom: '10px' }}>
+        <select value={this.selectedCharacter().realm}
+          onChange={event => this.onRealmSelect(event)}>
+          {map(this.state.characters, (_, realm: string) => {
+            return <option key={`realm${realm}`}>{realm}</option>;
+          })}
+        </select>
+        <select style={{ marginLeft: '5px' }}
+          onChange={event => this.onCharSelect(event)}>
+          {map(this.state.characters[this.state.selectedRealm!], (value, index) => {
+            return <option key={this.state.selectedRealm! + index} value={index}>{value.name}</option>;
+          })}
+        </select>
+
+        <div className="avatar-list">
+          {AvatarList.map((val, index) => {
+            return (
+              <div key={index} className="avatar-list__item">
+                <img src={val.imageSrc}/>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  private async onSave() {
+    const { name, guild, realm } = this.selectedCharacter();
+    const data = {
+      character_name: name,
+      character_class: 'Rogue', // todo get class from number
+      character_guild: guild,
+      character_realm: realm,
+      character_avatar: 'Avatar', // TODO:
+    };
+
+    await UserService.saveCharacter(data);
+  }
 
   render() {
+    const { battletag, character_name, character_class, character_guild, character_realm } = this.props.userStore!.user!;
+
     return (
-      <ContentContainer></ContentContainer>
+      <ScrollToTop>
+        <ContentContainer style={{ minHeight: '500px' }}>
+          <div className="flex">
+            <Portrait imageSrc={require('../../assets/Tyren.gif')}/>
+            <div style={{ paddingLeft: '10px' }}>
+              {battletag && <div><b>Battletag: </b>{battletag}</div>}
+              {character_name && <div><b>Character: </b>{character_name}</div>}
+              {character_class && <div><b>Class: </b>{character_class}</div>}
+              {character_guild && <div><b>Guild: </b>{character_guild}</div>}
+              {character_realm && <div><b>Realm: </b>{character_realm}</div>}
+            </div>
+          </div>
+
+          <div>
+            <h2>Set a new default character</h2>
+            {this.renderDropDowns()}
+            <a onClick={() => this.onSave()}>Save</a>
+          </div>
+
+        </ContentContainer>
+      </ScrollToTop>
     );
   }
 }