client - user account page done

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);