Tables: Sorting & Pagination

Code

js/state.js — sorting and filtering

In the code column — the js/state.js additions: getFilteredFavorites() (search + sort) and the setSort / setPage actions.

getFilteredFavorites does two things: filter across title/notes/tags, then sort. And here's the sneaky trap:

return [...rows].sort((a, b) => { ... });     // ← [...rows] = a COPY

Array.prototype.sort() sorts in place — it mutates the array itself and returns that same array. If you wrote state.favorites.sort(...), you'd reorder the stored data — and then persistFavorites() would write the reordered order to localStorage. The user's "my collection" would silently rearrange itself every time they sorted the table.

[...rows] first makes a copy, and we sort that. The stored state.favorites stays untouched.

// ❌ state.favorites.sort(...)   — corrupts the stored data
// ✅ [...state.favorites].sort(...) — sorts a copy

setSort is small but clever: the same column flips the direction, a new column sets the default (asc for title, desc for the rest) and resets to page 1.

Verify.

1. Click the "Title" header → sorts A→Z; click again → Z→A (the arrow flips).
2. Page buttons change the visible slice.
3. Search narrows the rows and resets to page 1.

Gotcha (Array.sort mutates). Sort the table by title, then reload the page. If you sorted state.favorites directly, the collection stays reordered (because you wrote it to localStorage) — even though the user "arranged" nothing. With [...rows], a reload returns the original (saved) order. The methods sort, reverse, splice mutate the array; over stored data, always work on a copy.

state.js MODIFY 55 lines changed

Edit this file in js/

// All application state lives here — ONE place, so views can never disagree.
// After any change, subscribers are notified and re-render themselves.
// This is the cure for lesson 8: no action re-renders views by hand anymore.

// The localStorage key. Only this module reads/writes it, so it lives here.
const FAVORITES_KEY = 'cosmos.favorites';

const state = {
  pictures: [],
  favorites: loadFavorites(),      // restored from localStorage on startup
  isLoading: false,
  error: null,
  searchQuery: '',

  // collection (lesson 10)
  collectionQuery: '',
  sortKey: 'date',
  sortDir: 'desc',
  currentPage: 1,
  pageSize: 10,
  // ...the rest of the app's state joins here as features grow
};

// ---------- A tiny pub/sub ----------
const listeners = new Set();

/** Register a function to run whenever state changes. Returns an unsubscribe. */
export function subscribe(fn) {
  listeners.add(fn);
  return () => listeners.delete(fn);
}

/** Tell everyone the state changed. Views re-render themselves. */
function notify() {
  listeners.forEach(fn => fn(state));
}

/** Read-only access to the state */
export function getState() {
  return state;
}

// ---------- Persistence (localStorage) ----------
function loadFavorites() {
  try {
    const raw = localStorage.getItem(FAVORITES_KEY);
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];                     // corrupted JSON → start clean, don't crash
  }
}

function persistFavorites() {
  try {
    localStorage.setItem(FAVORITES_KEY, JSON.stringify(state.favorites));
  } catch (e) {
    // Quota exceeded, or private browsing disables storage entirely.
    // Degrade, don't die: the app keeps working in memory this session.
    console.warn('Could not save favorites:', e);
  }
}

// ---------- Queries + actions (the ONLY way to change state) ----------
export function isFavorite(date) {
  return state.favorites.some(f => f.date === date);
}

export function toggleFavorite(pic) {
  if (isFavorite(pic.date)) {
    state.favorites = state.favorites.filter(f => f.date !== pic.date);
  } else {
    state.favorites.push({ ...pic, rating: 0, notes: '', tags: [] });
  }
  persistFavorites();
  notify();                        // ← ONE call. Every view updates itself.
}

// ---------- Collection: derived rows + sort actions (lesson 10) ----------

/** Collection rows — searched AND sorted. Pure enough to unit-test. */
export function getFilteredFavorites() {
  let rows = state.favorites;

  // search across title, notes and tags
  if (state.collectionQuery) {
    const q = state.collectionQuery.toLowerCase();
    rows = rows.filter(f =>
      f.title.toLowerCase().includes(q) ||
      (f.notes || '').toLowerCase().includes(q) ||
      (f.tags || []).some(t => t.toLowerCase().includes(q))
    );
  }

  // [...rows] makes a COPY first. Array.sort() sorts IN PLACE — sorting
  // state.favorites directly would reorder the STORED data (and what we then
  // write to localStorage). Always sort a copy.
  return [...rows].sort((a, b) => {
    let av, bv;
    if (state.sortKey === 'title')       { av = a.title.toLowerCase(); bv = b.title.toLowerCase(); }
    else if (state.sortKey === 'rating') { av = a.rating || 0;         bv = b.rating || 0; }
    else                                  { av = a.date;                bv = b.date; }

    if (av < bv) return state.sortDir === 'asc' ? -1 : 1;
    if (av > bv) return state.sortDir === 'asc' ? 1 : -1;
    return 0;
  });
}

/** Click a column: same column again toggles direction; a new column resets it. */
export function setSort(key) {
  if (state.sortKey === key) {
    state.sortDir = state.sortDir === 'asc' ? 'desc' : 'asc';
  } else {
    state.sortKey = key;
    state.sortDir = key === 'title' ? 'asc' : 'desc';   // sensible default per column
  }
  state.currentPage = 1;     // a new sort → back to page 1
  notify();
}

export function setPage(page) {
  state.currentPage = page;
  notify();
}