App.jsx
import { useEffect, useState } from 'react';
import { persistedRestate } from '@kkwaenggwari/restate';
import { flakyStorage, settings } from './storage.js';
import './styles.css';
const useNote = persistedRestate('', { key: 'lab-note', storage: flakyStorage });
export default function Example({ latency = 700, failWrites = false, unavailable = false }) {
useEffect(() => {
Object.assign(settings, { latency, failWrites, unavailable });
}, [latency, failWrites, unavailable]);
const note = useNote();
const { dirty, operation, pending, error } = useNote.useStatus();
const [results, setResults] = useState([]);
const save = () =>
useNote.save().then(
(value) => setResults((list) => [`บันทึกแล้ว: ${JSON.stringify(value)}`, ...list]),
(reason) => setResults((list) => [`ล้มเหลว: ${reason.code ?? reason.message}`, ...list]),
);
return (
<main>
<label>
หมายเหตุ
<input value={note} onChange={(event) => useNote.set(event.target.value)} />
</label>
<div className="actions">
<button onClick={save}>บันทึก</button>
<button
onClick={() => {
save();
save();
save();
}}
>
บันทึกสามครั้ง
</button>
</div>
<dl className="status">
<dt>dirty</dt>
<dd className={dirty ? 'warn' : 'ok'}>{String(dirty)}</dd>
<dt>operation</dt>
<dd>{operation ?? '-'}</dd>
<dt>pending</dt>
<dd>{pending}</dd>
<dt>error</dt>
<dd className={error ? 'bad' : ''}>{error ? (error.code ?? error.message) : '-'}</dd>
</dl>
<h2>ผลลัพธ์</h2>
<ol className="log">
{results.length ? (
results.map((result, index) => <li key={results.length - index}>{result}</li>)
) : (
<li>-</li>
)}
</ol>
</main>
);
}
storage.js
const records = new Map();
export const settings = { latency: 0, failWrites: false, unavailable: false };
const wait = () => new Promise((resolve) => setTimeout(resolve, settings.latency));
export const flakyStorage = {
isAvailable: () => !settings.unavailable,
async getItem(key) {
await wait();
return records.get(key) ?? null;
},
async setItem(key, value) {
await wait();
if (settings.failWrites) throw new Error('ดิสก์เต็ม');
records.set(key, value);
},
async removeItem(key) {
await wait();
records.delete(key);
},
};
