User profile request caching

src/components/Sidebar.tsx

@@ -34,6 +34,7 @@ import { StringMap } from "@/types/typeUtils";
 import SettingsDialog from "./settings/SettingsDialog";
 import Link from "next/link";
 import axios from "axios";
+import { get, Response } from "@/lib/request";
 
 export default function AppSidebar({
   children,
@@ -327,15 +328,15 @@ function getUser(
 ) {
   if (userList[id]) return userList[id];
 
-  axios
-    .get(`/api/profile/?id=${id}`)
-    ?.then((res) => {
-      console.log("Fetched user", res.data);
-      setUserList((prev) => {
-        prev[id] = res.data as UserProfile;
-        return prev;
-      });
-    })
+  const onResponse = (res: Response<UserProfile>) => {
+    setUserList((prev) => {
+      prev[id] = res.data as UserProfile;
+      return prev;
+    });
+  };
+
+  get(`/api/profile/?id=${id}`, onResponse)
+    ?.then(onResponse)
     .catch((e) => {
       console.error(e);
     });

src/hooks/get-user.ts

@@ -1,10 +1,10 @@
 "use client";
 
 import { ProfileSettings } from "@/types/settings";
-import axios from "axios";
 import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import { get } from "@/lib/request";
 
 export interface UserProfile extends ProfileSettings {
   id: string;
@@ -23,9 +23,7 @@ export default function useUser() {
       }
 
       try {
-        const res = (await axios.get("/api/profile")).data as UserProfile;
-
-        setUser(res);
+        setUser((await get("/api/profile")).data);
       } catch {
         router.push("/login");
       }

src/lib/auth.ts

@@ -1,6 +1,7 @@
 import { Message, Server } from "@/types/types";
 import axios from "axios";
 import { Dispatch, RefObject, SetStateAction } from "react";
+import { get } from "./request";
 
 export default async function auth(
   id: string,
@@ -12,8 +13,7 @@ export default async function auth(
 ) {
   console.log("Authenticating with server id:", id);
 
-  const ip = ((await axios.get(`/api/server/${id}`)).data as any)
-    .address as string;
+  const ip = ((await get(`/api/server/${id}`)).data as any).address as string;
 
   console.log("Authenticating with server at:", ip);
   const server_auth = (

src/lib/request.ts

@@ -0,0 +1,32 @@
+import Axios from "axios";
+import { CacheRequestConfig, setupCache } from "axios-cache-interceptor";
+
+const axiosInstance = Axios.create({});
+const axios = setupCache(axiosInstance);
+
+export interface Response<T> {
+  data: T;
+  status: number;
+  statusText: string;
+  headers: { [index: string]: any };
+  cached: boolean;
+}
+
+export async function get<T = any, D = any>(
+  url: string,
+  onResponse?: (response: Response<T>) => void,
+  config?: CacheRequestConfig<T, D>
+): Promise<Response<T>> {
+  const response = (await axios.get<T, D>(
+    url,
+    config
+  )) as unknown as Response<T>;
+
+  if (onResponse && response.cached) {
+    Axios.get(url).then((response) =>
+      onResponse(response as unknown as Response<T>)
+    );
+  }
+
+  return response;
+}