diff --git a/react-native/assets/images/rocket.png b/react-native/assets/images/rocket.png new file mode 100644 index 0000000..835bce7 Binary files /dev/null and b/react-native/assets/images/rocket.png differ diff --git a/react-native/components/Loading.tsx b/react-native/components/Loading.tsx new file mode 100644 index 0000000..670cd46 --- /dev/null +++ b/react-native/components/Loading.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { ActivityIndicator, SafeAreaView, StyleSheet, Image } from 'react-native'; +import { Text, HStack, Heading, Box } from 'native-base'; + + +const Loading = () => { + return ( + + + + + Reading the notice + + + + + 💡 Tip + You can save the results and check them on the search screen! + + + ); +}; + +export default Loading; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + imageStyle: { + width: 320, + height: 320, + marginVertical: 40 + } +}); diff --git a/react-native/screens/TranslateScreen.tsx b/react-native/screens/TranslateScreen.tsx index 2708495..c1a54c8 100644 --- a/react-native/screens/TranslateScreen.tsx +++ b/react-native/screens/TranslateScreen.tsx @@ -13,6 +13,7 @@ import mime from "mime"; import * as ImagePicker from 'expo-image-picker'; import { useAuth } from '../contexts/Auth'; import { StackActions } from '@react-navigation/native'; +import Loading from '../components/Loading'; /* TODO: - 스크롤 내려가게 하기 (지금은 ScrollView의 스크롤이 안 먹음) @@ -27,9 +28,10 @@ export default function TranslateScreen({ navigation }: Navigation) { const [type, setType] = useState(Camera.Constants.Type.back); const [camera, setCamera] = useState(null); const [imageUri, setImageUri] = useState(''); - const [results, setResults] = useState({id: 0, fullText: [], korean: ''}); + const [results, setResults] = useState({fullText: [], korean: ''}); const [showKorean, setShowKorean] = useState(false); const [isFullDrawer, setFullDrawer] = useState(false); + const [loading, setLoading] = useState(false); const toast = useToast(); const auth = useAuth(); @@ -103,7 +105,7 @@ export default function TranslateScreen({ navigation }: Navigation) { } }; - const extractText = (): void => { + const extractText = async(): Promise => { if (imageUri) { let FormData = require('form-data'); const formdata = new FormData(); @@ -113,8 +115,10 @@ export default function TranslateScreen({ navigation }: Navigation) { name: imageUri.split("/").pop() }); + setLoading(true); + if (auth?.authData?.jwt_token) { - fetch("http://localhost:8080/notice/ocr", { + await fetch("http://localhost:8080/notice/ocr", { method: 'POST', headers: { 'JWT_TOKEN': auth.authData.jwt_token @@ -123,14 +127,17 @@ export default function TranslateScreen({ navigation }: Navigation) { redirect: 'follow' }) .then(response => response.json()) - .then(data => setResults(data)) + .then(data => { + // setResults(data) + console.log(data) + setLoading(false) + }) .catch(function (error) { - console.log(error.response.status) // 401 - console.log(error.response.data.error) //Please Authenticate or whatever returned from server - if(error.response.status==401) { + console.log(error?.response?.status) // 401 + console.log(error?.response?.data?.error) //Please Authenticate or whatever returned from server + if(error?.response?.status==401) { //redirect to login Alert.alert("The session has expired. Please log in again."); - auth.signOut(); navigation.dispatch(StackActions.popToTop()) } @@ -219,6 +226,7 @@ export default function TranslateScreen({ navigation }: Navigation) { setImageUri(''); setResults({id: 0, fullText: [], korean: ''}); setShowKorean(false); + setLoading(false); } return ( @@ -226,7 +234,7 @@ export default function TranslateScreen({ navigation }: Navigation) { {/* After taking a picture */} {imageUri ? ( /* After taking a picture and press the check button */ - results?.fullText && results?.fullText && results?.korean ? ( + results?.fullText && results?.korean ? ( ) : ( /* After taking a picture, before OCR(pressing the check button) */ - <> - - - - - - - + loading ? ( + + ) : ( + <> + + + + + + + + ) ) ) : ( /* Before taking a picture, Camera ready */