Advanced State Patterns and Techniques

import { createMachine } from 'xstate';
import { useMachine } from '@xstate/react';

// Define state machine
const authMachine = createMachine({
  id: 'auth',
  initial: 'idle',
  context: { user: null, error: null },
  states: {
    idle: {
      on: { LOGIN: 'authenticating' }
    },
    authenticating: {
      invoke: {
        src: (context, event) => loginAPI(event.credentials),
        onDone: {
          target: 'authenticated',
          actions: 'assignUser'
        },
        onError: {
          target: 'failed',
          actions: 'assignError'
        }
      }
    },
    authenticated: {
      on: { LOGOUT: 'idle' }
    },
    failed: {
      on: { RETRY: 'authenticating' }
    }
  }
}, {
  actions: {
    assignUser: (context, event) => ({ user: event.data }),
    assignError: (context, event) => ({ error: event.data })
  }
});

// Use in component
function AuthFlow() {
  const [state, send] = useMachine(authMachine);
  
  return (
    <div>
      {state.matches('idle') && (
        <button onClick={() => send({ type: 'LOGIN', credentials })}>
          Login
        </button>
      )}
      {state.matches('authenticating') && <Spinner />}
      {state.matches('authenticated') && (
        <div>Welcome {state.context.user.name}</div>
      )}
      {state.matches('failed') && (
        <div>
          {state.context.error}
          <button onClick={() => send('RETRY')}>Retry</button>
        </div>
      )}
    </div>
  );
}

function useStateMachine(initialState, transitions) {
  const [state, setState] = useState(initialState);
  
  const send = useCallback((event) => {
    setState(currentState => {
      const transition = transitions[currentState]?.[event];
      return transition || currentState;
    });
  }, [transitions]);
  
  return [state, send];
}

// Usage
const transitions = {
  idle: { START: 'loading' },
  loading: { SUCCESS: 'success', ERROR: 'error' },
  success: { RESET: 'idle' },
  error: { RETRY: 'loading', RESET: 'idle' }
};

const [state, send] = useStateMachine('idle', transitions);

function undoableReducer(state, action) {
  const { past, present, future } = state;
  
  switch (action.type) {
    case 'UNDO':
      if (past.length === 0) return state;
      return {
        past: past.slice(0, -1),
        present: past[past.length - 1],
        future: [present, ...future]
      };
      
    case 'REDO':
      if (future.length === 0) return state;
      return {
        past: [...past, present],
        present: future[0],
        future: future.slice(1)
      };
      
    case 'SET':
      return {
        past: [...past, present].slice(-50), // Keep last 50
        present: action.payload,
        future: [] // Clear redo on new action
      };
      
    case 'RESET':
      return {
        past: [],
        present: action.payload,
        future: []
      };
      
    default:
      return state;
  }
}

function useUndoable(initialState) {
  const [state, dispatch] = useReducer(undoableReducer, {
    past: [],
    present: initialState,
    future: []
  });
  
  const canUndo = state.past.length > 0;
  const canRedo = state.future.length > 0;
  
  const undo = useCallback(() => dispatch({ type: 'UNDO' }), []);
  const redo = useCallback(() => dispatch({ type: 'REDO' }), []);
  const set = useCallback((newState) => 
    dispatch({ type: 'SET', payload: newState }), []);
  const reset = useCallback((newState) => 
    dispatch({ type: 'RESET', payload: newState }), []);
  
  return {
    state: state.present,
    set,
    undo,
    redo,
    canUndo,
    canRedo,
    reset
  };
}

// Usage in drawing app
function DrawingCanvas() {
  const { state: canvas, set, undo, redo, canUndo, canRedo } = 
    useUndoable({ shapes: [] });
  
  const addShape = (shape) => {
    set({ shapes: [...canvas.shapes, shape] });
  };
  
  return (
    <>
      <button onClick={undo} disabled={!canUndo}>Undo</button>
      <button onClick={redo} disabled={!canRedo}>Redo</button>
      <Canvas shapes={canvas.shapes} onAddShape={addShape} />
    </>
  );
}

