Merge branch 'it18257632' into 'master'

create reusable modal for ReadModalNotice

See merge request !200

frontend/src/component/reading/ReadModalNotice.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  Modal,
+  Image,
+} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+import {ImagePaths} from '../../assets/read/data/ReadData';
+
+export default function ReadModalNotice(props) {
+  const {caption, validity, visibility, imagePath} = props;
+
+  const [modalVisible, setModalVisible] = useState(visibility);
+  const navigate = () => {};
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      hidden={true}
+      visible={modalVisible}>
+      <View style={styles.centeredView2}>
+        <View style={styles.modalView2}>
+          <Text style={styles.headStyle2}>Press The Button</Text>
+          <Text style={styles.head2Style2}>And Pronounce</Text>
+          <TouchableOpacity
+            style={[styles.buttonClose2]}
+            onPress={() => setModalVisible(false)}>
+            <Image
+              source={ImagePaths.correct}
+              resizeMode="contain"
+              style={{width: 100, height: 70, marginBottom: -10}}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  blackboard: {
+    marginTop: -420,
+    marginLeft: 240,
+    width: '70%',
+    height: 500,
+  },
+  robo: {
+    marginTop: -70,
+    marginLeft: -5,
+    width: 150,
+    height: 200,
+  },
+  textBody: {
+    marginTop: 150,
+    marginLeft: 95,
+    backgroundColor: '#1DCE92',
+    width: 200,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'white',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 10,
+    marginRight: 50,
+    color: '#000000',
+    marginLeft: 50,
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -90,
+    marginLeft: -100,
+  },
+  modalView: {
+    marginRight: 20,
+    backgroundColor: '#00000000',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+
+  centeredView3: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -20,
+  },
+  modalView3: {
+    margin: 20,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    padding: 20,
+    borderWidth: 5,
+    // borderColor: '#1DCE92',
+    alignItems: 'center',
+    // shadowColor: 'red',
+    // shadowOffset: {
+    //   width: 0,
+    //   height: 2,
+    // },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button3: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen3: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose3: {
+    backgroundColor: '#1DCE92',
+  },
+  textStyle3: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  headStyle3: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+  head2Style3: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 20,
+  },
+  modalText3: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  alert3: {
+    backgroundColor: 'rgba(255, 0, 0, 0.74)',
+    borderRadius: 50,
+    width: 100,
+    height: 100,
+    marginBottom: 20,
+    marginTop: -65,
+  },
+  centeredView2: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView2: {
+    marginTop: -10,
+    margin: 20,
+    backgroundColor: '#FFFFFFEF',
+    borderRadius: 20,
+    padding: 35,
+    borderWidth: 5,
+    // borderColor: '#red',
+    alignItems: 'center',
+    // shadowColor: 'red',
+    // shadowOffset: {
+    //   width: 0,
+    //   height: 2,
+    // },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button2: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen2: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose2: {
+    // backgroundColor: "#1DCE92",
+  },
+  textStyle2: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText2: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  headStyle2: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+  head2Style2: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 20,
+  },
+  alert2: {
+    // backgroundColor: 'rgba(0, 181, 0, 0.45)',
+    borderRadius: 50,
+    width: 100,
+    height: 100,
+    marginBottom: 20,
+    marginTop: -80,
+  },
+});

frontend/src/screen/reading/advanced/ReadActivityBird.js

