add new alert

frontend/src/assets/read/data/ReadData.js

@@ -25,6 +25,9 @@ export const ImagePaths = {
   correct: require('../image/correct.png'),
   chart: require('../image/chart.png'),
   record: require('../image/record.png'),
+  record1: require('../image/record1.png'),
+  record2: require('../image/record2.png'),
+  record3: require('../image/record3.png'),
 };
 
 export const DummyReadResult = {

frontend/src/component/reading/CountDownModal.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';
+import CountDown from 'react-native-countdown-component';
+
+export default function CountDownModal(props) {
+  const {caption, validity, visibility, imagePath} = props;
+
+  const [modalVisible, setModalVisible] = useState(visibility);
+
+  useEffect(() => {
+    showModal();
+  }, []);
+
+  const showModal = () => {
+    setModalVisible(true);
+    setTimeout(() => {
+      setModalVisible(false);
+    }, 3000);
+  };
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      hidden={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        setModalVisible(!modalVisible);
+      }}>
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <View style={[styles.buttonClose2]}>
+            <Image 
+              source={ImagePaths.record1}
+              resizeMode="contain"
+              style={{width: 200, height: 140, marginBottom: -10}}
+            />
+          </View>
+          <Text style={styles.headStyle2}>Listening....</Text>
+        </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: 50,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: '#FFFFFFEF',
+    borderRadius: 20,
+    padding: 20,
+    borderWidth: 5,
+    borderColor: '#d9d9d9',
+    alignItems: 'center',
+    shadowColor: 'red',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+
+  centeredView3: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -20,
+  },
+  modalView3: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+    fontSize: 20,
+  },
+  modalTextBold: {
+    marginBottom: 15,
+    textAlign: 'center',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+    fontSize: 20,
+  },
+  modalTextBold: {
+    marginBottom: 15,
+    textAlign: 'center',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  headStyle2: {
+    color: '#99a5ff',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+});

frontend/src/component/reading/ReadModalNotice.js

@@ -9,31 +9,34 @@ import {
 } from 'react-native';
 import {useNavigation} from '@react-navigation/native';
 import {ImagePaths} from '../../assets/read/data/ReadData';
+import CountDown from 'react-native-countdown-component';
 
 export default function ReadModalNotice(props) {
   const {caption, validity, visibility, imagePath} = props;
 
   const [modalVisible, setModalVisible] = useState(visibility);
-  const navigate = () => {};
+
+  useEffect(() => {
+    showModal();
+  }, []);
+  
+  const showModal = () => {
+    setModalVisible(true);
+    setTimeout(() => {
+      setModalVisible(false);
+    }, 2000);
+  };
   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 style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.headStyle}>Press The Button</Text>
+          <Text style={styles.headStyle}>And Pronounce</Text>
+          <Text style={styles.headStyle}>The Word!</Text>
         </View>
       </View>
     </Modal>
@@ -41,189 +44,35 @@ export default function ReadModalNotice(props) {
 }
 
 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,
+    marginTop: -420,
   },
   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,
+    padding: 20,
     borderWidth: 5,
-    // borderColor: '#red',
+    borderColor: '#d9d9d9',
     alignItems: 'center',
