RateLine.js
2.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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.message}>당신의 점수 변화를 확인하세요!</Text>
<View style={styles.scoreContainer}>
{pastRecords.map((past,index)=> (
pastRecords.length - 1 > index ?
<View key={index} style={styles.past}>
<Text style={styles.date, {fontSize:11}}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
<Text style={styles.score}>{past.score}</Text>
</View>
:
<View key={index} style={styles.past}>
<Text style={styles.date, {fontSize:15}}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
<Text style={styles.score, {fontFamily:"ExtraBold", fontSize:25, color: "#4ea1d3"}}>{past.score}</Text>
</View>
))}
</View>
</>
: <PromptSearchRate />
}
</Surface>
);
}
const styles = StyleSheet.create({
surface: {
padding :5,
flex: 0.3,
width: '95%',
flexDirection:'column',
alignItems: 'center',
justifyContent: 'center',
elevation: 2,
marginTop: 10,
marginBottom: 10,
borderRadius: 5,
},
info:{
fontSize:21,
marginBottom: 10,
fontFamily:"Bold",
},
scoreContainer:{
flexDirection:'row',
alignItems : 'center',
justifyContent: 'space-around',
width:'100%',
backgroundColor :'#ececf8',
padding : 5,
marginTop : 10,
marginBottom : 10,
borderRadius:5,
},
data:{
fontFamily:"Son",
textAlign:'center',
marginBottom:10,
},
score:{
fontSize:20,
fontFamily:"Bold"
},
past:{
alignItems:'center',
marginBottom:5
},
message:{
fontFamily:"Son",
margin : 5,
fontSize: 25,
justifyContent: 'flex-start',
}
});
const RateLineContainer = ( {load,pastRecords } ) => (
<RateLine load={load} pastRecords={pastRecords} />
);
export default connect(
({search})=>({
pastRecords:search.pastRecords
}),
{
load
}
)(RateLineContainer);