refactor: add axios wrapper for authenticated requests

Author: angristan

src/components/Benchmarks/CreateBenchmark.tsx

@@ -127,7 +127,6 @@ const CreateBenchmark: React.FC = () => {
       </div>
     </Page>
   );
-  // }
 };
 
 export default CreateBenchmark;

src/components/Login.tsx

@@ -2,7 +2,7 @@ import { LockClosedIcon } from '@heroicons/react/solid';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { login } from '../api/auth';
-import useToken from '../hooks/token';
+import { useToken } from '../hooks/token';
 
 const Login: React.FC = () => {
   const history = useHistory();

src/components/Page/Navbar.tsx

@@ -3,7 +3,7 @@ import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
 import React, { Fragment } from 'react';
 import Gravatar from 'react-gravatar';
 import { Link, useHistory } from 'react-router-dom';
-import useToken from '../../hooks/token';
+import { useToken } from '../../hooks/token';
 import useProfile from '../../hooks/users';
 
 const navigation = [

src/components/Register.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { login, register } from '../api/auth';
-import useToken from '../hooks/token';
+import { useToken } from '../hooks/token';
 import Label from './utils/Label';
 
 const Register: React.FC = () => {

src/components/Routing/PrivateRoute.tsx

@@ -5,7 +5,7 @@ import {
   RouteComponentProps,
   RouteProps,
 } from 'react-router-dom';
-import useToken from '../../hooks/token';
+import { useToken } from '../../hooks/token';
 
 interface PrivateRouteProps extends RouteProps {
   component:

src/components/utils/request.ts

@@ -0,0 +1,23 @@
+import axios, { AxiosRequestConfig } from 'axios';
+import { getToken } from '../../hooks/token';
+
+const client = axios.create({
+  baseURL: process.env.REACT_APP_API_ENDPOINT,
+});
+
+// Wrapper around axios that adds the JWT token in req header
+const authenticatedRequest = (options: AxiosRequestConfig) => {
+  client.defaults.headers.common.Authorization = `Bearer ${getToken()}`;
+
+  const onSuccess = (response: any) => response;
+  const onError = (error: any) => {
+    // optionaly catch errors and add some additional logging here
+    return error;
+  };
+
+  return client({ timeout: 5000, ...options })
+    .then(onSuccess)
+    .catch(onError);
+};
+
+export default authenticatedRequest;

src/hooks/benchmark.ts

@@ -1,38 +1,23 @@
-import axios, { AxiosResponse } from 'axios';
 import { useQuery } from 'react-query';
 import benchmarkModel from '../components/Benchmarks/BenchmarkModel';
-import useToken from './token';
+import authenticatedRequest from '../components/utils/request';
 
 export default function useBenchmarkDetail(id: string) {
-  const { token } = useToken();
-
   return useQuery<benchmarkModel, Error>(`benchmark-${id}`, async () => {
     if (id) {
-      const { data } = await axios.get(
-        `${process.env.REACT_APP_API_ENDPOINT}/benchmarks/${id}`,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
-      );
+      const { data } = await authenticatedRequest({
+        url: `benchmarks/${id}`,
+      });
       return data;
     }
   });
 }
 
 export function useBenchmarkSList() {
-  const { token } = useToken();
-
   return useQuery<benchmarkModel[], Error>(`benchmark`, async () => {
-    const { data } = await axios.get(
-      `${process.env.REACT_APP_API_ENDPOINT}/benchmarks`,
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      },
-    );
+    const { data } = await authenticatedRequest({
+      url: `benchmarks`,
+    });
     return data;
   });
 }
@@ -42,15 +27,10 @@ export async function createBenchmark(bench: {
   subject: string;
   difficulty: string;
 }): Promise<benchmarkModel> {
-  const res: AxiosResponse<benchmarkModel> = await axios.post(
-    `${process.env.REACT_APP_API_ENDPOINT}/benchmarks`,
-    bench,
-    {
-      timeout: 5000,
-      headers: {
-        Authorization: 'Bearer ' + localStorage.getItem('access_token'), // FIX ME
-      },
-    },
-  );
-  return res.data;
+  const { data } = await authenticatedRequest({
+    url: `/benchmarks`,
+    method: 'POST',
+    data: bench,
+  });
+  return data;
 }

src/hooks/submissions.ts

@@ -1,7 +1,7 @@
-import axios, { AxiosResponse } from 'axios';
 import { useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
-import useToken from './token';
+import authenticatedRequest from '../components/utils/request';
+import { useToken } from './token';
 
 function useProcessInterval({
   onSuccess,
@@ -22,35 +22,27 @@ function useProcessInterval({
     code: string;
     benchmarkId: string;
   }) {
-    const response = await fetch(
-      `${process.env.REACT_APP_API_ENDPOINT}/submissions`,
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          language: 'cpython3',
-          code: code,
-          benchmarkId: benchmarkId,
-        }),
+    const { data } = await authenticatedRequest({
+      url: `/submissions`,
+      method: 'POST',
+      data: {
+        language: 'cpython3',
+        code: code,
+        benchmarkId: benchmarkId,
       },
-    );
-    return await response.json();
+    });
+    return data;
   }
 
   const { mutate } = useMutation(createJob, {
     onMutate: () => {
       setIsPollingEnabled(true);
     },
     onError: (error) => {
-      console.error(error);
       setIsPollingEnabled(false);
       onError();
     },
     onSuccess: (data) => {
-      console.log(data);
       setProcessId(data.id);
     },
   });
@@ -59,19 +51,18 @@ function useProcessInterval({
   const { isLoading, data } = useQuery(
     ['processProgress', token, processId],
     async () => {
-      const res: AxiosResponse<{
-        status: string;
-        stdout: string;
-        stderr: string;
-      }> = await axios.get(
-        `${process.env.REACT_APP_API_ENDPOINT}/submissions/${processId}`,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
-      );
-      return res.data;
+      const {
+        data,
+      }: {
+        data: {
+          status: string;
+          stdout: string;
+          stderr: string;
+        };
+      } = await authenticatedRequest({
+        url: `submissions/${processId}`,
+      });
+      return data;
     },
     {
       onSuccess: (data) => {
@@ -101,23 +92,16 @@ export function useLastSubmissionForUser(
   benchmarkId: string,
   language: string,
 ) {
-  const { token } = useToken();
-
   return useQuery<{ code: string }, Error>(
     `last-submission-${benchmarkId}-${language}`,
     async () => {
       if (benchmarkId && language) {
-        const { data } = await axios.get(
-          `${process.env.REACT_APP_API_ENDPOINT}/benchmarks/${benchmarkId}/submissions/last`,
-          {
-            headers: {
-              Authorization: `Bearer ${token}`,
-            },
-            params: {
-              language,
-            },
+        const { data } = await authenticatedRequest({
+          url: `benchmarks/${benchmarkId}/submissions/last`,
+          params: {
+            language,
           },
-        );
+        });
         return data;
       }
     },

src/hooks/token.ts

@@ -1,13 +1,14 @@
 import { useState } from 'react';
 
-export default function useToken() {
-  function getToken(): any {
-    const tokenString = localStorage.getItem('access_token');
-    if (tokenString) {
-      return tokenString;
-    }
+function getToken(): string {
+  const tokenString = localStorage.getItem('access_token');
+  if (tokenString) {
+    return tokenString;
   }
+  return ''; // FIX ME
+}
 
+function useToken() {
   function setToken(userToken: string) {
     localStorage.setItem('access_token', userToken);
   }
@@ -18,3 +19,5 @@ export default function useToken() {
     token,
   };
 }
+
+export { getToken, useToken };

src/hooks/users.ts

@@ -1,6 +1,6 @@
-import axios from 'axios';
 import { useQuery } from 'react-query';
-import useToken from './token';
+import authenticatedRequest from '../components/utils/request';
+import { useToken } from './token';
 
 function useProfile() {
   const { token } = useToken();
@@ -18,14 +18,9 @@ function useProfile() {
   return useQuery<{ email: string }, Error>('profile', async () => {
     if (token) {
       const username = parseJwt(token).username;
-      const { data } = await axios.get(
-        `${process.env.REACT_APP_API_ENDPOINT}/users/${username}`,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
-      );
+      const { data } = await authenticatedRequest({
+        url: `users/${username}`,
+      });
       return data;
     }
   });