State Management

const [state, dispatch] = useReducer(reducer, initState);

export const initState = {
  apps: defaultAppState,           // Array of open applications
  nextAppID: defaultAppState.length, // Counter for unique app IDs
  nextZIndex: defaultAppState.length, // Counter for window stacking
  focusing: FOCUSING.WINDOW,        // What has focus (WINDOW/ICON/DESKTOP)
  icons: defaultIconState,          // Array of desktop icons
  selecting: null,                  // Drag-select start position or null
  powerState: POWER_STATE.START,    // Power state (START/LOG_OFF/TURN_OFF)
};

{
  id: number,              // Unique app instance ID
  name: string,            // App name
  component: React.Component, // App component
  header: {                // Window header config
    icon: string,          // Header icon path
    title: string,         // Window title
    buttons: string[],     // Optional: visible buttons
    noFooterWindow: boolean, // Optional: hide from taskbar
    invisible: boolean,    // Optional: hide window chrome
  },
  defaultSize: {           // Initial window size
    width: number,
    height: number,
  },
  defaultOffset: {         // Initial window position
    x: number,
    y: number,
  },
  resizable: boolean,      // Can window be resized?
  minimized: boolean,      // Is window minimized?
  maximized: boolean,      // Is window maximized?
  multiInstance: boolean,  // Allow multiple instances?
  zIndex: number,          // Window stacking order
  injectProps: object,     // Optional: props to pass to component
  minWidth: number,        // Optional: minimum width
  minHeight: number,       // Optional: minimum height
}

{
  id: number,              // Unique icon ID
  icon: string,            // Icon image path
  title: string,           // Icon label
  component: React.Component, // App to launch on double-click
  isFocus: boolean,        // Is icon selected/focused?
  appName: string,         // App name key
}

FOCUSING.WINDOW   // A window has focus
FOCUSING.ICON     // Desktop icon(s) have focus
FOCUSING.DESKTOP  // Desktop has focus (nothing selected)

null  // Not selecting
{ x: number, y: number }  // Selection start position

POWER_STATE.START     // Normal operation
POWER_STATE.LOG_OFF   // Log off dialog shown
POWER_STATE.TURN_OFF  // Shutdown dialog shown

// Application actions
export const ADD_APP = 'ADD_APP';
export const DEL_APP = 'DEL_APP';
export const FOCUS_APP = 'FOCUS_APP';
export const MINIMIZE_APP = 'MINIMIZE_APP';
export const TOGGLE_MAXIMIZE_APP = 'TOGGLE_MAXIMIZE_APP';

// Icon actions
export const FOCUS_ICON = 'FOCUS_ICON';
export const SELECT_ICONS = 'SELECT_ICONS';

// Desktop actions
export const FOCUS_DESKTOP = 'FOCUS_DESKTOP';
export const START_SELECT = 'START_SELECT';
export const END_SELECT = 'END_SELECT';

// Power actions
export const POWER_OFF = 'POWER_OFF';
export const CANCEL_POWER_OFF = 'CANCEL_POWER_OFF';

export const reducer = (state, action = { type: '' }) => {
  switch (action.type) {
    case ADD_APP:
      // Add new app or focus existing single-instance app
      
    case DEL_APP:
      // Remove app and update focus
      
    case FOCUS_APP:
      // Bring app to front and restore if minimized
      
    case MINIMIZE_APP:
      // Minimize app and update focus
      
    case TOGGLE_MAXIMIZE_APP:
      // Toggle app maximized state
      
    case FOCUS_ICON:
      // Focus single icon
      
    case SELECT_ICONS:
      // Focus multiple icons (from drag-select)
      
    case FOCUS_DESKTOP:
      // Clear icon focus
      
    case START_SELECT:
      // Begin drag-select
      
    case END_SELECT:
      // End drag-select
      
    case POWER_OFF:
      // Show power dialog
      
    case CANCEL_POWER_OFF:
      // Close power dialog
      
    default:
      return state;
  }
};

dispatch({
  type: ADD_APP,
  payload: appSettings.Notepad
});

dispatch({
  type: DEL_APP,
  payload: appId
});

dispatch({
  type: FOCUS_APP,
  payload: appId
});

dispatch({
  type: MINIMIZE_APP,
  payload: appId
});

dispatch({
  type: TOGGLE_MAXIMIZE_APP,
  payload: appId
});

dispatch({
  type: FOCUS_ICON,
  payload: iconId
});

dispatch({
  type: SELECT_ICONS,
  payload: [iconId1, iconId2, iconId3]
});

dispatch({
  type: FOCUS_DESKTOP
});

dispatch({
  type: START_SELECT,
  payload: { x: mouse.docX, y: mouse.docY }
});

dispatch({
  type: END_SELECT
});

// Show log off dialog
dispatch({
  type: POWER_OFF,
  payload: POWER_STATE.LOG_OFF
});

// Show shutdown dialog
dispatch({
  type: POWER_OFF,
  payload: POWER_STATE.TURN_OFF
});

// Cancel power operation
dispatch({
  type: CANCEL_POWER_OFF
});

export const reducer = (state, action = { type: '' }) => {
  console.log('Action:', action);
  console.log('Previous State:', state);
  
  // ... reducer logic ...
  
  console.log('Next State:', newState);
  return newState;
};

const prevState = { apps: [], nextAppID: 0 };
const action = { type: ADD_APP, payload: appSettings.Notepad };
const nextState = reducer(prevState, action);

expect(nextState.apps.length).toBe(1);
expect(nextState.nextAppID).toBe(1);

// Without useReducer (harder to manage)
const [apps, setApps] = useState([]);
const [nextAppID, setNextAppID] = useState(0);
const [nextZIndex, setNextZIndex] = useState(0);
const [focusing, setFocusing] = useState(FOCUSING.DESKTOP);
const [icons, setIcons] = useState(defaultIconState);
const [selecting, setSelecting] = useState(null);
const [powerState, setPowerState] = useState(POWER_STATE.START);

// With useReducer (cleaner and more maintainable)
const [state, dispatch] = useReducer(reducer, initState);