Compare commits

...

2 Commits

Author SHA1 Message Date
1f5f87999b Small UX improvements for add expression view
* respond to ENTER with query action
* eliminate a case of failure in silence
2022-08-10 08:10:07 +03:00
7a2551f7f2 Use 'study card tool' as the name for the app 2022-08-10 07:27:25 +03:00
5 changed files with 29 additions and 15 deletions

View File

@ -1,5 +1,5 @@
{
"name": "flash-card-app",
"name": "study-card-tool",
"version": "0.1.0",
"private": true,
"scripts": {

View File

@ -7,10 +7,13 @@
<meta name="keywords" content="vocabulary,practice,tool" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#2f4f4f" />
<meta name="description" content="Practice vocabulary using flash cards" />
<meta
name="description"
content="Practice vocabulary through repetition with study cards"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<title>Study Card Tool</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

View File

@ -1,7 +1,7 @@
{
"short_name": "Flash Card App",
"name": "Flash Card App",
"description": "Practice vocabulary using flash cards",
"short_name": "Study Card Tool",
"name": "Study Card Tool",
"description": "Practice vocabulary through repetition with study cards",
"icons": [
{
"src": "favicon.ico",

View File

@ -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>
);
}

View File

@ -1,7 +1,7 @@
export function HomeView() {
return (
<div className="page-with-padding content-text scroll">
<h1 className="text-title margin-title">Flash Card App</h1>
<h1 className="text-title margin-title">Study Card Tool</h1>
<p className="text-details margin-paragraph">
A handy tool for vocabulary practice through repetition. Go to{" "}
<i>settings -&gt; create card</i> to start adding words for practicing.
@ -46,7 +46,7 @@ export function HomeView() {
.
</p>
<p className="text-details margin-paragraph">
The content for the flash cards generated is dual-licensed under{" "}
The content for the study cards generated is dual-licensed under{" "}
<a
className="link"
target="_blank"
@ -93,7 +93,7 @@ export function HomeView() {
<h2 className="text-title margin-title">Support the app</h2>
<p className="text-details margin-paragraph">
This app would not exist if it was not for Wiktionary and the Wikimedia
foundation. If you want to support anyone, consider donating to the{" "}
foundation. If you want to support anyone consider donating to the{" "}
<a
className="link"
target="_blank"