next: use runed persisted state

exceptionless · Jan 9, 2025 · 9653a0f · 9653a0f
1 parent 1f7e7aa
commit 9653a0f
Show file tree

Hide file tree

Showing 17 changed files with 121 additions and 177 deletions.
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts
@@ -1,13 +1,30 @@
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { env } from '$env/dynamic/public';
-import { AuthJSONSerializer, persisted } from '$shared/persisted.svelte';
 import { useFetchClient } from '@exceptionless/fetchclient';
+import { PersistedState } from 'runed';
 import { get } from 'svelte/store';
 
 import type { Login, TokenResult } from './models';
 
-export const accessToken = persisted('satellizer_token', null, new AuthJSONSerializer());
+const authSerializer = {
+    deserialize: (value: null | string): null | string => {
+        if (value === '') {
+            return null;
+        }
+
+        return value;
+    },
+    serialize: (value: null | string): string => {
+        if (value === null) {
+            return '';
+        }
+
+        return value;
+    }
+};
+
+export const accessToken = new PersistedState<null | string>('satellizer_token', null, { serializer: authSerializer });
 
 export const enableAccountCreation = env.PUBLIC_ENABLE_ACCOUNT_CREATION === 'true';
 export const facebookClientId = env.PUBLIC_FACEBOOK_APPID;
@@ -98,7 +115,7 @@ export async function login(email: string, password: string) {
     });
 
     if (response.ok && response.data?.token) {
-        accessToken.value = response.data.token;
+        accessToken.current = response.data.token;
     } else if (response.status === 401) {
         response.problem.setErrorMessage('Invalid email or password');
     }
