feat: update state handling. allowing retry

src/Home/index.tsx

@@ -8,14 +8,19 @@ interface ITranslation {
     translatedText?: string
 }
 
+interface InputTextState { 
+    text?: string
+}
+
 export default function App() { 
-    const [ text, setText ] = createSignal<string | null | undefined>(null)
+    const [ text, setText ] = createSignal<InputTextState | null>(null)
     const [ translation, { mutate } ] = createResource(text, fetchData)
     let textarea: HTMLTextAreaElement | undefined
 
 
-    async function fetchData(text: string): Promise<ITranslation | null> { 
-      if (!text) { return null }
+    async function fetchData(input: InputTextState): Promise<ITranslation | null> { 
+      const { text } = input
+      if (!text || translation.loading) { return null }
       if (translation()) { mutate(null) }
       const response = await fetch(`/api/translate?text=${text}`, { method: "POST" }).then(response => { 
           if (response.status === 200) { return response.json() }
@@ -30,7 +35,9 @@ export default function App() {
     return (
       <main class="w-screen my-24 mx-5">
         <div class="w-1/2 py-4 px-2 flex justify-end">
-          <button onclick={() => setText(textarea?.value)}>Translate</button>
+          <button onclick={() => {
+              setText({ text: textarea?.value })
+          }}>Translate</button>
         </div>
         <section class="flex">
             {/* amber-500 */}