function useUndoableText(initialText) {
  const { state, set, undo, redo, canUndo, canRedo } = 
    useUndoable(initialText);
  const [tempText, setTempText] = useState(state);
  
  // Save to history after 500ms of no typing
  useEffect(() => {
    if (tempText !== state) {
      const timeout = setTimeout(() => set(tempText), 500);
      return () => clearTimeout(timeout);
    }
  }, [tempText, state, set]);
  
  return {
    text: tempText,
    setText: setTempText,
    undo: () => { setTempText(state); undo(); },
    redo: () => { redo(); setTempText(state); },
    canUndo,
    canRedo
  };
}

function useTodos() {
  const [todos, setTodos] = useState([]);
  
  const addTodo = async (text) => {
    // Generate temporary ID
    const tempId = `temp-${Date.now()}`;
    const newTodo = { id: tempId, text, completed: false, pending: true };
    
    // Optimistic update
    setTodos(prev => [...prev, newTodo]);
    
    try {
      // API call
      const response = await fetch('/api/todos', {
        method: 'POST',
        body: JSON.stringify({ text })
      });
      const savedTodo = await response.json();
      
      // Replace temp with real todo
      setTodos(prev => prev.map(t => 
        t.id === tempId 
          ? { ...savedTodo, pending: false }
          : t
      ));
      
    } catch (error) {
      // Rollback on error
      setTodos(prev => prev.filter(t => t.id !== tempId));
      toast.error('Failed to add todo: ' + error.message);
    }
  };
  
  const toggleTodo = async (id) => {
    // Save previous state for rollback
    const previous = todos.find(t => t.id === id);
    
    // Optimistic update
    setTodos(prev => prev.map(t =>
      t.id === id ? { ...t, completed: !t.completed, pending: true } : t
    ));
    
    try {
      await fetch(`/api/todos/${id}`, {
        method: 'PATCH',
        body: JSON.stringify({ completed: !previous.completed })
      });
      
      // Confirm success
      setTodos(prev => prev.map(t =>
        t.id === id ? { ...t, pending: false } : t
      ));
      
    } catch (error) {
      // Rollback
      setTodos(prev => prev.map(t =>
        t.id === id ? previous : t
      ));
      toast.error('Update failed', { 
        action: { label: 'Retry', onClick: () => toggleTodo(id) }
      });
    }
  };
  
  return { todos, addTodo, toggleTodo };
}

function useOptimisticDelete() {
  const [items, setItems] = useState([]);
  const timeoutRef = useRef(null);
  
  const deleteItem = (id) => {
    // Save for rollback
    const deleted = items.find(item => item.id === id);
    
    // Optimistic removal
    setItems(prev => prev.filter(item => item.id !== id));
    
    // Clear any pending deletes
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    
    // Show undo toast
    const undo = () => {
      clearTimeout(timeoutRef.current);
      setItems(prev => [...prev, deleted].sort((a, b) => a.id - b.id));
      toast.dismiss();
    };
    
    toast.success('Item deleted', {
      duration: 5000,
      action: { label: 'Undo', onClick: undo }
    });
    
    // Actual delete after 5 seconds
    timeoutRef.current = setTimeout(async () => {
      try {
        await fetch(`/api/items/${id}`, { method: 'DELETE' });
      } catch (error) {
        // Rollback on error
        setItems(prev => [...prev, deleted]);
        toast.error('Delete failed: ' + error.message);
      }
    }, 5000);
  };
  
  return { items, deleteItem };
}

// Nested API response (denormalized)
const apiResponse = {
  posts: [
    {
      id: '1',
      title: 'Post 1',
      author: { id: '10', name: 'Alice' },
      comments: [
        { id: '100', text: 'Great!', author: { id: '20', name: 'Bob' } },
        { id: '101', text: 'Thanks', author: { id: '10', name: 'Alice' } }
      ]
    },
    {
      id: '2',
      title: 'Post 2',
      author: { id: '20', name: 'Bob' },
      comments: []
    }
  ]
};

