modal

src/components/Footer/Footer.jsx

@@ -1,3 +1,4 @@
+// src/components/Footer/Footer.jsx
 import React, { useEffect, useState } from 'react';
 import { fetchDatabaseVersion, triggerFullImport } from '../../services/api';
 
@@ -5,27 +6,32 @@ function Footer() {
   const [dbVersion, setDbVersion] = useState(null);
   const [importing, setImporting] = useState(false);
   const [error, setError] = useState(null);
-  const [importResult, setImportResult] = useState(null); // store import result for modal
+  const [showModal, setShowModal] = useState(false);
+  const [modalMessage, setModalMessage] = useState('');
 
   // Fetch DB version on mount
   useEffect(() => {
     fetchDatabaseVersion()
       .then(data => setDbVersion(data.database_version))
-      .catch(err => setError(err.message));
+      .catch(err => {
+        setDbVersion('N/A');
+        setModalMessage(`Failed to fetch DB version: ${err.message}`);
+        setShowModal(true);
+      });
   }, []);
 
   const handleImport = async () => {
     setImporting(true);
     setError(null);
     try {
-      const result = await triggerFullImport(); // result contains message, version, sets, cards, duration
-      setImportResult(result);
-
-      // Update displayed DB version
-      const versionData = await fetchDatabaseVersion();
-      setDbVersion(versionData.database_version);
+      const result = await triggerFullImport();
+      const data = await fetchDatabaseVersion();
+      setDbVersion(data.database_version);
+      setModalMessage(result.message || 'Import completed');
+      setShowModal(true);
     } catch (err) {
-      setError(err.message);
+      setModalMessage(`Import failed: ${err.message}`);
+      setShowModal(true);
     } finally {
       setImporting(false);
     }
@@ -38,18 +44,12 @@ function Footer() {
         <button onClick={handleImport} disabled={importing}>
           {importing ? 'Importing...' : 'Full Import'}
         </button>
-        {error && <span style={{ color: 'red' }}>{error}</span>}
       </div>
 
-      {importResult && (
+      {showModal && (
         <div className="import-modal">
-          <h3>Import Result</h3>
-          <p>{importResult.message}</p>
-          <p>Version: {importResult.version}</p>
-          <p>Sets imported: {importResult.sets?.total || 'N/A'}</p>
-          <p>Cards imported: {importResult.cards?.total || 'N/A'}</p>
-          <p>Duration: {importResult.duration_seconds}s</p>
-          <button onClick={() => setImportResult(null)}>Close</button>
+          <div>{modalMessage}</div>
+          <button onClick={() => setShowModal(false)}>Close</button>
         </div>
       )}
     </>