cache character end point - update reply count/thread reply id

client/app/model/index.ts

@@ -1,2 +1,4 @@
 export * from './category';
+export * from './reply';
+export * from './thread';
 export * from './user';

client/app/model/reply.ts

@@ -0,0 +1,10 @@
+export interface RepyModel {
+  content: string;
+  edited: boolean;
+  id: number;
+  inserted_at: string;
+  quote: boolean;
+  thread_id: number;
+  updated_at: string;
+  user_id: number;
+}

client/app/model/thread.ts

@@ -0,0 +1,20 @@
+import { RepyModel } from './reply';
+
+export interface ThreadModel {
+  category_id: number;
+  content: string;
+  title: string;
+  edited: boolean;
+  id: number;
+  inserted_at: string;
+  last_reply: { id: number; battletag: string };
+  last_reply_id: number;
+  locked: boolean;
+  replies: RepyModel[];
+  reply_count: number;
+  sticky: boolean;
+  updated_at: string;
+  user: { id: number; battletag: string };
+  user_id: number;
+  view_count: number;
+}

client/app/pages/forum/forum.tsx

@@ -1,18 +1,32 @@
 import React from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
+import { get } from 'lodash';
+import { ThreadService } from '../../services';
 import { LoginButton } from '../../components';
+import { ThreadModel } from '../../model';
 import './forum.scss';
 
 interface Props extends RouteComponentProps<any> {}
 
-interface State {}
+interface State {
+  threads: ThreadModel[];
+}
 
 export class Forum extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
+    this.state = {
+      threads: [],
+    };
   }
 
   componentDidMount() {
+    this.getThreads();
+  }
+
+  private async getThreads() {
+    const threads = await ThreadService.getCategoryThreads(this.props.match.params['id']);
+    this.setState({ threads });
   }
 
   renderHeader() {
@@ -59,15 +73,15 @@ export class Forum extends React.Component<Props, State> {
   }
 
   renderThreadRows() {
-    return Array(40).fill('test 123').map((thread, index) => {
+    return this.state.threads.map((thread, index) => {
       return (
         <div className={`forum-row ${index % 2 === 0 && 'forum-row--dark'}`} key={index}>
-          {this.renderCell(thread, { maxWidth: '50px' })}
-          {this.renderCell(<Link to="#">This is a test subject that could be really long</Link>, { minWidth: '200px' })}
-          {this.renderCell(<b>thread</b>, { maxWidth: '150px' })}
-          {this.renderCell(<b>thread</b>, { maxWidth: '150px' }, true)}
-          {this.renderCell(<b>thread</b>, { maxWidth: '150px' }, true)}
-          {this.renderCell(<span>by <b>thread</b></span>, { maxWidth: '200px' })}
+          {this.renderCell('flag', { maxWidth: '50px' })}
+          {this.renderCell(<Link to={`/thread/${thread.id}`}>{thread.title}</Link>, { minWidth: '200px' })}
+          {this.renderCell(<b>{thread.user.battletag}</b>, { maxWidth: '150px' })}
+          {this.renderCell(<b>{thread.reply_count}</b>, { maxWidth: '150px' }, true)}
+          {this.renderCell(<b>{thread.view_count}</b>, { maxWidth: '150px' }, true)}
+          {this.renderCell(<span>by <b>{get(thread, 'last_reply.battletag')}</b></span>, { maxWidth: '200px' })}
         </div>
       );
     });

client/app/pages/index.ts

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

client/app/pages/thread/thread.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { ThreadService } from '../../services';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {}
+
+export class Thread extends React.Component<Props, State> {
+
+  componentDidMount() {
+    this.getThreads();
+  }
+
+  private async getThreads() {
+    const thread = await ThreadService.getThread(this.props.match.params['id']);
+    console.log(thread);
+  }
+
+  render() {
+    return (
+      <div></div>
+    );
+  }
+}

client/app/routes.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { Provider } from 'mobx-react';
 import { Footer, Header } from './components';
-import { Forum, Home, NotFound, Oauth, Realms, UserAccount } from './pages';
+import { Forum, Home, NotFound, Oauth, Realms, Thread, UserAccount } from './pages';
 import { stores } from './stores/stores';
 
 // styling
@@ -26,6 +26,7 @@ export class Routes extends React.Component<Props, State> {
               <Route exact path="/f/:id" component={Forum} />
               <Route exact path="/oauth" component={Oauth} />
               <Route exact path="/user-account" component={UserAccount} />
+              <Route exact path="/thread/:id" component={Thread} />
               <Route component={NotFound} />
             </Switch>
             <Footer />

client/app/services/index.ts

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

client/app/services/thread.service.ts

@@ -0,0 +1,29 @@
+import axios from '../axios/axios';
+import { ThreadModel } from '../model';
+
+const getCategoryThreads = async (category_id: string): Promise<ThreadModel[]> => {
+  try {
+    const res = await axios.get(`/api/thread?category_id=${category_id}`);
+    return res.data.data;
+  } catch (e) {
+    console.error(e);
+  }
+
+  return [];
+};
+
+const getThread = async (thread_id: string | number): Promise<ThreadModel> => {
+  try {
+    const res = await axios.get(`/api/thread/${thread_id}`);
+    return res.data.data;
+  } catch (e) {
+    console.error(e);
+  }
+
+  return [] as any;
+};
+
+export const ThreadService = {
+  getCategoryThreads,
+  getThread,
+};

client/package.json

@@ -13,6 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@types/lodash": "^4.14.92",
+    "@types/node": "^9.3.0",
     "@types/query-string": "^5.0.1",
     "@types/react": "^16.0.34",
     "@types/react-dom": "^16.0.3",

client/yarn.lock

@@ -14,6 +14,10 @@
   version "8.5.5"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.5.5.tgz#6f9e8164ae1a55a9beb1d2571cfb7acf9d720c61"
 
+"@types/node@^9.3.0":
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.3.0.tgz#3a129cda7c4e5df2409702626892cb4b96546dd5"
+
 "@types/query-string@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-5.0.1.tgz#6cb41c724cb1644d56c2d1dae7c7b204e706b39e"