React Patterns and Code Organization Questions

function TodoList({ items }) {
  return (
    <ul>
      {items.map((item, i) => (
        // using index as key — problematic when items reorder/remove
        <li key={i}>
          <input defaultValue={item.text} />
        </li>
      ))}
    </ul>
  );
}

<li key={item.id}>
  <input defaultValue={item.text} />
</li>

const initial = { history: [{ snapshot: initialState }], index: 0, present: initialState };

function reducer(state, action) {
  switch(action.type){
    case 'APPLY_CHANGE': {
      const { patch, snapshot, meta } = action.payload;
      const nextPresent = snapshot ?? applyPatch(state.present, patch);
      const nextHistory = state.history.slice(0, state.index+1).concat({ snapshot, patches: patch ? [patch] : undefined, meta });
      return { history: nextHistory, index: state.index+1, present: nextPresent };
    }
    case 'UNDO': {
      if (state.index === 0) return state;
      const prev = state.history[state.index-1].snapshot ?? reconstruct(state.history, state.index-1);
      return { ...state, index: state.index-1, present: prev };
    }
    case 'REDO': {
      if (state.index === state.history.length-1) return state;
      const next = state.history[state.index+1].snapshot ?? reconstruct(state.history, state.index+1);
      return { ...state, index: state.index+1, present: next };
    }
    case 'SELECTIVE_UNDO': {
      // find last history entry with meta.branch === action.payload.branch and revert only that branch
      const targetIndex = findLastIndex(state.history, state.index, e => e.meta?.branch === action.payload.branch);
      if (targetIndex < 0) return state;
      const branchPrev = extractBranch(reconstruct(state.history, targetIndex), action.payload.branch);
      const newPresent = { ...state.present, [action.payload.branch]: branchPrev };
      // Append a new history entry representing this selective change
      const nextHistory = state.history.slice(0, state.index+1).concat({ snapshot: newPresent, meta: { selective: true, branch: action.payload.branch } });
      return { history: nextHistory, index: state.index+1, present: newPresent };
    }
  }
}

// LoginButton.test.jsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import LoginButton from './LoginButton';
import { AuthContext } from './auth'; // hypothetical

test('shows "Log in" when unauthenticated and is accessible', () => {
  render(
    <AuthContext.Provider value={{ user: null, login: jest.fn() }}>
      <LoginButton />
    </AuthContext.Provider>
  );
  const btn = screen.getByRole('button', { name: /log in/i });
  expect(btn).toBeInTheDocument();
  expect(btn).toHaveAccessibleName('Log in');
});

test('shows user name when authenticated and calls logout on click', () => {
  const logout = jest.fn();
  render(
    <AuthContext.Provider value={{ user: { name: 'Alex' }, logout }}>
      <LoginButton />
    </AuthContext.Provider>
  );
  const btn = screen.getByRole('button', { name: /alex/i });
  expect(btn).toHaveTextContent('Alex');
  fireEvent.click(btn);
  expect(logout).toHaveBeenCalled();
});

// shell dynamic load
const remote = await loadRemote('teamA_remote','./Widget');
const Widget = await remote();
root.appendChild(Widget.default());