diff --git a/frontend/src/api/qrcode.ts b/frontend/src/api/qrcode.ts index ef35944..57d85e6 100644 --- a/frontend/src/api/qrcode.ts +++ b/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 { - const url = `${host}/api/qrcode/generate`; - const resp = await axios.post(url, payload, { - responseType: 'arraybuffer', - validateStatus: (s) => s >= 200 && s < 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 {} + const url = `${host}/api/qrcode/generate`; + const resp = await axios.post(url, payload, { + responseType: 'arraybuffer', + validateStatus: (status) => status >= 200 && status < 300, + }); + + const contentType = (resp.headers['content-type'] || '').toString(); - 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 }; } diff --git a/frontend/src/components/organisms/QRForm.tsx b/frontend/src/components/organisms/QRForm.tsx index 9b895f7..42be76f 100644 --- a/frontend/src/components/organisms/QRForm.tsx +++ b/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 }); - - if ('imageUrl' in res && res.imageUrl) { - dispatch({ type: 'setImageUrl', payload: res.imageUrl }); - } 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' }); - } + const payload = { text: currentText, size }; + const res: GenerateResult = await generateQr(payload); + const blobType = { type: res.mime }; + const blob = new Blob([res.data], blobType); + const objectUrl = URL.createObjectURL(blob); + dispatch({ type: 'setImageUrl', payload: objectUrl }); } 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) { - callingApi(); + if (callApiOnReset) { + callingApi(initialState.text); setCallApiOnReset(false); } - }, [callApiOnReset]); + }, [callApiOnReset, callingApi]); return (
@@ -71,7 +67,7 @@ const QRForm: React.FC = () => { dispatch({ type: 'setText', payload: e.target.value })} placeholder={initialState.text} className={styles.qrFormInput}