studycardtool/app
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Small UX improvements for add expression view

Browse Source 
* respond to ENTER with query action
* eliminate a case of failure in silence
This commit is contained in:
Thiago Chaves 2022-08-10 08:10:07 +03:00
parent 7a2551f7f2
commit 1f5f87999b
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/AddExpressionView/AddExpressionView.tsx
View File

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