client - get browser fingerprint and set header

client/@types/all/index.d.ts

@@ -1,4 +1,5 @@
 // for libraries that don't have types
-declare module 'this-is-a-test-module';
+// declare module 'this-is-a-test-module';
+declare module 'fingerprintjs2';
 declare module '*.gif';
 declare module '*.jpg';

client/app/axios/axios.ts

@@ -1,11 +1,16 @@
 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(
+// 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;
       },
@@ -17,7 +22,22 @@ ax.interceptors.response.use(
 
         return Promise.reject(error);
       },
-);
+    );
+
+    const user = localStorage.getItem('user');
+
+    if (user) {
+      const jwt = JSON.parse(user!).token;
+      setAuthorizationHeader(jwt);
+    }
+
+    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);
     }
   }
 

client/package.json

@@ -12,6 +12,7 @@
   "author": "Mitchell Gerber",
   "license": "MIT",
   "dependencies": {
+    "@types/fingerprintjs2": "^1.5.1",
     "@types/lodash": "^4.14.92",
     "@types/node": "^9.3.0",
     "@types/query-string": "^5.0.1",
@@ -32,6 +33,7 @@
     "extract-text-webpack-plugin": "3.0.2",
     "favicons-webpack-plugin": "^0.0.7",
     "file-loader": "^1.1.6",
+    "fingerprintjs2": "^1.5.1",
     "font-awesome": "^4.7.0",
     "html-webpack-plugin": "^2.30.1",
     "lodash": "^4.17.4",

client/yarn.lock

@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+"@types/fingerprintjs2@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@types/fingerprintjs2/-/fingerprintjs2-1.5.1.tgz#bd4a3f59692824f1d781307d35414d8591ac61e0"
+
 "@types/history@*":
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
@@ -2463,6 +2467,10 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
+fingerprintjs2@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/fingerprintjs2/-/fingerprintjs2-1.5.1.tgz#010691d425bc37fa0b5a7ec1ae85404bb3f934cb"
+
 flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"