-    // shadowColor: 'red',
-    // shadowOffset: {
-    //   width: 0,
-    //   height: 2,
-    // },
+    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: {
+  
+  headStyle: {
     color: 'black',
     fontWeight: 'bold',
     textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 5,
-  },
-  head2Style2: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 20,
+    fontSize: 25,
   },
   alert2: {
     // backgroundColor: 'rgba(0, 181, 0, 0.45)',

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

@@ -21,6 +21,7 @@ import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 import ReadModalNotice from '../../../component/reading/ReadModalNotice';
+import CountDownModal from '../../../component/reading/CountDownModal';
 
 export default function ReadActivityBird() {
   const navigation = useNavigation();
@@ -29,7 +30,8 @@ export default function ReadActivityBird() {
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);
-
+  const [countDownVisible, setCountDownVisible] = useState(false);
+  
   React.useEffect(() => {
     Voice.destroy().then(Voice.removeAllListeners);
     // StatusBar.setHidden(true);
@@ -140,6 +142,7 @@ export default function ReadActivityBird() {
   };
 
   const startRecording = async () => {
+    setCountDownVisible(true);
     try {
       await Voice.start('en-US');
     } catch (error) {
@@ -163,6 +166,9 @@ export default function ReadActivityBird() {
         <ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
       )}
       {modalVisible && <ReadModalNotice visible="true" />}
+
+      {countDownVisible && <CountDownModal visible="true" />}
+      
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

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

@@ -21,6 +21,7 @@ import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 import ReadModalNotice from '../../../component/reading/ReadModalNotice';
+import CountDownModal from '../../../component/reading/CountDownModal';
 
 export default function ReadActivityDog() {
   const navigation = useNavigation();
@@ -29,7 +30,8 @@ export default function ReadActivityDog() {
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);
-
+  const [countDownVisible, setCountDownVisible] = useState(false);
+  
   React.useEffect(() => {
     // StatusBar.setHidden(true);
     //
@@ -137,6 +139,7 @@ export default function ReadActivityDog() {
   };
 
   const startRecording = async () => {
+    setCountDownVisible(true);
     try {
       await Voice.start('en-US');
     } catch (error) {
@@ -162,6 +165,8 @@ export default function ReadActivityDog() {
 
       {modalVisible && <ReadModalNotice visible="true" />}
 
+      {countDownVisible && <CountDownModal visible="true" />}
+      
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

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

@@ -21,6 +21,7 @@ import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 import ReadModalNotice from '../../../component/reading/ReadModalNotice';
+import CountDownModal from '../../../component/reading/CountDownModal';
 
 export default function ReadActivityFish() {
   const navigation = useNavigation();
@@ -29,7 +30,8 @@ export default function ReadActivityFish() {
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);
-
+  const [countDownVisible, setCountDownVisible] = useState(false);
+  
   React.useEffect(() => {
     // StatusBar.setHidden(true);
     //
@@ -155,6 +157,7 @@ export default function ReadActivityFish() {
   };
 
   const startRecording = async () => {
+    setCountDownVisible(true);
     try {
       await Voice.start('en-US');
     } catch (error) {

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

@@ -21,6 +21,7 @@ import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 import ReadModalNotice from '../../../component/reading/ReadModalNotice';
+import CountDownModal from '../../../component/reading/CountDownModal';
 
 export default function ReadActivityGo() {
   const navigation = useNavigation();
@@ -29,6 +30,7 @@ export default function ReadActivityGo() {
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);
+  const [countDownVisible, setCountDownVisible] = useState(false);
 
   React.useEffect(() => {
     // StatusBar.setHidden(true);
@@ -133,6 +135,7 @@ export default function ReadActivityGo() {
   };
 
   const startRecording = async () => {
+    setCountDownVisible(true);
     try {
       await Voice.start('en-US');
     } catch (error) {
@@ -157,6 +160,8 @@ export default function ReadActivityGo() {
       )}
       {modalVisible && <ReadModalNotice visible="true" />}
 
+      {countDownVisible && <CountDownModal visible="true" />}
+      
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}

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

@@ -21,6 +21,7 @@ import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 import ReadModalNotice from '../../../component/reading/ReadModalNotice';
+import CountDownModal from '../../../component/reading/CountDownModal';
 
 export default function ReadActivityHe() {
   const navigation = useNavigation();
@@ -29,7 +30,8 @@ export default function ReadActivityHe() {
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);
-
+  const [countDownVisible, setCountDownVisible] = useState(false);
+  
   React.useEffect(() => {
     // StatusBar.setHidden(true);
     //
@@ -153,6 +155,7 @@ export default function ReadActivityHe() {
   };
 
   const startRecording = async () => {
+    setCountDownVisible(true);
     try {
       await Voice.start('en-US');
     } catch (error) {
@@ -175,10 +178,9 @@ export default function ReadActivityHe() {
       {modalVisible3 && (
         <ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
       )}
-
       {modalVisible && <ReadModalNotice visible="true" />}
-      
-      <View style={{ flexDirection: 'column' }}>
+      {countDownVisible && <CountDownModal visible="true" />}
+      <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
           source={ImagePaths.backgroundBasic}>

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

@@ -23,6 +23,7 @@ import Client from '../../client/Client';
 import ReadModal from '../../../component/reading/ReadModal';
 import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 import ReadModalNotice from '../../../component/reading/ReadModalNotice';
+import CountDownModal from '../../../component/reading/CountDownModal';
 
 export default function ReadActivityNo() {
   const navigation = useNavigation();
@@ -31,6 +32,7 @@ export default function ReadActivityNo() {
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);
+  const [countDownVisible, setCountDownVisible] = useState(false);
 
   React.useEffect(() => {
     // StatusBar.setHidden(true);
@@ -49,7 +51,7 @@ export default function ReadActivityNo() {
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
     Voice.onSpeechResults = onSpeechResultsHandler;
-    Voice.onSpeechError = onSpeechError;
+    // Voice.onSpeechError = onSpeechError;
 
     return () => {
       Voice.destroy().then(Voice.removeAllListeners);
@@ -186,26 +188,26 @@ export default function ReadActivityNo() {
   };
 
   const onSpeechError = e => {
-    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);
+    // 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 => {
@@ -219,6 +221,7 @@ export default function ReadActivityNo() {
   };
 
   const startRecording = async () => {
+    setCountDownVisible(true);
     try {
       await Voice.start('en-US');
     } catch (error) {
@@ -242,9 +245,9 @@ export default function ReadActivityNo() {
         <ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
       )}
 
-      {modalVisible && (
-        <ReadModalNotice visible="true" />
-      )}
+      {modalVisible && <ReadModalNotice visible="true" />}
+
+      {countDownVisible && <CountDownModal visible="true" />}
 
       <View style={{flexDirection: 'column'}}>
         <ImageBackground