src/types.ts — būsena kaip sąjunga

Kodo stulpelyje — būsenos tipai, pridedami į src/types.ts. Čia gyvena galingiausia idėja.

LoadStatus kaip sąjunga:

export type LoadStatus =
  | { state: 'idle' }
  | { state: 'loading' }
  | { state: 'loaded' }
  | { state: 'error'; message: string; retryable: boolean };

Palygink su vanilla: ten buvo isLoading (boolean) ir error (string) — atskiri. Niekas netrukdė:

isLoading = true;
error = 'Network failed';   // abu vienu metu — ką rodyti?!

UI tokią būseną rodydavo kaip nesąmonę (suktukas IR klaida). Sąjungoje ta kombinacija neegzistuoja: LoadStatus yra arba loading, arba error — niekada abu. Ir error variantas priverčia turėti message bei retryable; negali būti „klaida be žinutės".

AppState — visa būsena viename tipe (vietoj vanilla tuzino laisvų let). Pastebėk saved: SavedPicture[], kur SavedPicture turi rating: Rating — tad įvertinimas gali būti tik 0–5.

Kaip tuo naudotis (susiaurinimas per state):

switch (status.state) {
  case 'loading': showSpinner(); break;
  case 'error':   showError(status.message); break;   // message čia GARANTUOTAS
  case 'loaded':  render(); break;
  case 'idle':    break;
}

status.message pasiekiamas tik error šakoje — kitur jo nėra, ir kompiliatorius tai žino.

Patarimas. Kodėl { state: 'error'; message; retryable }, o ne tik message?? Nes taip tipas garantuoja: jei būsena klaida — žinutė BŪTINAI yra. Su message? galėtum turėti „klaidą be žinutės" ir vėl rodytum tuščią ekraną. Tipas užkoduoja ne tik „kokie laukai galimi", bet ir „kurie laukai kartu turi prasmę".

types.ts MODIFIKUOTI 47 eilutės pakeistos

Redaguok šį failą kataloge src/

// Types for NASA's APOD API. This is where TypeScript earns its keep: we encode
// what the API ACTUALLY returns, and the compiler enforces what we used to have
// to remember.

/** An APOD entry that is an IMAGE. */
export interface ApodImage {
  media_type: 'image';        // the discriminant — a literal, not just `string`
  date: string;               // YYYY-MM-DD — also the unique id
  title: string;
  explanation: string;
  url: string;
  hdurl?: string;             // only images have a high-res version — and not always
  copyright?: string;         // absent for public-domain images
}

/** An APOD entry that is a VIDEO (usually a YouTube/Vimeo embed). */
export interface ApodVideo {
  media_type: 'video';
  date: string;
  title: string;
  explanation: string;
  url: string;
  copyright?: string;
  // NOTE: no `hdurl`. Videos never have one — the type says so, so you can't reach for it.
}

/**
 * A DISCRIMINATED UNION.
 *
 * `media_type` is the discriminant: once you check it, TypeScript NARROWS the
 * type and knows exactly which fields exist.
 *
 *   if (pic.media_type === 'image') {
 *     pic.hdurl   // ✅ exists here (string | undefined)
 *   } else {
 *     pic.hdurl   // ❌ compile error — videos have no hdurl
 *   }
 *
 * The bug class "I forgot the media_type check" becomes impossible to write.
 */
export type Apod = ApodImage | ApodVideo;

/**
 * A LITERAL UNION instead of `number`.
 *
 * `rating: number` would let you write `rating = 47` or `rating = -3`. This
 * makes those a compile error. The set of legal values IS the type.
 */
export type Rating = 0 | 1 | 2 | 3 | 4 | 5;

// ---------- The application state, in one shape (this step) ----------
// Replacing the vanilla dozen loose `let` variables.

export type SortKey = 'title' | 'date' | 'rating';
export type SortDirection = 'asc' | 'desc';

/**
 * Loading state as a UNION, not booleans.
 *
 * The vanilla code had `isLoading` and `error` as SEPARATE variables. Nothing
 * stopped `isLoading = true` AND `error = 'failed'` at the same time — an
 * impossible state the UI would render as nonsense. Modelled as a union, that
 * combination CANNOT be constructed. This is "make illegal states unrepresentable".
 */
export type LoadStatus =
  | { state: 'idle' }
  | { state: 'loading' }
  | { state: 'loaded' }
  | { state: 'error'; message: string; retryable: boolean };

/** A saved picture, plus the user's own annotations. */
export interface SavedPicture {
  picture: Apod;
  rating: Rating;             // 0–5, enforced — not any number
  notes: string;
  tags: string[];
  savedAt: string;
}

/** The whole application state, in one shape. */
export interface AppState {
  pictures: Apod[];
  saved: SavedPicture[];
  status: LoadStatus;

  // gallery
  searchQuery: string;
  daysToShow: number;

  // collection
  collectionQuery: string;
  sortKey: SortKey;
  sortDirection: SortDirection;
  currentPage: number;
  pageSize: number;
}