73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { APP_DATA_VERSION, CHART_STORE_CREATION_EVENT } from "../globals";
|
|
|
|
function openDb(): Promise<IDBOpenDBRequest> {
|
|
return new Promise((resolve) => {
|
|
const req = indexedDB.open("ddrDb", APP_DATA_VERSION);
|
|
req.onsuccess = (evt) => resolve(req);
|
|
});
|
|
}
|
|
|
|
async function openStore(): Promise<IDBObjectStore> {
|
|
const db = await openDb();
|
|
const tx = db.result.transaction("chartStore", "readonly");
|
|
return tx.objectStore("chartStore");
|
|
}
|
|
|
|
async function fetchCharts() {
|
|
let store = null;
|
|
try {
|
|
store = await openStore();
|
|
} catch (e) {
|
|
console.log("could not open store", e.message);
|
|
}
|
|
|
|
if (!store) {
|
|
await new Promise<void>((resolve) => {
|
|
document.addEventListener("chartStoreCreate", (evt) => {
|
|
console.log("SHIET");
|
|
resolve();
|
|
});
|
|
});
|
|
|
|
store = await openStore();
|
|
}
|
|
|
|
const entries = await new Promise<any[]>((resolve) => {
|
|
const req = store.getAll(undefined, 100);
|
|
req.onsuccess = (evt) => resolve(req.result);
|
|
});
|
|
console.log("entries", entries);
|
|
return entries;
|
|
}
|
|
|
|
export default function Charts() {
|
|
const fetchChartsQuery = useQuery({
|
|
queryKey: ["fetchCharts"],
|
|
queryFn: fetchCharts,
|
|
});
|
|
|
|
let inner = undefined;
|
|
|
|
if (fetchChartsQuery.isSuccess) {
|
|
inner = (
|
|
<div>
|
|
{fetchChartsQuery.data.map((chart) => (
|
|
// <div>{JSON.stringify(Object.keys(chart))}</div>
|
|
<div>{JSON.stringify(chart.title)}</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h1>Charts</h1>
|
|
|
|
{fetchChartsQuery.status}
|
|
{fetchChartsQuery.error?.message}
|
|
|
|
{inner}
|
|
</>
|
|
);
|
|
}
|