// Normalized state structure
const normalizedState = {
  users: {
    '10': { id: '10', name: 'Alice' },
    '20': { id: '20', name: 'Bob' }
  },
  posts: {
    '1': { id: '1', title: 'Post 1', authorId: '10', commentIds: ['100', '101'] },
    '2': { id: '2', title: 'Post 2', authorId: '20', commentIds: [] }
  },
  comments: {
    '100': { id: '100', text: 'Great!', authorId: '20', postId: '1' },
    '101': { id: '101', text: 'Thanks', authorId: '10', postId: '1' }
  },
  postIds: ['1', '2']
};

// Normalize function
function normalizePosts(posts) {
  const users = {};
  const postsById = {};
  const comments = {};
  const postIds = [];
  
  posts.forEach(post => {
    // Add user
    users[post.author.id] = post.author;
    
    // Add comments
    const commentIds = post.comments.map(comment => {
      users[comment.author.id] = comment.author;
      comments[comment.id] = {
        id: comment.id,
        text: comment.text,
        authorId: comment.author.id,
        postId: post.id
      };
      return comment.id;
    });
    
    // Add post
    postsById[post.id] = {
      id: post.id,
      title: post.title,
      authorId: post.author.id,
      commentIds
    };
    postIds.push(post.id);
  });
  
  return { users, posts: postsById, comments, postIds };
}

// Selector to get post with author and comments
function selectPostWithDetails(state, postId) {
  const post = state.posts[postId];
  if (!post) return null;
  
  return {
    ...post,
    author: state.users[post.authorId],
    comments: post.commentIds.map(id => ({
      ...state.comments[id],
      author: state.users[state.comments[id].authorId]
    }))
  };
}

// Usage in component
function PostDetail({ postId }) {
  const [state, setState] = useState(normalizedState);
  const post = useMemo(
    () => selectPostWithDetails(state, postId),
    [state, postId]
  );
  
  if (!post) return <div>Not found</div>;
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>By {post.author.name}</p>
      <div>
        {post.comments.map(c => (
          <div key={c.id}>
            {c.text} - {c.author.name}
          </div>
        ))}
      </div>
    </article>
  );
}

// Easy updates with normalized structure
function updateUsername(state, userId, newName) {
  return {
    ...state,
    users: {
      ...state.users,
      [userId]: { ...state.users[userId], name: newName }
    }
  };
  // Name updated everywhere it's referenced!
}

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';

// Create adapter with auto-generated reducers
const postsAdapter = createEntityAdapter({
  selectId: (post) => post.id,
  sortComparer: (a, b) => b.createdAt - a.createdAt
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: postsAdapter.getInitialState(),
  reducers: {
    // Auto-generated: addOne, addMany, setAll, updateOne, removeOne, etc.
    postAdded: postsAdapter.addOne,
    postsReceived: postsAdapter.setAll,
    postUpdated: postsAdapter.updateOne,
    postRemoved: postsAdapter.removeOne
  }
});

// Auto-generated selectors
const postsSelectors = postsAdapter.getSelectors(state => state.posts);
// Provides: selectIds, selectEntities, selectAll, selectTotal, selectById

// Usage
dispatch(postsSlice.actions.postAdded({ id: '1', title: 'New Post' }));
const allPosts = postsSelectors.selectAll(state);
const post = postsSelectors.selectById(state, '1');

// Event definitions
const events = {
  ITEM_ADDED: 'ITEM_ADDED',
  ITEM_REMOVED: 'ITEM_REMOVED',
  QUANTITY_CHANGED: 'QUANTITY_CHANGED',
  CART_CLEARED: 'CART_CLEARED'
};

// Event reducer to replay events
function cartReducer(state, event) {
  switch (event.type) {
    case events.ITEM_ADDED:
      return {
        ...state,
        items: { 
          ...state.items, 
          [event.payload.id]: event.payload 
        }
      };
      
    case events.ITEM_REMOVED:
      const { [event.payload.id]: removed, ...remaining } = state.items;
      return { ...state, items: remaining };
      
    case events.QUANTITY_CHANGED:
      return {
        ...state,
        items: {
          ...state.items,
          [event.payload.id]: {
            ...state.items[event.payload.id],
            quantity: event.payload.quantity
          }
        }
      };
      
    case events.CART_CLEARED:
      return { ...state, items: {} };
      
    default:
      return state;
  }
}

