Būsena rankomis — trys perpiešimai kaskart

Kodo stulpelyje — būsena, kokia ji yra dabar: dešimt laisvų kintamųjų main.js viršuje. Nėra modulio, kuris jiems „priklausytų"; jie tiesiog guli greta.

Ir toggleFavorite — veiksmas, kuris paspaudus ♡ keičia favorites. Atkreipk dėmesį į pabaigą:

function toggleFavorite(pic) {
  const i = favorites.findIndex(f => f.date === pic.date);
  if (i >= 0) favorites.splice(i, 1);
  else favorites.push({ ...pic, rating: 0, notes: '', tags: [] });

  renderGallery({ isLoading, error, pictures: visiblePictures() });   // ♡ užpildymas
  renderCollection();                                                 // eilutė
  renderHome();                                                       // skaitiklis
}

Pats duomenų pakeitimas — dvi eilutės. O tada — trys perpiešimai, po vieną kiekvienam vaizdui, kuris rodo favorites. Tai veikia. Bet pažiūrėk, ko iš tavęs reikalauja: kiekvieną kartą, keisdamas favorites, privalai atsiminti visus tris. Ir taip su kiekvienu veiksmu, kuris liečia favorites — o jų bus daugiau (įvertinimas, žymos, pašalinimas).

Tai — „teisinga, bet trapi" versija. Ji veikia tik todėl, kad kažkas prisiminė iškviesti visus tris. Niekas to neužtikrina.

Patarimas. Pastebėk, kaip render priklauso nuo daugybės laisvų kintamųjų (isLoading, error, visiblePictures(), kuris skaito searchQuery…). Kai būsena išbarstyta, net „paprastas" perpiešimas turi surinkti gabalus iš visur. Kitas žingsnis parodys, kas nutinka, kai vieną gabalą pamiršti.

main.js MODIFIKUOTI 40 eilučių pakeista

Redaguok šį failą kataloge js/

// The app's ENTIRE memory — as loose module-level variables. Ten of them now.
// There is no single place that owns state; it's scattered, and every action
// has to remember which views depend on what it just changed.

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">

// ---- the app's state, as loose variables (this is piling up...) ----
let pictures = [];
let isLoading = false;
let error = null;
let searchQuery = '';
let favorites = [];            // in-memory for now — persistence arrives in lesson 9
let daysToShow = 14;
let collectionQuery = '';
let sortKey = 'date';
let currentPage = 1;
let pageSize = 10;

// 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 — the real collection page arrives in lesson 10 and the
// home counter lives in the nav. The PRINCIPLE (three views depending on one
// piece of data) is what this lesson is about, not their looks.
const favCount = document.getElementById('fav-count');   // <span id="fav-count"> in the nav

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

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

// THREE views read `favorites`:
//   • the gallery   → whether each card's ♡ is filled
//   • the collection → whether a row exists for this picture
//   • the home page  → the "saved" counter
// So when `favorites` changes, ALL THREE must be re-rendered — by hand.
function toggleFavorite(pic) {
  const i = favorites.findIndex(f => f.date === pic.date);
  if (i >= 0) favorites.splice(i, 1);
  else favorites.push({ ...pic, rating: 0, notes: '', tags: [] });

  renderGallery({ isLoading, error, pictures: visiblePictures() });   // the ♡ fill
  renderCollection();                                                 // the row
  renderHome();                                                       // the counter
  // Miss ANY one of these three and that view silently shows stale data.
  // Nothing errors. Nothing warns you. The screen just quietly lies.
}

// 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();