client - add services

client/app/pages/index.ts

@@ -3,3 +3,5 @@ export * from './home/home';
 export * from './not-found/not-found';
 export * from './oauth/oauth';
 export * from './realms/realms';
+export * from './user-account/user-account';
+

client/app/pages/oauth/oauth.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { parse } from 'query-string';
-import axios from '../../axios/axios';
+import { UserService } from '../../services';
 
 interface Props extends RouteComponentProps<any> {}
 
@@ -15,9 +15,7 @@ export class Oauth extends React.Component<Props, State> {
   private async login(queryString: string) {
     try {
       const code = parse(queryString).code;
-      const res = await axios.post('/api/battlenet/authorize', { code });
-      const account = res.data.data;
-      localStorage.setItem('account', JSON.stringify(account));
+      await UserService.authorize(code);
       window.opener.location.reload();
       // TODO: this doesn't work on mobile currently
       window.close();

client/app/pages/realms/realms.tsx

@@ -1,25 +1,21 @@
 import React from 'react';
 import { chain } from 'lodash';
-import { Link } from 'react-router-dom';
-import axios from '../../axios/axios';
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { CategoryService } from '../../services';
+import { CategoryModel } from '../../model';
 import { ContentContainer } from '../../components';
 import './realms.scss';
 import header_realmforums from '../../assets/header-realmforums.gif';
 import realms_large from '../../assets/realms-large.gif';
 
-interface Props {}
+interface Props extends RouteComponentProps<any> {}
 
 interface State {
-  realms: Realm[];
-}
-
-interface Realm {
-  id: number;
-  category: string;
-  title: string;
+  realms: CategoryModel[];
 }
 
 export class Realms extends React.Component<Props, State> {
+
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -29,8 +25,8 @@ export class Realms extends React.Component<Props, State> {
 
   async componentDidMount() {
     try {
-      const res = await axios.get('/api/category');
-      const realms = chain(res.data.data)
+      const res = await CategoryService.getCategories();
+      const realms = chain(res)
         .filter({ category: 'realm' })
         .orderBy(['title'])
         .value();
@@ -40,7 +36,7 @@ export class Realms extends React.Component<Props, State> {
     }
   }
 
-  private renderRealms(realms: Realm[]): any {
+  private renderRealms(realms: CategoryModel[]): any {
     return realms.map((realm) => {
       return (
         <li key={realm.id}>

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { ContentContainer } from '../../components';
+import { UserService } from '../../services';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {}
+
+export class UserAccount extends React.Component<Props, State> {
+
+  componentDidMount() {
+    console.log(UserService.getUser());
+  }
+
+  render() {
+    return (
+      <ContentContainer></ContentContainer>
+    );
+  }
+}