Adding the reset function

backend/app/main.py

@@ -7,7 +7,6 @@ from app.api.qr import router as qr_router
 def create_app() -> FastAPI:
     app = FastAPI(title="QR Code Service")
 
-    # Open CORS to all origins
     app.add_middleware(
         CORSMiddleware,
         allow_origins=["*"],

backend/app/services/qr_service.py

@@ -6,7 +6,6 @@ import qrcode
 def generate_qr_image_bytes(text: str, size: int = 300) -> bytes:
     img = qrcode.make(text)
 
-    # Ensure RGB for consistent PNG output
     if getattr(img, "mode", None) != "RGB":
         img = img.convert("RGB")
 

frontend/src/components/organisms/QRForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styles from '@styles/QRForm.module.scss';
 import { useQrStore } from '@store/qrStore';
 import { generateQr } from '@api/qrcode';
@@ -6,6 +6,7 @@ import { imageSizes, initialState } from '@/constants';
 import type { GenerateResult } from '@appTypes/qrcode';
 
 const QRForm: React.FC = () => {
+  const [callApiOnReset, setCallApiOnReset] = useState(false);
   const { state, dispatch } = useQrStore();
   const { text, size, loading } = state;
 
@@ -44,7 +45,8 @@ const QRForm: React.FC = () => {
   };
 
   const handleReset = () => {
-    dispatch({ type: 'restore', payload: null });
+    dispatch({ type: 'setText', payload: '' });
+    setCallApiOnReset(true);
   };
 
   const hasCalledRef = useRef(false);
@@ -57,10 +59,11 @@ const QRForm: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    if (!text) {
+    if (text === initialState.text && callApiOnReset) {
-      dispatch({ type: 'restore', payload: null });
+      callingApi();
+      setCallApiOnReset(false);
     }
-  }, [text]);
+  }, [callApiOnReset]);
 
   return (
     <div className={styles.qrFormBody}>
@@ -70,7 +73,7 @@ const QRForm: React.FC = () => {
           type="text"
           value={text === initialState.text ? null : text}
           onChange={(e) => dispatch({ type: 'setText', payload: e.target.value })}
-          placeholder={text}
+          placeholder={initialState.text}
           className={styles.qrFormInput}
         />
 
@@ -91,12 +94,14 @@ const QRForm: React.FC = () => {
 
         {state.error && <div className={styles.qrError}>{state.error}</div>}
 
-        <button type="submit" disabled={loading} className={styles.qrFormButton}>
+        <div className={styles.buttons}>
-          {loading ? 'Generating…' : 'Generate'}
+          <button type="submit" disabled={loading} className={styles.qrFormButton}>
-        </button>
+            {loading ? 'Generating…' : 'Generate'}
-        <button type="reset" className={styles.qrFormButton}>
+          </button>
-          reset
+          <button type="reset" className={styles.qrFormButton}>
-        </button>
+            reset
+          </button>
+        </div>
       </form>
     </div>
   );

frontend/src/store/qrStore.tsx

@@ -8,7 +8,7 @@ const handlers: Record<string, (state: QRState, payload?: any) => QRState> = {
   setImageUrl: (state, payload) => ({ ...state, imageUrl: payload }),
   setLoading: (state, payload) => ({ ...state, loading: payload }),
   setError: (state, payload) => ({ ...state, error: payload }),
-  restore: (state) => ({ ...state, text: initialState.text }),
+  restore: () => ({ ...initialState }),
 };
 
 const reducer = (state: QRState, action: Action): QRState => {

frontend/src/styles/QRForm.module.scss

@@ -69,3 +69,10 @@
   color: crimson;
   margin-bottom: 12px;
 }
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 5px;
+}