Fixing the issues on the reset button

frontend/src/api/qrcode.ts

@@ -4,26 +4,17 @@ import type { GenerateResult } from '@appTypes/qrcode';
 const host = 'http://localhost:5001';
 
 export async function generateQr(payload: { text: string; size: number }): Promise<GenerateResult> {
+  try {
     const url = `${host}/api/qrcode/generate`;
     const resp = await axios.post(url, payload, {
       responseType: 'arraybuffer',
-    validateStatus: (s) => s >= 200 && s < 300,
+      validateStatus: (status) => status >= 200 && status < 300,
     });
 
     const contentType = (resp.headers['content-type'] || '').toString();
 
-  // Try JSON parse in case backend returns { imageUrl }
-  try {
-    const decoded = new TextDecoder().decode(resp.data);
-    const parsed = JSON.parse(decoded);
-    if (parsed?.imageUrl) {
-      return { imageUrl: parsed.imageUrl };
-    }
-  } catch {}
-
-  if (contentType.startsWith('image/')) {
     return { mime: contentType, data: resp.data as ArrayBuffer };
+  } catch (error) {
+    console.error(error);
   }
-
-  return { mime: contentType || 'image/png', data: resp.data as ArrayBuffer };
 }

frontend/src/components/organisms/QRForm.tsx

@@ -10,28 +10,24 @@ const QRForm: React.FC = () => {
   const { state, dispatch } = useQrStore();
   const { text, size, loading } = state;
 
-  const callingApi = async () => {
+  const callingApi = async (overrideText?: string) => {
+    const currentText = overrideText ?? text;
     dispatch({ type: 'setError', payload: null });
     dispatch({ type: 'setImageUrl', payload: null });
 
-    if (!text.trim()) {
+    if (!currentText.trim()) {
       dispatch({ type: 'setError', payload: 'Please enter a URL or text to encode.' });
       return;
     }
 
     dispatch({ type: 'setLoading', payload: true });
     try {
-      const res: GenerateResult = await generateQr({ text, size });
+      const payload = { text: currentText, size };
-
+      const res: GenerateResult = await generateQr(payload);
-      if ('imageUrl' in res && res.imageUrl) {
+      const blobType = { type: res.mime };
-        dispatch({ type: 'setImageUrl', payload: res.imageUrl });
+      const blob = new Blob([res.data], blobType);
-      } else if ('data' in res && res.data && res.mime) {
-        const blob = new Blob([res.data], { type: res.mime });
       const objectUrl = URL.createObjectURL(blob);
       dispatch({ type: 'setImageUrl', payload: objectUrl });
-      } else {
-        dispatch({ type: 'setError', payload: 'Unexpected server response' });
-      }
     } catch {
       dispatch({ type: 'setError', payload: 'Failed to generate QR code. Please try again.' });
     } finally {
@@ -56,14 +52,14 @@ const QRForm: React.FC = () => {
     }
     hasCalledRef.current = true;
     callingApi();
-  }, []);
+  }, [callingApi]);
 
   useEffect(() => {
-    if (text === initialState.text && callApiOnReset) {
+    if (callApiOnReset) {
-      callingApi();
+      callingApi(initialState.text);
       setCallApiOnReset(false);
     }
-  }, [callApiOnReset]);
+  }, [callApiOnReset, callingApi]);
 
   return (
     <div className={styles.qrFormBody}>
@@ -71,7 +67,7 @@ const QRForm: React.FC = () => {
         <label className={styles.qrFormLabel}>Submit URL or text</label>
         <input
           type="text"
-          value={text === initialState.text ? null : text}
+          value={text !== initialState.text ? text : null}
           onChange={(e) => dispatch({ type: 'setText', payload: e.target.value })}
           placeholder={initialState.text}
           className={styles.qrFormInput}