playmak3r commited on
Commit
7338211
·
1 Parent(s): 6cfc2e8

feat: update state handling. allowing retry

Browse files
Files changed (1) hide show
  1. 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<string | null | undefined>(null)
13
  const [ translation, { mutate } ] = createResource(text, fetchData)
14
  let textarea: HTMLTextAreaElement | undefined
15
 
16
 
17
- async function fetchData(text: string): Promise<ITranslation | null> {
18
- if (!text) { return null }
 
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={() => setText(textarea?.value)}>Translate</button>
 
 
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 */}