5 files changed, 62 insertions, 3 deletions
diff --git a/client/utils/api_context.js b/client/utils/api_context.js
new file mode 100644
index 0000000..6560f2d
--- /dev/null
+++ b/client/utils/api_context.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ApiContext = createContext({});
diff --git a/client/utils/auth_context.js b/client/utils/auth_context.js
new file mode 100644
index 0000000..426cf75
--- /dev/null
+++ b/client/utils/auth_context.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const AuthContext = createContext({});
diff --git a/client/utils/settings_context.js b/client/utils/settings_context.js
deleted file mode 100644
index 6c088b2..0000000
--- a/client/utils/settings_context.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const SettingsContext = createContext({});
diff --git a/client/utils/use_api.js b/client/utils/use_api.js
new file mode 100644
index 0000000..aab0293
--- /dev/null
+++ b/client/utils/use_api.js
@@ -0,0 +1,37 @@
+import { useRef } from 'react';
+
+export const useApi = (authToken) => {
+  const apiRef = useRef(new Api());
+  apiRef.current.authToken = authToken;
+  return apiRef.current;
+};
+
+export class Api {
+  authToken = null;
+
+  makeRequest(url, method, body) {
+    return fetch(url, {
+      method,
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+      },
+      body,
+    }).then((res) => res.json());
+  }
+
+  get(url) {
+    return this.makeRequest(url, 'GET');
+  }
+
+  post(url, body = {}) {
+    return this.makeRequest(url, 'POST', body);
+  }
+
+  put(url, body = {}) {
+    return this.makeRequest(url, 'PUT', body);
+  }
+
+  del(url) {
+    return this.makeRequest(url, 'DELETE');
+  }
+}
diff --git a/client/utils/use_jwt_refresh.js b/client/utils/use_jwt_refresh.js
new file mode 100644
index 0000000..11d4122
--- /dev/null
+++ b/client/utils/use_jwt_refresh.js
@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+
+export const useJwtRefresh = (authToken, setAuthToken) => {
+  const refreshTimer = useRef(null);
+  useEffect(() => {
+    clearTimeout(refreshTimer.current);
+    if (authToken) {
+      refreshTimer.current = setTimeout(async () => {
+        const result = await fetch('/refresh_token').then((res) => res.json());
+        if (result.token) {
+          setAuthToken(result.token);
+        } else {
+          setAuthToken(null);
+        }
+      }, 60000 * 10); // 10 minutes
+    }
+    return () => clearTimeout(refreshTimer.current);
+  }, [authToken]);
+};