js/state.js — rikiavimas ir filtravimas

Kodo stulpelyje — js/state.js papildymai: getFilteredFavorites() (paieška + rikiavimas) ir setSort / setPage veiksmai.

getFilteredFavorites daro du dalykus: filtruoja per pavadinimą/pastabas/žymas, tada rikiuoja. Ir čia — klastingas spąstas:

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

Array.prototype.sort() rikiuoja vietoje (in place) — jis keičia patį masyvą ir grąžina jį patį. Jei rašytum state.favorites.sort(...), perrikiuotum saugomus duomenis — ir tada persistFavorites() įrašytų perrikiuotą tvarką į localStorage. Vartotojo „mano kolekcija" tyliai persitvarkytų kaskart rikiuojant lentelę.

[...rows] pirma padaro kopiją, ir rikiuojam ją. Saugomas state.favorites lieka nepaliestas.

// ❌ state.favorites.sort(...)   — sugadina saugomus duomenis
// ✅ [...state.favorites].sort(...) — rikiuoja kopiją

setSort — mažas, bet gudrus: tas pats stulpelis apverčia kryptį, naujas — nustato numatytą (pavadinimui asc, kitiems desc) ir grąžina į 1 puslapį.

Patikrink.

1. Spaudi „Title" antraštę → rikiuoja A→Z; spaudi dar kartą → Z→A (rodyklė apsiverčia).
2. Puslapių mygtukai keičia rodomą pjūvį.
3. Paieška siaurina eilutes ir grąžina į 1 puslapį.

Spąstai (Array.sort mutuoja). Surikiuok lentelę pagal pavadinimą, tada perkrauk puslapį. Jei rikiavai state.favorites tiesiogiai, kolekcija liks perrikiuota (nes įrašei į localStorage) — nors vartotojas nieko „netvarkė". Su [...rows] po perkrovimo grįžta pradinė (išsaugojimo) tvarka. Metodai sort, reverse, splice keičia masyvą; virš saugomų duomenų visada dirbk su kopija.

state.js MODIFIKUOTI 55 eilutės pakeistos

Redaguok šį failą kataloge 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();
}