37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import { db } from "../db";
|
|
import { ErrorBoundary } from "./ErrorBoundrary";
|
|
import { ItemListComponent } from "./ItemListComponent";
|
|
import { ItemLoaderComponent } from "./ItemLoaderComponent";
|
|
|
|
export function App() {
|
|
const [currentId, setCurrentId] = useState(1);
|
|
return <ErrorBoundary>
|
|
<div id="list">
|
|
<h2>All items</h2>
|
|
<ItemListComponent loadItems={async ()=> {
|
|
console.log("Liading items...");
|
|
try {
|
|
const items = await db.items.toArray();
|
|
console.log("got items", items);
|
|
return items;
|
|
} catch (ex) {
|
|
console.error("Error loading items", ex);
|
|
throw ex;
|
|
}
|
|
}} />
|
|
</div>
|
|
<div id="current">
|
|
<h2>Current item</h2>
|
|
<ErrorBoundary>
|
|
<ItemLoaderComponent id={currentId} loadItem={(id: number)=>db.items.get(id)} />
|
|
</ErrorBoundary>
|
|
</div>
|
|
<div id="controls">
|
|
<button id="btnFirst" onClick={()=>setCurrentId(1)}>First</button>
|
|
<button id="btnNext" onClick={()=>setCurrentId(prevId => prevId + 1)}>Next</button>
|
|
<button id="btnInvalidKey" onClick={()=>setCurrentId(NaN)}>Select invalid key</button>
|
|
</div>
|
|
</ErrorBoundary>;
|
|
}
|