Merge pull request #38 from feyishola/feat/state-mgt-arch

state management feature implemented

Author: LaGodxy

src/hooks/usePropertySearch.ts

@@ -32,6 +32,7 @@ export function usePropertySearch() {
     setProperties,
     setLoading,
     setError,
+    lastUpdated,
   } = useSearchStore();
 
   // Initialize from URL parameters on mount
@@ -122,6 +123,7 @@ export function usePropertySearch() {
     totalPages,
     isLoading,
     error,
+    lastUpdated,
 
     // Actions
     setFilter: handleFilterChange,

src/store/base.ts

@@ -0,0 +1,105 @@
+import { create } from 'zustand';
+import { persist, PersistOptions } from 'zustand/middleware';
+
+// Base state interface for common properties
+export interface BaseState {
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number | null;
+}
+
+// Base actions interface for common operations
+export interface BaseActions<T = {}> {
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  clearError: () => void;
+  setLastUpdated: (timestamp: number) => void;
+  reset: () => void;
+}
+
+// Base store type combining state and actions
+export type BaseStore<T extends BaseState> = T & BaseActions;
+
+// Store configuration options
+export interface StoreConfig {
+  persist?: boolean;
+  persistOptions?: PersistOptions<any, any>;
+  name: string;
+}
+
+// Enhanced create function with base functionality
+export const createBaseStore = <
+  T extends BaseState,
+  A extends BaseActions
+>(
+  initialState: T,
+  actions: (set: any, get: any) => A,
+  config?: StoreConfig
+) => {
+  const store = (set: any, get: any) => ({
+    ...initialState,
+    ...actions(set, get),
+  });
+
+  if (config?.persist) {
+    return create<BaseStore<T> & A>()(
+      persist(store, {
+        name: config.name,
+        ...config.persistOptions,
+      })
+    );
+  }
+
+  return create<BaseStore<T> & A>()(store);
+};
+
+// Selector helpers for performance optimization
+export const createSelector = <T, R>(
+  selector: (state: T) => R
+): ((state: T) => R) => selector;
+
+// Async action wrapper for consistent error handling
+export const withAsyncAction = async <T>(
+  action: () => Promise<T>,
+  setError: (error: string | null) => void,
+  setLoading: (loading: boolean) => void
+): Promise<T> => {
+  try {
+    setLoading(true);
+    setError(null);
+    const result = await action();
+    return result;
+  } catch (error: any) {
+    const errorMessage = error?.message || 'An unknown error occurred';
+    setError(errorMessage);
+    throw error;
+  } finally {
+    setLoading(false);
+  }
+};
+
+// State persistence utilities
+export const clearAllPersistedState = () => {
+  Object.keys(localStorage).forEach(key => {
+    if (key.startsWith('propchain-')) {
+      localStorage.removeItem(key);
+    }
+  });
+};
+
+// Memoization helper for derived state
+export const createMemoizedSelector = <T, R>(
+  selector: (state: T) => R,
+  equalityFn: (a: R, b: R) => boolean = Object.is
+) => {
+  let lastResult: R | undefined;
+  let lastInput: T | undefined;
+
+  return (state: T): R => {
+    if (lastInput === undefined || !equalityFn(selector(lastInput), selector(state))) {
+      lastResult = selector(state);
+      lastInput = state;
+    }
+    return lastResult!;
+  };
+};

src/store/debug.ts

@@ -0,0 +1,268 @@
+// State debugging and monitoring utilities
+
+// Interface for state change logging
+export interface StateLogEntry {
+  timestamp: number;
+  storeName: string;
+  action: string;
+  prevState: any;
+  nextState: any;
+  payload?: any;
+}
+
+// Global state logger
+class StateLogger {
+  private logs: StateLogEntry[] = [];
+  private maxSize: number;
+  private isEnabled: boolean;
+
+  constructor(maxSize: number = 1000) {
+    this.maxSize = maxSize;
+    this.isEnabled = process.env.NODE_ENV !== 'production';
+  }
+
+  public log(entry: StateLogEntry): void {
+    if (!this.isEnabled) return;
+
+    this.logs.push(entry);
+
+    // Trim logs if they exceed max size
+    if (this.logs.length > this.maxSize) {
+      this.logs = this.logs.slice(-this.maxSize);
+    }
+
+    // Also log to console for immediate visibility during development
+    if (process.env.NODE_ENV !== 'production') {
+      console.group(`%c${entry.storeName} - ${entry.action}`, 'color: #008800; font-weight: bold;');
+      console.log('%cPrevious State:', 'color: #999;', entry.prevState);
+      console.log('%cNext State:', 'color: #008800; font-weight: bold;', entry.nextState);
+      if (entry.payload) {
+        console.log('%cPayload:', 'color: #000088;', entry.payload);
+      }
+      console.groupEnd();
+    }
+  }
+
+  public getLogs(): StateLogEntry[] {
+    return [...this.logs];
+  }
+
+  public clearLogs(): void {
+    this.logs = [];
+  }
+
+  public enable(): void {
+    this.isEnabled = true;
+  }
+
+  public disable(): void {
+    this.isEnabled = false;
+  }
+
+  public getLogsByStore(storeName: string): StateLogEntry[] {
+    return this.logs.filter(log => log.storeName === storeName);
+  }
+
+  public getLogsByAction(action: string): StateLogEntry[] {
+    return this.logs.filter(log => log.action === action);
+  }
+}
+
+// Create a singleton instance
+export const stateLogger = new StateLogger();
+
+// Middleware for Zustand stores to enable logging
+export const createDebugMiddleware = (storeName: string) => {
+  return (config: any) => (set: any, get: any, api: any) => {
+    // Wrap the original set function to intercept state changes
+    const originalSet = set;
+    const enhancedSet = (partial: any, replace?: any) => {
+      const prevState = { ...get() };
+      
+      // Apply the state change
+      originalSet(partial, replace);
+      
+      const nextState = { ...get() };
+      
+      // Log the change
+      stateLogger.log({
+        timestamp: Date.now(),
+        storeName,
+        action: 'UPDATE',
+        prevState,
+        nextState,
+        payload: typeof partial === 'function' ? 'computed update' : partial,
+      });
+    };
+
+    // Return the original config with the enhanced set function
+    return config(enhancedSet, get, api);
+  };
+};
+
+// State inspector utility
+export class StateInspector {
+  public inspectStore(getState: () => any, storeName: string): any {
+    const state = getState();
+    console.group(`%cInspecting ${storeName} State`, 'color: #0000ff; font-weight: bold;');
+    console.table(state);
+    console.groupEnd();
+    return state;
+  }
+
+  public compareStates(prevState: any, nextState: any, storeName: string): void {
+    console.group(`%cComparing ${storeName} States`, 'color: #ff6600; font-weight: bold;');
+    
+    // Compare keys
+    const prevKeys = Object.keys(prevState);
+    const nextKeys = Object.keys(nextState);
+    
+    const addedKeys = nextKeys.filter(key => !prevKeys.includes(key));
+    const removedKeys = prevKeys.filter(key => !nextKeys.includes(key));
+    const changedKeys = nextKeys.filter(key => 
+      prevKeys.includes(key) && 
+      JSON.stringify(prevState[key]) !== JSON.stringify(nextState[key])
+    );
+    
+    if (addedKeys.length > 0) {
+      console.log('%cAdded Keys:', 'color: #00aa00;', addedKeys);
+    }
+    
+    if (removedKeys.length > 0) {
+      console.log('%cRemoved Keys:', 'color: #aa0000;', removedKeys);
+    }
+    
+    if (changedKeys.length > 0) {
+      console.log('%cChanged Keys:', 'color: #0000aa;', changedKeys);
+      changedKeys.forEach(key => {
+        console.log(`  ${key}:`, prevState[key], '->', nextState[key]);
+      });
+    }
+    
+    if (addedKeys.length === 0 && removedKeys.length === 0 && changedKeys.length === 0) {
+      console.log('%cNo changes detected', 'color: #888;');
+    }
+    
+    console.groupEnd();
+  }
+
+  public getStoreSnapshot(getState: () => any, storeName: string): string {
+    const state = getState();
+    return JSON.stringify(state, null, 2);
+  }
+}
+
+// Create a singleton inspector
+export const stateInspector = new StateInspector();
+
+// Performance monitoring for state updates
+export class StatePerformanceMonitor {
+  private measurements: Array<{
+    storeName: string;
+    action: string;
+    duration: number;
+    timestamp: number;
+  }> = [];
+
+  public measure<T>(storeName: string, action: string, fn: () => T): T {
+    const start = performance.now();
+    const result = fn();
+    const end = performance.now();
+    
+    this.measurements.push({
+      storeName,
+      action,
+      duration: end - start,
+      timestamp: Date.now(),
+    });
+    
+    // Keep only the last 1000 measurements
+    if (this.measurements.length > 1000) {
+      this.measurements = this.measurements.slice(-1000);
+    }
+    
+    // Log slow updates (>16ms - one frame at 60fps)
+    if (end - start > 16) {
+      console.warn(`%cSlow state update detected in ${storeName}: ${action} took ${(end - start).toFixed(2)}ms`, 'color: #ff6600;');
+    }
+    
+    return result;
+  }
+
+  public getSlowUpdates(threshold: number = 16): Array<{ storeName: string; action: string; duration: number; timestamp: number; }> {
+    return this.measurements.filter(measurement => measurement.duration > threshold);
+  }
+
+  public getAverageDuration(storeName?: string): number {
+    const filteredMeasurements = storeName 
+      ? this.measurements.filter(m => m.storeName === storeName)
+      : this.measurements;
+    
+    if (filteredMeasurements.length === 0) return 0;
+    
+    const total = filteredMeasurements.reduce((sum, m) => sum + m.duration, 0);
+    return total / filteredMeasurements.length;
+  }
+
+  public clearMeasurements(): void {
+    this.measurements = [];
+  }
+}
+
+// Create a singleton performance monitor
+export const statePerformanceMonitor = new StatePerformanceMonitor();
+
+// Debug utility functions
+export const debugUtils = {
+  // Force trigger a re-render to test state changes
+  forceUpdate: (setState: (state: any) => void, getState: () => any) => {
+    setState((prevState: any) => ({ ...prevState, _debugTimestamp: Date.now() }));
+  },
+
+  // Get human-readable state summary
+  getStateSummary: (state: any): any => {
+    const summary: any = {};
+    
+    for (const [key, value] of Object.entries(state)) {
+      if (typeof value === 'function') {
+        summary[key] = '[Function]';
+      } else if (Array.isArray(value)) {
+        summary[key] = `[Array: ${value.length} items]`;
+      } else if (typeof value === 'object' && value !== null) {
+        summary[key] = '[Object]';
+      } else {
+        summary[key] = value;
+      }
+    }
+    
+    return summary;
+  },
+
+  // Validate state structure
+  validateState: (state: any, expectedShape: any): boolean => {
+    for (const key in expectedShape) {
+      if (!(key in state)) {
+        console.error(`Missing expected property: ${key}`);
+        return false;
+      }
+      if (typeof state[key] !== typeof expectedShape[key] && expectedShape[key] !== undefined) {
+        console.warn(`Type mismatch for property: ${key}`);
+      }
+    }
+    return true;
+  },
+
+  // Export logs as downloadable file
+  exportLogs: (filename: string = 'state-logs.json'): void => {
+    const logs = stateLogger.getLogs();
+    const blob = new Blob([JSON.stringify(logs, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  },
+};