mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
import { RouteComponentProps } from '@reach/router';
|
|
import React, { useState } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { RootState } from '../../store';
|
|
|
|
export default function DebugPage(
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
params: RouteComponentProps<unknown>,
|
|
): React.ReactElement {
|
|
const api = useSelector((state: RootState) => state.api.client);
|
|
const [readKey, setReadKey] = useState('');
|
|
const [readValue, setReadValue] = useState('');
|
|
const [writeKey, setWriteKey] = useState('');
|
|
const [writeValue, setWriteValue] = useState('');
|
|
const [writeErrorMsg, setWriteErrorMsg] = useState(null);
|
|
|
|
const performRead = async () => {
|
|
const value = await api.getKey(readKey);
|
|
setReadValue(value);
|
|
};
|
|
const performWrite = async () => {
|
|
const result = await api.putKey(writeKey, writeValue);
|
|
console.log(result);
|
|
};
|
|
const fixJSON = () => {
|
|
try {
|
|
setWriteValue(JSON.stringify(JSON.parse(writeValue)));
|
|
setWriteErrorMsg(null);
|
|
} catch (e) {
|
|
setWriteErrorMsg(e.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<p className="title is-3" style={{ color: '#fa3' }}>
|
|
WELCOME TO HELL
|
|
</p>
|
|
<div className="columns">
|
|
<div className="column">
|
|
<label className="label">Read key</label>
|
|
<div className="field has-addons">
|
|
<div className="control">
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
value={readKey}
|
|
onChange={(ev) => setReadKey(ev.target.value)}
|
|
placeholder="some-bucket/some-key"
|
|
/>
|
|
</div>
|
|
<div className="control">
|
|
<button className="button is-primary" onClick={performRead}>
|
|
Read
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<div className="control">
|
|
<textarea className="textarea" value={readValue} readOnly />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="column">
|
|
<label className="label">Write key</label>
|
|
<div className="field">
|
|
<div className="control">
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
value={writeKey}
|
|
onChange={(ev) => setWriteKey(ev.target.value)}
|
|
placeholder="some-bucket/some-key"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<div className="control">
|
|
<textarea
|
|
className="textarea"
|
|
value={writeValue}
|
|
onChange={(ev) => setWriteValue(ev.target.value)}
|
|
/>
|
|
{writeErrorMsg ? (
|
|
<p>
|
|
<code>{writeErrorMsg}</code>
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<div className="control">
|
|
<button className="button is-primary" onClick={performWrite}>
|
|
Write
|
|
</button>{' '}
|
|
<button className="button" onClick={fixJSON}>
|
|
Fix JSON
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|