Mini-Build: API Data Fetch UI

// API Data Fetch UI (Logic Only)
class DataFetcher {
  constructor(baseURL) {
    this.baseURL = baseURL;
    this.data = [];
    this.loading = false;
    this.error = null;
  }

  async fetchData(endpoint) {
    this.loading = true;
    this.error = null;
    console.log("⏳ Loading...");

    try {
      const response = await fetch(`${this.baseURL}${endpoint}`);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      this.data = await response.json();
      console.log(`✅ Loaded ${this.data.length} items`);
    } catch (error) {
      this.error = error.message;
      console.error("❌ Error:", error.message);
    } finally {
      this.loading = false;
    }
  }

  search(query) {
    return this.data.filter(item => 
      JSON.stringify(item).toLowerCase().includes(query.toLowerCase())
    );
  }

  display(items = this.data) {
    if (this.loading) return console.log("⏳ Still loading...");
    if (this.error) return console.log(`❌ Error: ${this.error}`);
    if (items.length === 0) return console.log("📭 No results");

    items.forEach(item => {
      console.log(`  👤 ${item.name} — ${item.email} (${item.company?.name || 'N/A'})`);
    });
  }
}

// Demo usage
const fetcher = new DataFetcher("https://jsonplaceholder.typicode.com");

async function demo() {
  // Fetch users
  await fetcher.fetchData("/users");
  
  // Display all users
  console.log("\n📋 All Users:");
  fetcher.display();
  
  // Search
  const results = fetcher.search("rom");
  console.log(`\n🔍 Search 'rom' (${results.length} results):`);
  fetcher.display(results);

  // Fetch posts
  await fetcher.fetchData("/posts");
  console.log(`\n📝 Posts loaded: ${fetcher.data.length}`);
  fetcher.display(fetcher.data.slice(0, 3));
}

demo();