Bab 3: Berbagi State Antar Komponen

// ❌ Setiap panel punya state sendiri - gak bisa koordinasi!
function Panel({ judul, isi }) {
  const [terbuka, setTerbuka] = useState(false);

  return (
    <div>
      <button onClick={() => setTerbuka(!terbuka)}>
        {judul}
      </button>
      {terbuka && <p>{isi}</p>}
    </div>
  );
}

function HalamanFAQ() {
  return (
    <div>
      {/* Kedua panel bisa terbuka bersamaan! Gak sesuai requirement */}
      <Panel judul="Apa itu React?" isi="React adalah library JavaScript..." />
      <Panel judul="Apa itu JSX?" isi="JSX adalah syntax extension..." />
    </div>
  );
}

// SEBELUM: Panel punya state sendiri
function Panel({ judul, isi }) {
  const [terbuka, setTerbuka] = useState(false); // ← Hapus ini
  // ...
}

// SESUDAH: Panel terima state dari parent
function Panel({ judul, isi, terbuka, onToggle }) {
  // Gak punya state sendiri, terima dari props
  return (
    <div>
      <button onClick={onToggle}>
        {judul} {terbuka ? '▼' : '▶'}
      </button>
      {terbuka && <p>{isi}</p>}
    </div>
  );
}

function HalamanFAQ() {
  // State disimpan di PARENT
  const [indexAktif, setIndexAktif] = useState(null);

  return (
    <div>
      <h2>❓ FAQ</h2>
      <Panel
        judul="Apa itu React?"
        isi="React adalah library JavaScript untuk membangun UI."
        terbuka={indexAktif === 0}
        onToggle={() => setIndexAktif(indexAktif === 0 ? null : 0)}
      />
      <Panel
        judul="Apa itu JSX?"
        isi="JSX adalah syntax extension yang memungkinkan kamu menulis HTML di JavaScript."
        terbuka={indexAktif === 1}
        onToggle={() => setIndexAktif(indexAktif === 1 ? null : 1)}
      />
      <Panel
        judul="Apa itu State?"
        isi="State adalah data yang bisa berubah dan mempengaruhi tampilan komponen."
        terbuka={indexAktif === 2}
        onToggle={() => setIndexAktif(indexAktif === 2 ? null : 2)}
      />
    </div>
  );
}

// Komponen ini punya state SENDIRI
// Parent gak bisa kontrol apakah panel terbuka atau tidak
function PanelMandiri({ judul, isi }) {
  const [terbuka, setTerbuka] = useState(false); // State internal

  return (
    <div>
      <button onClick={() => setTerbuka(!terbuka)}>
        {judul}
      </button>
      {terbuka && <p>{isi}</p>}
    </div>
  );
}

// Parent cuma "pasang" aja, gak bisa kontrol
function App() {
  return <PanelMandiri judul="FAQ" isi="..." />;
  // Gak bisa bilang: "Panel, buka dong!" dari sini
}

// Komponen ini DIKONTROL oleh parent lewat props
// Gak punya state sendiri untuk buka/tutup
function PanelTerkontrol({ judul, isi, terbuka, onToggle }) {
  return (
    <div>
      <button onClick={onToggle}>
        {judul}
      </button>
      {terbuka && <p>{isi}</p>}
    </div>
  );
}

// Parent punya KONTROL PENUH
function App() {
  const [buka, setBuka] = useState(false);

  return (
    <PanelTerkontrol
      judul="FAQ"
      isi="..."
      terbuka={buka}
      onToggle={() => setBuka(!buka)}
    />
  );
  // Parent bisa kapan aja bilang: setBuka(true) → panel terbuka!
}

// ✅ SATU sumber kebenaran: App punya data suhu
function App() {
  const [suhuCelsius, setSuhuCelsius] = useState(25);

  return (
    <div>
      <h1>🌡️ Konverter Suhu</h1>
      <InputCelsius
        suhu={suhuCelsius}
        onChange={setSuhuCelsius}
      />
      <InputFahrenheit
        suhu={suhuCelsius}
        onChange={setSuhuCelsius}
      />
      <TampilanSuhu suhu={suhuCelsius} />
    </div>
  );
}

function InputCelsius({ suhu, onChange }) {
  return (
    <label>
      Celsius:
      <input
        type="number"
        value={suhu}
        onChange={(e) => onChange(Number(e.target.value))}
      />
    </label>
  );
}

