[#11] feat: add loading UI

dsc-sookmyung · Mar 24, 2022 · 9e77c9e · 9e77c9e
1 parent b20597a
commit 9e77c9e
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 17 deletions.
diff --git a/react-native/assets/images/rocket.png b/react-native/assets/images/rocket.png
diff --git a/react-native/components/Loading.tsx 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 (
+    <SafeAreaView style={styles.container}>
+        <HStack space={2} alignItems="center">
+            <ActivityIndicator />
+            <Heading fontSize="md">
+                Reading the notice
+            </Heading>
+        </HStack>
+        <Image source={require('../assets/images/rocket.png')} style={styles.imageStyle}/>
+        <Box width="80%" bg="rgba(0,0,0,0.5)" p="4" shadow={2} style={{ borderRadius: 12 }}>
+            <Text color="white" fontWeight="700">💡 Tip</Text>
+            <Text color="white">You can save the results and check them on the search screen!</Text>
+        </Box>
+    </SafeAreaView>
+  );
+};
+
+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
@@ -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<any>(null);
     const [imageUri, setImageUri] = useState<string>(''); 
-    const [results, setResults] = useState<Result>({id: 0, fullText: [], korean: ''});
+    const [results, setResults] = useState<Result>({fullText: [], korean: ''});
     const [showKorean, setShowKorean] = useState<boolean>(false);
     const [isFullDrawer, setFullDrawer] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(false);
 
     const toast = useToast();
     const auth = useAuth();
@@ -103,7 +105,7 @@ export default function TranslateScreen({ navigation }: Navigation) {
         }
     };  
 
-    const extractText = (): void => {
+    const extractText = async(): Promise<any> => {
         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,14 +226,15 @@ export default function TranslateScreen({ navigation }: Navigation) {
         setImageUri('');
         setResults({id: 0, fullText: [], korean: ''});
         setShowKorean(false);
+        setLoading(false);
     }
 
     return (
         <View style={styles.container}>
             {/* After taking a picture */}
             {imageUri ? (
                 /* After taking a picture and press the check button */
-                results?.fullText && results?.fullText && results?.korean ? (
+                results?.fullText && results?.korean ? (
                     <ImageBackground style={styles.container} resizeMode="cover" imageStyle={{ opacity: 0.5 }} source={{ uri: imageUri }}>
                         <SwipeUpDown
                             itemMini={
@@ -263,14 +271,18 @@ export default function TranslateScreen({ navigation }: Navigation) {
                     </ImageBackground>
                 ) : (
                     /* After taking a picture, before OCR(pressing the check button) */
-                    <>
-                    <ImageBackground style={styles.camera} resizeMode="cover" source={{ uri: imageUri }} />
-                    <View style={[styles.buttonContainer, , {justifyContent: 'center' }]}>
-                        <TouchableOpacity style={[styles.circleButton, styles.primaryBackground]} onPress={extractText}>
-                            <Ionicons name="checkmark-sharp" size={32} color='#fff' />
-                        </TouchableOpacity>
-                    </View>
-                    </>
+                    loading ? (
+                        <Loading />
+                    ) : (
+                        <>
+                        <ImageBackground style={styles.camera} resizeMode="cover" source={{ uri: imageUri }} />
+                        <View style={[styles.buttonContainer, , {justifyContent: 'center' }]}>
+                            <TouchableOpacity style={[styles.circleButton, styles.primaryBackground]} onPress={extractText}>
+                                <Ionicons name="checkmark-sharp" size={32} color='#fff' />
+                            </TouchableOpacity>
+                        </View>
+                        </>
+                    )
                 )
             ) : (
                 /* Before taking a picture, Camera ready */