SHARE
TWEET

Untitled

a guest Feb 24th, 2020 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react';
  2. import {View, Text, Image, TouchableOpacity, ToastAndroid} from 'react-native';
  3. import Modal from 'react-native-modal';
  4. import {Button} from 'native-base';
  5. import Style from './styles';
  6. import IMAGE from '../../config/image';
  7. import ArrowNext from '../../Svg/ArrowNext';
  8. import NoSoal from '../../components/NoSoal';
  9. import NoQuestion from '../../components/NoQuestion';
  10. import AlertFinish from '../../components/AlertFinish';
  11. import axios from 'axios';
  12. import RadioForm,{
  13.   RadioButton,
  14.   RadioButtonInput,
  15.   RadioButtonLabel,
  16. } from 'react-native-simple-radio-button';
  17.  
  18. const hobbies = [
  19.   {
  20.     label: 'Berenang',
  21.     value: '0',
  22.   },
  23.   {
  24.     label: 'Makan',
  25.     value: '1',
  26.   },
  27.   {
  28.     label: 'Dance',
  29.     value: '2',
  30.   },
  31. ];
  32.  
  33. export default class Soal extends Component {
  34.   constructor() {
  35.     super();
  36.     this.state = {
  37.       minutes: 50,
  38.       alertFinish: false,
  39.       tampil: false,
  40.       seconds: 40,
  41.     };
  42.     this.tampilkanmodal = this.tampilkanmodal.bind(this);
  43.     this.hilangkanModal = this.hilangkanModal.bind(this);
  44.   }
  45.  
  46.   tampilkanmodal() {
  47.     this.setState({
  48.       tampil: true,
  49.     });
  50.   }
  51.  
  52.   hilangkanModal() {
  53.     this.setState({
  54.       tampil: false,
  55.     });
  56.   }
  57.  
  58.   componentDidMount() {
  59.     this.myInterval = setInterval(() => {
  60.       const {seconds, minutes} = this.state;
  61.       if (seconds > 0) {
  62.         this.setState(({seconds}) => ({
  63.           seconds: seconds - 1,
  64.         }));
  65.       }
  66.       if (seconds === 0) {
  67.         if (minutes === 0) {
  68.           clearInterval(this.myInterval);
  69.         } else {
  70.           this.setState(({minutes}) => ({
  71.             minutes: minutes - 1,
  72.             seconds: 59,
  73.           }));
  74.         }
  75.       }
  76.       if (seconds == 0 && minutes == 0) {
  77.         this.setState({alertFinish: true});
  78.       }
  79.     }, 1000);
  80.     axios
  81.       .get('http://35.173.220.127:8080/api/quiz/all')
  82.       .then(res => {
  83.         console.log(res);
  84.       })
  85.       .catch(err => {
  86.         ToastAndroid.show('error', ToastAndroid.SHORT);
  87.         console.log(err);
  88.       });
  89.   }
  90.   render() {
  91.     const {minutes, seconds} = this.state;
  92.     return (
  93.       <View style={Style.mainScreen}>
  94.         <View style={Style.headerWrapper}>
  95.           <Image style={Style.photo} source={IMAGE.photo} />
  96.           <View style={Style.biodata}>
  97.             <Text style={Style.name}>Fauzan Ardian</Text>
  98.             <Text style={Style.nis}>3103117286</Text>
  99.           </View>
  100.           <View style={Style.countdown}>
  101.             <Text style={Style.time}>{minutes}</Text>
  102.             <Text style={Style.dots}>:</Text>
  103.             <Text style={Style.time}>
  104.               {seconds < 10 ? `0${seconds}` : seconds}
  105.             </Text>
  106.           </View>
  107.         </View>
  108.         <View style={Style.container}>
  109.           <View>
  110.             <View style={Style.soalWrapper}>
  111.               <TouchableOpacity
  112.                 style={Style.soalBoxWrapper}
  113.                 onPress={this.tampilkanmodal}>
  114.                 <Text style={Style.soalBox}>Soal</Text>
  115.               </TouchableOpacity>
  116.             </View>
  117.             <View style={Style.questionWrapper}>
  118.               <Text style={Style.question}>
  119.                 1. Jika dalam asmara aku di tambah kamu menjadi?
  120.               </Text>
  121.             </View>
  122.             {/* <View style={Style.choiceWrapper}>
  123.               <RadioForm
  124.                 selectedButtonColor="#5D9CEC"
  125.                 radio_props={hobbies}
  126.                 initial={0}
  127.                 onPress={value => {
  128.                   this.setState({value: value});
  129.                 }}
  130.               />
  131.             </View> */}
  132.           </View>
  133.           <View>
  134.             <Modal
  135.               animationIn={'zoomIn'}
  136.               animationOut={'fadeOut'}
  137.               isVisible={this.state.tampil}
  138.               style={Style.modal}>
  139.               <View style={Style.content}>
  140.                 <TouchableOpacity
  141.                   style={Style.backWrapper}
  142.                   onPress={this.hilangkanModal}>
  143.                   <View style={Style.arrowNext}>
  144.                     <ArrowNext />
  145.                   </View>
  146.                 </TouchableOpacity>
  147.                 <View style={Style.detailSoal}>
  148.                   <TouchableOpacity style={Style.noSoalWrapper}>
  149.                     <NoSoal no="1" />
  150.                   </TouchableOpacity>
  151.                   <TouchableOpacity style={Style.noSoalWrapper}>
  152.                     <NoSoal no="2" />
  153.                   </TouchableOpacity>
  154.                   <TouchableOpacity style={Style.noSoalWrapper}>
  155.                     <NoSoal no="3" />
  156.                   </TouchableOpacity>
  157.                   <TouchableOpacity style={Style.noSoalWrapper}>
  158.                     <NoSoal no="4" />
  159.                   </TouchableOpacity>
  160.                 </View>
  161.               </View>
  162.             </Modal>
  163.           </View>
  164.           <View>
  165.             <Modal
  166.               animationIn={'zoomIn'}
  167.               animationOut={'fadeOut'}
  168.               isVisible={this.state.alertFinish}
  169.               style={Style.modal}>
  170.               <View>
  171.                 <View style={Style.alertFinishWrapper}>
  172.                   <Image style={Style.tsLogo} source={IMAGE.tsLogo} />
  173.                   <Text style={Style.teks}>
  174.                     Maaf Waktu Mengerjakan Anda telah Habis
  175.                   </Text>
  176.                   <Text style={Style.desc}>
  177.                     Silahkan tekan tombol keluar, untuk keluar
  178.                   </Text>
  179.                   <View>
  180.                     <Button
  181.                       onPress={() => this.props.navigation.navigate('Finish')}
  182.                       style={Style.btn}>
  183.                       <Text uppercase={false} style={Style.btnTeks}>
  184.                         Keluar
  185.                       </Text>
  186.                     </Button>
  187.                   </View>
  188.                 </View>
  189.               </View>
  190.             </Modal>
  191.           </View>
  192.         </View>
  193.       </View>
  194.     );
  195.   }
  196. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top