From a76ffc9f7e5b655297642c6f17f4f3f0e07a7826 Mon Sep 17 00:00:00 2001
From: tranvantai2905 <tai.trantai58@hcmut.edu.vn>
Date: Sat, 30 Dec 2023 20:42:32 +0700
Subject: [PATCH] fix(image):

---
 src/Screens/Scan/index.tsx          | 40 ++++++++++++++++-------------
 src/Screens/ScanResult/index.tsx    |  2 +-
 src/Screens/ScannedDetail/index.tsx | 11 ++++----
 src/api/index.ts                    |  2 +-
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/Screens/Scan/index.tsx b/src/Screens/Scan/index.tsx
index 8d18059..d0f638f 100644
--- a/src/Screens/Scan/index.tsx
+++ b/src/Screens/Scan/index.tsx
@@ -2,7 +2,7 @@ import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootScreens } from '..';
-import { Camera } from 'expo-camera';
+import { Camera, CameraType } from 'expo-camera';
 import SvgUri from 'react-native-svg-uri';
 import { getListIngredients } from '@/api';
 import * as FileSystem from 'expo-file-system';
@@ -43,7 +43,7 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ navigation }) => {
   const takePicture = async () => {
     if (cameraRef) {
       try {
-        const options = { quality: 1, base64: true }; // Set base64 option to true
+        const options = { quality: 1, base64: true,  format: 'jpg' }; // Set base64 option to true
         const photo = await cameraRef.takePictureAsync(options);
   
         // Set the captured image base64 data
@@ -54,20 +54,22 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ navigation }) => {
         // Create FormData
         const formData = new FormData();
         const fileUri = photo.uri;
-        const fileName = fileUri.split('/').pop(); // Get the file name from the URI
-        const fileType = 'image/jpeg'; // Adjust the file type if needed
-
-        // Convert the image to Blob
-        const fileBlob = await FileSystem.readAsStringAsync(fileUri, {
-          encoding: FileSystem.EncodingType.Base64,
-        });
-
-        formData.append('image', {
-          uri: fileUri,
-          name: fileName,
-          type: fileType,
-          data: fileBlob, // Assign the image data (Base64 encoded) to the FormData
-        });
+        console.log({fileUri});
+        // const fileName = fileUri.split('/').pop(); // Get the file name from the URI
+        // const fileType = 'image/jpg'; // Adjust the file type if needed
+
+        // // Convert the image to Blob
+        // const fileBlob = await FileSystem.readAsStringAsync(fileUri, {
+        //   encoding: FileSystem.EncodingType.Base64,
+        // });
+
+        const response = await fetch(fileUri);
+        const blob = await response.blob();
+        console.log({blob, fileUri});
+
+
+        // formData.append('image', blob, '412418347_1083552213095570_2864901517473978635_n.jpg');
+        formData.append('image', blob);
   
         // Send the FormData with base64 image data to the API
         await sendImageToAPI(formData);
@@ -84,8 +86,9 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ navigation }) => {
   const sendImageToAPI = async (formData: FormData) => {
     try {
       const data = await getListIngredients(formData);
+      console.log({data});
 
-      dispatch(setScanIngredients({listScanIngredients:data.ingredients}));
+      // dispatch(setScanIngredients({listScanIngredients:data.ingredients}));
 
       //mock
       const ingredients = [
@@ -120,11 +123,12 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ navigation }) => {
     <View style={styles.container}>
       <Camera
         style={styles.camera}
-        type={Camera.Constants.Type.back}
+        type={CameraType.back}
         ref={(ref) => setCameraRef(ref)}
       >
         <TouchableOpacity style={styles.iconBack} onPress={() => navigation.navigate(RootScreens.HOME)}>
           <SvgUri source={require('../../../assets/arrow-left.svg')} />
+          
         </TouchableOpacity>
         <View style={styles.cameraContent}>
           <ScanIcon />
diff --git a/src/Screens/ScanResult/index.tsx b/src/Screens/ScanResult/index.tsx
index 6586c7c..a28cf5f 100644
--- a/src/Screens/ScanResult/index.tsx
+++ b/src/Screens/ScanResult/index.tsx
@@ -35,7 +35,7 @@ const ScanResultScreen: React.FC<ScanResultScreenProps> = ({ navigation }) => {
   
     try {
       let listFood = await Promise.all(
-        listScanIngredients.map(async (item: any) => {const result = await getListFood(item); return result;})
+        listScanIngredients?.map(async (item: any) => {const result = await getListFood(item); return result;})
       );
   
       // Flatting the listFood array
diff --git a/src/Screens/ScannedDetail/index.tsx b/src/Screens/ScannedDetail/index.tsx
index 9894e71..749cd45 100644
--- a/src/Screens/ScannedDetail/index.tsx
+++ b/src/Screens/ScannedDetail/index.tsx
@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, SafeAreaView } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootScreens } from '..';
 import SvgUri from 'react-native-svg-uri';
@@ -53,7 +53,7 @@ const ScannedDetailScreen: React.FC<ScannedDetailScreenProps> = ({ navigation })
     }
   }, [ingredientsList]);
   return(
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <ScrollView style={styles.scroll_container}>
         <TouchableOpacity style={styles.iconBack} onPress={() => navigation.navigate(RootScreens.HOME)}>
           <SvgUri source={require('../../../assets/arrow-left.svg')} />
@@ -69,7 +69,7 @@ const ScannedDetailScreen: React.FC<ScannedDetailScreenProps> = ({ navigation })
      
       </ScrollView>
       <View style={styles.scanButtonContainer}>
-        <TouchableOpacity style={styles.btn} onPress={()=>{}}>
+        <TouchableOpacity style={styles.btn} onPress={()=>{navigation.navigate(RootScreens.SCAN);}}>
           <SvgUri source={require("../../../assets/Scan.svg")} />
           <Text style={styles.text}>Scan</Text>
         </TouchableOpacity>
@@ -79,14 +79,15 @@ const ScannedDetailScreen: React.FC<ScannedDetailScreenProps> = ({ navigation })
         </TouchableOpacity>
       </View>
    
-    </View>
+    </SafeAreaView>
   );};
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    position:"relative"
+    position:"relative",
+    marginTop:10,
   },
   scroll_container:{
     width:"100%",
diff --git a/src/api/index.ts b/src/api/index.ts
index 3bdd1e7..7c565a7 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -125,7 +125,7 @@ export const getDishById = async (id: any) => {
 
 export const getListIngredients = async (formData: any) => {
   try {
-    console.log(formData);
+    console.log("getListIngredients");
     const res = await axios.post('detect-ingredients', formData, {
       headers: {
         'Content-Type': 'multipart/form-data', // Cần set Content-Type là multipart/form-data khi gửi hình ảnh