@@ -109,7 +126,7 @@ export async function login(email: string, password: string) {
 export async function logout() {
     const client = useFetchClient();
     await client.get('auth/logout', { expectedStatusCodes: [200, 401] });
-    accessToken.value = null;
+    accessToken.current = null;
 }
 
 async function oauthLogin(options: {
@@ -158,7 +175,7 @@ async function oauthLogin(options: {
     });
 
     if (response.ok && response.data?.token) {
-        accessToken.value = response.data.token;
+        accessToken.current = response.data.token;
         await goto(options.redirectUrl || '/');
     }
 }

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts
@@ -124,7 +124,7 @@ export interface GetStackEventsRequest {
 export function deleteEvent(request: DeleteEventsRequest) {
     const queryClient = useQueryClient();
     return createMutation<WorkInProgressResult, ProblemDetails, void>(() => ({
-        enabled: () => !!accessToken.value && !!request.route.ids?.length,
+        enabled: () => !!accessToken.current && !!request.route.ids?.length,
         mutationFn: async () => {
             const client = useFetchClient();
             const response = await client.deleteJSON<WorkInProgressResult>(`events/${request.route.ids?.join(',')}`);
@@ -145,7 +145,7 @@ export function getCountQuery(request: GetCountRequest) {
     const queryClient = useQueryClient();
 
     return createQuery<CountResult, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value,
+        enabled: () => !!accessToken.current,
         queryClient,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
@@ -165,7 +165,7 @@ export function getCountQuery(request: GetCountRequest) {
 
 export function getEventQuery(request: GetEventRequest) {
     return createQuery<PersistentEvent, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!request.route.id,
+        enabled: () => !!accessToken.current && !!request.route.id,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
             const response = await client.getJSON<PersistentEvent>(`events/${request.route.id}`, {
@@ -186,7 +186,7 @@ export function getProjectCountQuery(request: GetProjectCountRequest) {
     const queryClient = useQueryClient();
 
     return createQuery<CountResult, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!request.route.projectId,
+        enabled: () => !!accessToken.current && !!request.route.projectId,
         queryClient,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
@@ -208,7 +208,7 @@ export function getStackCountQuery(request: GetStackCountRequest) {
     const queryClient = useQueryClient();
 
     return createQuery<CountResult, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!request.route.stackId,
+        enabled: () => !!accessToken.current && !!request.route.stackId,
         queryClient,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
@@ -233,7 +233,7 @@ export function getStackEventsQuery(request: GetStackEventsRequest) {
     const queryClient = useQueryClient();
 
     return createQuery<PersistentEvent[], ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!request.route.stackId,
+        enabled: () => !!accessToken.current && !!request.route.stackId,
         onSuccess: (data: PersistentEvent[]) => {
             data.forEach((event) => {
                 queryClient.setQueryData(queryKeys.id(event.id!), event);

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts
@@ -5,7 +5,6 @@ import TimeAgo from '$comp/formatters/TimeAgo.svelte';
 import { Checkbox } from '$comp/ui/checkbox';
 import { nameof } from '$lib/utils';
 import { DEFAULT_LIMIT } from '$shared/api/api.svelte';
-import { persisted } from '$shared/persisted.svelte';
 import {
     type ColumnDef,
     type ColumnSort,
@@ -17,6 +16,7 @@ import {
     type Updater,
     type VisibilityState
 } from '@tanstack/svelte-table';
+import { PersistedState } from 'runed';
 
 import type { GetEventsMode, GetEventsParams } from '../../api.svelte';
 import type { EventSummaryModel, StackSummaryModel, SummaryModel, SummaryTemplateKeys } from '../summary/index';
@@ -270,15 +270,15 @@ export function getTableContext<TSummaryModel extends SummaryModel<SummaryTempla
 }
 
 function createPersistedTableState<T>(key: string, initialValue: T): [() => T, (updater: Updater<T>) => void] {
-    const persistedValue = persisted<T>(key, initialValue);
+    const persistedValue = new PersistedState<T>(key, initialValue);
 
     return [
-        () => persistedValue.value,
+        () => persistedValue.current,
         (updater: Updater<T>) => {
             if (updater instanceof Function) {
-                persistedValue.value = updater(persistedValue.value);
+                persistedValue.current = updater(persistedValue.current);
             } else {
-                persistedValue.value = updater;
+                persistedValue.current = updater;
             }
         }
     ];

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts
@@ -35,7 +35,7 @@ export function getOrganizationQuery(request: GetOrganizationsRequest) {
     const queryClient = useQueryClient();
 
     return createQuery<ViewOrganization[], ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value,
+        enabled: () => !!accessToken.current,
         onSuccess: (data: ViewOrganization[]) => {
             data.forEach((organization) => {
                 queryClient.setQueryData(queryKeys.id(organization.id!), organization);

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts
@@ -92,7 +92,7 @@ export function getOrganizationProjectsQuery(request: GetOrganizationProjectsReq
     const queryClient = useQueryClient();
 
     return createQuery<ViewProject[], ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!request.route.organizationId,
+        enabled: () => !!accessToken.current && !!request.route.organizationId,
         onSuccess: (data: ViewProject[]) => {
             data.forEach((project) => {
                 queryClient.setQueryData(queryKeys.id(project.id!), project);
@@ -117,7 +117,7 @@ export function getOrganizationProjectsQuery(request: GetOrganizationProjectsReq
 
 export function getProjectQuery(request: GetProjectRequest) {
     return createQuery<ViewProject, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.value && !!request.route.id,
+        enabled: () => !!accessToken.current && !!request.route.id,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
             const response = await client.getJSON<ViewProject>(`projects/${request.route.id}`, {

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/filters.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/filters.svelte.ts
@@ -1,6 +1,5 @@
 import type { PersistentEventKnownTypes } from '$features/events/models';
 import type { StackStatus } from '$features/stacks/models';
-import type { Serializer } from '$shared/persisted.svelte';
 
 export interface IFilter {
     isEmpty(): boolean;
@@ -99,29 +98,6 @@ export class DateFilter implements IFilter {
     }
 }
 
-export class FilterSerializer implements Serializer<IFilter[]> {
-    public deserialize(text: string): IFilter[] {
-        if (!text) {
-            return [];
-        }
-
-        const data: unknown[] = JSON.parse(text);
-        const filters: IFilter[] = [];
-        for (const filterData of data) {
-            const filter = getFilter(filterData as Omit<IFilter, 'isEmpty' | 'reset' | 'toFilter'>);
-            if (filter) {
-                filters.push(filter);
-            }
-        }
-
-        return filters;
-    }
-
-    public serialize(object: IFilter[]): string {
-        return JSON.stringify(object);
-    }
-}
-
 export class KeywordFilter implements IFilter {
     public type: string = 'keyword';
 
@@ -532,6 +508,26 @@ export function filterChanged(filters: IFilter[], updated: IFilter): IFilter[] {
     return processFilterRules(setFilter(filters, updated), updated);
 }
 
+export const filterSerializer = {
+    deserialize: (value: string): IFilter[] => {
+        if (!value) {
+            return [];
+        }
+
+        const data: unknown[] = JSON.parse(value);
+        const filters: IFilter[] = [];
+        for (const filterData of data) {
+            const filter = getFilter(filterData as Omit<IFilter, 'isEmpty' | 'reset' | 'toFilter'>);
+            if (filter) {
+                filters.push(filter);
+            }
+        }
+
+        return filters;
+    },
+    serialize: JSON.stringify
+};
+
 export function filterRemoved(filters: IFilter[], defaultFilters: IFilter[], removed?: IFilter): IFilter[] {
     // If detail is undefined, remove all filters.
     if (!removed) {

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/persisted.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/persisted.svelte.ts