Fix race?

This commit is contained in:
Dominic Zimmer 2025-05-03 18:08:46 +02:00
parent 7438573c49
commit b42097f4b8

View File

@ -29,67 +29,70 @@ export const App : React.FC = () => {
const formSubmit = async () => { const formSubmit = async () => {
const newst = addEntry(store, {variant: "eats", date: new Date().toString(), item: input} ); const newst = addEntry(store, {variant: "eats", date: new Date().toString(), item: input} );
console.log("newstore is", newst); console.log("newstore is", newst);
await API.write(JSON.stringify(store)) API.write(JSON.stringify(store)).then(async () => {
const fromserver = await API.read(); setTimeout(async () => {
setStore({...fromserver} ); const fromserver = await API.read();
setInput(""); setStore({...fromserver} );
}; setInput("");
const [input, setInput] = useState<string>(""); }, 150);
})
};
const [input, setInput] = useState<string>("");
return ( return (
<div className="App"> <div className="App">
<h1>SHULNEFF</h1> <h1>SHULNEFF</h1>
<div className="toprow"> <div className="toprow">
<div className="eats"> <div className="eats">
<h2 onContextMenu={(e) => {e.preventDefault(); setShowAPIField(!showAPIField);}}>I ate ...</h2> <h2 onContextMenu={(e) => {e.preventDefault(); setShowAPIField(!showAPIField);}}>I ate ...</h2>
{showAPIField? {showAPIField?
<input placeholder='API Token' onChange={(e) => { <input placeholder='API Token' onChange={(e) => {
localStorage.setItem("apikey", e.target.value); localStorage.setItem("apikey", e.target.value);
}}/> }}/>
:null} :null}
<form> <form>
<div> <div>
<input type="text" placeholder='Stinking Fish' onChange={(e) => { <input type="text" placeholder='Stinking Fish' onChange={(e) => {
setInput(e.target.value);} setInput(e.target.value);}
} onKeyDown={async (e) =>{ } onKeyDown={async (e) =>{
if (e.key === "Enter") { if (e.key === "Enter") {
await formSubmit(); await formSubmit();
} }
}} value={input} /> }} value={input} />
<button <button
onClick={formSubmit} onClick={formSubmit}
disabled={input.trim().length < 2} disabled={input.trim().length < 2}
>Submit</button> >Submit</button>
</div> </div>
</form> </form>
</div> </div>
<div className="reacts"> <div className="reacts">
<button <button
onClick={ async () => { onClick={ async () => {
const newst = addEntry(store, {variant: "allergy", date: new Date().toString()} ); const newst = addEntry(store, {variant: "allergy", date: new Date().toString()} );
await API.write(JSON.stringify(store)) await API.write(JSON.stringify(store))
const fromserver = await API.read(); const fromserver = await API.read();
setStore({...fromserver} ); setStore({...fromserver} );
}} }}
><h3>Allergy Alert!</h3></button> ><h3>Allergy Alert!</h3></button>
</div> </div>
</div> </div>
<hr/> <hr/>
{store ? {store ?
<div className={"entry-table"}> <div className={"entry-table"}>
<RenderTable API={API} store={store} setStore={setStore} /> <RenderTable API={API} store={store} setStore={setStore} />
</div> </div>
:null} :null}
<hr/> <hr/>
<details name='foo'> <details name='foo'>
<summary>Raw Store</summary> <summary>Raw Store</summary>
<pre> <pre>
{JSON.stringify(store, null, 4)} {JSON.stringify(store, null, 4)}
</pre> </pre>
</details> </details>
</div> </div>
); );
}; };
const DATEFORMAT = "YYYY MM DD HH:mm"; const DATEFORMAT = "YYYY MM DD HH:mm";
@ -139,10 +142,12 @@ export const RenderTable : React.FC<{API: APIEndPoint, store: Store, setStore: (
if (isSelected) { if (isSelected) {
const newst = removeEntry(store, item ); const newst = removeEntry(store, item );
console.log("newstore is", newst); console.log("newstore is", newst);
await API.write(JSON.stringify(store)) API.write(JSON.stringify(store)).then(async () => {
const fromserver = await API.read(); setTimeout(async () => {
setStore({...fromserver} ); const fromserver = await API.read();
} setStore({...fromserver} );
}, 150);
}
}} }}
key={index} className="reacts"><td>{datestring}</td> key={index} className="reacts"><td>{datestring}</td>
{isSelected ? {isSelected ?