function useEventSourcedCart() {
  const [eventStore, setEventStore] = useState([]);
  const [snapshot, setSnapshot] = useState({ items: {} });
  
  // Replay events to get current state
  const currentState = useMemo(() => {
    return eventStore.reduce(cartReducer, snapshot);
  }, [eventStore, snapshot]);
  
  // Add event to store
  const dispatch = useCallback((event) => {
    const enrichedEvent = {
      ...event,
      meta: {
        timestamp: Date.now(),
        userId: getCurrentUserId()
      }
    };
    
    setEventStore(prev => [...prev, enrichedEvent]);
    
    // Create snapshot every 50 events
    if (eventStore.length % 50 === 0) {
      setSnapshot(currentState);
      setEventStore([]);
    }
  }, [eventStore.length, currentState]);
  
  // Get state at specific time
  const getStateAt = useCallback((timestamp) => {
    const eventsUntil = eventStore.filter(e => 
      e.meta.timestamp <= timestamp
    );
    return eventsUntil.reduce(cartReducer, snapshot);
  }, [eventStore, snapshot]);
  
  return {
    state: currentState,
    dispatch,
    events: eventStore,
    getStateAt
  };
}

// Usage
function ShoppingCart() {
  const { state, dispatch, getStateAt } = useEventSourcedCart();
  
  const addItem = (item) => {
    dispatch({
      type: events.ITEM_ADDED,
      payload: { id: item.id, name: item.name, quantity: 1, price: item.price }
    });
  };
  
  const viewYesterdaysCart = () => {
    const yesterday = Date.now() - 24 * 60 * 60 * 1000;
    const historicalState = getStateAt(yesterday);
    console.log('Cart 24h ago:', historicalState);
  };
  
  return (
    <div>
      {Object.values(state.items).map(item => (
        <CartItem key={item.id} item={item} />
      ))}
    </div>
  );
}

// Different projections from same event stream
function useEventProjections(eventStore) {
  // Projection 1: Total revenue
  const totalRevenue = useMemo(() => {
    return eventStore
      .filter(e => e.type === 'ORDER_COMPLETED')
      .reduce((sum, e) => sum + e.payload.amount, 0);
  }, [eventStore]);
  
  // Projection 2: Popular products
  const popularProducts = useMemo(() => {
    const counts = {};
    eventStore
      .filter(e => e.type === 'ITEM_ADDED')
      .forEach(e => {
        counts[e.payload.id] = (counts[e.payload.id] || 0) + 1;
      });
    return Object.entries(counts)
      .sort(([,a], [,b]) => b - a)
      .slice(0, 10);
  }, [eventStore]);
  
  // Projection 3: User activity timeline
  const userActivity = useMemo(() => {
    return eventStore
      .filter(e => e.meta.userId === currentUserId)
      .map(e => ({
        action: e.type,
        timestamp: e.meta.timestamp,
        details: e.payload
      }));
  }, [eventStore]);
  
  return { totalRevenue, popularProducts, userActivity };
}

// Command side - handles writes
const commandHandlers = {
  CREATE_TASK: async (command) => {
    // Validation
    if (!command.payload.title) {
      throw new Error('Title required');
    }
    
    // Business logic
    const task = {
      id: generateId(),
      title: command.payload.title,
      status: 'pending',
      createdAt: Date.now(),
      createdBy: command.meta.userId
    };
    
    // Persist and emit event
    await saveTask(task);
    eventBus.emit('TaskCreated', task);
    
    return { success: true, taskId: task.id };
  },
  
  COMPLETE_TASK: async (command) => {
    const task = await getTask(command.payload.id);
    
    if (!task) throw new Error('Task not found');
    if (task.status === 'completed') throw new Error('Already completed');
    
    await updateTaskStatus(task.id, 'completed');
    eventBus.emit('TaskCompleted', { 
      id: task.id, 
      completedAt: Date.now() 
    });
    
    return { success: true };
  }
};

