Files

Hein f737b1d11d feat(globalStateStore): implement global state management with persistence

- refactor state structure to include app, layout, navigation, owner, program, session, and user
- add slices for managing program, session, owner, user, layout, navigation, and app states
- create context provider for global state with automatic fetching and throttling
- implement persistence using IndexedDB with localStorage fallback
- add comprehensive README documentation for usage and API

2026-02-07 20:03:27 +02:00

3.0 KiB

Raw Blame History

GlobalStateStore

Zustand-based global state management with automatic persistence.

Quick Start

import {
  GlobalStateStoreProvider,
  useGlobalStateStore,
  useGlobalStateStoreContext
} from './GlobalStateStore';

// Wrap app with provider
function App() {
  return (
    <GlobalStateStoreProvider
      apiURL="https://api.example.com"
      fetchOnMount={true}
      throttleMs={5000}
    >
      <MyComponent />
    </GlobalStateStoreProvider>
  );
}

// Use in components
function MyComponent() {
  const { program, session, user } = useGlobalStateStore();
  const { refetch } = useGlobalStateStoreContext();

  return (
    <div>
      {program.name}
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

// Outside React
const apiURL = GlobalStateStore.getState().session.apiURL;
GlobalStateStore.getState().setAuthToken('token');

Provider Props

apiURL - Initial API URL (optional)
autoFetch - Enable automatic fetching (default: true)
fetchOnMount - Fetch data when provider mounts (default: true)
throttleMs - Minimum time between fetch calls in milliseconds (default: 0)

Context Hook

useGlobalStateStoreContext() returns:

fetchData(url?) - Throttled fetch function
refetch() - Refetch with current URL

State Slices

program - name, logo, description, tags, version
session - apiURL, authToken, connected, loading, error, parameters, meta
owner - id, name, logo, settings, theme (darkMode, name)
user - username, email, fullNames, isAdmin, avatarUrl, parameters, theme (darkMode, name)
layout - leftBar, rightBar, topBar, bottomBar (each: open, collapsed, pinned, size, menuItems)
navigation - menu, currentPage
app - environment, updatedAt, controls, globals

Actions

Program: setProgram(updates) Session: setSession(updates), setAuthToken(token), setApiURL(url) Owner: setOwner(updates) User: setUser(updates) Layout: setLayout(updates), setLeftBar(updates), setRightBar(updates), setTopBar(updates), setBottomBar(updates) Navigation: setNavigation(updates), setMenu(items), setCurrentPage(page) App: setApp(updates) Complex: fetchData(url?), login(token?), logout()

Custom Fetch

GlobalStateStore.getState().onFetchSession = async (state) => {
  const response = await fetch(`${state.session.apiURL}/session`, {
    headers: { Authorization: `Bearer ${state.session.authToken}` }
  });
  const data = await response.json();

  return {
    program: { name: data.appName, ... },
    user: { id: data.userId, name: data.userName, ... },
    navigation: { menu: data.menu },
  };
};

Persistence

Auto-saves to IndexedDB (localStorage fallback). Auto-loads on initialization. Skips transient data: loading states, errors, controls.

TypeScript

Fully typed with exported types: GlobalState, ProgramState, SessionState, OwnerState, UserState, ThemeSettings, LayoutState, BarState, NavigationState, AppState

3.0 KiB Raw Blame History