@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
+import ReadModalNotice from '../../../component/reading/ReadModalNotice';
 
 export default function ReadActivityBird() {
   const navigation = useNavigation();
@@ -161,33 +162,7 @@ export default function ReadActivityBird() {
       {modalVisible3 && (
         <ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
       )}
-      {modalVisible && (
-        <Modal
-          animationType="fade"
-          transparent={true}
-          hidden={true}
-          visible={true}
-          //   onRequestClose={() => {
-          //     setModalVisible2(!modalVisible2);
-          //       }}
-        >
-          <View style={styles.centeredView2}>
-            <View style={styles.modalView2}>
-              <Text style={styles.headStyle2}>Press The Button</Text>
-              <Text style={styles.head2Style2}>And Pronounce</Text>
-              <TouchableOpacity
-                style={[styles.buttonClose2]}
-                onPress={() => setModalVisible(false)}>
-                <Image
-                  source={ImagePaths.correct}
-                  resizeMode="contain"
-                  style={{width: 100, height: 70, marginBottom: -10}}
-                />
-              </TouchableOpacity>
-            </View>
-          </View>
-        </Modal>
-      )}
+      {modalVisible && <ReadModalNotice visible="true" />}
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

frontend/src/screen/reading/advanced/ReadActivityDog.js

@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
+import ReadModalNotice from '../../../component/reading/ReadModalNotice';
 
 export default function ReadActivityDog() {
   const navigation = useNavigation();
@@ -159,33 +160,7 @@ export default function ReadActivityDog() {
         <ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
       )}
 
-      {modalVisible && (
-        <Modal
-          animationType="fade"
-          transparent={true}
-          hidden={true}
-          visible={true}
-          //   onRequestClose={() => {
-          //     setModalVisible2(!modalVisible2);
-          //       }}
-        >
-          <View style={styles.centeredView2}>
-            <View style={styles.modalView2}>
-              <Text style={styles.headStyle2}>Press The Button</Text>
-              <Text style={styles.head2Style2}>And Pronounce</Text>
-              <TouchableOpacity
-                style={[styles.buttonClose2]}
-                onPress={() => setModalVisible(false)}>
-                <Image
-                  source={ImagePaths.correct}
-                  resizeMode="contain"
-                  style={{width: 100, height: 70, marginBottom: -10}}
-                />
-              </TouchableOpacity>
-            </View>
-          </View>
-        </Modal>
-      )}
+      {modalVisible && <ReadModalNotice visible="true" />}
 
       <View style={{flexDirection: 'column'}}>
         <ImageBackground

frontend/src/screen/reading/advanced/ReadActivityFish.js

@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
+import ReadModalNotice from '../../../component/reading/ReadModalNotice';
 
 export default function ReadActivityFish() {
   const navigation = useNavigation();
@@ -177,33 +178,8 @@ export default function ReadActivityFish() {
         <ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
       )}
 
-      {modalVisible && (
-        <Modal
-          animationType="fade"
-          transparent={true}
-          hidden={true}
-          visible={true}
-          //   onRequestClose={() => {
-          //     setModalVisible2(!modalVisible2);
-          //       }}
-        >
-          <View style={styles.centeredView2}>
-            <View style={styles.modalView2}>
-              <Text style={styles.headStyle2}>Press The Button</Text>
-              <Text style={styles.head2Style2}>And Pronounce</Text>
-              <TouchableOpacity
-                style={[styles.buttonClose2]}
-                onPress={() => setModalVisible(false)}>
-                <Image
-                  source={ImagePaths.correct}
-                  resizeMode="contain"
-                  style={{width: 100, height: 70, marginBottom: -10}}
-                />
-              </TouchableOpacity>
-            </View>
-          </View>
-        </Modal>
-      )}
+      {modalVisible && <ReadModalNotice visible="true" />}
+
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

frontend/src/screen/reading/basic/ReadActivityGo.js

@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
+import ReadModalNotice from '../../../component/reading/ReadModalNotice';
 
 export default function ReadActivityGo() {
   const navigation = useNavigation();
@@ -100,29 +101,25 @@ export default function ReadActivityGo() {
   };
 
   const onSpeechError = e => {
-    // console.log('onSpeechError: ', e);
-    // const result = DummyReadResult.value;
-    // if (result.includes('hello')) {
-    //   AsyncStorage.getItem('userId')
-    //     .then(userId => {
-    //       const data = {
-    //         word: 'go',
-    //         userId: userId,
-    //         level: 1,
-    //         triedCount: count,
-    //       };
-    //       getToken(data);
-    //     })
-    //     .catch(error => {
-    //       console.log(error);
-    //     });
-    // } else {
-    //   setCount(count + 1);
-    //   Voice.start('en-US');
-    // }
-    // console.log('count', count);
-
-    // console.log('count', count);
+    setCount(count + 1);
+    const result = e.value;
+    if (result.includes('go')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'Go',
+            userId: userId,
+            level: 'Basic',
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setModalVisible3(true);
+    }
   };
 
   const getToken = data => {
@@ -158,6 +155,8 @@ export default function ReadActivityGo() {
       {modalVisible3 && (
         <ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
       )}
+      {modalVisible && <ReadModalNotice visible="true" />}
+
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

frontend/src/screen/reading/basic/ReadActivityHe.js

@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
+import ReadModalNotice from '../../../component/reading/ReadModalNotice';
 
 export default function ReadActivityHe() {
   const navigation = useNavigation();
@@ -112,7 +113,6 @@ export default function ReadActivityHe() {
           console.log(error);
         });
     } else {
-      
       setModalVisible3(true);
     }
   };
@@ -139,7 +139,6 @@ export default function ReadActivityHe() {
     //   Voice.start('en-US');
     // }
     // console.log('count', count);
-
     // console.log('count', count);
   };
 
@@ -177,34 +176,9 @@ export default function ReadActivityHe() {
         <ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
       )}
 
-      {modalVisible && (
-        <Modal
-          animationType="fade"
-          transparent={true}
-          hidden={true}
-          visible={true}
-          //   onRequestClose={() => {
-          //     setModalVisible2(!modalVisible2);
-          //       }}
-        >
-          <View style={styles.centeredView2}>
-            <View style={styles.modalView2}>
-              <Text style={styles.headStyle2}>Press The Button</Text>
-              <Text style={styles.head2Style2}>And Pronounce</Text>
-              <TouchableOpacity
-                style={[styles.buttonClose2]}
-                onPress={() => setModalVisible(false)}>
-                <Image
-                  source={ImagePaths.correct}
-                  resizeMode="contain"
-                  style={{width: 100, height: 70, marginBottom: -10}}
-                />
-              </TouchableOpacity>
-            </View>
-          </View>
-        </Modal>
-      )}
-      <View style={{flexDirection: 'column'}}>
+      {modalVisible && <ReadModalNotice visible="true" />}
+      
+      <View style={{ flexDirection: 'column' }}>
         <ImageBackground
           style={styles.image}
           source={ImagePaths.backgroundBasic}>

frontend/src/screen/reading/basic/ReadActivityNo.js

@@ -22,6 +22,7 @@ import CountDown from 'react-native-countdown-component';
 import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
+import ReadModalNotice from '../../../component/reading/ReadModalNotice';
 
 export default function ReadActivityNo() {
   const navigation = useNavigation();
@@ -56,15 +57,14 @@ export default function ReadActivityNo() {
   }, []);
 
   function audioInit() {
-    // console.log('audioInit');
-    const colorAudio = {
+    const pronounceAudio = {
       sampleRate: 16000,
       channels: 1,
       bitsPerSample: 16,
-      wavFile: 'color.wav', // thise wave file name
+      wavFile: 'no.wav', // thise wave file name
     };
 
-    AudioRecord.init(colorAudio);
+    AudioRecord.init(pronounceAudio);
   }
 
   async function audioStart() {
@@ -142,7 +142,7 @@ export default function ReadActivityNo() {
       userId: 1,
       token: 'f53af164ca2511ecbdc562bc611c4f50',
     };
-    Client.post('reading/no' , JSON.stringify(datas), {
+    Client.post('reading/no', JSON.stringify(datas), {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
@@ -180,36 +180,32 @@ export default function ReadActivityNo() {
           console.log(error);
         });
     } else {
-      
       setModalVisible3(true);
     }
     console.log('count', count);
   };
 
   const onSpeechError = e => {
-    // setCount(count + 1);
-    // console.log('onSpeechError: ', e);
-    // const result = DummyReadResult.value;
-    // if (result.includes('hello')) {
-    //   AsyncStorage.getItem('userId')
-    //     .then(userId => {
-    //       const data = {
-    //         word: 'no',
-    //         userId: userId,
-    //         level: 1,
-    //         triedCount: count,
-    //       };
-    //       getToken(data);
-    //     })
-    //     .catch(error => {
-    //       console.log(error);
-    //     });
-    // } else {
-      
-    //   setModalVisible3(true);
-    //   console.log(count);
-      
-    // }
+    setCount(count + 1);
+    const result = DummyReadResult.value;
+    if (result.includes('no')) {
+      AsyncStorage.getItem('userId')
+        .then(userId => {
+          const data = {
+            word: 'No',
+            userId: userId,
+            level: 'Basic',
+            triedCount: count,
+          };
+          getToken(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    } else {
+      setModalVisible3(true);
+    }
+    console.log('count', count);
   };
 
   const getToken = data => {
@@ -247,31 +243,7 @@ export default function ReadActivityNo() {
       )}
 
       {modalVisible && (
-        <Modal
-          animationType="fade"
-          transparent={true}
-          hidden={true}
-          visible={true}
-          //   onRequestClose={() => {
-          //     setModalVisible2(!modalVisible2);
-          //       }}
-        >
-          <View style={styles.centeredView2}>
-            <View style={styles.modalView2}>
-              <Text style={styles.headStyle2}>Press The Button</Text>
-              <Text style={styles.head2Style2}>And Pronounce</Text>
-              <TouchableOpacity
-                style={[styles.buttonClose2]}
-                onPress={() => setModalVisible(false)}>
-                <Image
-                  source={ImagePaths.correct}
-                  resizeMode="contain"
-                  style={{width: 100, height: 70, marginBottom: -10}}
-                />
-              </TouchableOpacity>
-            </View>
-          </View>
-        </Modal>
+        <ReadModalNotice visible="true" />
       )}
 
       <View style={{flexDirection: 'column'}}>