// Query side - optimized for reads
const queryHandlers = {
  GET_TASKS_BY_STATUS: (status) => {
    // Read from optimized view
    return queryViews.tasksByStatus[status] || [];
  },
  
  GET_USER_TASK_STATS: (userId) => {
    // Pre-computed aggregates
    return {
      total: queryViews.userTaskCounts[userId]?.total || 0,
      completed: queryViews.userTaskCounts[userId]?.completed || 0,
      pending: queryViews.userTaskCounts[userId]?.pending || 0
    };
  },
  
  GET_TASK_TIMELINE: (taskId) => {
    // Materialized view of task history
    return queryViews.taskTimelines[taskId] || [];
  }
};

// Query views updated by events
const queryViews = {
  tasksByStatus: { pending: [], completed: [] },
  userTaskCounts: {},
  taskTimelines: {}
};

eventBus.on('TaskCreated', (task) => {
  // Update query views
  queryViews.tasksByStatus[task.status].push(task);
  
  if (!queryViews.userTaskCounts[task.createdBy]) {
    queryViews.userTaskCounts[task.createdBy] = { total: 0, completed: 0, pending: 0 };
  }
  queryViews.userTaskCounts[task.createdBy].total++;
  queryViews.userTaskCounts[task.createdBy][task.status]++;
  
  queryViews.taskTimelines[task.id] = [
    { event: 'Created', timestamp: task.createdAt }
  ];
});

eventBus.on('TaskCompleted', (data) => {
  // Move task between status views
  const taskIndex = queryViews.tasksByStatus.pending
    .findIndex(t => t.id === data.id);
  const task = queryViews.tasksByStatus.pending.splice(taskIndex, 1)[0];
  task.status = 'completed';
  queryViews.tasksByStatus.completed.push(task);
  
  // Update stats
  const userId = task.createdBy;
  queryViews.userTaskCounts[userId].pending--;
  queryViews.userTaskCounts[userId].completed++;
  
  // Update timeline
  queryViews.taskTimelines[data.id].push({
    event: 'Completed',
    timestamp: data.completedAt
  });
});

function useCQRS() {
  const [queryState, setQueryState] = useState(queryViews);
  
  // Command dispatcher
  const executeCommand = useCallback(async (command) => {
    const handler = commandHandlers[command.type];
    if (!handler) throw new Error(`Unknown command: ${command.type}`);
    
    const enrichedCommand = {
      ...command,
      meta: {
        timestamp: Date.now(),
        userId: getCurrentUserId()
      }
    };
    
    return await handler(enrichedCommand);
  }, []);
  
  // Query executor
  const executeQuery = useCallback((queryName, ...args) => {
    const handler = queryHandlers[queryName];
    if (!handler) throw new Error(`Unknown query: ${queryName}`);
    
    return handler(...args);
  }, []);
  
  // Subscribe to query view updates
  useEffect(() => {
    const updateViews = () => setQueryState({...queryViews});
    
    eventBus.on('TaskCreated', updateViews);
    eventBus.on('TaskCompleted', updateViews);
    
    return () => {
      eventBus.off('TaskCreated', updateViews);
      eventBus.off('TaskCompleted', updateViews);
    };
  }, []);
  
  return { executeCommand, executeQuery };
}

// Usage in component
function TaskManager() {
  const { executeCommand, executeQuery } = useCQRS();
  
  const createTask = async (title) => {
    await executeCommand({ 
      type: 'CREATE_TASK', 
      payload: { title } 
    });
  };
  
  const pendingTasks = executeQuery('GET_TASKS_BY_STATUS', 'pending');
  const userStats = executeQuery('GET_USER_TASK_STATS', currentUserId);
  
  return (
    <div>
      <div>Pending: {userStats.pending}, Completed: {userStats.completed}</div>
      {pendingTasks.map(task => (
        <TaskCard key={task.id} task={task} />
      ))}
    </div>
  );
}