From 1ff6059560d53d258d366aa0390e2ffae1002268 Mon Sep 17 00:00:00 2001
From: Rizqika <rizqikaibnu@gmail.com>
Date: Thu, 14 Nov 2024 11:02:28 +0700
Subject: [PATCH] Improve code

---
 .../FaceRecognition/Section/Compare.jsx       |  9 ++++-
 .../FaceRecognition/Section/Search.jsx        | 38 ++++++++++---------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/screens/Biometric/FaceRecognition/Section/Compare.jsx b/src/screens/Biometric/FaceRecognition/Section/Compare.jsx
index 243efac..e712fc6 100644
--- a/src/screens/Biometric/FaceRecognition/Section/Compare.jsx
+++ b/src/screens/Biometric/FaceRecognition/Section/Compare.jsx
@@ -13,6 +13,9 @@ const Compare = () => {
   const [errorMessage, setErrorMessage] = useState('');
   const [selectedImageName, setSelectedImageName] = useState('');
   const [selectedCompareImageName, setSelectedCompareImageName] = useState('');
+  const [resultImageLabel, setResultImageLabel] = useState('');
+  const [resultCompareImageLabel, setResultCompareImageLabel] = useState('');
+
   const fileInputRef = useRef(null);
   const fileCompareInputRef = useRef(null);
   const [showResult, setShowResult] = useState(false);
@@ -210,6 +213,8 @@ const Compare = () => {
             await fetchImage(imageUrl2, setImageCompareUrl);
 
             setVerified(data.details.data.result.verified);
+            setResultImageLabel(selectedImageName)
+            setResultCompareImageLabel(selectedCompareImageName)
             setShowResult(true);
             console.log('Comparison successful:', data);
         } else {
@@ -285,7 +290,7 @@ const Compare = () => {
                 alt="Original Foto" 
                 style={styles.imageStyle} 
               />
-              <p style={{ marginTop: '1rem', textAlign: 'center' }}>{selectedImageName}</p>
+              <p style={{ marginTop: '1rem', textAlign: 'center' }}>File Name: {resultImageLabel}</p>
             </div>
   
             <div style={styles.imageCompareContainer}>
@@ -294,7 +299,7 @@ const Compare = () => {
                 alt="Compare Foto" 
                 style={styles.imageStyle} 
               />
-              <p style={{ marginTop: '1rem', textAlign: 'center' }}>{selectedCompareImageName}</p>
+              <p style={{ marginTop: '1rem', textAlign: 'center' }}>File Name: {resultCompareImageLabel}</p>
             </div>
           </div>
         </div>
diff --git a/src/screens/Biometric/FaceRecognition/Section/Search.jsx b/src/screens/Biometric/FaceRecognition/Section/Search.jsx
index e952e42..ead1911 100644
--- a/src/screens/Biometric/FaceRecognition/Section/Search.jsx
+++ b/src/screens/Biometric/FaceRecognition/Section/Search.jsx
@@ -15,6 +15,7 @@ const Search = () => {
   const [isSelectOpen, setIsSelectOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [selectedImageName, setSelectedImageName] = useState('');
+  const [resultImageLabel, setResultImageLabel] = useState('');
   const fileInputRef = useRef(null);
   const [showResult, setShowResult] = useState(false);
   const [applicationId, setApplicationId] = useState('');
@@ -139,8 +140,6 @@ const Search = () => {
       console.error('No file selected or invalid file object.');
     }
   };
-  
-  
 
   const handleImageCancel = () => {
     setSelectedImageName('');
@@ -230,6 +229,7 @@ const Search = () => {
         }));
   
         setResults(processedResults);
+        setResultImageLabel(selectedImageName)
         setShowResult(true);
       } else {
         console.error('Error response:', JSON.stringify(data, null, 2));
@@ -637,22 +637,24 @@ const Search = () => {
       {/* Results Section */}
       {
         showResult && results.length > 0 && (
-        <div style={styles.containerResultStyle}>
-            <h1 style={{ color: '#0542cc', textAlign: 'center' }}>Results</h1>
-            <div style={styles.resultContainer}>
-                {results.slice(0, limitId).map((result, index) => (
-                    <div key={index} style={styles.resultItem}>
-                        <div style={styles.resultTextContainer}>
-                            <p style={styles.resultText}>Image Name: image_{index + 1}</p>
-                            <p style={styles.resultText}>Similarity: {result.similarity}%</p>
-                            <p style={styles.resultText}>Distance: {result.distance}</p>
-                        </div>
-                        <img src={imageUrls[index]} alt={`Result ${index + 1}`} style={styles.resultImage} />
-                    </div>
-                ))}
-            </div>
-        </div>
-      )}
+          <div style={styles.containerResultStyle}>
+              <h1 style={{ color: '#0542cc', textAlign: 'center' }}>Results</h1>
+              <div style={styles.resultContainer}>
+                  {results.slice(0, limitId).map((result, index) => (
+                      <div key={index} style={styles.resultItem}>
+                          <div style={styles.resultTextContainer}>
+                              {/* Displaying the dynamically set resultImageLabel */}
+                              <p style={styles.resultText}>Image Name: {resultImageLabel}</p> {/* Updated here */}
+                              <p style={styles.resultText}>Similarity: {result.similarity}%</p>
+                              <p style={styles.resultText}>Distance: {result.distance}</p>
+                          </div>
+                          <img src={imageUrls[index]} alt={`Result ${index + 1}`} style={styles.resultImage} />
+                      </div>
+                  ))}
+              </div>
+          </div>
+        )
+      }
     </div>
   );
 }