Add basic activity log view

resources/scripts/api/account/activity.ts

@@ -0,0 +1,24 @@
+import useUserSWRContentKey from '@/plugins/useUserSWRContentKey';
+import useSWR, { ConfigInterface, responseInterface } from 'swr';
+import { ActivityLog, Transformers } from '@definitions/user';
+import { AxiosError } from 'axios';
+import http, { PaginatedResult } from '@/api/http';
+import { toPaginatedSet } from '@definitions/helpers';
+
+const useActivityLogs = (page = 1, config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
+    const key = useUserSWRContentKey([ 'account', 'activity', page.toString() ]);
+
+    return useSWR<PaginatedResult<ActivityLog>>(key, async () => {
+        const { data } = await http.get('/api/client/account/activity', {
+            params: {
+                include: [ 'actor' ],
+                sort: '-timestamp',
+                page: page,
+            },
+        });
+
+        return toPaginatedSet(data, Transformers.toActivityLog);
+    }, { revalidateOnMount: false, ...(config || {}) });
+};
+
+export { useActivityLogs };

resources/scripts/api/definitions/helpers.ts

@@ -1,13 +1,20 @@
-import { FractalResponseData, FractalResponseList } from '@/api/http';
+import {
+    FractalPaginatedResponse,
+    FractalResponseData,
+    FractalResponseList,
+    getPaginationSet,
+    PaginatedResult,
+} from '@/api/http';
+import { Model } from '@definitions/index';
 
-type Transformer<T> = (callback: FractalResponseData) => T;
+type TransformerFunc<T> = (callback: FractalResponseData) => T;
 
 const isList = (data: FractalResponseList | FractalResponseData): data is FractalResponseList => data.object === 'list';
 
-function transform<T, M>(data: null | undefined, transformer: Transformer<T>, missing?: M): M;
-function transform<T, M>(data: FractalResponseData | null | undefined, transformer: Transformer<T>, missing?: M): T | M;
-function transform<T, M>(data: FractalResponseList | null | undefined, transformer: Transformer<T>, missing?: M): T[] | M;
-function transform<T> (data: FractalResponseData | FractalResponseList | null | undefined, transformer: Transformer<T>, missing = undefined) {
+function transform<T, M>(data: null | undefined, transformer: TransformerFunc<T>, missing?: M): M;
+function transform<T, M>(data: FractalResponseData | null | undefined, transformer: TransformerFunc<T>, missing?: M): T | M;
+function transform<T, M>(data: FractalResponseList | FractalPaginatedResponse | null | undefined, transformer: TransformerFunc<T>, missing?: M): T[] | M;
+function transform<T> (data: FractalResponseData | FractalResponseList | FractalPaginatedResponse | null | undefined, transformer: TransformerFunc<T>, missing = undefined) {
     if (data === undefined || data === null) {
         return missing;
     }
@@ -23,4 +30,14 @@ function transform<T> (data: FractalResponseData | FractalResponseList | null |
     return transformer(data);
 }
 
-export { transform };
+function toPaginatedSet<T extends TransformerFunc<Model>> (
+    response: FractalPaginatedResponse,
+    transformer: T,
+): PaginatedResult<ReturnType<T>> {
+    return {
+        items: transform(response, transformer) as ReturnType<T>[],
+        pagination: getPaginationSet(response.meta.pagination),
+    };
+}
+
+export { transform, toPaginatedSet };

resources/scripts/api/definitions/user/transformers.ts

@@ -3,7 +3,7 @@ import { FractalResponseData } from '@/api/http';
 import { transform } from '@definitions/helpers';
 
 export default class Transformers {
-    static toSSHKey (data: Record<any, any>): Models.SSHKey {
+    static toSSHKey = (data: Record<any, any>): Models.SSHKey => {
         return {
             name: data.name,
             publicKey: data.public_key,
@@ -12,7 +12,7 @@ export default class Transformers {
         };
     }
 
-    static toUser ({ attributes }: FractalResponseData): Models.User {
+    static toUser = ({ attributes }: FractalResponseData): Models.User => {
         return {
             uuid: attributes.uuid,
             username: attributes.username,
@@ -27,7 +27,7 @@ export default class Transformers {
         };
     }
 
-    static toActivityLog ({ attributes }: FractalResponseData): Models.ActivityLog {
+    static toActivityLog = ({ attributes }: FractalResponseData): Models.ActivityLog => {
         const { actor } = attributes.relationships || {};
 
         return {

resources/scripts/api/http.ts

@@ -77,12 +77,26 @@ export interface FractalResponseList {
     data: FractalResponseData[];
 }
 
+export interface FractalPaginatedResponse extends FractalResponseList {
+    meta: {
+        pagination: {
+            total: number;
+            count: number;
+            /* eslint-disable camelcase */
+            per_page: number;
+            current_page: number;
+            total_pages: number;
+            /* eslint-enable camelcase */
+        };
+    }
+}
+
 export interface PaginatedResult<T> {
     items: T[];
     pagination: PaginationDataSet;
 }
 
-interface PaginationDataSet {
+export interface PaginationDataSet {
     total: number;
     count: number;
     perPage: number;
@@ -99,3 +113,43 @@ export function getPaginationSet (data: any): PaginationDataSet {
         totalPages: data.total_pages,
     };
 }
+
+type QueryBuilderFilterValue = string | number | boolean | null;
+
+export interface QueryBuilderParams<FilterKeys extends string = string, SortKeys extends string = string> {
+    filters?: {
+        [K in FilterKeys]?: QueryBuilderFilterValue | Readonly<QueryBuilderFilterValue[]>;
+    };
+    sorts?: {
+        [K in SortKeys]?: -1 | 0 | 1 | 'asc' | 'desc' | null;
+    };
+}
+
+/**
+ * Helper function that parses a data object provided and builds query parameters
+ * for the Laravel Query Builder package automatically. This will apply sorts and
+ * filters deterministically based on the provided values.
+ */
+export const withQueryBuilderParams = (data?: QueryBuilderParams): Record<string, unknown> => {
+    if (!data) return {};
+
+    const filters = Object.keys(data.filters || {}).reduce((obj, key) => {
+        const value = data.filters?.[key];
+
+        return !value || value === '' ? obj : { ...obj, [`filter[${key}]`]: value };
+    }, {} as NonNullable<QueryBuilderParams['filters']>);
+
+    const sorts = Object.keys(data.sorts || {}).reduce((arr, key) => {
+        const value = data.sorts?.[key];
+        if (!value || ![ 'asc', 'desc', 1, -1 ].includes(value)) {
+            return arr;
+        }
+
+        return [ ...arr, (value === -1 || value === 'desc' ? '-' : '') + key ];
+    }, [] as string[]);
+
+    return {
+        ...filters,
+        sorts: !sorts.length ? undefined : sorts.join(','),
+    };
+};