refactor: simplify App component by using an array for items and update class instantiation with TODOs for method implementations

Author: kentcdodds

extra/02.inventory-manager/src/app.tsx

@@ -1,49 +1,38 @@
 import './app.css'
-import {
-	Clothing,
-	ConsoleLogger,
-	Electronics,
-	InMemoryLogger,
-	InventoryManager,
-	Perishable,
-} from './classes'
 
-function App() {
-	const laptop = new Electronics({
-		id: 'elect-001',
+// 🐨 Replace these placeholders with class instances from ./classes.
+// 🐨 Use Electronics, Clothing, and Perishable for the three items.
+const items = [
+	{
 		name: 'Laptop',
-		quantity: 3,
-		basePrice: 999.99,
-		brand: 'Nova',
-		model: 'X1',
-		serialNumber: 'SN-12345',
-		warrantyMonths: 24,
-		location: 'Aisle 4',
-	})
-
-	const hoodie = new Clothing({
-		id: 'cloth-042',
+		description: 'TODO: implement Electronics.getDescription',
+		tracking: 'TODO: implement Electronics.getTrackingInfo',
+		price: 'TODO: implement Electronics.calculatePrice',
+		todo: 'TODO: replace with Electronics class',
+	},
+	{
 		name: 'Hoodie',
-		quantity: 12,
-		basePrice: 39.99,
-		size: 'M',
-		color: 'Slate',
-	})
-
-	const apples = new Perishable({
-		id: 'per-019',
+		description: 'TODO: implement Clothing.getDescription',
+		tracking: null,
+		price: 'TODO: implement Clothing.calculatePrice',
+		todo: 'TODO: replace with Clothing class',
+	},
+	{
 		name: 'Apples',
-		quantity: 20,
-		basePrice: 1.25,
-		expirationDate: '2026-02-12',
-	})
+		description: 'TODO: implement Perishable.getDescription',
+		tracking: null,
+		price: null,
+		todo: 'TODO: replace with Perishable class',
+	},
+]
 
-	const consoleLogger = new ConsoleLogger()
-	const memoryLogger = new InMemoryLogger()
-	const manager = new InventoryManager(consoleLogger)
-	const logPreview = manager.receiveStock(laptop, 0)
-	memoryLogger.log('TODO: implement InMemoryLogger.getLogs')
+// 🐨 Use InventoryManager + ConsoleLogger to generate a real log message.
+const logPreview = 'TODO: implement InventoryManager.receiveStock'
 
+// 🐨 Use InMemoryLogger and display the number of logs stored.
+const memoryLogCount = 'TODO: implement InMemoryLogger.getLogs'
+
+function App() {
 	return (
 		<div className="app">
 			<header className="app-header">
@@ -56,34 +45,25 @@ function App() {
 			<section className="panel">
 				<h2>Items</h2>
 				<div className="grid">
-					<div className="card">
-						<h3>{laptop.name}</h3>
-						<p>{laptop.getDescription()}</p>
-						<p>Tracking: {laptop.getTrackingInfo()}</p>
-						<p>Price (2): ${laptop.calculatePrice(2)}</p>
-						<p className="todo">TODO: implement Electronics methods</p>
-					</div>
-					<div className="card">
-						<h3>{hoodie.name}</h3>
-						<p>{hoodie.getDescription()}</p>
-						<p>Price (3): ${hoodie.calculatePrice(3)}</p>
-						<p className="todo">TODO: implement Clothing methods</p>
-					</div>
-					<div className="card">
-						<h3>{apples.name}</h3>
-						<p>{apples.getDescription()}</p>
-						<p className="todo">TODO: implement Perishable description</p>
-					</div>
+					{items.map((item) => (
+						<div className="card" key={item.name}>
+							<h3>{item.name}</h3>
+							<p>{item.description}</p>
+							{item.tracking ? <p>Tracking: {item.tracking}</p> : null}
+							{item.price ? <p>Price: {item.price}</p> : null}
+							<p className="todo">{item.todo}</p>
+						</div>
+					))}
 				</div>
 			</section>
 
 			<section className="panel">
 				<h2>Inventory Actions</h2>
 				<div className="card">
 					<p>Logger preview: {logPreview}</p>
-					<p>Memory log count: {memoryLogger.getLogs().length}</p>
+					<p>Memory log count: {memoryLogCount}</p>
 					<p className="todo">
-						TODO: implement InventoryManager and logger behaviors
+						TODO: wire up ConsoleLogger, InMemoryLogger, and InventoryManager
 					</p>
 				</div>
 			</section>