Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* eslint-disable no-alert */
- /* eslint-disable react-native/no-inline-styles */
- import React, {useState} from 'react';
- import {useSelector} from 'react-redux';
- import {StyleSheet, Text, View, ScrollView} from 'react-native';
- import {fonts, colors} from '../../utils';
- import {
- Gap,
- Button,
- StatusBar,
- PaginationSoal,
- Timer,
- Column,
- } from '../../components';
- import Card from '../../components/atom/Card';
- const ContentSoal = ({navigation}) => {
- const stateGlobal = useSelector(state => state);
- const [count, setCount] = useState(0);
- const [no, setNo] = useState(stateGlobal.exams[count].id);
- const [title, setTitle] = useState(stateGlobal.exams[count].title);
- const [content, setContent] = useState(stateGlobal.exams[count].content);
- const back = () => {
- if (stateGlobal.exams.length >= count) {
- setNo(stateGlobal.exams[count].id);
- setCount(count - 1);
- setContent(stateGlobal.exams[count].content);
- console.log(count);
- } else if (count <= 0) {
- alert('asdadad');
- setNo(stateGlobal.exams[0].id);
- setCount(0);
- setContent(stateGlobal.exams[0].content);
- }
- };
- const next = () => {
- if (count < stateGlobal.exams.length - 1) {
- setCount(count + 1);
- setNo(stateGlobal.exams[count].id);
- setTitle(stateGlobal.exams[count].title);
- setContent(stateGlobal.exams[count].content);
- } else if (count === stateGlobal.exams.length - 1) {
- // eslint-disable-next-line no-alert
- alert('Kerjakan Soal Selesai');
- navigation.replace('ConfirmExam');
- }
- };
- return (
- <ScrollView showsVerticalScrollIndicator={false}>
- <RenderStatusBar />
- <View style={styles.page}>
- <View style={styles.container}>
- <ScrollView showsVerticalScrollIndicator={false}>
- <RenderHeader no={no} />
- <RenderContent
- title={title}
- content={content}
- // kunci={kunci}
- />
- <RenderButton back={back} next={next} />
- </ScrollView>
- </View>
- <RenderPagination />
- </View>
- </ScrollView>
- );
- };
- const RenderStatusBar = () => {
- return (
- <StatusBar type="secondary" background={colors.background.quarterly} />
- );
- };
- const RenderHeader = ({no}) => {
- return (
- <View style={styles.header}>
- <View style={{flexDirection: 'row', alignItems: 'center'}}>
- <Text style={styles.titleSoal}>SOAL NO</Text>
- <View style={styles.wrapperNumber}>
- <Text style={styles.title}>{no}</Text>
- </View>
- </View>
- <Timer />
- </View>
- );
- };
- const RenderContent = ({title, content, kunci}) => {
- // const type = () => {
- // if (kunci) {
- // return 'pilihanBenar';
- // } else {
- // return 'pilihanGanda';
- // }
- // };
- return (
- <View>
- <View>
- <Card title={title} desc={content[0]} />
- <View style={styles.choice}>
- <Card type="pilihanGanda" desc={content[1]} />
- <Gap width={20} />
- <Card type="pilihanGanda" desc={content[2]} />
- </View>
- <View style={styles.choice}>
- <Card type="pilihanGanda" desc={content[3]} />
- <Gap width={20} />
- <Card type="pilihanGanda" desc={content[4]} />
- </View>
- </View>
- <RenderFooter />
- </View>
- );
- };
- const RenderFooter = () => {
- return (
- <View style={{marginTop: 20}}>
- <View style={{flexDirection: 'row', alignItems: 'center'}}>
- <Column title="Status" />
- <Column type="secondary" title="Belum dijawab" />
- </View>
- <View
- style={{
- flexDirection: 'row',
- marginTop: 20,
- alignItems: 'center',
- justifyContent: 'space-between',
- width: 190,
- }}>
- <Text style={styles.title}>DIKERJAKAN</Text>
- <Column type="tertiary" title="00" />
- </View>
- <View
- style={{
- flexDirection: 'row',
- marginTop: 5,
- alignItems: 'center',
- justifyContent: 'space-between',
- width: 190,
- }}>
- <Text style={styles.title}>BELUM DIKERJAKAN</Text>
- <Column type="tertiary" title="00" />
- </View>
- </View>
- );
- };
- const RenderPagination = () => {
- return (
- <View style={styles.pagination}>
- <PaginationSoal />
- </View>
- );
- };
- const RenderButton = ({count, back, next}) => {
- // const onNext = () => {
- // alert(count)
- // };
- return (
- <View style={styles.button}>
- <Text>{count}</Text>
- <Button type="miniButtonInactive" title="BACK" onPress={back} />
- <Gap width={20} />
- <Button type="miniButtonActive" title="NEXT" onPress={next} />
- </View>
- );
- };
- export default ContentSoal;
- const styles = StyleSheet.create({
- page: {
- backgroundColor: '#FF9233',
- flex: 1,
- flexDirection: 'row',
- justifyContent: 'space-between',
- },
- container: {
- paddingVertical: 20,
- paddingHorizontal: 20,
- backgroundColor: '#FF9233',
- justifyContent: 'flex-start',
- },
- titleSoal: {
- fontSize: 15,
- fontFamily: fonts.primary[800],
- color: colors.text.secondary,
- textAlign: 'center',
- },
- title: {
- fontSize: 12,
- fontFamily: fonts.primary[800],
- color: colors.text.secondary,
- textAlign: 'center',
- },
- header: {
- flexDirection: 'row',
- alignItems: 'flex-start',
- // justifyContent: 'space-between',
- },
- choice: {
- flexDirection: 'row',
- justifyContent: 'center',
- },
- wrapperNumber: {
- backgroundColor: colors.background.secondary,
- marginLeft: 10,
- paddingHorizontal: 10,
- paddingVertical: 5,
- alignItems: 'center',
- justifyContent: 'center',
- borderRadius: 5,
- },
- pagination: {
- paddingVertical: 20,
- },
- button: {
- paddingTop: 20,
- flexDirection: 'row',
- },
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement