main.js — vaizdai prenumeruojasi patys

Belieka prenumeruoti. Kodo stulpelyje — main.js su vienintele subscribe() registracija. Tai — visa magija: viena vieta, nustatoma vieną kartą, pakeičia visus išbarstytus rankinius perpiešimus iš 8 pamokos.

subscribe(() => {
  render();              // galerija
  renderCollection();    // kolekcija (pakaitalas iki 10 pamokos)
  renderHome();          // navigacijos skaitiklis
});

Palygink kelią:

8 PAMOKA:  kiekvienas veiksmas → renderGallery() + renderCollection() + renderHome()
           (ir jei vieną pamiršai — tylus melas)

9 PAMOKA:  kiekvienas veiksmas → notify()
           notify() → viena subscribe() → atsinaujina, kas reikia

Skirtumas esminis: veiksmai nebežino apie vaizdus. toggleFavorite, removeFavorite, updateFavorite — visi baigiasi notify() ir niekada nemini renderGallery. Vaizdus jungia viena vieta. Nėra ko pamiršti.

Patikrink.

1. Galerijoje paspaudi ♡ → kortelė užsipildo, nav skaitiklis pakyla, kolekcija atsinaujina — VIENU paspaudimu.
2. Perkrauk puslapį → mėgstamiausi VIS DAR ten (localStorage).
3. Pašalink iš kolekcijos → grįžti į galeriją, ♡ jau tuščias. Melo NEBĖRA.

Spąstai (localStorage — tik tekstas). localStorage saugo tik eilutes. Objektą reikia JSON.stringify rašant ir JSON.parse skaitant. Pamiršk — ir gausi "[object Object]" vietoj duomenų. Ir prisimink apsaugą: JSON.parse sugadintam tekstui meta klaidą, tad skaitymas visada try/catch viduje.

Pastebėk. Nuo šios pamokos kiekviena funkcija (kolekcija, formos, modalai) tik skaitys getState() ir kvies notify(). Rankinių perpiešimų daugiau nebus — visą kursą.

main.js MODIFIKUOTI 20 eilučių pakeista

Redaguok šį failą kataloge js/

// The views now SUBSCRIBE to state. One subscription, set up ONCE, replaces
// every manual re-render call scattered across every action in lesson 8.
// When ANY action calls notify(), this runs — and every dependent view
// re-renders. There is nothing left to forget.

import { getState, subscribe } from './state.js';
import { fetchPictures } from './api.js';
import { renderGallery } from './views/gallery.js';
import { debounce } from './utils.js';

const searchInput = document.getElementById('search');   // <input type="search" id="search">

// Gallery-loading state stays LOCAL for now — favorites moved into the store
// first (three views depend on them); the rest migrates as features grow.
let pictures = [];
let isLoading = false;
let error = null;
let searchQuery = '';

// Derived: the pictures that pass the current search
function visiblePictures() {
  if (!searchQuery) return pictures;
  const q = searchQuery.toLowerCase();
  return pictures.filter(p => p.title.toLowerCase().includes(q));
}

function render() {
  renderGallery({ isLoading, error, pictures: visiblePictures() });
}

// Placeholder views (from lesson 8) — the real collection page arrives in
// lesson 10. They now read favorites from the STORE, not a loose variable.
const favCount = document.getElementById('fav-count');   // <span id="fav-count"> in the nav

function renderCollection() {
  console.log('collection:', getState().favorites.map(f => f.title));
}

function renderHome() {
  favCount.textContent = String(getState().favorites.length);
}

// THE CURE. One subscription, set up once. toggleFavorite — and every future
// action in state.js — ends in a single notify(), and this callback re-renders
// every dependent view. Lesson 8's removeFromCollection bug is impossible now:
// there are no per-action render lists left to forget.
subscribe(() => {
  render();              // the gallery
  renderCollection();    // the collection (placeholder until lesson 10)
  renderHome();          // the nav counter
});

// debounce: only filter once the user STOPS typing for 250ms — not on every key
searchInput.addEventListener('input', debounce((e) => {
  searchQuery = e.target.value.trim();
  render();
}, 250));

async function load() {
  isLoading = true; error = null; render();
  try {
    pictures = await fetchPictures(14);
  } catch (e) {
    error = e.message;
  } finally {
    isLoading = false; render();
  }
}

load();