React Native 네트워크 2

변경점
API.tsx

import axios from 'axios'

const instance = axios.create ({
    baseURL: 'http://192.168.0.78:3000',
    timeout: 10000
})

export default {
    test() {
        return instance.get('/taxi/test')
    },
    login(id:string, pw:string) {
        return instance.post('./taxi/login', {userId: id, userPw: pw})
    },
    register(id:string, pw:string) {
        return instance.post('/taxi/register', {userId: id, userPw: pw})
    },
    list(id:string) {
        return instance.post('/taxi/list', {userId: id})
    }
}

Register.tsx

import { JSX } from "react";
import { SafeAreaView, StyleSheet, Text, TouchableOpacity, TextInput, View, Alert } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome';
import { useState } from "react";
import { useNavigation, ParamListBase } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
import api from './API';

function Register() : JSX.Element {
    console.log("-- Register()")

    const navigation = useNavigation<StackNavigationProp<ParamListBase>>()

    const [userId, setUserId] = useState('');
    const [userPw, setUserPw] = useState('');
    const [userPw2, setUserPw2] = useState('');

    const onRegister = () => {
        api.register(userId, userPw)
        .then(response => {
            let {code, message} = response.data[0]
            let title = "알림"
            if (code==0) {
                navigation.pop()
            }
            else {
                title = "오류"
            }

            Alert.alert(title, message, [{
                text: '확인',
                onPress: () => console.log('cancel pressed'),
                style: 'cancel'
            }])
        })
        .catch(err => {
            console.log(JSON.stringify(err))
        })
    }

    const isDisable = () => {
        if (userId && userPw && userPw2 &&(userPw==userPw2)) {
            return false
        }
        else {
            return true
        }
    }


    return (
        <SafeAreaView style={styles.container}>
            <View style={[styles.container, {justifyContent: 'flex-end'}]}>
                <Icon name='taxi' size={80} color={'#3498db'}/>
            </View>
            <View style={[styles.container, {flex: 2}]}>
                <TextInput style={styles.input} placeholder={'아이디'} onChangeText={newId => setUserId(newId)}/>
                <TextInput style={styles.input} placeholder={'패스워드'} onChangeText={newPw => setUserPw(newPw)}
                secureTextEntry={true}
                />
                <TextInput style={styles.input} placeholder={'패스워드 확인'} onChangeText={newPw2 => setUserPw2(newPw2)}
                secureTextEntry={true}
                />
            </View>
            <View style={[styles.container, {justifyContent:'flex-start'}]}>
                <TouchableOpacity disabled={isDisable()} onPress={onRegister} style={isDisable() ? styles.buttonDisable : styles.button}>
                    <Text style={styles.buttonText}>회원가입</Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%'
    },
    button: {
        width: '70%',
        backgroundColor: '#3498db',
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 5
    },
    buttonDisable: {
        width: '70%',
        backgroundColor: 'gray',
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 5
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
        textAlign: 'center'
    },
    input: {
        width: '70%',
        height: 40,
        borderWidth: 1,
        borderColor: 'gray',
        marginVertical: 10,
        padding: 10
    }
})

export default Register

Main_List.tsx

import React from 'react';
import { JSX } from "react";
import { SafeAreaView, StyleSheet, Text, View, FlatList, RefreshControl, Modal, Alert } from "react-native";
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from "react-native-responsive-screen";
import { useState } from 'react';
import { useFocusEffect } from "@react-navigation/native";
import Icon from 'react-native-vector-icons/FontAwesome';
import AsyncStorage from '@react-native-async-storage/async-storage';
import api from './API';

function Main_List() : JSX.Element {
    console.log("-- Main_List()")

    const [callList, setCallList] = useState([])
    const [loading, setLoading] = useState(false)

    useFocusEffect(React.useCallback(() => {
        requestCallList()
    },[]))

    const requestCallList = async() => {
        setLoading(true)
        let userId = await AsyncStorage.getItem('userId') || ""
        api.list(userId)
        .then(response => {
            let {code, message, data} = response.data[0]
            if(code == 0) {
                setCallList(data)
            }
            else {
                Alert.alert("오류", message, [{
                    text: "확인",
                    onPress: () => console.log('cancel pressed'),
                    style: 'cancel'
                }])
            }
            setLoading(false)
        })
        .catch(err => {
            console.log(JSON.stringify(err))
            setLoading(false)
        })

    }

    const Header = () => {
        <View style={styles.header}>
            <Text style={[styles.headerText, {width:wp(80)}]}>출발지 / 도착지</Text>
            <Text style={[styles.headerText, {width:wp(20)}]}>상태</Text>
        </View>
    }

    const ListItem = (row:any) => {
        console.log("row = " + JSON.stringify(row))
        return (
            <View style={{flexDirection:'row', marginBottom:5, width:wp(100)}}>
                <View style={{width:wp(80)}}>
                    <Text style={styles.textForm}>{row.item.start_addr}</Text>
                    <Text style={[styles.textForm, {borderTopWidth:0}]}>{row.item.end_addr}</Text>
                </View>
                <View style={{width:wp(20), alignItems:'center', justifyContent:'center'}}>
                    <Text>{row.item.call_state}</Text>
                </View>
            </View>
        )
    }


    return (
        <SafeAreaView style={styles.container}>
            <FlatList style={{flex:1}}
            data={callList}
            ListHeaderComponent={Header}
            renderItem={ListItem}
            keyExtractor={(item:any) => item.id}
            refreshControl={
                <RefreshControl refreshing={loading} onRefresh={requestCallList}/>
            }
            />
            <Modal transparent={true} visible={loading}>
                <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                    <Icon name='spinner' size={50} color={'#3498db'}/>
                    <Text style={{color:'black'}}>Loading...</Text>
                </View>
            </Modal>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        backgroundColor: 'white'
    },
    header: {
        flexDirection: 'row',
        height: 50,
        marginBottom: 5,
        backgroundColor: '#3498db',
        color: 'white',
        alignItems: 'center'
    },
    headerText: {
        fontSize: 18,
        textAlign: 'center',
        color: 'white'
    },
    textForm: {
        flex: 1,
        borderWidth: 1,
        borderColor: 'white',
        height:hp(5),
        paddingLeft: 10,
        paddingRight: 10
    }
})

export default Main_List