function InputFahrenheit({ suhu, onChange }) {
  // Konversi untuk tampilan
  const fahrenheit = (suhu * 9/5) + 32;

  function handleChange(e) {
    // Konversi balik ke Celsius sebelum kirim ke parent
    const nilaiF = Number(e.target.value);
    const nilaiC = (nilaiF - 32) * 5/9;
    onChange(nilaiC);
  }

  return (
    <label>
      Fahrenheit:
      <input
        type="number"
        value={Math.round(fahrenheit * 100) / 100}
        onChange={handleChange}
      />
    </label>
  );
}

function TampilanSuhu({ suhu }) {
  let deskripsi;
  if (suhu < 0) deskripsi = '🥶 Beku!';
  else if (suhu < 20) deskripsi = '🧥 Dingin';
  else if (suhu < 30) deskripsi = '😊 Nyaman';
  else deskripsi = '🥵 Panas!';

  return <p>{deskripsi} ({suhu}°C)</p>;
}

import { useState } from 'react';

const PRODUK = [
  { id: 1, nama: 'Laptop ASUS', kategori: 'Elektronik', harga: 8500000, stok: true },
  { id: 2, nama: 'Mouse Logitech', kategori: 'Elektronik', harga: 350000, stok: true },
  { id: 3, nama: 'Meja Kerja', kategori: 'Furniture', harga: 1200000, stok: false },
  { id: 4, nama: 'Kursi Gaming', kategori: 'Furniture', harga: 2500000, stok: true },
  { id: 5, nama: 'Headset Sony', kategori: 'Elektronik', harga: 750000, stok: true },
  { id: 6, nama: 'Rak Buku', kategori: 'Furniture', harga: 450000, stok: false },
];

// PARENT: Pemilik state yang di-share
function AplikasiToko() {
  // State yang di-share antara SearchBar dan ProductList
  const [pencarian, setPencarian] = useState('');
  const [cariStokAja, setCariStokAja] = useState(false);
  const [kategoriAktif, setKategoriAktif] = useState('Semua');

  // Derived: produk yang sudah difilter
  const produkTerfilter = PRODUK.filter(p => {
    const cocokNama = p.nama.toLowerCase().includes(pencarian.toLowerCase());
    const cocokStok = cariStokAja ? p.stok : true;
    const cocokKategori = kategoriAktif === 'Semua' || p.kategori === kategoriAktif;
    return cocokNama && cocokStok && cocokKategori;
  });

  return (
    <div>
      <h1>🏪 Toko Online</h1>

      {/* Child 1: Kontrol pencarian */}
      <BarPencarian
        pencarian={pencarian}
        onPencarianBerubah={setPencarian}
        cariStokAja={cariStokAja}
        onStokBerubah={setCariStokAja}
        kategoriAktif={kategoriAktif}
        onKategoriBerubah={setKategoriAktif}
      />

      {/* Child 2: Tampilkan hasil */}
      <DaftarProduk produk={produkTerfilter} />

      {/* Child 3: Info jumlah */}
      <InfoHasil total={PRODUK.length} terfilter={produkTerfilter.length} />
    </div>
  );
}

// CHILD 1: Bar pencarian (controlled component)
function BarPencarian({
  pencarian,
  onPencarianBerubah,
  cariStokAja,
  onStokBerubah,
  kategoriAktif,
  onKategoriBerubah,
}) {
  const kategoriList = ['Semua', 'Elektronik', 'Furniture'];

  return (
    <div style={{ marginBottom: '20px', padding: '15px', background: '#f5f5f5' }}>
      <input
        type="text"
        placeholder="🔍 Cari produk..."
        value={pencarian}
        onChange={(e) => onPencarianBerubah(e.target.value)}
        style={{ width: '100%', padding: '8px', marginBottom: '10px' }}
      />

      <div>
        <label>
          <input
            type="checkbox"
            checked={cariStokAja}
            onChange={(e) => onStokBerubah(e.target.checked)}
          />
          Hanya yang tersedia
        </label>
      </div>

      <div style={{ marginTop: '10px' }}>
        {kategoriList.map(kat => (
          <button
            key={kat}
            onClick={() => onKategoriBerubah(kat)}
            style={{
              marginRight: '5px',
              padding: '5px 10px',
              background: kategoriAktif === kat ? '#007bff' : '#ddd',
              color: kategoriAktif === kat ? 'white' : 'black',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
            }}
          >
            {kat}
          </button>
        ))}
      </div>
    </div>
  );
}

