docs(changeset): feat(GlobalStateStore): add initialization state and update actions

This commit is contained in:
2026-02-07 23:08:52 +02:00
parent c2113357f2
commit 210a1d44e7
6 changed files with 189 additions and 109 deletions

View File

@@ -1,7 +1,7 @@
{ {
"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json", "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
"changelog": "@changesets/changelog-git", "changelog": "@changesets/changelog-git",
"commit": false, "commit": true,
"fixed": [], "fixed": [],
"linked": [], "linked": [],
"access": "public", "access": "public",

View File

@@ -0,0 +1,5 @@
---
'@warkypublic/oranguru': patch
---
feat(GlobalStateStore): add initialization state and update actions

View File

@@ -20,6 +20,7 @@ import type {
import { loadStorage, saveStorage } from './GlobalStateStore.utils'; import { loadStorage, saveStorage } from './GlobalStateStore.utils';
const initialState: GlobalState = { const initialState: GlobalState = {
initialized: false,
layout: { layout: {
bottomBar: { open: false }, bottomBar: { open: false },
leftBar: { open: false }, leftBar: { open: false },
@@ -141,13 +142,14 @@ const createNavigationSlice = (set: SetState) => ({
})), })),
}); });
const createComplexActions = (set: SetState, get: GetState) => ({ const createComplexActions = (set: SetState, get: GetState) => {
fetchData: async (url?: string) => { // Internal implementation without lock
const fetchDataInternal = async (url?: string) => {
try { try {
set((state: GlobalState) => ({ set((state: GlobalState) => ({
session: { session: {
...state.session, ...state.session,
apiURL: url ?? state.session.apiURL, apiURL: url || state.session.apiURL,
loading: true, loading: true,
}, },
})); }));
@@ -190,6 +192,15 @@ const createComplexActions = (set: SetState, get: GetState) => ({
}, },
})); }));
} }
};
return {
fetchData: async (url?: string) => {
// Wait for initialization to complete
await waitForInitialization();
// Use lock to prevent concurrent fetchData calls
return withOperationLock(() => fetchDataInternal(url));
}, },
isLoggedIn: (): boolean => { isLoggedIn: (): boolean => {
@@ -203,7 +214,12 @@ const createComplexActions = (set: SetState, get: GetState) => ({
return true; return true;
}, },
login: async (authToken?: string) => { login: async (authToken?: string, user?: Partial<UserState>) => {
// Wait for initialization to complete
await waitForInitialization();
// Use lock to prevent concurrent auth operations
return withOperationLock(async () => {
try { try {
set((state: GlobalState) => ({ set((state: GlobalState) => ({
session: { session: {
@@ -213,8 +229,12 @@ const createComplexActions = (set: SetState, get: GetState) => ({
loading: true, loading: true,
loggedIn: true, loggedIn: true,
}, },
user: {
...state.user,
...user,
},
})); }));
await get().fetchData();
const currentState = get(); const currentState = get();
const result = await currentState.onLogin?.(currentState); const result = await currentState.onLogin?.(currentState);
if (result) { if (result) {
@@ -226,6 +246,8 @@ const createComplexActions = (set: SetState, get: GetState) => ({
user: result.user ? { ...state.user, ...result.user } : state.user, user: result.user ? { ...state.user, ...result.user } : state.user,
})); }));
} }
// Call internal version to avoid nested lock
await fetchDataInternal();
} catch (e) { } catch (e) {
set((state: GlobalState) => ({ set((state: GlobalState) => ({
session: { session: {
@@ -244,9 +266,15 @@ const createComplexActions = (set: SetState, get: GetState) => ({
}, },
})); }));
} }
});
}, },
logout: async () => { logout: async () => {
// Wait for initialization to complete
await waitForInitialization();
// Use lock to prevent concurrent auth operations
return withOperationLock(async () => {
try { try {
set((state: GlobalState) => ({ set((state: GlobalState) => ({
...initialState, ...initialState,
@@ -258,7 +286,7 @@ const createComplexActions = (set: SetState, get: GetState) => ({
loggedIn: false, loggedIn: false,
}, },
})); }));
await get().fetchData();
const currentState = get(); const currentState = get();
const result = await currentState.onLogout?.(currentState); const result = await currentState.onLogout?.(currentState);
if (result) { if (result) {
@@ -270,6 +298,8 @@ const createComplexActions = (set: SetState, get: GetState) => ({
user: result.user ? { ...state.user, ...result.user } : state.user, user: result.user ? { ...state.user, ...result.user } : state.user,
})); }));
} }
// Call internal version to avoid nested lock
await fetchDataInternal();
} catch (e) { } catch (e) {
set((state: GlobalState) => ({ set((state: GlobalState) => ({
session: { session: {
@@ -287,8 +317,43 @@ const createComplexActions = (set: SetState, get: GetState) => ({
}, },
})); }));
} }
});
}, },
}); };
};
// State management flags and locks - must be defined before store creation
let isStorageInitialized = false;
let initializationPromise: null | Promise<void> = null;
let operationLock: Promise<void> = Promise.resolve();
// Helper to wait for initialization - must be defined before store creation
const waitForInitialization = async (): Promise<void> => {
if (initializationPromise) {
await initializationPromise;
}
};
// Helper to ensure async operations run sequentially
const withOperationLock = async <T>(operation: () => Promise<T>): Promise<T> => {
const currentLock = operationLock;
let releaseLock: () => void;
// Create new lock promise
operationLock = new Promise<void>((resolve) => {
releaseLock = resolve;
});
try {
// Wait for previous operation to complete
await currentLock;
// Run the operation
return await operation();
} finally {
// Release the lock
releaseLock!();
}
};
const GlobalStateStore = createStore<GlobalStateStoreType>((set, get) => ({ const GlobalStateStore = createStore<GlobalStateStoreType>((set, get) => ({
...initialState, ...initialState,
@@ -301,33 +366,40 @@ const GlobalStateStore = createStore<GlobalStateStoreType>((set, get) => ({
...createComplexActions(set, get), ...createComplexActions(set, get),
})); }));
// Flag to prevent saving during initial load // Initialize storage and load saved state
let isInitialLoad = true; initializationPromise = loadStorage()
loadStorage()
.then((state) => { .then((state) => {
GlobalStateStore.setState((current) => ({ // Merge loaded state with initial state
GlobalStateStore.setState(
(current) => ({
...current, ...current,
...state, ...state,
initialized: true,
session: { session: {
...current.session, ...current.session,
...state.session, ...state.session,
connected: true, connected: true,
loading: false, loading: false,
}, },
})); }),
true // Replace state completely to avoid triggering subscription during init
);
}) })
.catch((e) => { .catch((e) => {
console.error('Error loading storage:', e); console.error('Error loading storage:', e);
// Mark as initialized even on error so app doesn't hang
GlobalStateStore.setState({ initialized: true });
}) })
.finally(() => { .finally(() => {
// Enable saving after initial load completes // Mark initialization as complete
isInitialLoad = false; isStorageInitialized = true;
initializationPromise = null;
}); });
// Subscribe to state changes and persist to storage
// Only saves after initialization is complete
GlobalStateStore.subscribe((state) => { GlobalStateStore.subscribe((state) => {
// Skip saving during initial load if (!isStorageInitialized) {
if (isInitialLoad) {
return; return;
} }

View File

@@ -18,6 +18,7 @@ type DatabaseDetail = {
type ExtractState<S> = S extends { getState: () => infer X } ? X : never; type ExtractState<S> = S extends { getState: () => infer X } ? X : never;
interface GlobalState { interface GlobalState {
initialized: boolean;
layout: LayoutState; layout: LayoutState;
navigation: NavigationState; navigation: NavigationState;
owner: OwnerState; owner: OwnerState;
@@ -31,7 +32,7 @@ interface GlobalStateActions {
fetchData: (url?: string) => Promise<void>; fetchData: (url?: string) => Promise<void>;
isLoggedIn: () => boolean; isLoggedIn: () => boolean;
login: (authToken?: string) => Promise<void>; login: (authToken?: string, user?: Partial<UserState>) => Promise<void>;
logout: () => Promise<void>; logout: () => Promise<void>;
// Callbacks for custom logic // Callbacks for custom logic
onFetchSession?: (state: Partial<GlobalState>) => Promise<Partial<GlobalState>>; onFetchSession?: (state: Partial<GlobalState>) => Promise<Partial<GlobalState>>;

View File

@@ -14,6 +14,7 @@ import { get, set } from 'idb-keyval';
describe('GlobalStateStore.utils', () => { describe('GlobalStateStore.utils', () => {
const mockState: GlobalState = { const mockState: GlobalState = {
initialized: false,
layout: { layout: {
bottomBar: { open: false }, bottomBar: { open: false },
leftBar: { open: false }, leftBar: { open: false },

View File

@@ -6,6 +6,7 @@ const STORAGE_KEY = 'APP_GLO';
const SKIP_PATHS = new Set([ const SKIP_PATHS = new Set([
'app.controls', 'app.controls',
'initialized',
'session.connected', 'session.connected',
'session.error', 'session.error',
'session.loading', 'session.loading',