Unit 2: JavaScript Essentials for React

// 1. Implicit return of JSX element
const UserCard = ({ name }) => <div className="card">{name}</div>;

// 2. Passing arguments in event handlers via inline arrow function
function ItemList({ items, onDelete }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          {/* We wrap in an arrow function so it executes ONLY upon click */}
          <button onClick={() => onDelete(item.id)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

// Composing dynamic CSS classes based on component state
function AlertBadge({ type, isDismissible, children }) {
  // Evaluates variables and ternary expressions inside the string
  const cssClasses = `alert-box alert-${type} ${isDismissible ? "has-close-btn" : "static-box"}`;

  return <div className={cssClasses}>{children}</div>;
}

// Async function returns a Promise automatically
async function fetchUserProfile(userId) {
  try {
    // Execution pauses here until the network request resolves
    const response = await fetch(`https://api.example.com/users/${userId}`);

    // Check HTTP status code (200-299)
    if (!response.ok) {
      throw new Error(`HTTP network error: status ${response.status}`);
    }

    // Await JSON deserialization
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Failed to load user profile:", error.message);
    throw error; // Re-throw to be caught by UI state handler
  } finally {
    console.log("Network consultation finished.");
  }
}

// ==============================================================================
// DevAscent Academy - Unit 2: JavaScript Essentials for React
// Master Blueprint of Modern ES6+ Features in Action
// ==============================================================================

// 1. Initial State Data (Array of Objects)
const initialInventory = [
  { id: 101, name: "Mechanical Keyboard", price: 120, category: "Hardware", inStock: true },
  { id: 102, name: "Wireless Mouse", price: 60, category: "Hardware", inStock: false },
  { id: 103, name: "Ultra-Wide Monitor", price: 450, category: "Hardware", inStock: true },
  { id: 104, name: "Desk Mat", price: 25, category: "Accessories", inStock: true }
];

// 2. Destructuring & Arrow Functions
const formatProduct = ({ name, price, inStock }) => {
  const availability = inStock ? "Available" : "Out of Stock";
  return `${name} - ${price} USD (${availability})`;
};

// 3. Non-Mutating Array Operations
// Filter: Get only available items
const availableItems = initialInventory.filter(item => item.inStock);

// Map: Transform items into formatted strings
const productListStrings = availableItems.map(formatProduct);

// Reduce: Calculate total inventory value of in-stock items
const totalInventoryValue = availableItems.reduce((acc, item) => acc + item.price, 0);

// 4. Spread Operator for Immutable Updates
const newProduct = { id: 105, name: "USB-C Hub", price: 45, category: "Hardware", inStock: true };
const updatedInventory = [...initialInventory, newProduct];

// 5. Asynchronous Data Fetching Simulation
const simulateFetchUserData = async (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        resolve({ id: userId, username: "dev_guru", role: "Frontend Lead" });
      } else {
        reject(new Error("Invalid User ID supplied"));
      }
    }, 100);
  });
};

// 6. Async Execution
async function runDemo() {
  console.log("--- Available Products ---");
  productListStrings.forEach(str => console.log("•", str));
  console.log(`\nTotal In-Stock Valuation: ${totalInventoryValue} USD`);

  try {
    const user = await simulateFetchUserData(42);
    // Object destructuring with fallback
    const { username, role, department = "Engineering" } = user;
    console.log(`\nActive User: ${username} | Role: ${role} | Dept: ${department}`);
  } catch (err) {
    console.error("Execution error:", err.message);
  }
}

runDemo();