// CHILD 2: Daftar produk
function DaftarProduk({ produk }) {
  if (produk.length === 0) {
    return <p>😕 Gak ada produk yang cocok dengan pencarian kamu.</p>;
  }

  return (
    <div>
      {produk.map(p => (
        <div
          key={p.id}
          style={{
            padding: '10px',
            marginBottom: '8px',
            border: '1px solid #ddd',
            borderRadius: '4px',
            opacity: p.stok ? 1 : 0.5,
          }}
        >
          <strong>{p.nama}</strong>
          <span style={{ marginLeft: '10px', color: '#666' }}>{p.kategori}</span>
          <span style={{ float: 'right' }}>
            Rp {p.harga.toLocaleString()}
            {!p.stok && <span style={{ color: 'red' }}> (Habis)</span>}
          </span>
        </div>
      ))}
    </div>
  );
}

// CHILD 3: Info hasil
function InfoHasil({ total, terfilter }) {
  return (
    <p style={{ color: '#666', marginTop: '10px' }}>
      Menampilkan {terfilter} dari {total} produk
    </p>
  );
}

// Parent: punya state + handler
function Parent() {
  const [nilai, setNilai] = useState('');

  function handleBerubah(nilaiBaru) {
    // Bisa tambah logika di sini (validasi, transform, dll)
    setNilai(nilaiBaru);
  }

  return (
    <Child
      nilai={nilai}           // Kirim STATE ke bawah
      onBerubah={handleBerubah} // Kirim HANDLER ke bawah
    />
  );
}

// Child: terima state + handler dari parent
function Child({ nilai, onBerubah }) {
  return (
    <input
      value={nilai}
      onChange={(e) => onBerubah(e.target.value)}
    />
  );
}

import { useState } from 'react';

function Accordion() {
  const [indexAktif, setIndexAktif] = useState(null);

  const daftarFAQ = [
    {
      pertanyaan: 'Bagaimana cara mendaftar?',
      jawaban: 'Klik tombol "Daftar" di pojok kanan atas, isi form dengan data yang valid, lalu klik "Submit". Kamu akan menerima email konfirmasi dalam 5 menit.',
    },
    {
      pertanyaan: 'Berapa biaya berlangganan?',
      jawaban: 'Kami punya 3 paket: Basic (gratis), Pro (Rp 99.000/bulan), dan Enterprise (hubungi sales). Semua paket bisa dicoba gratis 14 hari.',
    },
    {
      pertanyaan: 'Bagaimana cara membatalkan langganan?',
      jawaban: 'Masuk ke Settings → Billing → Cancel Subscription. Langganan kamu akan tetap aktif sampai akhir periode billing saat ini.',
    },
    {
      pertanyaan: 'Apakah data saya aman?',
      jawaban: 'Ya! Kami menggunakan enkripsi end-to-end dan server kami tersertifikasi ISO 27001. Data kamu gak akan dijual ke pihak ketiga.',
    },
  ];

  function handleToggle(index) {
    // Kalau yang diklik sudah aktif, tutup (set null)
    // Kalau beda, buka yang baru (otomatis tutup yang lama)
    setIndexAktif(indexAktif === index ? null : index);
  }

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
      <h2>❓ Frequently Asked Questions</h2>
      {daftarFAQ.map((faq, index) => (
        <PanelAccordion
          key={index}
          pertanyaan={faq.pertanyaan}
          jawaban={faq.jawaban}
          terbuka={indexAktif === index}
          onToggle={() => handleToggle(index)}
        />
      ))}
    </div>
  );
}

