feat: update state handling. allowing retry
Browse files- src/Home/index.tsx +11 -4
src/Home/index.tsx
CHANGED
@@ -8,14 +8,19 @@ interface ITranslation {
|
|
8 |
translatedText?: string
|
9 |
}
|
10 |
|
|
|
|
|
|
|
|
|
11 |
export default function App() {
|
12 |
-
const [ text, setText ] = createSignal<
|
13 |
const [ translation, { mutate } ] = createResource(text, fetchData)
|
14 |
let textarea: HTMLTextAreaElement | undefined
|
15 |
|
16 |
|
17 |
-
async function fetchData(
|
18 |
-
|
|
|
19 |
if (translation()) { mutate(null) }
|
20 |
const response = await fetch(`/api/translate?text=${text}`, { method: "POST" }).then(response => {
|
21 |
if (response.status === 200) { return response.json() }
|
@@ -30,7 +35,9 @@ export default function App() {
|
|
30 |
return (
|
31 |
<main class="w-screen my-24 mx-5">
|
32 |
<div class="w-1/2 py-4 px-2 flex justify-end">
|
33 |
-
<button onclick={() =>
|
|
|
|
|
34 |
</div>
|
35 |
<section class="flex">
|
36 |
{/* amber-500 */}
|
|
|
8 |
translatedText?: string
|
9 |
}
|
10 |
|
11 |
+
interface InputTextState {
|
12 |
+
text?: string
|
13 |
+
}
|
14 |
+
|
15 |
export default function App() {
|
16 |
+
const [ text, setText ] = createSignal<InputTextState | null>(null)
|
17 |
const [ translation, { mutate } ] = createResource(text, fetchData)
|
18 |
let textarea: HTMLTextAreaElement | undefined
|
19 |
|
20 |
|
21 |
+
async function fetchData(input: InputTextState): Promise<ITranslation | null> {
|
22 |
+
const { text } = input
|
23 |
+
if (!text || translation.loading) { return null }
|
24 |
if (translation()) { mutate(null) }
|
25 |
const response = await fetch(`/api/translate?text=${text}`, { method: "POST" }).then(response => {
|
26 |
if (response.status === 200) { return response.json() }
|
|
|
35 |
return (
|
36 |
<main class="w-screen my-24 mx-5">
|
37 |
<div class="w-1/2 py-4 px-2 flex justify-end">
|
38 |
+
<button onclick={() => {
|
39 |
+
setText({ text: textarea?.value })
|
40 |
+
}}>Translate</button>
|
41 |
</div>
|
42 |
<section class="flex">
|
43 |
{/* amber-500 */}
|