Small UX improvements for add expression view
* respond to ENTER with query action * eliminate a case of failure in silence
This commit is contained in:
parent
7a2551f7f2
commit
1f5f87999b
@ -13,7 +13,7 @@ export function AddExpressionView() {
|
||||
const [error, setError] = useState<any>(undefined);
|
||||
|
||||
return (
|
||||
<div className="page-with-bottom-navigation">
|
||||
<form className="page-with-bottom-navigation">
|
||||
<section className="padding-small scroll">
|
||||
<div className="padding-small">
|
||||
{error ? <p className="text-error">{error.message}</p> : null}
|
||||
@ -49,8 +49,10 @@ export function AddExpressionView() {
|
||||
<button
|
||||
className="navigation-item bottom text-navigation grow"
|
||||
type="submit"
|
||||
value="submit"
|
||||
disabled={prompt === ""}
|
||||
onClick={async () => {
|
||||
onClick={async (event) => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
// `https://en.wiktionary.org/w/api.php?action=parse&format=json&prop=text&page=${query}`;
|
||||
const url = URL.format({
|
||||
@ -67,9 +69,15 @@ export function AddExpressionView() {
|
||||
});
|
||||
const result = await fetch(url);
|
||||
const data = await result.json();
|
||||
setExpression(
|
||||
parseWiktionaryData(prompt, data.parse?.text?.["*"] || "")
|
||||
const expressionData = parseWiktionaryData(
|
||||
prompt,
|
||||
data.parse?.text?.["*"] || ""
|
||||
);
|
||||
if (!expressionData)
|
||||
throw new Error(
|
||||
`Unable to find expression "${prompt}" on Wiktionary in the given language`
|
||||
);
|
||||
setExpression(expressionData);
|
||||
} catch (error) {
|
||||
setError(error);
|
||||
}
|
||||
@ -83,6 +91,7 @@ export function AddExpressionView() {
|
||||
className="navigation-item bottom text-navigation grow"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setPrompt("");
|
||||
setExpression(null);
|
||||
setSubmitStatus(undefined);
|
||||
setError(undefined);
|
||||
@ -104,12 +113,14 @@ export function AddExpressionView() {
|
||||
expression_set_id: 1,
|
||||
category_ids: [],
|
||||
});
|
||||
setExpression(null);
|
||||
setSubmitStatus(`Card "${expression.prompt}" saved`);
|
||||
setError(undefined);
|
||||
} catch (error) {
|
||||
setSubmitStatus(undefined);
|
||||
setError(error);
|
||||
} finally {
|
||||
setPrompt("");
|
||||
setExpression(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
@ -118,6 +129,6 @@ export function AddExpressionView() {
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user