Address comments on PR

ADORSYS-GIS · Jan 14, 2025 · 1349148 · 1349148
1 parent 24f61a1
commit 1349148
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 49 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,7 @@ import { Route, Routes } from 'react-router-dom';
 import BottomNav from './components/layout/BottomNav';
 import MainSection from './components/layout/MainSection';
 import Navbar from './components/layout/Navbar';
-import ScanContact from './components/scan/ScanContact';
+import ScanQRCode from './components/scan/ScanQRCode';
 import ActivitiesPage from './pages/ActivitiesPage';
 import ChatPage from './pages/chat/ChatPage';
 import ContactForm from './pages/contact/ContactForm';
@@ -54,7 +54,7 @@ function App() {
                   path="/contact-info/:contactId"
                   element={<ContactInfoPage />}
                 />
-                <Route path="/scan" element={<ScanContact />} />
+                <Route path="/scan" element={<ScanQRCode />} />
               </Routes>
             </MainSection>
           }

diff --git a/src/components/scan/ScanContact.tsx → src/components/scan/ScanQRCode.tsx b/src/components/scan/ScanContact.tsx → src/components/scan/ScanQRCode.tsx
@@ -1,46 +1,50 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { QrScanner } from '@adorsys-gis/qr-scanner';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import {
   Box,
+  CircularProgress,
   IconButton,
+  Theme,
   Tooltip,
   Typography,
   useMediaQuery,
-  Theme,
 } from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { QrScanner } from '@adorsys-gis/qr-scanner';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface ScanQRCodeProps {
+  onScanSuccess?: (data: string) => void;
+  onBack?: () => void;
+}
 
-const ScanContact: React.FC = () => {
+const ScanQRCode: React.FC<ScanQRCodeProps> = ({ onScanSuccess, onBack }) => {
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const push = useNavigate();
 
   const isSmallScreen = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down('sm'),
   );
 
   const handleScan = (data: string) => {
-    if (!data.startsWith('did:peer:')) {
-      setError('Invalid DID format.');
-      return;
-    }
     setError(null);
+    setIsLoading(false);
 
-    // Navigate to AddContactForm with scanned DID
-    push('/add-contact', { state: { scannedDid: data } });
+    if (onScanSuccess) {
+      onScanSuccess(data);
+    } else if (data.startsWith('did:peer:')) {
+      push('/add-contact', { state: { scannedDid: data } });
+    } else {
+      setError('Unrecognized QR code format.');
+    }
   };
 
   return (
-    <Box
-      display="flex"
-      width="100%"
-      height="100vh"
-      sx={{ paddingTop: { xs: '10px', sm: '10px' } }}
-    >
+    <Box display="flex" width="100%" height="100vh" sx={{ paddingTop: '10px' }}>
       <Tooltip arrow title="Back">
         <IconButton
           size="small"
-          onClick={() => push('/')}
+          onClick={onBack || (() => push('/'))}
           sx={{
             position: 'absolute',
             top: isSmallScreen ? 70 : 110,
@@ -52,14 +56,24 @@ const ScanContact: React.FC = () => {
         </IconButton>
       </Tooltip>
 
+      {isLoading && (
+        <CircularProgress
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+        />
+      )}
+
       <QrScanner
         onResult={handleScan}
         onError={(err: unknown) => {
-          if (err instanceof Error) {
-            setError(err.message);
-          } else {
-            setError('An unknown error occurred.');
-          }
+          setIsLoading(false);
+          setError(
+            err instanceof Error ? err.message : 'An unknown error occurred.',
+          );
         }}
       />
 
@@ -72,4 +86,4 @@ const ScanContact: React.FC = () => {
   );
 };
 
-export default ScanContact;
+export default ScanQRCode;
diff --git a/src/pages/contact/ContactForm.tsx b/src/pages/contact/ContactForm.tsx
@@ -1,24 +1,24 @@
-import React, { useState, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import {
+  ContactEventChannel,
+  ContactService,
+} from '@adorsys-gis/contact-service';
+import { eventBus } from '@adorsys-gis/event-bus';
+import {
+  ServiceResponse,
+  ServiceResponseStatus,
+} from '@adorsys-gis/status-service';
 import {
   Box,
   Button,
   CircularProgress,
   Snackbar,
   TextField,
+  Theme,
   Typography,
   useMediaQuery,
-  Theme,
 } from '@mui/material';
-import { eventBus } from '@adorsys-gis/event-bus';
-import {
-  ContactService,
-  ContactEventChannel,
-} from '@adorsys-gis/contact-service';
-import {
-  ServiceResponse,
-  ServiceResponseStatus,
-} from '@adorsys-gis/status-service';
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const contactService = new ContactService(eventBus);
 
@@ -71,16 +71,12 @@ const AddContactForm: React.FC = () => {
 
   return (
     <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        backgroundColor: '#F4F7FC',
-        padding: isSmallScreen ? '16px' : '32px',
-        borderRadius: '12px',
-        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.05)',
-        margin: '20px auto',
-      }}
+      display="flex"
+      flexDirection="column"
+      gap={2}
+      justifyContent="center"
+      height="100vh"
+      sx={{ textAlign: 'center' }}
     >
       <Typography variant="h5" sx={{ color: '#4A4A4A', marginBottom: '16px' }}>
         Add Contact