RateLine.js 2.22 KB
import React, {useEffect} from 'react';
import { Surface, Text,Divider} from 'react-native-paper';
import { View,StyleSheet } from 'react-native';
import {connect} from 'react-redux';
import {load } from '../../reducers/search';
import PromptSearchRate from '../PromptSearch/PromptSearchRate';


const RateLine = ({load,pastRecords }) => {
    useEffect(()=>{
        const get = async () => {
            await load();
        }
        get();
    }, [load]);

    return (
        <Surface style={styles.surface}>
            {pastRecords.length ? 
            <>
                <Text style={styles.info}>점수 변화</Text>
                <View style={styles.scoreContainer}>
                {pastRecords.map((past,index)=> (
                    <View  key={index} style={styles.past}>
                        <Text style={styles.score}>{past.score}</Text>
                        <Text style={styles.day}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
                    </View>
                ))} 
                </View>
                <Text style={styles.message}>당신의 점수 변화를 확인해 보세요!</Text>
            </>
             : <PromptSearchRate />
            }
        </Surface>
    );
}



const styles = StyleSheet.create({
    surface: {
        padding: 8,
        flex: 0.3,
        width: '95%',
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 2,
        marginTop: 10,
        marginBottom: 10,
        borderRadius: 5
    },
    info:{
        fontSize:23,
        fontWeight:'bold',
        marginBottom: 5,
    },
    score:{
        fontSize:20,
        color:"#002857"
    },
    scoreContainer:{
        flexDirection:'row',
        justifyContent: 'space-around',
        width:'100%'
    },
    day:{
        fontSize: 10,
        textAlign:'center',
        marginBottom:5
    },
    past:{
        alignItems:'center',
        marginBottom:5
    },
    message:{
        margin: 5,
        color:"#6e8fb4"
    }
});

const RateLineContainer = ( {load,pastRecords } ) => (
    <RateLine load={load} pastRecords={pastRecords} />
);

export default connect(
    ({search})=>({
        pastRecords:search.pastRecords
    }),
    {
        load
    }
)(RateLineContainer);