Skip to content

21_22-J 38
21_22-J 38
Commit 766f415f authored by Prabath_Zincat's avatar Prabath_Zincat
Browse files
Options

create reusable modal for ReadModalNotice

parent f8be19a7
Hide whitespace changes
Inline Side-by-side
Showing with 295 additions and 188 deletions
frontend/src/component/reading/ReadModalNotice.js 0 → 100644
View file @ 766f415f
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
View file @ 766f415f
......@@ -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
View file @ 766f415f
......@@ -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
View file @ 766f415f
......@@ -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
View file @ 766f415f
......@@ -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
View file @ 766f415f
......@@ -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
View file @ 766f415f
......@@ -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'}}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment