Fix SWR key logic

Author: DaneEveritt

resources/scripts/api/account/activity.ts

@@ -1,18 +1,18 @@
-import useUserSWRContentKey from '@/plugins/useUserSWRContentKey';
 import useSWR, { ConfigInterface, responseInterface } from 'swr';
 import { ActivityLog, Transformers } from '@definitions/user';
 import { AxiosError } from 'axios';
 import http, { PaginatedResult, QueryBuilderParams, withQueryBuilderParams } from '@/api/http';
 import { toPaginatedSet } from '@definitions/helpers';
 import useFilteredObject from '@/plugins/useFilteredObject';
+import { useUserSWRKey } from '@/plugins/useSWRKey';
 
 export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
 
 const useActivityLogs = (
     filters?: ActivityLogFilters,
     config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>
 ): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
-    const key = useUserSWRContentKey(['account', 'activity', JSON.stringify(useFilteredObject(filters || {}))]);
+    const key = useUserSWRKey(['account', 'activity', JSON.stringify(useFilteredObject(filters || {}))]);
 
     return useSWR<PaginatedResult<ActivityLog>>(
         key,

resources/scripts/api/account/ssh-keys.ts

@@ -1,11 +1,11 @@
 import useSWR, { ConfigInterface } from 'swr';
-import useUserSWRContentKey from '@/plugins/useUserSWRContentKey';
 import http, { FractalResponseList } from '@/api/http';
 import { SSHKey, Transformers } from '@definitions/user';
 import { AxiosError } from 'axios';
+import { useUserSWRKey } from '@/plugins/useSWRKey';
 
 const useSSHKeys = (config?: ConfigInterface<SSHKey[], AxiosError>) => {
-    const key = useUserSWRContentKey(['account', 'ssh-keys']);
+    const key = useUserSWRKey(['account', 'ssh-keys']);
 
     return useSWR(
         key,

resources/scripts/api/server/activity.ts

@@ -4,6 +4,7 @@ import { AxiosError } from 'axios';
 import http, { PaginatedResult, QueryBuilderParams, withQueryBuilderParams } from '@/api/http';
 import { toPaginatedSet } from '@definitions/helpers';
 import useFilteredObject from '@/plugins/useFilteredObject';
+import { useServerSWRKey } from '@/plugins/useSWRKey';
 import { ServerContext } from '@/state/server';
 
 export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
@@ -12,10 +13,11 @@ const useActivityLogs = (
     filters?: ActivityLogFilters,
     config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>
 ): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
-    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const uuid = ServerContext.useStoreState((state) => state.server.data?.uuid);
+    const key = useServerSWRKey(['activity', useFilteredObject(filters || {})]);
 
     return useSWR<PaginatedResult<ActivityLog>>(
-        ['server:activty', uuid, useFilteredObject(filters || {})],
+        key,
         async () => {
             const { data } = await http.get(`/api/client/servers/${uuid}/activity`, {
                 params: {

resources/scripts/plugins/useSWRKey.ts

@@ -0,0 +1,33 @@
+import { useDeepCompareMemo } from '@/plugins/useDeepCompareMemo';
+import { ServerContext } from '@/state/server';
+import { useStoreState } from '@/state/hooks';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type Context = string | string[] | (string | number | null | {})[];
+
+function useSWRKey(context: Context, prefix: string | null = null): string {
+    const key = useDeepCompareMemo((): string => {
+        return (Array.isArray(context) ? context : [context]).map((value) => JSON.stringify(value)).join(':');
+    }, [context]);
+
+    if (!key.trim().length) {
+        throw new Error('Must provide a valid context key to "useSWRKey".');
+    }
+
+    return `swr::${prefix ? `${prefix}:` : ''}${key.trim()}`;
+}
+
+function useServerSWRKey(context: Context): string {
+    const uuid = ServerContext.useStoreState((state) => state.server.data?.uuid);
+
+    return useSWRKey(context, `server:${uuid}`);
+}
+
+function useUserSWRKey(context: Context): string {
+    const uuid = useStoreState((state) => state.user.data?.uuid);
+
+    return useSWRKey(context, `user:${uuid}`);
+}
+
+export default useSWRKey;
+export { useServerSWRKey, useUserSWRKey };