js/state.js — pub/sub ir išsaugojimas

Kodo stulpelyje — js/state.js. Pagaliau būsena turi namus: vieną modulį, kuris viską laiko ir vienintelis leidžia keisti. Aštuntos pamokos išbarstyti kintamieji susirenka čia.

Trys dalys:

Pub/sub: listeners aibė, subscribe(fn) (prideda ir grąžina atsisakymą), notify() (kviečia visus). Tai — visas mechanizmas.
Persistencija: loadFavorites() skaito iš localStorage paleidžiant, persistFavorites() rašo po kiekvieno pakeitimo.
Veiksmai: toggleFavorite keičia favorites, išsaugo ir kviečia notify(). Vienintelis būdas keisti būseną — per tokį veiksmą.

Atkreipk dėmesį į apsaugą — čia tikra „production" branda:

function loadFavorites() {
  try {
    const raw = localStorage.getItem(FAVORITES_KEY);
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];                     // sugadintas JSON → pradedam švariai, nelūžtam
  }
}

function persistFavorites() {
  try {
    localStorage.setItem(FAVORITES_KEY, JSON.stringify(state.favorites));
  } catch (e) {
    console.warn('Could not save favorites:', e);   // kvota / privatus naršymas
  }
}

localStorage — ne garantija. Skaitant JSON gali būti sugadintas (rankomis pakeitė, sena versija). Rašant gali baigtis kvota (~5 MB) arba privatus naršymas jį išjungia visai. Abu atvejus pagaunam: skaitydami grįžtam prie tuščio sąrašo, rašydami — tik įspėjam. Nusileisk, bet nemirk (degrade, don't die): programa veikia atmintyje, vartotojas praranda tik išsaugojimą.

Patarimas. getState() grąžina state tik skaitymui. Susitarimas: būseną keisti galima tik per veiksmus (kaip toggleFavorite), kurie baigiasi notify(). Jei kur nors tiesiogiai pakeisi state.favorites be notify(), grįši prie 8 pamokos ligos — vaizdai neatsinaujins. Vienas įėjimo taškas keitimams — visa tvarka laikosi ant to.

state.js SUKURTI

Sukurk šį 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: '',
  // ...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.
}