Modal3Component.js 4.29 KB
import React from 'react';
import {View, Text} from 'react-native';
import {useDispatch} from "react-redux";
import {setStartLocationSaga} from "../../reducers/location";
import TextInputComponent from "../Base/TextInputComponent";
import SquareButtonComponent from "../Base/SquareButtonComponent";
import {BUTTON_COLOR} from "../../constant";

const Modal3Component = (props) => {
    // 데이터
    const {closeModal, setModalNumber, setShowButtons, setModalVisible, startTextLocation, setStartTextLocation} = props;

    // 함수
    const dispatch = useDispatch();
    const onChangeStartLocation = (text) => {
        setStartTextLocation(text);
    };
    const setLocation = async () => {
        try {
            if (startTextLocation) {
                await dispatch({
                    type: setStartLocationSaga,
                    data: {
                        startTextLocation,
                    }
                });
                closeModal();
            }
        } catch (e) {
            console.error(e);
        }
    };
    const close = () => {
        closeModal();
    };

    // 렌더링
    return (
        <View style={{'flex': 1, width: 270}}>
            <View style={{'flex': 1, 'flexDirection': 'column', marginBottom: 50}}>
                <Text style={{fontSize: 24, fontWeight: 'bold', textAlign: 'center', color: '#373737'}}>
                    장소 검색{'\n'}(대학교를 검색해보세요)
                </Text>
            </View>
            <View style={{'flex': 9, 'flexDirection': 'column'}}>
                <TextInputComponent
                    onChangeText={onChangeStartLocation}
                    value={startTextLocation}
                    secureTextEntry={false}
                    placeholder={'검색할 장소를 입력하세요'}
                    style1={{
                        marginLeft: 0,
                        marginRight: 0,
                        marginTop: 0,
                        marginBottom: 0,
                        padding: 15,
                    }}
                    style2={{
                        marginLeft: 15,
                        marginRight: 15,
                    }}
                />
                <SquareButtonComponent
                    onPress={setLocation}
                    text={'결정'}
                    style1={{
                        marginLeft: 0,
                        marginRight: 0,
                        marginTop: 10,
                        marginBottom: 0,
                        padding: 10,
                        borderRadius: 3,
                        backgroundColor: BUTTON_COLOR
                    }}
                    style2={{
                        fontSize: 16,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#ffffff'
                    }}
                />
                <SquareButtonComponent
                    text={'현재 위치로 바로가기(현재 미지원)'}
                    style1={{
                        marginLeft: 0,
                        marginRight: 0,
                        marginTop: 10,
                        marginBottom: 0,
                        padding: 10,
                        borderRadius: 3,
                        backgroundColor: BUTTON_COLOR
                    }}
                    style2={{
                        fontSize: 16,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#ffffff'
                    }}
                />
                <SquareButtonComponent
                    onPress={close}
                    text={'닫기'}
                    style1={{
                        marginLeft: 0,
                        marginRight: 0,
                        marginTop: 10,
                        marginBottom: 0,
                        padding: 10,
                        borderRadius: 3,
                        backgroundColor: BUTTON_COLOR
                    }}
                    style2={{
                        fontSize: 16,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#ffffff'
                    }}
                />
            </View>
        </View>
    )
};

export default Modal3Component;