refactor: migrate state management to new state-manager module with persistence support

Author: ralyodio

public/js/components/state-example.js

@@ -2,34 +2,55 @@
  * Example component demonstrating state manager integration
  */
 console.log('Loading state-example.js');
-import { createStore, StoreConnector } from '../deps.js';
-console.log('Imported createStore and StoreConnector from deps.js');
+import { createStateManager, createConnectedComponent } from '../modules/state-manager/dist/index.js';
+console.log('Imported createStateManager from state-manager module');
 
-// Create a store for this component
-const store = createStore('stateExample', {
+// Create a state manager with initial state
+const stateManager = createStateManager({
   counter: 0,
   theme: document.documentElement.getAttribute('data-theme') || 'light',
   user: { loggedIn: false }
+}, {
+  enablePersistence: true,
+  persistenceKey: 'state_example',
+  debug: true
 });
 
-// Define a base component class
-class StateExampleBase extends HTMLElement {
+// Define the component class
+class StateExampleElement extends HTMLElement {
   constructor() {
     super();
+    console.log('StateExampleElement constructor called');
     this.attachShadow({ mode: 'open' });
   }
 
   connectedCallback() {
-    // Connect to state keys
-    this.connectToState(['counter', 'theme', 'user']);
-    console.log('Connected to state keys: counter, theme, user');
+    console.log('StateExampleElement connected to DOM');
+    this.render();
+  }
+
+  /**
+   * This method will be called when state changes
+   * @param {object} state - The current state
+   * @param {string} path - The path that changed
+   * @param {object} fullState - The full state object
+   */
+  stateChanged(state, path, fullState) {
+    console.log('State changed in component:', path);
+    console.log('New state:', fullState);
+    console.log('State value:', state);
 
+    // Re-render the component
     this.render();
-    this.addEventListeners();
+    
+    // If the theme changed, update the document theme
+    if (path === 'theme') {
+      document.documentElement.setAttribute('data-theme', state);
+    }
   }
 
   render() {
-    // Get current counter value from state
+    // Get current values from state
     const counter = this.getState('counter') || 0;
     const theme = this.getState('theme') || 'light';
     const user = this.getState('user') || { loggedIn: false };
@@ -128,6 +149,9 @@ class StateExampleBase extends HTMLElement {
         </div>
       </div>
     `;
+
+    // Add event listeners after rendering
+    this.addEventListeners();
   }
 
   addEventListeners() {
@@ -139,11 +163,14 @@ class StateExampleBase extends HTMLElement {
         console.log('Increment button clicked');
         const currentCounter = this.getState('counter') || 0;
         console.log('Current counter value:', currentCounter);
-        this.setState({ counter: currentCounter + 1 });
-        console.log('Counter incremented to:', currentCounter + 1);
+        
+        try {
+          this.setState({ counter: currentCounter + 1 });
+          console.log('Counter incremented to:', currentCounter + 1);
+        } catch (error) {
+          console.error('Error setting state:', error);
+        }
       });
-    } else {
-      console.warn('Increment button not found in the shadow DOM');
     }
 
     this.shadowRoot.getElementById('decrement')?.addEventListener('click', () => {
@@ -161,15 +188,6 @@ class StateExampleBase extends HTMLElement {
       const newTheme = currentTheme === 'light' ? 'dark' : 'light';
 
       this.setState({ theme: newTheme });
-      
-      // Also update document theme for the whole application
-      document.documentElement.setAttribute('data-theme', newTheme);
-      
-      // Dispatch theme change event for other components
-      const event = new CustomEvent('themechange', { 
-        detail: { theme: newTheme } 
-      });
-      document.dispatchEvent(event);
     });
 
     // User login/logout
@@ -178,84 +196,25 @@ class StateExampleBase extends HTMLElement {
 
       if (user.loggedIn) {
         // Logout
-        this.setState({ 
-          user: { loggedIn: false } 
-        });
+        this.setState({ user: { loggedIn: false } });
       } else {
         // Login (simulate)
-        this.setState({ 
-          user: { 
-            loggedIn: true, 
-            username: 'DemoUser', 
+        this.setState({
+          user: {
+            loggedIn: true,
+            username: 'DemoUser',
             email: 'demo@example.com',
             lastLogin: new Date().toISOString()
-          } 
+          }
         });
       }
     });
   }
-
-  // This method will be called when state changes
-  stateChanged(state, changedKeys) {
-    console.log('State changed in component:', changedKeys);
-    console.log('New state:', state);
-    
-    // Check if the counter key changed
-    if (changedKeys.includes('counter')) {
-      console.log('Counter changed, updating display directly');
-      
-      // Get the counter display element
-      const counterDisplay = this.shadowRoot.querySelector('.counter-display');
-      if (counterDisplay) {
-        // Update the counter display directly
-        // Handle both cases: when state is the full state object or just the counter value
-        let counterValue;
-        if (typeof state === 'object' && state !== null) {
-          // If state is an object, it's the full state object
-          counterValue = state.counter;
-          console.log('State is an object, counter value:', counterValue);
-        } else {
-          // If state is not an object, it's the counter value itself
-          counterValue = state;
-          console.log('State is the counter value itself:', counterValue);
-        }
-        
-        counterDisplay.textContent = `Counter: ${counterValue}`;
-        console.log('Counter display updated directly to:', counterValue);
-        console.log('Counter display element text after update:', counterDisplay.textContent);
-      } else {
-        console.error('Counter display element not found');
-        // If the element doesn't exist, do a full render
-        this.render();
-      }
-      
-      // Also update the state display
-      const stateDisplayPre = this.shadowRoot.querySelector('.state-display pre');
-      if (stateDisplayPre) {
-        // Get the full state from the state manager
-        const fullState = this.getState();
-        stateDisplayPre.textContent = JSON.stringify(fullState, null, 2);
-      }
-    } else {
-      // For other state changes, do a full render
-      console.log('Other state changed, doing full render');
-      this.render();
-      
-      // Re-attach event listeners after render
-      console.log('Re-attaching event listeners after render');
-      this.addEventListeners();
-    }
-  }
 }
 
-// Create the connected component using the StoreConnector
-const StateExample = StoreConnector(store)(StateExampleBase);
-
-// Register the custom element
-customElements.define('state-example', StateExample);
-
-// Initialize default state if not already set
-// No need for DOMContentLoaded event handler as we're using a local store
-// that's already initialized with default values
+// Register the component with the state manager
+createConnectedComponent('state-example', StateExampleElement, {
+  statePaths: ['counter', 'theme', 'user']
+}, stateManager);
 
-export default StateExample;
+export default StateExampleElement;