Bab 1: Bereaksi Terhadap Input dengan State

// Kamu harus kasih tau SETIAP LANGKAH ke browser
const tombol = document.getElementById('kirim');
const form = document.getElementById('form-pesan');
const loading = document.getElementById('loading');
const sukses = document.getElementById('sukses');

tombol.addEventListener('click', function() {
  // Langkah 1: Sembunyiin form
  form.style.display = 'none';
  // Langkah 2: Tampilin loading
  loading.style.display = 'block';
  
  // Langkah 3: Setelah selesai...
  setTimeout(function() {
    // Langkah 4: Sembunyiin loading
    loading.style.display = 'none';
    // Langkah 5: Tampilin pesan sukses
    sukses.style.display = 'block';
  }, 2000);
});

function FormPesan() {
  const [status, setStatus] = useState('mengetik'); // 'mengetik' | 'mengirim' | 'sukses'

  // Kamu cuma bilang: "Kalau statusnya X, tampilin Y"
  if (status === 'sukses') {
    return <h2>Pesan terkirim! ✅</h2>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <textarea disabled={status === 'mengirim'} />
      <button disabled={status === 'mengirim'}>
        {status === 'mengirim' ? 'Mengirim...' : 'Kirim'}
      </button>
    </form>
  );
}

// State 1: KOSONG - user belum ngetik apa-apa
// State 2: MENGETIK - user lagi ngetik pesan
// State 3: MENGIRIM - pesan lagi dikirim ke server
// State 4: SUKSES - pesan berhasil terkirim
// State 5: ERROR - ada masalah saat kirim

function FormPesan() {
  // Coba ganti-ganti nilai ini untuk lihat setiap state
  const status = 'kosong'; // Ganti: 'kosong', 'mengetik', 'mengirim', 'sukses', 'error'
  const error = null;      // Ganti: null, 'Gagal mengirim pesan'

  return (
    <div>
      <h2>Kirim Pesan ke CS</h2>

      {/* State SUKSES */}
      {status === 'sukses' && (
        <div className="sukses">
          <p>✅ Pesan kamu sudah terkirim!</p>
        </div>
      )}

      {/* Form (tampil di semua state KECUALI sukses) */}
      {status !== 'sukses' && (
        <form>
          <textarea
            placeholder="Tulis pesan kamu..."
            disabled={status === 'mengirim'}
          />

          {/* Pesan error */}
          {status === 'error' && (
            <p className="error">❌ {error}</p>
          )}

          <button disabled={status === 'kosong' || status === 'mengirim'}>
            {status === 'mengirim' ? '⏳ Mengirim...' : 'Kirim Pesan'}
          </button>
        </form>
      )}
    </div>
  );
}

// ✅ AMAN: Hanya satu status yang aktif pada satu waktu
const [status, setStatus] = useState('idle'); 
// Nilai yang mungkin: 'idle' | 'mengetik' | 'mengirim' | 'sukses' | 'error'

// Boolean cocok untuk hal yang benar-benar on/off
const [modalTerbuka, setModalTerbuka] = useState(false);

// String/enum cocok untuk hal yang punya BANYAK kemungkinan
const [statusPesanan, setStatusPesanan] = useState('menunggu');
// 'menunggu' | 'diproses' | 'dikirim' | 'sampai' | 'dibatalkan'

function MesinMinuman() {
  const [state, setState] = useState('idle');
  const [saldo, setSaldo] = useState(0);

  // Definisikan transisi yang VALID
  function masukkanUang(jumlah) {
    // Hanya bisa dari state 'idle' atau 'punya_saldo'
    if (state === 'idle' || state === 'punya_saldo') {
      setSaldo(saldo + jumlah);
      setState('punya_saldo');
    }
    // Kalau state-nya 'mengeluarkan', tombol uang diabaikan
  }

  function pilihMinuman(harga) {
    // Hanya bisa dari state 'punya_saldo' DAN saldo cukup
    if (state === 'punya_saldo' && saldo >= harga) {
      setState('mengeluarkan');
      setSaldo(saldo - harga);

      // Simulasi minuman keluar
      setTimeout(() => {
        setState('idle');
      }, 2000);
    }
  }

  return (
    <div>
      <h2>🥤 Mesin Minuman</h2>
      <p>Status: {state}</p>
      <p>Saldo: Rp {saldo.toLocaleString()}</p>

      <button
        onClick={() => masukkanUang(2000)}
        disabled={state === 'mengeluarkan'}
      >
        Masukkan Rp 2.000
      </button>

      <button
        onClick={() => pilihMinuman(5000)}
        disabled={state !== 'punya_saldo' || saldo < 5000}
      >
        Teh Botol (Rp 5.000)
      </button>

      {state === 'mengeluarkan' && <p>⏳ Mengambil minuman...</p>}
    </div>
  );
}

