adding the logic to generate the image

frontend/src/api/qrcode.ts

@@ -1,8 +1,10 @@
 import axios from 'axios';
-import type { GenerateResult } from '@types/qrcode';
+import type { GenerateResult } from '@appTypes/qrcode';
+
+const host = 'http://localhost:5001';
 
 export async function generateQr(payload: { text: string; size: number }): Promise<GenerateResult> {
-  const url = 'http://localhost:5000/api/qrcode/generate';
+  const url = `${host}/api/qrcode/generate`;
   const resp = await axios.post(url, payload, {
     responseType: 'arraybuffer',
     validateStatus: (s) => s >= 200 && s < 300,
@@ -14,10 +16,10 @@ export async function generateQr(payload: { text: string; size: number }): Promi
   try {
     const decoded = new TextDecoder().decode(resp.data);
     const parsed = JSON.parse(decoded);
-    if (parsed?.imageUrl) return { imageUrl: parsed.imageUrl };
-  } catch (error) {
-    console.error(error);
-  }
+    if (parsed?.imageUrl) {
+      return { imageUrl: parsed.imageUrl };
+    }
+  } catch {}
 
   if (contentType.startsWith('image/')) {
     return { mime: contentType, data: resp.data as ArrayBuffer };

frontend/src/components/organisms/QRForm.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styles from '@styles/QRForm.module.scss';
 import { useQrStore } from '@store/qrStore';
 import { generateQr } from '@api/qrcode';
-import type { GenerateResult } from '@types/qrcode';
+import { imageSizes, initialState } from '@/constants';
+import type { GenerateResult } from '@appTypes/qrcode';
 
 const QRForm: React.FC = () => {
   const { state, dispatch } = useQrStore();
   const { text, size, loading } = state;
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const callingApi = async () => {
     dispatch({ type: 'setError', payload: null });
     dispatch({ type: 'setImageUrl', payload: null });
 
@@ -38,15 +38,39 @@ const QRForm: React.FC = () => {
     }
   };
 
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    await callingApi();
+  };
+
+  const handleReset = () => {
+    dispatch({ type: 'restore', payload: null });
+  };
+
+  const hasCalledRef = useRef(false);
+  useEffect(() => {
+    if (hasCalledRef.current) {
+      return;
+    }
+    hasCalledRef.current = true;
+    callingApi();
+  }, []);
+
+  useEffect(() => {
+    if (!text) {
+      dispatch({ type: 'restore', payload: null });
+    }
+  }, [text]);
+
   return (
     <div className={styles.qrFormBody}>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} onReset={handleReset}>
         <label className={styles.qrFormLabel}>Submit URL or text</label>
         <input
           type="text"
-          value={text}
+          value={text === initialState.text ? null : text}
           onChange={(e) => dispatch({ type: 'setText', payload: e.target.value })}
-          placeholder="https://example.com or some text"
+          placeholder={text}
           className={styles.qrFormInput}
         />
 
@@ -56,9 +80,13 @@ const QRForm: React.FC = () => {
           onChange={(e) => dispatch({ type: 'setSize', payload: Number(e.target.value) })}
           className={styles.qrFormSelect}
         >
-          <option value="150">Small — 150x150</option>
-          <option value="300">Medium — 300x300</option>
-          <option value="600">Large — 600x600</option>
+          {imageSizes.map((imageSize) => {
+            return (
+              <option key={imageSize.value} value={imageSize.value}>
+                {imageSize.text}
+              </option>
+            );
+          })}
         </select>
 
         {state.error && <div className={styles.qrError}>{state.error}</div>}
@@ -66,6 +94,9 @@ const QRForm: React.FC = () => {
         <button type="submit" disabled={loading} className={styles.qrFormButton}>
           {loading ? 'Generating…' : 'Generate'}
         </button>
+        <button type="reset" className={styles.qrFormButton}>
+          reset
+        </button>
       </form>
     </div>
   );

frontend/src/constants/index.ts

@@ -0,0 +1,24 @@
+import type { QRState, ImageSizes } from '@appTypes/';
+
+export const initialState: QRState = {
+  text: 'https://www.bioxsystems.com/',
+  size: 600,
+  imageUrl: null,
+  loading: false,
+  error: null,
+};
+
+export const imageSizes: ImageSizes[] = [
+  {
+    value: 150,
+    text: 'Small — 150x150',
+  },
+  {
+    value: 300,
+    text: 'Medium — 300x300',
+  },
+  {
+    value: 600,
+    text: 'Large — 600x600',
+  },
+];

frontend/src/store/qrStore.tsx

@@ -1,45 +1,22 @@
 import React, { createContext, useContext, useReducer } from 'react';
+import type { QRState } from '@appTypes/';
+import { initialState } from '@/constants';
 
-export type QRState = {
-  text: string;
-  size: number;
-  imageUrl: string | null;
-  loading: boolean;
-  error: string | null;
+const handlers: Record<string, (state: QRState, payload?: any) => QRState> = {
+  setText: (state, payload) => ({ ...state, text: payload }),
+  setSize: (state, payload) => ({ ...state, size: payload }),
+  setImageUrl: (state, payload) => ({ ...state, imageUrl: payload }),
+  setLoading: (state, payload) => ({ ...state, loading: payload }),
+  setError: (state, payload) => ({ ...state, error: payload }),
+  restore: (state) => ({ ...state, text: initialState.text }),
 };
 
-type Action =
-  | { type: 'setText'; payload: string }
-  | { type: 'setSize'; payload: number }
-  | { type: 'setImageUrl'; payload: string | null }
-  | { type: 'setLoading'; payload: boolean }
-  | { type: 'setError'; payload: string | null };
-
-const initialState: QRState = {
-  text: '',
-  size: 300,
-  imageUrl: null,
-  loading: false,
-  error: null,
+const reducer = (state: QRState, action: Action): QRState => {
+  const handler = (handlers as any)[action.type];
+  if (handler) return handler(state, (action as any).payload);
+  return state;
 };
 
-function reducer(state: QRState, action: Action): QRState {
-  switch (action.type) {
-    case 'setText':
-      return { ...state, text: action.payload };
-    case 'setSize':
-      return { ...state, size: action.payload };
-    case 'setImageUrl':
-      return { ...state, imageUrl: action.payload };
-    case 'setLoading':
-      return { ...state, loading: action.payload };
-    case 'setError':
-      return { ...state, error: action.payload };
-    default:
-      return state;
-  }
-}
-
 const QrContext = createContext<{ state: QRState; dispatch: React.Dispatch<Action> } | undefined>(
   undefined
 );

frontend/src/styles/QRImage.module.scss

@@ -1,13 +1,10 @@
 .qrImageContainer {
-  width: 320px;
-  height: 320px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
   border-radius: 18px;
-  padding: 18px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
   border: 6px solid #ffffff; /* white frame like design */
 }

frontend/src/types/qrcode.d.ts

@@ -1 +1,21 @@
 export type GenerateResult = { imageUrl?: string } | { mime: string; data: ArrayBuffer };
+
+export type QRState = {
+  text: string;
+  size: number;
+  imageUrl: string | null;
+  loading: boolean;
+  error: string | null;
+};
+
+export type Action =
+  | { type: 'setText'; payload: string }
+  | { type: 'setSize'; payload: number }
+  | { type: 'setImageUrl'; payload: string | null }
+  | { type: 'setLoading'; payload: boolean }
+  | { type: 'setError'; payload: string | null };
+
+export type ImageSizes = {
+  value: number;
+  text: string;
+};