client - user account page done

client/app/components/login-button/login-button.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import { Portrait } from '../portrait/portrait';
 import { UserStore } from '../../stores/user-store';
+import { CharacterService } from '../../services';
 
-interface Props extends RouteComponentProps<any> {
+interface Props {
   className?: string;
   userStore?: UserStore;
+  onNavigate: (des: string) => any;
 }
 
 interface State {}
@@ -26,9 +27,16 @@ export class LoginButton extends React.Component<Props, State> {
   }
 
   renderPortrait() {
+    const avatarSrc = CharacterService.getAvatar(this.props.userStore!.user!.character_avatar!);
     return (
-      <div onClick={() => this.props.history.push('/user-account')} style={{ cursor: 'pointer' }}>
-        <Portrait imageSrc={require('../../assets/Tyren.gif')}/>
+      <div style={{ padding: '10px' }}>
+        <div onClick={() => this.props.onNavigate('/user-account')} style={{ cursor: 'pointer' }}>
+          {avatarSrc && <Portrait imageSrc={avatarSrc}/>}
+        </div>
+        <div style={{ textAlign: 'center' }}>
+          {!avatarSrc && <p><a onClick={() => this.props.onNavigate('/user-account')}>Account</a></p>}
+          <div><b>{this.props.userStore!.user!.character_name}</b></div>
+        </div>
       </div>
     );
   }

client/app/model/avatar.ts

@@ -1,71 +1,6 @@
 export interface AvatarModel {
-  title: string;
   imageSrc: any;
+  raceId: number;
+  title: string;
 }
 
-export const AvatarList: AvatarModel[] = [
-  {
-    title: 'dwarf_f',
-    imageSrc: require('../assets/avatars/Dwarf_female.gif'),
-  },
-  {
-    title: 'dwarf_m',
-    imageSrc: require('../assets/avatars/Dwarf_male.gif'),
-  },
-  {
-    title: 'gnome_f',
-    imageSrc: require('../assets/avatars/Gnome_female.gif'),
-  },
-  {
-    title: 'gnome_m',
-    imageSrc: require('../assets/avatars/Gnome_male.gif'),
-  },
-  {
-    title: 'human_f',
-    imageSrc: require('../assets/avatars/Human_female.gif'),
-  },
-  {
-    title: 'human_m',
-    imageSrc: require('../assets/avatars/Human_male.gif'),
-  },
-  {
-    title: 'night_elf_f',
-    imageSrc: require('../assets/avatars/Night_elf_female.gif'),
-  },
-  {
-    title: 'night_elf_m',
-    imageSrc: require('../assets/avatars/Night_elf_male.gif'),
-  },
-  {
-    title: 'orc_f',
-    imageSrc: require('../assets/avatars/Orc_female.gif'),
-  },
-  {
-    title: 'orc_m',
-    imageSrc: require('../assets/avatars/Orc_male.gif'),
-  },
-  {
-    title: 'tauren_f',
-    imageSrc: require('../assets/avatars/Tauren_female.gif'),
-  },
-  {
-    title: 'tauren_m',
-    imageSrc: require('../assets/avatars/Tauren_male.gif'),
-  },
-  {
-    title: 'troll_f',
-    imageSrc: require('../assets/avatars/Troll_female.gif'),
-  },
-  {
-    title: 'troll_m',
-    imageSrc: require('../assets/avatars/Troll_male.gif'),
-  },
-  {
-    title: 'undead_f',
-    imageSrc: require('../assets/avatars/Undead_female.gif'),
-  },
-  {
-    title: 'undead_m',
-    imageSrc: require('../assets/avatars/Undead_male.gif'),
-  },
-];

client/app/model/character.ts

@@ -1,3 +1,5 @@
+import { AvatarModel } from './avatar';
+
 export interface CharacterModel {
   achievementPoints: number;
   battlegroup: string;
@@ -10,4 +12,7 @@ export interface CharacterModel {
   race: number;
   realm: string;
   spec: any;
+
+  avatarList?: AvatarModel[];
+  races?: number[];
 }

client/app/pages/forum/forum.tsx

@@ -34,7 +34,7 @@ export class Forum extends React.Component<Props, State> {
       <div className="forum-header">
         <ForumNav />
         <div style={{ height: '100%' }}>
-          <LoginButton {...this.props}/>
+          <LoginButton onNavigate={dest => this.props.history.push(dest)}/>
         </div>
       </div>
     );

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

@@ -12,7 +12,7 @@
     transition: all 0.1s ease-in-out;
     top: 0;
 
-    &:hover, &__selected {
+    &:hover, &--selected {
       top: -1px;
       box-shadow: 0 0 10px #00C0FF;
     }

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

@@ -4,8 +4,8 @@ import { RouteComponentProps } from 'react-router-dom';
 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 { CharacterService, UserService } from '../../services';
+import { CharacterModel } from '../../model';
 import './user-account.scss';
 
 interface Props extends RouteComponentProps<any> {
@@ -16,6 +16,9 @@ interface State {
   characters: {[realm: string]: CharacterModel[]};
   selectedRealm?: string;
   selectedCharIndex: number;
+  selectedAvatarIndex: number;
+  insufficientScope?: boolean;
+  noCharacters: boolean;
 }
 
 @inject('userStore')
@@ -25,7 +28,9 @@ export class UserAccount extends React.Component<Props, State> {
     super(props);
     this.state = {
       characters: {},
+      noCharacters: false,
       selectedCharIndex: 0,
+      selectedAvatarIndex: 0,
     };
   }
 
@@ -42,22 +47,43 @@ export class UserAccount extends React.Component<Props, State> {
   async getCharacters() {
     try {
       const res = await UserService.getCharacters() as any;
-      const characters = groupBy(res, 'realm');
-      this.setState({
-        characters,
-        selectedRealm: res[0].realm,
-      });
+      if (res.characters) {
+        if (res.characters.length === 0) {
+          this.setState({ noCharacters: true });
+          return;
+        }
+        // remove classes that weren't in vanilla
+        const characters = groupBy(res.characters, 'realm');
+        this.setState({
+          characters,
+          selectedRealm: res.characters[0].realm,
+          insufficientScope: false,
+        });
+      } else {
+        this.setState({ insufficientScope: true });
+      }
     } catch (e) {
       console.error(e);
     }
   }
 
   onRealmSelect(event: any) {
-    this.setState({ selectedRealm: event.target.value, selectedCharIndex: 0 });
+    this.setState({
+      selectedRealm: event.target.value,
+      selectedCharIndex: 0,
+      selectedAvatarIndex: 0,
+    });
   }
 
   onCharSelect(event: any) {
-    this.setState({ selectedCharIndex: event.target.value as any });
+    this.setState({
+      selectedCharIndex: event.target.value as any,
+      selectedAvatarIndex: 0,
+    });
+  }
+
+  onAvatarSelect(selectedAvatarIndex: number) {
+    this.setState({ selectedAvatarIndex });
   }
 
   renderDropDowns() {
@@ -65,24 +91,29 @@ export class UserAccount extends React.Component<Props, State> {
       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>
+        <h2>Set your default character</h2>
+        <div style={{ margin: '0 10px 10px 0', display: 'inline-block' }}>
+          <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>
 
+        <a onClick={() => this.onSave()}>Save</a>
         <div className="avatar-list">
-          {AvatarList.map((val, index) => {
+          {this.selectedCharacter().avatarList!.map((val, index) => {
+            const avatarClass = this.state.selectedAvatarIndex === index ? 'avatar-list__item--selected' : '';
             return (
-              <div key={index} className="avatar-list__item">
+              <div key={index} className={`avatar-list__item ${avatarClass}`} onClick={() => this.onAvatarSelect(index)}>
                 <img src={val.imageSrc}/>
               </div>
             );
@@ -94,25 +125,61 @@ export class UserAccount extends React.Component<Props, State> {
 
   private async onSave() {
     const { name, guild, realm } = this.selectedCharacter();
+    const selectedAvatar = this.selectedCharacter().avatarList![this.state.selectedAvatarIndex].title;
+    const charClass = CharacterService.getClass(this.selectedCharacter().class);
     const data = {
       character_name: name,
-      character_class: 'Rogue', // todo get class from number
+      character_class: charClass.name,
       character_guild: guild,
       character_realm: realm,
-      character_avatar: 'Avatar', // TODO:
+      character_avatar: selectedAvatar,
     };
 
     await UserService.saveCharacter(data);
   }
 
+  private logout() {
+    this.props.userStore!.resetUser();
+    window.location.pathname = '/';
+  }
+
+  private renderScopeError() {
+    return (
+      <div>
+        <p>
+          To set your default character
+          we need access to your WoW profile.
+        </p>
+        <ul>
+          <li><a href="https://us.battle.net/account/management/authorizations.html"
+            target="_blank">Navigate to your Battle.net Authorized Applications</a></li>
+          <li>Remove Classic WoW Forums</li>
+          <li>Log out and back into Classic WoW Forums</li>
+          <li>Grant Classic WoW Forums access to your WoW profile</li>
+        </ul>
+      </div>
+    );
+  }
+
   render() {
-    const { battletag, character_name, character_class, character_guild, character_realm } = this.props.userStore!.user!;
+
+    if (this.state.noCharacters) {
+      return <div>You have no WoW characters in your account.</div>;
+    }
+
+    // user must be logged in to view this page
+    if (!this.props.userStore!.user) {
+      return <div></div>;
+    }
+
+    const { battletag, character_name, character_class, character_guild, character_realm, character_avatar } = this.props.userStore!.user!;
+    const { insufficientScope } = this.state;
 
     return (
       <ScrollToTop>
-        <ContentContainer style={{ minHeight: '500px' }}>
+        <ContentContainer style={{ minHeight: '500px', paddingTop: '40px' }}>
           <div className="flex">
-            <Portrait imageSrc={require('../../assets/Tyren.gif')}/>
+            {character_avatar && <Portrait imageSrc={CharacterService.getAvatar(character_avatar!)}/>}
             <div style={{ paddingLeft: '10px' }}>
               {battletag && <div><b>Battletag: </b>{battletag}</div>}
               {character_name && <div><b>Character: </b>{character_name}</div>}
@@ -120,12 +187,13 @@ export class UserAccount extends React.Component<Props, State> {
               {character_guild && <div><b>Guild: </b>{character_guild}</div>}
               {character_realm && <div><b>Realm: </b>{character_realm}</div>}
             </div>
+            <div className="flex-1" style={{ textAlign: 'right' }}>
+              <a onClick={() => this.logout()}>Logout</a>
+            </div>
           </div>
 
           <div>
-            <h2>Set a new default character</h2>
-            {this.renderDropDowns()}
-            <a onClick={() => this.onSave()}>Save</a>
+            {insufficientScope === true ? this.renderScopeError() : this.renderDropDowns()}
           </div>
 
         </ContentContainer>

client/app/services/character.service.ts

@@ -0,0 +1,156 @@
+import { find, filter, get } from 'lodash';
+import { AvatarModel } from '../model';
+
+const getAvatar = (title: string): any => {
+  const av = find(avatarList, { title });
+  return get(av, 'imageSrc');
+};
+
+const getClass = (index: number): {id: number, name: string; races: number[] } => {
+  return find(classList, { id: index })!;
+};
+
+const getFilteredAvatarList = (raceIdList: number[]) => {
+  return filter(avatarList, (av) => {
+    return raceIdList.includes(av.raceId);
+  });
+};
+
+// taken right from API data
+const classList = [
+  {
+    id: 1,
+    name: 'Warrior',
+    races: [1, 2, 3, 4, 5, 6, 7, 8],
+  },
+  {
+    id: 2,
+    name: 'Paladin',
+    races: [1, 3],
+  },
+  {
+    id: 3,
+    name: 'Hunter',
+    races: [1, 4, 5, 6, 7],
+  },
+  {
+    id: 4,
+    name: 'Rogue',
+    races: [1, 2, 3, 4, 5, 7, 8],
+  },
+  {
+    id: 5,
+    name: 'Priest',
+    races: [1, 3, 4, 7, 8],
+  },
+  {
+    id: 7,
+    name: 'Shaman',
+    races: [5, 6, 7],
+  },
+  {
+    id: 8,
+    name: 'Mage',
+    races: [2, 3, 7, 8],
+  },
+  {
+    id: 9,
+    name: 'Warlock',
+    races: [2, 3, 5, 8],
+  },
+  {
+    id: 11,
+    name: 'Druid',
+    races: [4, 6],
+  },
+];
+
+const avatarList: AvatarModel[] = [
+  {
+    raceId: 1,
+    title: 'dwarf_f',
+    imageSrc: require('../assets/avatars/Dwarf_female.gif'),
+  },
+  {
+    raceId: 1,
+    title: 'dwarf_m',
+    imageSrc: require('../assets/avatars/Dwarf_male.gif'),
+  },
+  {
+    raceId: 2,
+    title: 'gnome_f',
+    imageSrc: require('../assets/avatars/Gnome_female.gif'),
+  },
+  {
+    raceId: 2,
+    title: 'gnome_m',
+    imageSrc: require('../assets/avatars/Gnome_male.gif'),
+  },
+  {
+    raceId: 3,
+    title: 'human_f',
+    imageSrc: require('../assets/avatars/Human_female.gif'),
+  },
+  {
+    raceId: 3,
+    title: 'human_m',
+    imageSrc: require('../assets/avatars/Human_male.gif'),
+  },
+  {
+    raceId: 4,
+    title: 'night_elf_f',
+    imageSrc: require('../assets/avatars/Night_elf_female.gif'),
+  },
+  {
+    raceId: 4,
+    title: 'night_elf_m',
+    imageSrc: require('../assets/avatars/Night_elf_male.gif'),
+  },
+  {
+    raceId: 5,
+    title: 'orc_f',
+    imageSrc: require('../assets/avatars/Orc_female.gif'),
+  },
+  {
+    raceId: 5,
+    title: 'orc_m',
+    imageSrc: require('../assets/avatars/Orc_male.gif'),
+  },
+  {
+    raceId: 6,
+    title: 'tauren_f',
+    imageSrc: require('../assets/avatars/Tauren_female.gif'),
+  },
+  {
+    raceId: 6,
+    title: 'tauren_m',
+    imageSrc: require('../assets/avatars/Tauren_male.gif'),
+  },
+  {
+    raceId: 7,
+    title: 'troll_f',
+    imageSrc: require('../assets/avatars/Troll_female.gif'),
+  },
+  {
+    raceId: 7,
+    title: 'troll_m',
+    imageSrc: require('../assets/avatars/Troll_male.gif'),
+  },
+  {
+    raceId: 8,
+    title: 'undead_f',
+    imageSrc: require('../assets/avatars/Undead_female.gif'),
+  },
+  {
+    raceId: 8,
+    title: 'undead_m',
+    imageSrc: require('../assets/avatars/Undead_male.gif'),
+  },
+];
+
+export const CharacterService = {
+  avatarList,
+  getAvatar,
+  getClass,
+  getFilteredAvatarList,
+};

client/app/services/index.ts

@@ -1,3 +1,4 @@
 export * from './category.service';
+export * from './character.service';
 export * from './thread.service';
 export * from './user.service';

client/app/services/user.service.ts

@@ -1,6 +1,8 @@
+import { chain } from 'lodash';
 import axios from '../axios/axios';
 import userStore from '../stores/user-store';
 import { CharacterModel } from '../model';
+import { CharacterService } from './character.service';
 
 // fetch user and store in local storage
 const authorize = async (code: string): Promise<void> => {
@@ -12,16 +14,31 @@ const authorize = async (code: string): Promise<void> => {
   }
 };
 
-const getCharacters = async (): Promise<CharacterModel | null> => {
+const getCharacters = async (): Promise<any> => {
   try {
     const res = await axios.get('/api/user/characters');
-    return res.data.data.characters;
+    const characters = res.data.data.characters;
+    if (!!characters) {
+      res.data.data.characters = filterCharacters(characters);
+    }
+    return res.data.data;
   } catch (e) {
     console.error(e);
   }
   return null;
 };
 
+const filterCharacters = (chars: CharacterModel[]): CharacterModel[] => {
+  return chain(chars)
+    .filter(c => !!CharacterService.getClass(c.class))
+    .map((c) => {
+      c.races = CharacterService.getClass(c.class).races;
+      c.avatarList = CharacterService.getFilteredAvatarList(c.races);
+      return c;
+    })
+    .value();
+};
+
 const saveCharacter = async (character: any): Promise<any> => {
   try {
     const res = await axios.put('/api/user/characters', character);