client - get browser fingerprint and set header

client/app/axios/axios.ts

@@ -1,23 +1,43 @@
 import axios, { AxiosInstance, AxiosResponse } from 'axios';
+import fingerprintjs2 from 'fingerprintjs2';
 import userStore from '../stores/user-store';
 
 // create our own instance of axios so we can set request headers
 const ax: AxiosInstance = axios.create();
+export default ax;
 
-// response interceptors
-ax.interceptors.response.use(
-  (config: AxiosResponse) => {
-    return config;
-  },
-  (error: any) => {
-    // if code is unauthorized (401) then logout if already logged in
-    if (error.response.status === 401 && userStore.user) {
-      userStore.resetUser();
+// setup our axios instance - must be done before app bootstraps
+export const initializeAxios = (): Promise<void> => {
+  return new Promise((resolve: any) => {
+    // response interceptors
+    ax.interceptors.response.use(
+      (config: AxiosResponse) => {
+        return config;
+      },
+      (error: any) => {
+        // if code is unauthorized (401) then logout if already logged in
+        if (error.response.status === 401 && userStore.user) {
+          userStore.resetUser();
+        }
+
+        return Promise.reject(error);
+      },
+    );
+
+    const user = localStorage.getItem('user');
+
+    if (user) {
+      const jwt = JSON.parse(user!).token;
+      setAuthorizationHeader(jwt);
     }
 
-    return Promise.reject(error);
-  },
-);
+    new fingerprintjs2().get((result: string) => {
+      axios.defaults.headers.common['fp'] = result;
+      resolve();
+    });
+  });
+};
+
 
 export function setAuthorizationHeader(jwt: string): void {
   ax.defaults.headers.common['Authorization'] = jwt;
@@ -27,4 +47,3 @@ export function resetAuthorizationHeader(): void {
   ax.defaults.headers.common['Authorization'] = '';
 }
 
-export default ax;

client/app/routes.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { Provider } from 'mobx-react';
+import { initializeAxios } from './axios/axios';
 import { Footer, Header } from './components';
 import { Forum, Home, NotFound, Oauth, Realms, Thread, UserAccount } from './pages';
 import { stores } from './stores/stores';
@@ -10,11 +11,31 @@ import './scss/index.scss';
 
 interface Props {}
 
-interface State {}
+interface State {
+  ready: boolean;
+}
 
 export class Routes extends React.Component<Props, State> {
 
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      ready: false,
+    };
+  }
+
+  async componentDidMount() {
+    await initializeAxios();
+    this.setState({ ready: true });
+  }
+
   public render() {
+
+    // make sure we initialize axios with request headers before we load the app
+    if (!this.state.ready) {
+      return <div></div>;
+    }
+
     return (
       <Provider {...stores}>
         <BrowserRouter>

client/app/services/thread.service.ts

@@ -1,10 +1,13 @@
+import { orderBy } from 'lodash';
 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;
+    return orderBy(res.data.data as ThreadModel[], (thread: ThreadModel) => {
+      return -(new Date(thread.updated_at));
+    });
   } catch (e) {
     console.error(e);
   }

client/app/stores/user-store.ts

@@ -1,6 +1,6 @@
 import { action, observable } from 'mobx';
 import { UserModel } from '../model';
-import { resetAuthorizationHeader, setAuthorizationHeader } from '../axios/axios';
+import { resetAuthorizationHeader } from '../axios/axios';
 
 export class UserStore {
 
@@ -22,7 +22,6 @@ export class UserStore {
     const u = localStorage.getItem('user');
     if (u) {
       this.user = JSON.parse(u);
-      setAuthorizationHeader(this.user!.token);
     }
   }