21 Kunci Jawaban Skill-Sharing

Kunci jawaban 21 Latihan Skill-Sharing. Ide solusinya; sesuaikan dengan nama di kode server/client-mu.

21.1 Persistensi ke Disk

Garis besar di server:

import {readFile, writeFile} from "node:fs/promises";
 
let talks = Object.create(null);
 
// Muat saat start
try {
  talks = JSON.parse(await readFile("./talks.json", "utf8"));
} catch (e) {
  // file belum ada — mulai kosong
}
 
// Panggil ini tiap kali data berubah (PUT/DELETE/komentar)
function simpan() {
  writeFile("./talks.json", JSON.stringify(talks));
}

Kenapa: saat start, coba baca talks.json dan parse jadi state awal; kalau file belum ada, readFile melempar dan kita abaikan (mulai kosong). Tiap perubahan memanggil simpan() yang menulis seluruh daftar sebagai JSON. Untuk aplikasi kecil, menulis tiap perubahan sederhana dan cukup; untuk yang besar kamu bakal menulis lebih jarang atau pakai database.

→ Soal: 21 Latihan Skill-Sharing > 21.1 Persistensi ke Disk

21.2 Field Komentar Ter-reset

Masalahnya: tiap pembaruan menggambar ulang semua talk dari nol, jadi <input> komentar yang sedang diketik hilang. Solusi: pakai kembali komponen talk yang sudah ada dan hanya syncState, jangan bikin DOM baru.

// di komponen daftar talk
syncState(state) {
  let talks = state.talks;
  // ... untuk tiap talk:
  for (let talk of talks) {
    let lama = this.komponenTalk[talk.title];
    if (lama) {
      lama.syncState(talk);          // perbarui yang ada
    } else {
      let baru = new Talk(talk, this.dispatch);
      this.komponenTalk[talk.title] = baru;
      this.dom.appendChild(baru.dom);
    }
  }
  // hapus komponen untuk talk yang sudah tak ada lagi
}

Kenapa: kunci komponen berdasarkan talk.title (ID unik). Kalau komponen untuk talk itu sudah ada, cukup panggil syncState-nya, yang hanya mengubah bagian yang berbeda (judul/ringkasan/komentar) tanpa menyentuh <input> komentar — sehingga teks yang sedang diketik tetap utuh. Komponen baru hanya dibuat untuk talk yang benar-benar baru, dan komponen untuk talk yang dihapus dibuang. Ini persis pola “sinkronkan yang ada, jangan gambar ulang semua” dari editor piksel.

→ Soal: 21 Latihan Skill-Sharing > 21.2 Field Komentar Ter-reset