function PanelAccordion({ pertanyaan, jawaban, terbuka, onToggle }) {
  return (
    <div style={{
      border: '1px solid #ddd',
      borderRadius: '8px',
      marginBottom: '8px',
      overflow: 'hidden',
    }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%',
          padding: '15px',
          textAlign: 'left',
          background: terbuka ? '#e3f2fd' : 'white',
          border: 'none',
          cursor: 'pointer',
          fontSize: '16px',
          fontWeight: 'bold',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        {pertanyaan}
        <span style={{
          transform: terbuka ? 'rotate(180deg)' : 'rotate(0deg)',
          transition: 'transform 0.2s',
        }}>
          ▼
        </span>
      </button>

      {terbuka && (
        <div style={{
          padding: '15px',
          background: '#fafafa',
          borderTop: '1px solid #eee',
        }}>
          {jawaban}
        </div>
      )}
    </div>
  );
}

import { useState } from 'react';

function TabNavigation() {
  const [tabAktif, setTabAktif] = useState('profil');

  return (
    <div>
      <h2>👤 Akun Saya</h2>

      {/* Tab buttons */}
      <TabBar tabAktif={tabAktif} onTabBerubah={setTabAktif} />

      {/* Tab content */}
      <TabContent tabAktif={tabAktif} />
    </div>
  );
}

function TabBar({ tabAktif, onTabBerubah }) {
  const tabs = [
    { id: 'profil', label: '👤 Profil' },
    { id: 'pesanan', label: '📦 Pesanan' },
    { id: 'pengaturan', label: '⚙️ Pengaturan' },
  ];

  return (
    <div style={{ display: 'flex', borderBottom: '2px solid #ddd' }}>
      {tabs.map(tab => (
        <button
          key={tab.id}
          onClick={() => onTabBerubah(tab.id)}
          style={{
            padding: '10px 20px',
            border: 'none',
            background: 'none',
            cursor: 'pointer',
            borderBottom: tabAktif === tab.id ? '3px solid #007bff' : 'none',
            fontWeight: tabAktif === tab.id ? 'bold' : 'normal',
            color: tabAktif === tab.id ? '#007bff' : '#666',
          }}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
}

function TabContent({ tabAktif }) {
  switch (tabAktif) {
    case 'profil':
      return (
        <div style={{ padding: '20px' }}>
          <h3>Profil Saya</h3>
          <p>Nama: Budi Santoso</p>
          <p>Email: budi@email.com</p>
          <p>Bergabung: Januari 2024</p>
        </div>
      );
    case 'pesanan':
      return (
        <div style={{ padding: '20px' }}>
          <h3>Riwayat Pesanan</h3>
          <p>📦 Pesanan #001 - Laptop ASUS - Dikirim</p>
          <p>📦 Pesanan #002 - Mouse Logitech - Selesai</p>
        </div>
      );
    case 'pengaturan':
      return (
        <div style={{ padding: '20px' }}>
          <h3>Pengaturan</h3>
          <p>🔔 Notifikasi: Aktif</p>
          <p>🌙 Dark Mode: Nonaktif</p>
        </div>
      );
    default:
      return null;
  }
}

// ❌ State warna tema di-lift sampai ke App padahal cuma dipakai di Settings
function App() {
  const [tema, setTema] = useState('light'); // Ini cuma dipakai di halaman Settings!
  const [user, setUser] = useState(null);
  const [notif, setNotif] = useState([]);
  // ... 20 state lainnya

  return (
    <Router>
      <Header />
      <Settings tema={tema} onTemaBerubah={setTema} /> {/* Cuma di sini */}
      <Footer />
    </Router>
  );
}

// ✅ Simpan state sedekat mungkin dengan yang membutuhkan
function Settings() {
  const [tema, setTema] = useState('light'); // Cukup di sini!
  return <TemaSelector tema={tema} onChange={setTema} />;
}

// ❌ Props diteruskan melewati banyak level tanpa dipakai
function App() {
  const [user, setUser] = useState({ nama: 'Budi' });
  return <Layout user={user} />;
}

function Layout({ user }) {
  // Layout gak pakai user, cuma nerusin
  return <Sidebar user={user} />;
}

function Sidebar({ user }) {
  // Sidebar juga gak pakai, cuma nerusin
  return <UserInfo user={user} />;
}

function UserInfo({ user }) {
  // Baru di sini dipake!
  return <p>Halo, {user.nama}!</p>;
}

// ❌ Child terima state tapi gak bisa mengubahnya
function Parent() {
  const [nilai, setNilai] = useState('');
  return <Child nilai={nilai} />; // Mana handler-nya?
}

function Child({ nilai }) {
  // Gak bisa update! Gak ada cara kirim perubahan ke parent
  return <input value={nilai} onChange={???} />;
}

// ✅ Selalu kirim handler bersama state
function Parent() {
  const [nilai, setNilai] = useState('');
  return <Child nilai={nilai} onBerubah={setNilai} />;
}

function Child({ nilai, onBerubah }) {
  return <input value={nilai} onChange={(e) => onBerubah(e.target.value)} />;
}

// ❌ JANGAN ubah props! Props itu read-only
function Child({ data }) {
  data.nama = 'Baru'; // SALAH! Ini mutasi props
  return <p>{data.nama}</p>;
}

// ✅ Kalau mau ubah, panggil handler dari parent
function Child({ data, onUpdate }) {
  function handleGantiNama() {
    onUpdate({ ...data, nama: 'Baru' }); // Kirim data baru ke parent
  }
  return <button onClick={handleGantiNama}>Ganti Nama</button>;
}