import { useState } from 'react';

function FormLogin() {
  // Satu state untuk mengontrol seluruh alur
  const [status, setStatus] = useState('idle');
  // 'idle' | 'mengetik' | 'mengirim' | 'sukses' | 'error'

  // Data form
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [pesanError, setPesanError] = useState('');

  // Apakah form bisa di-submit?
  const bisaSubmit = email.length > 0 && password.length > 0 && status !== 'mengirim';

  // Handler: user ngetik
  function handleInputBerubah(field, nilai) {
    if (field === 'email') setEmail(nilai);
    if (field === 'password') setPassword(nilai);

    // Kalau sebelumnya error, reset ke mengetik
    if (status === 'error') {
      setStatus('mengetik');
      setPesanError('');
    } else if (status === 'idle') {
      setStatus('mengetik');
    }
  }

  // Handler: user submit form
  async function handleSubmit(e) {
    e.preventDefault();

    // Guard: jangan submit kalau lagi ngirim
    if (status === 'mengirim') return;

    setStatus('mengirim');

    try {
      // Simulasi API call
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          if (email === 'admin@test.com' && password === '123456') {
            resolve();
          } else {
            reject(new Error('Email atau password salah'));
          }
        }, 1500);
      });

      setStatus('sukses');
    } catch (err) {
      setStatus('error');
      setPesanError(err.message);
    }
  }

  // RENDER berdasarkan state
  if (status === 'sukses') {
    return (
      <div className="sukses">
        <h2>🎉 Login Berhasil!</h2>
        <p>Selamat datang, {email}!</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>🔐 Login</h2>

      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => handleInputBerubah('email', e.target.value)}
          disabled={status === 'mengirim'}
          placeholder="contoh@email.com"
        />
      </div>

      <div>
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => handleInputBerubah('password', e.target.value)}
          disabled={status === 'mengirim'}
          placeholder="Masukkan password"
        />
      </div>

      {/* Tampilkan error kalau ada */}
      {status === 'error' && (
        <p style={{ color: 'red' }}>❌ {pesanError}</p>
      )}

      <button type="submit" disabled={!bisaSubmit}>
        {status === 'mengirim' ? '⏳ Memproses...' : 'Masuk'}
      </button>
    </form>
  );
}

// ❌ JANGAN GINI
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false);

// Bisa terjadi: loading=true, success=true → MUSTAHIL tapi kode memungkinkan

// ✅ GINI AJA
const [status, setStatus] = useState('idle');
// 'idle' | 'loading' | 'success' | 'error'

// ❌ User bisa klik tombol berkali-kali saat loading
<button onClick={handleSubmit}>Kirim</button>

// ✅ Disable saat sedang proses
<button onClick={handleSubmit} disabled={status === 'mengirim'}>
  {status === 'mengirim' ? 'Mengirim...' : 'Kirim'}
</button>

// ❌ Kalau API gagal, user stuck di loading selamanya
async function handleSubmit() {
  setStatus('mengirim');
  const hasil = await kirimData(); // Kalau error, gak di-catch!
  setStatus('sukses');
}

// ✅ Selalu handle error
async function handleSubmit() {
  setStatus('mengirim');
  try {
    const hasil = await kirimData();
    setStatus('sukses');
  } catch (err) {
    setStatus('error');
    setPesanError(err.message);
  }
}

// ❌ Mindset imperatif: "Saya mau UBAH tampilan"
function handleKlik() {
  document.getElementById('pesan').style.display = 'block'; // JANGAN!
}

// ✅ Mindset deklaratif: "Saya mau UBAH state, biar React yang ubah tampilan"
function handleKlik() {
  setTampilkanPesan(true); // React otomatis re-render
}

// ❌ Dua state yang harusnya gak bisa true bersamaan
const [sedangEdit, setSedangEdit] = useState(false);
const [sedangHapus, setSedangHapus] = useState(false);

// Gimana kalau keduanya true? UI jadi bingung

// ✅ Pakai satu state
const [mode, setMode] = useState('tampil'); // 'tampil' | 'edit' | 'hapus'