Hồng Phúc

54 bundles
1 file3 months ago
1

import React, { useEffect, useState } from 'reac

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
import React, { useEffect, useState } from 'react'; import { View, Image, ImageBackground, Dimensions, Text, Animated, Easing, ActivityIndicator, GestureResponderEvent, TouchableOpacity, Modal, FlatList, } from 'react-native'; import { useTranslation } from 'react-i18next'; import { v4 as uuidv4 } from 'uuid'; import { useDispatch } from 'react-redux'; import styles from '../ModalCart/styles'; import CustomButton from '../../../Components/Button'; import images from '../../../Themes/Images'; import DefaultTheme from '../../../Themes/DefaultTheme'; import { addQuestion, updateListQuestion, updateQuestion } from '../../../Redux/examSlice'; import { BASE_URL } from '../../../Service/endpoint'; import CircularButton from '../../../Components/CircularButton/CircularButton'; import { Colors } from '../../../Themes'; import { useNavigation } from '@react-navigation/native'; interface Item { _id: string; name: string; description: string; image_url: string; semester: string; type: string; uuid: string; } interface IModalCart { isVisible?: boolean; close?: (params: GestureResponderEvent) => void; onTouchOutside?: () => void; listModalCart?: Array<Item>; item: { _id: string; name: string; description: string; image_url: string; semester: string; type: string; uuid: string; }; onTouchOutsidebutton?: () => void; } const ModalCart: React.FC<IModalCart> = ({ isVisible = false, close, onTouchOutside, onTouchOutsidebutton, listModalCart, item, }) => { const { t } = useTranslation(); const dispatch = useDispatch(); const [checktype, setChecktype] = useState(); const [disabled, setDisabled] = useState(false); const navigation = useNavigation(); const [selectedType, setSelectedType] = useState< Array<{ _id: string; level: number; question_quantity: number; type: string; title: string; image_url: string; uuid: string; }> >([item]); const [chosenCategory, setChosenCategory] = useState({}); const selected = (level: number) => { const index: number = selectedType.map((item) => item.level).indexOf(level); return index > -1 ? true : false; }; const onSubmit = () => { const data: any = selectedType.map((item) => item.uuid)[0]; console.log('data', data); const action = updateQuestion({ data: { uuid: '886bedd4-7b0a-44e4-b002-93ad8614dee5', level: data.level, }, }); dispatch(action); }; const [value, setVale] = useState(); // const onValue = (level: number) => { // setVale() // return level; // } // console.log('hello', onSubmit); const setSelectedLevel = (level: number) => { // selectedType = [ { _id: item?._id, // level: level, // question_quantity: 1, // title: item?.name, // image_url: item?.image_url, // type: item?.type, // uuid: uuidv4(), } ] const index: number = selectedType.map((item) => item.level).indexOf(level); if (index >= 0) { const temp = [...selectedType]; temp.splice(index, 1); setSelectedType(temp); } else if (index === -1) { setSelectedType([ // ...selectedType, { _id: item?._id, level: level, question_quantity: 1, title: item?.name, image_url: item?.image_url, type: item?.type, uuid: uuidv4(), }, ]); } }; const _renderItem = ({ item, index }: { item: Item; index: number }) => { return ( <CircularButton buttonSize={44} buttonStyle={styles.buttonStyle} key={`${item._id}${index}`} label={item.name} /> ); }; return ( <Modal animationType={'slide'} transparent={true} visible={isVisible}> <TouchableOpacity style={styles.centeredView} onPressOut={() => { onTouchOutside && onTouchOutside(); }} > <View style={styles.modalView}> <View style={styles.options}> <View style={styles.row}> <TouchableOpacity onPress={() => setSelectedLevel(1)} style={[styles.group, selected(1) && { backgroundColor: DefaultTheme.colors.primary }]} > <Text style={[styles.text, selected(1) && { color: DefaultTheme.colors.card }]}> Elementary </Text> </TouchableOpacity> <TouchableOpacity onPress={() => setSelectedLevel(2)} style={[styles.group, selected(2) && { backgroundColor: DefaultTheme.colors.primary }]} > <Text style={[styles.text, selected(2) && { color: DefaultTheme.colors.card }]}> Intermediate </Text> </TouchableOpacity> </View> <View style={styles.row}> <TouchableOpacity onPress={() => setSelectedLevel(3)} style={[styles.group, selected(3) && { backgroundColor: DefaultTheme.colors.primary }]} > <Text style={[styles.text, selected(3) && { color: DefaultTheme.colors.card }]}> Advanced </Text> </TouchableOpacity> <TouchableOpacity onPress={() => setSelectedLevel(4)} style={[styles.group, selected(4) && { backgroundColor: DefaultTheme.colors.primary }]} > <Text style={[styles.text, selected(4) && { color: DefaultTheme.colors.card }]}> {t('testTotal')} </Text> </TouchableOpacity> </View> </View> <CustomButton style={{ marginTop: 12 }} text={t('updateLevel')} tintColor={DefaultTheme.colors.background} backgroundColor={DefaultTheme.colors.primary} fontSize={20} onPress={() => { onSubmit(); onTouchOutsidebutton && onTouchOutsidebutton(); }} /> </View> </TouchableOpacity> </Modal> ); }; export default ModalCart;