client - forum nav should be working

client/app/components/forum-nav/forum-nav.scss

@@ -1,6 +1,15 @@
 .forum-nav {
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   padding-left: 5px;
-  position: relative;
-  bottom: 10;
+  background-image: url('../../assets/forum-nav-header-bg.gif');
+  background-repeat: no-repeat;
+  height: 51px;
+  width: 300px;
+  overflow: hidden;
+
+  &__title {
+    height: 27px;
+    line-height: 27px;
+  }
 }

client/app/components/forum-nav/forum-nav.tsx

@@ -1,20 +1,125 @@
 import React from 'react';
+import { get, find, reject } from 'lodash';
+import { RouteComponentProps } from 'react-router-dom';
+import { CategoryService } from '../../services';
+import { CategoryModel } from '../../model';
 import './forum-nav.scss';
 
-interface Props {}
+interface Props extends RouteComponentProps<any> {
+  categoryId: number;
+}
 
-interface State {}
+interface State {
+  categoryList: CategoryModel[];
+  selectedCategory?: CategoryModel;
+}
 
 export class ForumNav extends React.Component<Props, State> {
 
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      categoryList: [],
+    };
+  }
+
+  async componentDidMount() {
+    const categoryList = await CategoryService.getCategories();
+    this.setState({ categoryList });
+    this.setSelectedCategory(categoryList, this.props.categoryId!);
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (this.props.categoryId !== nextProps.categoryId) {
+      this.setSelectedCategory(this.state.categoryList, nextProps.categoryId!);
+    }
+  }
+
+  setSelectedCategory(categoryList: CategoryModel[], categoryId: number) {
+    const selectedCategory = find(categoryList, { id: categoryId });
+    this.setState({ selectedCategory });
+  }
+
+  getImageSrc(): string {
+    if (this.state.selectedCategory!.category === 'realm') {
+      return topicIcons['Realm Forums'];
+    }
+
+    return topicIcons[this.state.selectedCategory!.title];
+  }
+
+  renderDropDown() {
+    let categories: any = reject(this.state.categoryList, { category: 'realm' });
+    categories = [{ id: -1, title: 'Realm Forums' }, ...categories];
+    return categories.map((val: any, index: number) => {
+      return <option key={index} value={val.id}>{val.title}</option>;
+    });
+  }
+
+  getSelectedCategoryId(): number {
+    const { selectedCategory } = this.state;
+    if (!selectedCategory) {
+      return 0;
+    }
+
+    if (selectedCategory.category === 'realm') {
+      return -1;
+    }
+
+    return selectedCategory.id;
+  }
+
+  onSelect(event: any) {
+    const route = event.target.value === '-1' ? '/realms' : `/f/${event.target.value}`;
+    this.props.history.push(route);
+  }
+
   render() {
+    const { selectedCategory } = this.state;
+    const imageSrc = selectedCategory ? this.getImageSrc() : undefined;
+
     return (
-      <div>
-        <img src={require('../../assets/wow-base-general.gif')}/>
+      <div className="flex">
+        <img src={imageSrc} />
         <div className="forum-nav">
-          <small>Forum Nav:</small><select style={{ minWidth: '194px' }}></select>
+          <div className="forum-nav__title">
+            <b>{get(selectedCategory, 'title')}</b>
+          </div>
+          <div className="flex flex--center">
+            <small>Forum Nav:</small>
+            <select style={{ minWidth: '194px', height: '19px' }}
+              value={this.getSelectedCategoryId()}
+              onChange={event => this.onSelect(event)}>
+              {this.state.categoryList && this.renderDropDown()}
+            </select>
+          </div>
         </div>
       </div>
     );
   }
 }
+
+const topicIcons: {[key: string]: string} = {
+  ['Bug Report Forum']: require('../../assets/wow-base-bugs.gif'),
+  ['Druid']: require('../../assets/wow-base-druid.gif'),
+  ['Raid and Dungeon Discussion']: require('../../assets/wow-base-dungeons.gif'),
+  ['General Discussion']: require('../../assets/wow-base-general.gif'),
+  ['Hunter']: require('../../assets/wow-base-hunter.gif'),
+  ['Mage']: require('../../assets/wow-base-mage.gif'),
+  ['Off-topic']: require('../../assets/wow-base-offtopic.gif'),
+  ['Paladin']: require('../../assets/wow-base-paladin.gif'),
+  ['Priest']: require('../../assets/wow-base-priest.gif'),
+  ['Professions']: require('../../assets/wow-base-professions.gif'),
+  ['PvP Discussion']: require('../../assets/wow-base-pvp.gif'),
+  ['Quest Discussion']: require('../../assets/wow-base-quests.gif'),
+  ['Realm Forums']: require('../../assets/wow-base-realms.gif'),
+  ['Rogue']: require('../../assets/wow-base-rogue.gif'),
+  ['Shaman']: require('../../assets/wow-base-shaman.gif'),
+  ['Suggestions']: require('../../assets/wow-base-suggestions.gif'),
+  ['Site Suggestions']: require('../../assets/wow-base-support.gif'),
+  ['UI & Macros Forum']: require('../../assets/wow-base-uicustomizations.gif'),
+  ['Warlock']: require('../../assets/wow-base-warlock.gif'),
+  ['Warrior']: require('../../assets/wow-base-warrior.gif'),
+  ['Guild Recruitment']: require('../../assets/wow-base-guild.gif'),
+  ['Role-Playing']: require('../../assets/wow-base-roleplaying.gif'),
+};

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

@@ -35,6 +35,7 @@ export class LoginButton extends React.Component<Props, State> {
         </div>
         <div style={{ textAlign: 'center' }}>
           {!avatarSrc && <p><a onClick={() => this.props.onNavigate('/user-account')}>Account</a></p>}
+          <div><b>{this.props.userStore!.user!.battletag}</b></div>
           <div><b>{this.props.userStore!.user!.character_name}</b></div>
         </div>
       </div>