client - add services

client/app/app.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Wrapper from './Wrapper';
+import { Routes } from './routes';
 import 'babel-polyfill';
 
-ReactDOM.render(<Wrapper />, document.getElementById('app'));
+ReactDOM.render(<Routes/>, document.getElementById('app'));

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

@@ -18,8 +18,6 @@ export class LoginButton extends React.Component<Props, State> {
   }
 
   render() {
-    console.log(process.env);
-
     return (
       <div {...this.props}>
         <img src={require('../../assets/login-bot-left.gif')} />

client/app/model/category.ts

@@ -0,0 +1,5 @@
+export interface CategoryModel {
+  id: number;
+  category: string;
+  title: string;
+}

client/app/model/index.ts

@@ -0,0 +1,2 @@
+export * from './category';
+export * from './user';

client/app/model/user.ts

@@ -0,0 +1,3 @@
+export interface UserModel {
+
+}

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

client/app/routes.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-
 import { Footer, Header } from './components';
-import { Forum, Home, NotFound, Oauth, Realms } from './pages';
+import { Forum, Home, NotFound, Oauth, Realms, UserAccount } from './pages';
 
 // styling
 import './scss/index.scss';
@@ -11,18 +10,7 @@ interface Props {}
 
 interface State {}
 
-export default class Wrapper extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-  }
-
-  componentDidMount() {
-    const storedAccount = localStorage.getItem('account');
-
-    if (storedAccount) {
-      console.log(JSON.parse(storedAccount));
-    }
-  }
+export class Routes extends React.Component<Props, State> {
 
   public render() {
     return (
@@ -34,6 +22,7 @@ export default class Wrapper extends React.Component<Props, State> {
             <Route exact path="/realms" component={Realms} />
             <Route exact path="/f/:id" component={Forum} />
             <Route exact path="/oauth" component={Oauth} />
+            <Route exact path="/user-account" component={UserAccount} />
             <Route component={NotFound} />
           </Switch>
           <Footer />

client/app/services/category.service.ts

@@ -0,0 +1,18 @@
+import { cloneDeep } from 'lodash';
+import axios from '../axios/axios';
+import { CategoryModel } from '../model';
+
+export class CategoryService {
+  private static categoryCache: CategoryModel[];
+
+  public static async getCategories(): Promise<CategoryModel[]> {
+    // return cache if it exists
+    if (CategoryService.categoryCache) {
+      return Promise.resolve(cloneDeep(CategoryService.categoryCache));
+    }
+
+    const res = await axios.get('/api/category');
+    CategoryService.categoryCache = cloneDeep(res.data.data);
+    return res.data.data;
+  }
+}

client/app/services/index.ts

@@ -0,0 +1,2 @@
+export * from './category.service';
+export * from './user.service';

client/app/services/user.service.ts

@@ -0,0 +1,24 @@
+import axios from '../axios/axios';
+import { UserModel } from '../model';
+
+export class UserService {
+
+  public static storeUser(user: UserModel): void {
+    localStorage.setItem('user', JSON.stringify(user));
+  }
+
+  public static getUser(): UserModel {
+    const u = localStorage.getItem('user');
+    return u ? JSON.parse(u) : null;
+  }
+
+  // fetch user and store in local storage
+  public static async authorize(code: string): Promise<void> {
+    try {
+      const res = await axios.post('/api/battlenet/authorize', { code });
+      UserService.storeUser(res.data.data);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}